diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index 10556989de..26af4fac71 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -15,8 +15,12 @@ context("Create a automation", () => {
 
     cy.contains("automate").click()
     cy.contains("Create New Automation").click()
-    cy.get("input").type("Add Record")
-    cy.contains("Save").click()
+    cy.get(".modal").within(() => {
+      cy.get("input").type("Add Record")
+      cy.get(".buttons")
+        .contains("Create")
+        .click()
+    })
 
     // Add trigger
     cy.get("[data-cy=add-automation-component]").click()
@@ -46,7 +50,6 @@ context("Create a automation", () => {
 
     // Activate Automation
     cy.get("[data-cy=activate-automation]").click()
-    cy.contains("Add Record").should("be.visible")
     cy.get(".stop-button.highlighted").should("be.visible")
   })
 
diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 6958eb5d37..d7ae805b27 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -1,70 +1,65 @@
-context('Create a Table', () => {
-    before(() => {
-        cy.visit('localhost:4001/_builder')
-        cy.createApp('Table App', 'Table App Description')
-    })
+context("Create a Table", () => {
+  before(() => {
+    cy.visit("localhost:4001/_builder")
+    cy.createApp("Table App", "Table App Description")
+  })
 
-    it('should create a new Table', () => {
-        cy.createTable('dog')
+  it("should create a new Table", () => {
+    cy.createTable("dog")
 
-        // Check if Table exists
-        cy.get('.title').should('contain.text', 'dog')
-    })
+    // Check if Table exists
+    cy.get(".title span").should("have.text", "dog")
+  })
 
-    it('adds a new column to the table', () => {
-        cy.addColumn('dog', 'name', 'Plain Text')
+  it("adds a new column to the table", () => {
+    cy.addColumn("dog", "name", "Text")
+    cy.contains("name").should("be.visible")
+  })
 
-        cy.contains('name').should("be.visible")
-    })
+  it("creates a record in the table", () => {
+    cy.addRecord(["Rover"])
+    cy.contains("Rover").should("be.visible")
+  })
 
-    it('creates a record in the table', () => {
-        cy.addRecord(["Rover"])
+  it("updates a column on the table", () => {
+    cy.contains("name").click()
+    cy.get("[data-cy='edit-column-header']").click()
+    cy.get(".actions input")
+      .first()
+      .type("updated")
+    cy.get("select").select("Text")
+    cy.contains("Save Column").click()
+    cy.contains("nameupdated").should("have.text", "nameupdated")
+  })
 
-        cy.contains('Rover').should("be.visible")
-    })
+  it("edits a record", () => {
+    cy.get("tbody .ri-more-line").click()
+    cy.get("[data-cy=edit-row]").click()
+    cy.get(".modal input").type("Updated")
+    cy.contains("Save").click()
+    cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
+  })
 
-    it('updates a column on the table', () => {
-        cy.contains("name").click()
-        cy.get("[data-cy='edit-column-header']").click()
+  it("deletes a record", () => {
+    cy.get("tbody .ri-more-line").click()
+    cy.get("[data-cy=delete-row]").click()
+    cy.contains("Delete Row").click()
+    cy.contains("RoverUpdated").should("not.exist")
+  })
 
-        cy.get("[placeholder=Name]").type("updated")
-        cy.get("select").select("Plain Text")
-
-        cy.contains("Save Column").click()
-
-        cy.contains('nameupdated').should('have.text', 'nameupdated ')
-    })
-
-    it('edits a record', () => {
-        cy.get("tbody .ri-more-line").click()
-        cy.get("[data-cy=edit-row]").click()
-        cy.get(".actions input").type("Updated")
-        cy.contains("Save").click()
-
-        cy.contains('RoverUpdated').should('have.text', 'RoverUpdated')
-    })
-
-    it('deletes a record', () => {
-        cy.get("tbody .ri-more-line").click()
-        cy.get("[data-cy=delete-row]").click()
-        cy.get(".modal-actions").contains("Delete").click()
-
-        cy.contains('RoverUpdated').should('not.exist')
-    })
-
-    it('deletes a column', () => {
-        cy.contains("name").click()
-        cy.get("[data-cy='delete-column-header']").click()
-
-        cy.contains('nameupdated').should('not.exist')
-    })
-
-    it('deletes a table', () => {
-        cy.contains("div", "dog").get(".ri-more-line").click()
-        cy.get("[data-cy=delete-table]").click()
-        cy.get(".modal-actions").contains("Delete").click()
-
-        cy.contains('dog').should('not.exist')
-    })
+  it("deletes a column", () => {
+    cy.contains("name").click()
+    cy.get("[data-cy='delete-column-header']").click()
+    cy.contains("Delete Column").click()
+    cy.contains("nameupdated").should("not.exist")
+  })
 
+  it("deletes a table", () => {
+    cy.contains("div", "dog")
+      .get(".ri-more-line")
+      .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 81af40c7f7..8f0c9565c8 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -1,91 +1,100 @@
+context("Create a View", () => {
+  before(() => {
+    cy.visit("localhost:4001/_builder")
+    cy.createApp("View App", "View App Description")
+    cy.createTable("data")
+    cy.addColumn("data", "group", "Text")
+    cy.addColumn("data", "age", "Number")
+    cy.addColumn("data", "rating", "Number")
 
-context('Create a View', () => {
-    before(() => {
-        cy.visit('localhost:4001/_builder')
-        cy.createApp('View App', 'View App Description')
-        cy.createTable('data')
-        cy.addColumn('data', 'group', 'Plain Text')
-        cy.addColumn('data', 'age', 'Number')
-        cy.addColumn('data', 'rating', 'Number')
+    // 6 Records
+    cy.addRecord(["Students", 25, 1])
+    cy.addRecord(["Students", 20, 3])
+    cy.addRecord(["Students", 18, 6])
+    cy.addRecord(["Students", 25, 2])
+    cy.addRecord(["Teachers", 49, 5])
+    cy.addRecord(["Teachers", 36, 3])
+  })
 
-        // 6 Records
-        cy.addRecord(["Students", 25, 1])
-        cy.addRecord(["Students", 20, 3])
-        cy.addRecord(["Students", 18, 6])
-        cy.addRecord(["Students", 25, 2])
-        cy.addRecord(["Teachers", 49, 5])
-        cy.addRecord(["Teachers", 36, 3])
-    })
-
-    it('creates a view', () => {
-      cy.contains("Create New View").click()
-      cy.get("[placeholder='View Name']").type("Test View")
+  it("creates a view", () => {
+    cy.contains("Create New View").click()
+    cy.get(".menu-container").within(() => {
+      cy.get("input").type("Test View")
       cy.contains("Save View").click()
-      cy.get(".title").contains("Test View")
-      cy.get("thead th").should(($headers) => {
-        expect($headers).to.have.length(3)
-        const headers = $headers.map((i, header) => Cypress.$(header).text())
-        expect(headers.get()).to.deep.eq([
-          "group",
-          "age",
-          "rating"
-        ])
-      })
-    });
-
-    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("input[placeholder='age']").type(18)
-      cy.contains("Save").click()
-      cy.get("tbody tr").should(($values) => {
-        expect($values).to.have.length(5)
-      })
-    });
-
-    it('creates a stats calculation view based on age', () => {
-      cy.contains("Calculate").click()
-      // we may reinstate this - have commented this dropdown for now as there is only one option
-      //cy.get(".menu-container").find("select").first().select("Statistics")
-      cy.get(".menu-container").find("select").eq(0).select("age")
-      cy.contains("Save").click()
-      cy.get("thead th").should(($headers) => {
-        expect($headers).to.have.length(7)
-        const headers = $headers.map((i, header) => Cypress.$(header).text())
-        expect(headers.get()).to.deep.eq([
-          "field",
-          "sum",
-          "min",
-          "max",
-          "count",
-          "sumsqr",
-          "avg",
-        ])
-      })
-      cy.get("tbody td").should(($values) => {
-        const values = $values.map((i, value) => Cypress.$(value).text())
-        expect(values.get()).to.deep.eq([
-          "age",
-          "155",
-          "20",
-          "49",
-          "5",
-          "5347",
-          "31"
-        ])
-      })
     })
+    cy.get(".title").contains("Test View")
+    cy.get("thead th div").should($headers => {
+      expect($headers).to.have.length(3)
+      const headers = $headers.map((i, header) => Cypress.$(header).text())
+      expect(headers.get()).to.deep.eq(["group", "age", "rating"])
+    })
+  })
 
-    it('groups the view by group', () => {
-      cy.contains("Group By").click()
-      cy.get("select").select("group")
-      cy.contains("Save").click()
-      cy.contains("Students").should("be.visible")
-      cy.contains("Teachers").should("be.visible")
+  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("input").type(18)
+    cy.contains("Save").click()
+    cy.get("tbody tr").should($values => {
+      expect($values).to.have.length(5)
+    })
+  })
 
-      cy.get("tbody tr").first().find("td").should(($values) => {
+  it("creates a stats calculation view based on age", () => {
+    cy.contains("Calculate").click()
+    // we may reinstate this - have commented this dropdown for now as there is only one option
+    //cy.get(".menu-container").find("select").first().select("Statistics")
+    cy.get(".menu-container")
+      .find("select")
+      .eq(0)
+      .select("age")
+    cy.contains("Save").click()
+    cy.get("thead th div").should($headers => {
+      expect($headers).to.have.length(7)
+      const headers = $headers.map((i, header) => Cypress.$(header).text())
+      expect(headers.get()).to.deep.eq([
+        "field",
+        "sum",
+        "min",
+        "max",
+        "count",
+        "sumsqr",
+        "avg",
+      ])
+    })
+    cy.get("tbody td").should($values => {
+      const values = $values.map((i, value) => Cypress.$(value).text())
+      expect(values.get()).to.deep.eq([
+        "age",
+        "155",
+        "20",
+        "49",
+        "5",
+        "5347",
+        "31",
+      ])
+    })
+  })
+
+  it("groups the view by group", () => {
+    cy.contains("Group By").click()
+    cy.get("select").select("group")
+    cy.contains("Save").click()
+    cy.contains("Students").should("be.visible")
+    cy.contains("Teachers").should("be.visible")
+
+    cy.get("tbody tr")
+      .first()
+      .find("td")
+      .should($values => {
         const values = $values.map((i, value) => Cypress.$(value).text())
         expect(values.get()).to.deep.eq([
           "Students",
@@ -94,24 +103,30 @@ context('Create a View', () => {
           "25",
           "3",
           "1650",
-          "23.333333333333332"
+          "23.333333333333332",
         ])
       })
-    })
+  })
 
-    it('renames a view', () => {
-      cy.contains("[data-cy=model-nav-item]", "Test View").find(".ri-more-line").click()
-      cy.contains("Edit").click()
-      cy.get("[placeholder='View Name']").type(" Updated")
+  it("renames a view", () => {
+    cy.contains("[data-cy=model-nav-item]", "Test View")
+      .find(".ri-more-line")
+      .click()
+    cy.contains("Edit").click()
+    cy.get(".menu-container").within(() => {
+      cy.get("input").type(" Updated")
       cy.contains("Save").click()
-      cy.contains("Test View Updated").should("be.visible")
     })
+    cy.contains("Test View Updated").should("be.visible")
+  })
 
-    it('deletes a view', () => {
-      cy.contains("[data-cy=model-nav-item]", "Test View Updated").click()
-      cy.contains("[data-cy=model-nav-item]", "Test View Updated").find(".ri-more-line").click()
-      cy.contains("Delete").click()
-      cy.get(".content").contains("button", "Delete").click()
-      cy.contains("TestView Updated").should("not.be.visible")
-    })
+  it("deletes a view", () => {
+    cy.contains("[data-cy=model-nav-item]", "Test View Updated").click()
+    cy.contains("[data-cy=model-nav-item]", "Test View Updated")
+      .find(".ri-more-line")
+      .click()
+    cy.contains("Delete").click()
+    cy.contains("Delete View").click()
+    cy.contains("TestView Updated").should("not.be.visible")
+  })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 82f87032fa..79fd83875d 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -59,16 +59,21 @@ Cypress.Commands.add("createApp", name => {
 
 Cypress.Commands.add("createTestTableWithData", () => {
   cy.createTable("dog")
-  cy.addColumn("dog", "name", "Plain Text")
+  cy.addColumn("dog", "name", "Text")
   cy.addColumn("dog", "age", "Number")
 })
 
 Cypress.Commands.add("createTable", tableName => {
   // Enter model name
   cy.contains("Create New Table").click()
-  cy.get("[placeholder='Table Name']").type(tableName)
-
-  cy.contains("Save").click()
+  cy.get(".modal").within(() => {
+    cy.get("input")
+      .first()
+      .type(tableName)
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
+  })
   cy.contains(tableName).should("be.visible")
 })
 
@@ -77,25 +82,31 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   cy.contains(tableName).click()
   cy.contains("Create New Column").click()
 
-  cy.get("[placeholder=Name]").type(columnName)
-  cy.get("select").select(type)
-
-  cy.contains("Save Column")
-
-  cy.contains("Save").click()
+  // Configure column
+  cy.get(".menu-container").within(() => {
+    cy.get("input")
+      .first()
+      .type(columnName)
+    cy.get("select").select(type)
+    cy.contains("Save").click()
+  })
 })
 
 Cypress.Commands.add("addRecord", values => {
   cy.contains("Create New Row").click()
 
-  for (let i = 0; i < values.length; i++) {
-    cy.get(".actions input")
-      .eq(i)
-      .type(values[i])
-  }
+  cy.get(".modal").within(() => {
+    for (let i = 0; i < values.length; i++) {
+      cy.get("input")
+        .eq(i)
+        .type(values[i])
+    }
 
-  // Save
-  cy.contains("Save").click()
+    // Save
+    cy.get(".buttons")
+      .contains("Create")
+      .click()
+  })
 })
 
 Cypress.Commands.add("createUser", (username, password, accessLevel) => {
@@ -114,7 +125,9 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => {
     .select(accessLevel)
 
   // Save
-  cy.get(".create-button > button").click()
+  cy.get(".inputs")
+    .contains("Create")
+    .click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {
@@ -138,12 +151,12 @@ Cypress.Commands.add("navigateToFrontend", () => {
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
-  cy.get(".newscreen").click()
-  cy.get("[data-cy=new-screen-dialog] input:first").type(screenName)
-  if (route) {
-    cy.get("[data-cy=new-screen-dialog] input:last").type(route)
-  }
-  cy.get("[data-cy=create-screen-footer]").within(() => {
+  cy.contains("Create New Screen").click()
+  cy.get(".modal").within(() => {
+    cy.get("input:first").type(screenName)
+    if (route) {
+      cy.get("input:last").type(route)
+    }
     cy.contains("Create Screen").click()
   })
   cy.get(".nav-items-container").within(() => {
diff --git a/packages/builder/package.json b/packages/builder/package.json
index d34472e353..0fb2d5a6f0 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.34.6",
+    "@budibase/bbui": "^1.41.0",
     "@budibase/client": "^0.1.25",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
@@ -79,7 +79,6 @@
     "shortid": "^2.2.15",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",
-    "svelte-simple-modal": "^0.4.2",
     "yup": "^0.29.2"
   },
   "devDependencies": {
@@ -113,7 +112,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^2.2.2",
     "start-server-and-test": "^1.11.0",
-    "svelte": "^3.24.1",
+    "svelte": "^3.29.0",
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 16156d7af7..a5016db114 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -1,9 +1,8 @@
 <script>
-  import Modal from "svelte-simple-modal"
   import { onMount } from "svelte"
   import { Router, basepath } from "@sveltech/routify"
   import { routes } from "../routify/routes"
-  import { store, initialise } from "builderStore"
+  import { initialise } from "builderStore"
   import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
 
   onMount(async () => {
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 23fd45e1e0..6dc786f522 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -158,4 +158,8 @@
 .bb__alert--danger {
     background: #fef4f6;
     color: #f0506e;
+}
+
+a {
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 65cc861c50..92359ae630 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -37,9 +37,9 @@ export default function({ componentInstanceId, screen, components, models }) {
       .filter(isInstanceInSharedContext(walkResult))
       .map(componentInstanceToBindable(walkResult)),
 
-    ...walkResult.target._contexts
+    ...(walkResult.target?._contexts
       .map(contextToBindables(models, walkResult))
-      .flat(),
+      .flat() ?? []),
   ]
 }
 
@@ -73,6 +73,15 @@ const componentInstanceToBindable = walkResult => i => {
 
 const contextToBindables = (models, walkResult) => context => {
   const contextParentPath = getParentPath(walkResult, context)
+  const isModel = context.model?.isModel || typeof context.model === "string"
+  const modelId =
+    typeof context.model === "string" ? context.model : context.model.modelId
+  const model = models.find(model => model._id === modelId)
+
+  // Avoid crashing whenever no data source has been selected
+  if (model == null) {
+    return []
+  }
 
   const newBindable = key => ({
     type: "context",
@@ -80,15 +89,12 @@ const contextToBindables = (models, walkResult) => context => {
     // how the binding expression persists, and is used in the app at runtime
     runtimeBinding: `${contextParentPath}data.${key}`,
     // how the binding exressions looks to the user of the builder
-    readableBinding: `${context.instance._instanceName}.${context.model.label}.${key}`,
+    readableBinding: `${context.instance._instanceName}.${model.name}.${key}`,
   })
 
   // see ModelViewSelect.svelte for the format of context.model
-  // ... this allows us to bind to Model scheams, or View schemas
-  const model = models.find(m => m._id === context.model.modelId)
-  const schema = context.model.isModel
-    ? model.schema
-    : model.views[context.model.name].schema
+  // ... this allows us to bind to Model schemas, or View schemas
+  const schema = isModel ? model.schema : model.views[context.model.name].schema
 
   return (
     Object.keys(schema)
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index ad49776605..c832ddd8bc 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -51,9 +51,9 @@
 <style>
   section {
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     overflow: auto;
     height: 100%;
     position: relative;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
index 1d7ebb35f8..09a0d097de 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
@@ -3,6 +3,7 @@
   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
@@ -17,8 +18,16 @@
       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}
 <section class="canvas">
   {#each blocks as block, idx (block.id)}
     <div
@@ -35,6 +44,13 @@
 </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;
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
index 6926522677..328c0d6122 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
@@ -1,32 +1,20 @@
 <script>
-  import Modal from "svelte-simple-modal"
-  import { notifier } from "builderStore/store/notifications"
-  import { onMount, getContext } from "svelte"
-  import { backendUiStore, automationStore } from "builderStore"
+  import { onMount } from "svelte"
+  import { automationStore } from "builderStore"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Button } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
 
-  const { open, close } = getContext("simple-modal")
+  let modal
 
   $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
 
-  function newAutomation() {
-    open(
-      CreateAutomationModal,
-      {
-        onClosed: close,
-      },
-      { styleContent: { padding: "0" } }
-    )
-  }
-
   onMount(() => {
     automationStore.actions.fetch()
   })
 </script>
 
 <section>
-  <Button purple wide on:click={newAutomation}>Create New Automation</Button>
+  <Button primary wide on:click={modal.show}>Create New Automation</Button>
   <ul>
     {#each $automationStore.automations as automation}
       <li
@@ -39,6 +27,9 @@
     {/each}
   </ul>
 </section>
+<Modal bind:this={modal}>
+  <CreateAutomationModal />
+</Modal>
 
 <style>
   section {
@@ -57,7 +48,7 @@
     color: var(--grey-6);
   }
   i.live {
-    color: var(--purple);
+    color: var(--ink);
   }
 
   li {
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
index fe50896279..5bd535087d 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
@@ -1,84 +1,49 @@
 <script>
   import { store, backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import { Input } from "@budibase/bbui"
+  import { Input, ModalContent } from "@budibase/bbui"
   import analytics from "analytics"
 
-  export let onClosed
-
   let name
 
   $: valid = !!name
   $: instanceId = $backendUiStore.selectedDatabase._id
   $: appId = $store.appId
 
+  function sleep(ms) {
+    return new Promise(resolve => {
+      setTimeout(resolve, ms)
+    })
+  }
+
   async function createAutomation() {
     await automationStore.actions.create({
       name,
       instanceId,
     })
-    onClosed()
     notifier.success(`Automation ${name} created.`)
     analytics.captureEvent("Automation Created", { name })
   }
 </script>
 
-<div class="container">
-  <header>
-    <i class="ri-stackshare-line" />
-    Create Automation
-  </header>
-  <div class="content">
-    <Input bind:value={name} label="Name" />
-  </div>
-  <footer>
-    <a href="https://docs.budibase.com">
+<ModalContent
+  title="Create Automation"
+  confirmText="Create"
+  onConfirm={createAutomation}
+  disabled={!valid}>
+  <Input bind:value={name} label="Name" />
+  <div slot="footer">
+    <a
+      target="_blank"
+      href="https://docs.budibase.com/automate/introduction-to-automate">
       <i class="ri-information-line" />
       <span>Learn about automations</span>
     </a>
-    <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!valid} on:click={createAutomation}>
-      Save
-    </ActionButton>
-  </footer>
-</div>
+  </div>
+</ModalContent>
 
 <style>
-  .container {
-    padding: var(--spacing-xl);
-  }
-
-  header {
-    font-size: var(--font-size-xl);
-    color: var(--ink);
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  header i {
-    margin-right: var(--spacing-m);
-    font-size: 20px;
-    background: var(--purple);
-    color: var(--white);
-    padding: var(--spacing-s);
-    border-radius: var(--border-radius-m);
-    display: inline-block;
-  }
-
-  .content {
-    padding: var(--spacing-xl) 0;
-  }
-
-  footer {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    grid-auto-columns: 3fr 1fr 1fr;
-  }
-  footer a {
+  a {
     color: var(--ink);
     font-size: 14px;
     vertical-align: middle;
@@ -86,10 +51,10 @@
     align-items: center;
     text-decoration: none;
   }
-  footer a span {
+  a span {
     text-decoration: underline;
   }
-  footer i {
+  i {
     font-size: 20px;
     margin-right: var(--spacing-m);
     text-decoration: none;
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 1940f88d44..9a29025d56 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -2,11 +2,13 @@
   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"
 
   let selectedTab = "AUTOMATIONS"
 </script>
 
-<header>
+<Heading black small>
   <span
     data-cy="automation-list"
     class="hoverable automation-header"
@@ -23,7 +25,8 @@
       Steps
     </span>
   {/if}
-</header>
+</Heading>
+<Spacer medium />
 {#if selectedTab === 'AUTOMATIONS'}
   <AutomationList />
 {:else if selectedTab === 'ADD'}
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 950df5cd19..808001bb91 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -48,7 +48,7 @@
   <div class="block-label">{block.name}</div>
   {#each inputs as [key, value]}
     <div class="bb-margin-xl block-field">
-      <div class="field-label">{value.title}</div>
+      <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>
@@ -80,15 +80,6 @@
     display: grid;
   }
 
-  .field-label {
-    color: var(--ink);
-    margin-bottom: 12px;
-    display: flex;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: sans-serif;
-  }
-
   .block-label {
     font-weight: 500;
     font-size: 14px;
diff --git a/packages/builder/src/components/automation/SetupPanel/DeleteAutomationModal.svelte b/packages/builder/src/components/automation/SetupPanel/DeleteAutomationModal.svelte
deleted file mode 100644
index 51909850b0..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/DeleteAutomationModal.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script>
-  import { store, backendUiStore, automationStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import ActionButton from "components/common/ActionButton.svelte"
-
-  export let onClosed
-
-  let name
-
-  $: valid = !!name
-  $: instanceId = $backendUiStore.selectedDatabase._id
-
-  async function deleteAutomation() {
-    await automationStore.actions.delete({
-      instanceId,
-      automation: $automationStore.selectedAutomation.automation,
-    })
-    onClosed()
-    notifier.danger("Automation deleted.")
-  }
-</script>
-
-<header>
-  <i class="ri-stackshare-line" />
-  Delete Automation
-</header>
-<div>
-  <p>
-    Are you sure you want to delete this automation? This action can't be
-    undone.
-  </p>
-</div>
-<footer>
-  <a href="https://docs.budibase.com">
-    <i class="ri-information-line" />
-    Learn about automations
-  </a>
-  <ActionButton on:click={onClosed}>Cancel</ActionButton>
-  <ActionButton alert on:click={deleteAutomation}>Delete</ActionButton>
-</footer>
-
-<style>
-  header {
-    font-size: 24px;
-    color: var(--ink);
-    font-weight: bold;
-    padding: 30px;
-  }
-
-  header i {
-    margin-right: 10px;
-    font-size: 20px;
-    background: var(--blue-light);
-    color: var(--grey-4);
-    padding: 8px;
-  }
-
-  div {
-    padding: 0 30px 30px 30px;
-  }
-
-  label {
-    font-size: 18px;
-    font-weight: 500;
-  }
-
-  footer {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: 5px;
-    grid-auto-columns: 3fr 1fr 1fr;
-    padding: 20px;
-    background: var(--grey-1);
-    border-radius: 0.5rem;
-  }
-
-  footer a {
-    color: var(--primary);
-    font-size: 14px;
-    vertical-align: middle;
-    display: flex;
-    align-items: center;
-  }
-
-  footer i {
-    font-size: 20px;
-    margin-right: 10px;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
index d560107642..d002aaa0a1 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -28,42 +28,34 @@
 </div>
 
 {#if schemaFields.length}
-  <div class="bb-margin-xl block-field">
+  <div class="schema-fields">
     {#each schemaFields as [field, schema]}
-      <div class="bb-margin-xl capitalise">
-        {#if schemaHasOptions(schema)}
-          <div class="field-label">{field}</div>
-          <Select thin secondary bind:value={value[field]}>
-            <option value="">Choose an option</option>
-            {#each schema.constraints.inclusion as option}
-              <option value={option}>{option}</option>
-            {/each}
-          </Select>
-        {:else if schema.type === 'string' || schema.type === 'number'}
-          <BindableInput
-            thin
-            bind:value={value[field]}
-            label={field}
-            type="string"
-            {bindings} />
-        {/if}
-      </div>
+      {#if schemaHasOptions(schema)}
+        <Select label={field} thin secondary bind:value={value[field]}>
+          <option value="">Choose an option</option>
+          {#each schema.constraints.inclusion as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </Select>
+      {:else if schema.type === 'string' || schema.type === 'number'}
+        <BindableInput
+          thin
+          bind:value={value[field]}
+          label={field}
+          type="string"
+          {bindings} />
+      {/if}
     {/each}
   </div>
 {/if}
 
 <style>
-  .field-label {
-    color: var(--ink);
-    margin-bottom: 12px;
-    display: flex;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: sans-serif;
+  .schema-fields {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
   }
-
-  .capitalise :global(label),
-  .field-label {
+  .schema-fields :global(label) {
     text-transform: capitalize;
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 39ffaa370b..f2b7a8b711 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -1,27 +1,19 @@
 <script>
-  import { getContext } from "svelte"
   import { backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import DeleteAutomationModal from "./DeleteAutomationModal.svelte"
   import { Button, Input, Label } from "@budibase/bbui"
-
-  const { open, close } = getContext("simple-modal")
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   let selectedTab = "SETUP"
+  let confirmDeleteDialog
 
+  $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
   $: allowDeleteBlock =
     $automationStore.selectedBlock?.type !== "TRIGGER" ||
     !automation?.definition?.steps?.length
-
-  function deleteAutomation() {
-    open(
-      DeleteAutomationModal,
-      { onClosed: close },
-      { styleContent: { padding: "0" } }
-    )
-  }
+  $: name = automation?.name ?? ""
 
   function deleteAutomationBlock() {
     automationStore.actions.deleteAutomationBlock(
@@ -42,11 +34,19 @@
 
   async function saveAutomation() {
     await automationStore.actions.save({
-      instanceId: $backendUiStore.selectedDatabase._id,
+      instanceId,
       automation,
     })
     notifier.success(`Automation ${automation.name} saved.`)
   }
+
+  async function deleteAutomation() {
+    await automationStore.actions.delete({
+      instanceId,
+      automation,
+    })
+    notifier.success("Automation deleted.")
+  }
 </script>
 
 <section>
@@ -93,11 +93,18 @@
         on:click={saveAutomation}>
         Save Automation
       </Button>
-      <Button red wide on:click={deleteAutomation}>Delete 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} />
 
 <style>
   section {
diff --git a/packages/builder/src/components/database/DataTable/AttachmentList.svelte b/packages/builder/src/components/backend/DataTable/AttachmentList.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/AttachmentList.svelte
rename to packages/builder/src/components/backend/DataTable/AttachmentList.svelte
diff --git a/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte
new file mode 100644
index 0000000000..63d94aeab4
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import CreateRowButton from "./buttons/CreateRowButton.svelte"
+  import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
+  import CreateViewButton from "./buttons/CreateViewButton.svelte"
+  import ExportButton from "./buttons/ExportButton.svelte"
+  import * as api from "./api"
+  import Table from "./Table.svelte"
+
+  let data = []
+  let loading = false
+
+  $: title = $backendUiStore.selectedModel.name
+  $: schema = $backendUiStore.selectedModel.schema
+  $: modelView = {
+    schema,
+    name: $backendUiStore.selectedView.name,
+  }
+
+  // Fetch records for specified model
+  $: {
+    if ($backendUiStore.selectedView?.name?.startsWith("all_")) {
+      loading = true
+      api.fetchDataForView($backendUiStore.selectedView).then(records => {
+        data = records || []
+        loading = false
+      })
+    }
+  }
+</script>
+
+<Table {title} {schema} {data} allowEditing={true} {loading}>
+  <CreateColumnButton />
+  {#if Object.keys(schema).length > 0}
+    <CreateRowButton />
+    <CreateViewButton />
+    <ExportButton view={modelView} />
+  {/if}
+</Table>
diff --git a/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte
new file mode 100644
index 0000000000..50d13557fd
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
+  import Dropzone from "components/common/Dropzone.svelte"
+  import { capitalise } from "../../../helpers"
+  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
+
+  export let meta
+  export let value = meta.type === "boolean" ? false : ""
+
+  $: type = meta.type
+  $: label = capitalise(meta.name)
+</script>
+
+{#if type === 'options'}
+  <Select thin secondary {label} data-cy="{meta.name}-select" bind:value>
+    <option value="">Choose an option</option>
+    {#each meta.constraints.inclusion as opt}
+      <option value={opt}>{opt}</option>
+    {/each}
+  </Select>
+{:else if type === 'datetime'}
+  <DatePicker {label} bind:value />
+{:else if type === 'attachment'}
+  <div>
+    <Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
+    <Dropzone bind:files={value} />
+  </div>
+{:else if type === 'boolean'}
+  <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
+{:else if type === 'link'}
+  <LinkedRecordSelector bind:linkedRecords={value} schema={meta} />
+{:else}
+  <Input thin {label} data-cy="{meta.name}-input" {type} bind:value />
+{/if}
diff --git a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
new file mode 100644
index 0000000000..6712b8cf68
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
@@ -0,0 +1,40 @@
+<script>
+  import api from "builderStore/api"
+  import Table from "./Table.svelte"
+  import { onMount } from "svelte"
+  import { backendUiStore } from "builderStore"
+
+  export let modelId
+  export let recordId
+  export let fieldName
+
+  let record
+  let title
+
+  $: data = record?.[fieldName] ?? []
+  $: linkedModelId = data?.length ? data[0].modelId : null
+  $: linkedModel = $backendUiStore.models.find(
+    model => model._id === linkedModelId
+  )
+  $: schema = linkedModel?.schema
+  $: model = $backendUiStore.models.find(model => model._id === modelId)
+  $: fetchData(modelId, recordId)
+  $: {
+    let recordLabel = record?.[model?.primaryDisplay]
+    if (recordLabel) {
+      title = `${recordLabel} - ${fieldName}`
+    } else {
+      title = fieldName
+    }
+  }
+
+  async function fetchData(modelId, recordId) {
+    const QUERY_VIEW_URL = `/api/${modelId}/${recordId}/enrich`
+    const response = await api.get(QUERY_VIEW_URL)
+    record = await response.json()
+  }
+</script>
+
+{#if record && record._id === recordId}
+  <Table {title} {schema} {data} />
+{/if}
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
similarity index 50%
rename from packages/builder/src/components/database/DataTable/ModelDataTable.svelte
rename to packages/builder/src/components/backend/DataTable/Table.svelte
index fbef976bd5..c1e34074e6 100644
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,71 +1,60 @@
 <script>
+  import { goto, params } from "@sveltech/routify"
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
   import fsort from "fast-sort"
   import getOr from "lodash/fp/getOr"
   import { store, backendUiStore } from "builderStore"
+  import api from "builderStore/api"
   import { Button, Icon } from "@budibase/bbui"
   import ActionButton from "components/common/ActionButton.svelte"
-  import LinkedRecord from "./LinkedRecord.svelte"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
+  import CreateEditRecordModal from "./modals/CreateEditRecordModal.svelte"
+  import RowPopover from "./buttons/CreateRowButton.svelte"
+  import ColumnPopover from "./buttons/CreateColumnButton.svelte"
+  import ViewPopover from "./buttons/CreateViewButton.svelte"
+  import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
+  import EditRowPopover from "./popovers/RowPopover.svelte"
+  import CalculationPopover from "./buttons/CalculateButton.svelte"
   import Spinner from "components/common/Spinner.svelte"
-  import RowPopover from "./popovers/Row.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
-  import ViewPopover from "./popovers/View.svelte"
-  import ExportPopover from "./popovers/Export.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
-  import EditRowPopover from "./popovers/EditRow.svelte"
-  import * as api from "./api"
 
   const ITEMS_PER_PAGE = 10
-  // Internal headers we want to hide from the user
-  const INTERNAL_HEADERS = ["_id", "_rev", "modelId", "type"]
 
-  let modalOpen = false
-  let data = []
-  let headers = []
+  export let schema = []
+  export let data = []
+  export let title
+  export let allowEditing = false
+  export let loading = false
+
   let currentPage = 0
-  let search
-  let loading
-
-  $: {
-    if (
-      $backendUiStore.selectedView &&
-      $backendUiStore.selectedView.name.startsWith("all_")
-    ) {
-      loading = true
-      api.fetchDataForView($backendUiStore.selectedView).then(records => {
-        data = records || []
-        loading = false
-      })
-    }
-  }
 
+  $: columns = schema ? Object.keys(schema) : []
   $: sort = $backendUiStore.sort
   $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
-  $: paginatedData = sorted
-    ? sorted.slice(
-        currentPage * ITEMS_PER_PAGE,
-        currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
-      )
-    : []
+  $: paginatedData =
+    sorted && sorted.length
+      ? sorted.slice(
+          currentPage * ITEMS_PER_PAGE,
+          currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+        )
+      : []
+  $: modelId = data?.length ? data[0].modelId : null
 
-  $: headers = Object.keys($backendUiStore.selectedModel.schema)
-    .sort()
-    .filter(id => !INTERNAL_HEADERS.includes(id))
-
-  $: schema = $backendUiStore.selectedModel.schema
-  $: modelView = {
-    schema: $backendUiStore.selectedModel.schema,
-    name: $backendUiStore.selectedView.name,
+  function selectRelationship(record, fieldName) {
+    if (!record?.[fieldName]?.length) {
+      return
+    }
+    $goto(
+      `/${$params.application}/backend/model/${modelId}/relationship/${record._id}/${fieldName}`
+    )
   }
 </script>
 
 <section>
   <div class="table-controls">
     <h2 class="title">
-      <span>{$backendUiStore.selectedModel.name}</span>
+      <span>{title}</span>
       {#if loading}
         <div transition:fade>
           <Spinner size="10" />
@@ -73,41 +62,54 @@
       {/if}
     </h2>
     <div class="popovers">
-      <ColumnPopover />
-      {#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
-        <RowPopover />
-        <ViewPopover />
-        <ExportPopover view={modelView} />
-      {/if}
+      <slot />
     </div>
   </div>
   <table class="bb-table">
     <thead>
       <tr>
-        <th class="edit-header">
-          <div>Edit</div>
-        </th>
-        {#each headers as header}
+        {#if allowEditing}
+          <th class="edit-header">
+            <div>Edit</div>
+          </th>
+        {/if}
+        {#each columns as header}
           <th>
-            <ColumnHeaderPopover
-              field={$backendUiStore.selectedModel.schema[header]} />
+            {#if allowEditing}
+              <ColumnHeaderPopover field={schema[header]} />
+            {:else}
+              <div class="header">{header}</div>
+            {/if}
           </th>
         {/each}
       </tr>
     </thead>
     <tbody>
       {#if paginatedData.length === 0}
-        <div class="no-data">No Data.</div>
+        {#if allowEditing}
+          <td class="no-border">No data.</td>
+        {/if}
+        {#each columns as header, idx}
+          <td class="no-border">
+            {#if idx === 0 && !allowEditing}No data.{/if}
+          </td>
+        {/each}
       {/if}
       {#each paginatedData as row}
         <tr>
-          <td>
-            <EditRowPopover {row} />
-          </td>
-          {#each headers as header}
+          {#if allowEditing}
+            <td>
+              <EditRowPopover {row} />
+            </td>
+          {/if}
+          {#each columns as header}
             <td>
               {#if schema[header].type === 'link'}
-                <LinkedRecord field={schema[header]} ids={row[header]} />
+                <div
+                  class:link={row[header] && row[header].length}
+                  on:click={() => selectRelationship(row, header)}>
+                  {row[header] ? row[header].length : 0} related row(s)
+                </div>
               {:else if schema[header].type === 'attachment'}
                 <AttachmentList files={row[header] || []} />
               {:else}{getOr('', header, row)}{/if}
@@ -125,19 +127,17 @@
 </section>
 
 <style>
-  section {
-    margin-bottom: 20px;
-  }
-
   .title {
     font-size: 24px;
     font-weight: 600;
     text-rendering: optimizeLegibility;
     text-transform: capitalize;
+    margin-top: 0;
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
   }
-
   .title > span {
     margin-right: var(--spacing-xs);
   }
@@ -145,54 +145,54 @@
   table {
     border: 1px solid var(--grey-4);
     background: #fff;
-    border-radius: 3px;
     border-collapse: collapse;
+    margin-top: 0;
   }
 
   thead {
-    height: 40px;
     background: var(--grey-3);
     border: 1px solid var(--grey-4);
   }
 
   thead th {
     color: var(--ink);
-    text-transform: capitalize;
     font-weight: 500;
     font-size: 14px;
     text-rendering: optimizeLegibility;
     transition: 0.5s all;
     vertical-align: middle;
+    height: 48px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
-  .edit-header {
-    width: 100px;
-    cursor: default;
-  }
-
-  .edit-header:hover {
-    color: var(--ink);
-  }
-
-  th:hover {
+  thead th:hover {
     color: var(--blue);
     cursor: pointer;
   }
 
+  .header {
+    text-transform: capitalize;
+  }
+
   td {
     max-width: 200px;
     text-overflow: ellipsis;
     border: 1px solid var(--grey-4);
-    overflow: hidden;
-    white-space: pre;
+    white-space: nowrap;
     box-sizing: border-box;
+    padding: var(--spacing-l) var(--spacing-m);
+    font-size: var(--font-size-xs);
+  }
+
+  td.no-border {
+    border: none;
   }
 
   tbody tr {
     border-bottom: 1px solid var(--grey-4);
     transition: 0.3s background-color;
     color: var(--ink);
-    font-size: 12px;
   }
 
   tbody tr:hover {
@@ -207,7 +207,26 @@
     display: flex;
   }
 
-  .no-data {
-    padding: 14px;
+  :global(.popovers > div) {
+    margin-right: var(--spacing-m);
+    margin-bottom: var(--spacing-xl);
+  }
+
+  .edit-header {
+    width: 60px;
+  }
+
+  .edit-header:hover {
+    cursor: default;
+    color: var(--ink);
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+
+  .link:hover {
+    color: var(--grey-6);
+    cursor: pointer;
   }
 </style>
diff --git a/packages/builder/src/components/database/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
similarity index 57%
rename from packages/builder/src/components/database/DataTable/TablePagination.svelte
rename to packages/builder/src/components/backend/DataTable/TablePagination.svelte
index 508ee60b23..1435148ebc 100644
--- a/packages/builder/src/components/database/DataTable/TablePagination.svelte
+++ b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
@@ -1,14 +1,11 @@
 <script>
-  import { backendUiStore } from "builderStore"
-
   export let data
   export let currentPage
   export let pageItemCount
   export let ITEMS_PER_PAGE
 
   let numPages = 0
-
-  $: numPages = Math.ceil(data.length / ITEMS_PER_PAGE)
+  $: numPages = Math.ceil((data?.length ?? 0) / ITEMS_PER_PAGE)
 
   const next = () => {
     if (currentPage + 1 === numPages) return
@@ -27,8 +24,7 @@
 
 <div class="pagination">
   <div class="pagination__buttons">
-    <button on:click={previous}>Previous</button>
-    <button on:click={next}>Next</button>
+    <button on:click={previous} disabled={currentPage === 0}>&lt;</button>
     {#each Array(numPages) as _, idx}
       <button
         class:selected={idx === currentPage}
@@ -36,8 +32,19 @@
         {idx + 1}
       </button>
     {/each}
+    <button
+      on:click={next}
+      disabled={currentPage === numPages - 1 || numPages === 0}>
+      &gt;
+    </button>
   </div>
-  <p>Showing {pageItemCount} of {data.length} entries</p>
+
+  <p>
+    {#if numPages > 1}
+      Showing {ITEMS_PER_PAGE * currentPage + 1} - {ITEMS_PER_PAGE * currentPage + pageItemCount}
+      of {data.length} rows
+    {:else if numPages === 1}Showing all {data.length} row(s){/if}
+  </p>
 </div>
 
 <style>
@@ -51,26 +58,36 @@
 
   .pagination__buttons {
     display: flex;
+    border: 1px solid var(--grey-4);
+    border-radius: var(--border-radius-s);
+    overflow: hidden;
   }
 
   .pagination__buttons button {
     display: inline-block;
-    padding: 10px;
+    padding: var(--spacing-s) var(--spacing-m);
     margin: 0;
     background: #fff;
-    border: 1px solid var(--grey-4);
+    border: none;
+    outline: none;
+    border-right: 1px solid var(--grey-4);
     text-transform: capitalize;
-    border-radius: 3px;
     min-width: 20px;
     transition: 0.3s background-color;
   }
-
+  .pagination__buttons button:last-child {
+    border-right: none;
+  }
   .pagination__buttons button:hover {
     cursor: pointer;
     background-color: var(--grey-1);
   }
+  .pagination__buttons button.selected {
+    background: var(--grey-2);
+  }
 
-  .selected {
-    color: var(--blue);
+  p {
+    font-size: var(--font-size-s);
+    margin: var(--spacing-xl) 0;
   }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
new file mode 100644
index 0000000000..ec94ae2aa6
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -0,0 +1,44 @@
+<script>
+  import api from "builderStore/api"
+  import Table from "./Table.svelte"
+  import CalculateButton from "./buttons/CalculateButton.svelte"
+  import GroupByButton from "./buttons/GroupByButton.svelte"
+  import FilterButton from "./buttons/FilterButton.svelte"
+  import ExportButton from "./buttons/ExportButton.svelte"
+
+  export let view = {}
+
+  let data = []
+
+  $: name = view.name
+
+  // Fetch records for specified view
+  $: {
+    if (!name.startsWith("all_")) {
+      fetchViewData(name, view.field, view.groupBy)
+    }
+  }
+
+  async function fetchViewData(name, field, groupBy) {
+    const params = new URLSearchParams()
+    if (field) {
+      params.set("field", field)
+      params.set("stats", true)
+    }
+    if (groupBy) {
+      params.set("group", groupBy)
+    }
+    const QUERY_VIEW_URL = `/api/views/${name}?${params}`
+    const response = await api.get(QUERY_VIEW_URL)
+    data = await response.json()
+  }
+</script>
+
+<Table title={decodeURI(name)} schema={view.schema} {data}>
+  <FilterButton {view} />
+  <CalculateButton {view} />
+  {#if view.calculation}
+    <GroupByButton {view} />
+  {/if}
+  <ExportButton {view} />
+</Table>
diff --git a/packages/builder/src/components/database/DataTable/api.js b/packages/builder/src/components/backend/DataTable/api.js
similarity index 100%
rename from packages/builder/src/components/database/DataTable/api.js
rename to packages/builder/src/components/backend/DataTable/api.js
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
new file mode 100644
index 0000000000..efe3dcd79d
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import CalculatePopover from "../popovers/CalculatePopover.svelte"
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={dropdown.show} active={!!view.field}>
+    <Icon name="calculate" />
+    Calculate
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <CalculatePopover {view} onClosed={dropdown.hide} />
+</Popover>
diff --git a/packages/builder/src/components/database/DataTable/popovers/Row.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
similarity index 63%
rename from packages/builder/src/components/database/DataTable/popovers/Row.svelte
rename to packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 843c636063..7ddced256e 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Row.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -1,20 +1,21 @@
 <script>
   import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
 
   let anchor
   let dropdown
+  let fieldName
 </script>
 
 <div bind:this={anchor}>
   <Button text small on:click={dropdown.show}>
-    <Icon name="addrow" />
-    Create New Row
+    <Icon name="addcolumn" />
+    Create New Column
   </Button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <h5>Add New Row</h5>
-  <CreateEditRecord onClosed={dropdown.hide} />
+  <h5>Create Column</h5>
+  <CreateEditColumnPopover onClosed={dropdown.hide} />
 </DropdownMenu>
 
 <style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
new file mode 100644
index 0000000000..1ef0333398
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
+  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
+
+  let modal
+</script>
+
+<div>
+  <Button text small on:click={modal.show}>
+    <Icon name="addrow" />
+    Create New Row
+  </Button>
+</div>
+<Modal bind:this={modal}>
+  <CreateEditRecordModal />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
new file mode 100644
index 0000000000..ef58b52c60
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={dropdown.show}>
+    <Icon name="view" />
+    Create New View
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <CreateViewPopover onClosed={dropdown.hide} />
+</Popover>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
new file mode 100644
index 0000000000..f4e4fb34a8
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { TextButton, Icon, Popover } from "@budibase/bbui"
+  import api from "builderStore/api"
+  import ExportPopover from "../popovers/ExportPopover.svelte"
+
+  export let view
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small on:click={dropdown.show}>
+    <Icon name="download" />
+    Export
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <ExportPopover {view} onClosed={dropdown.hide} />
+</Popover>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
new file mode 100644
index 0000000000..5c7efab369
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import FilterPopover from "../popovers/FilterPopover.svelte"
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton
+    text
+    small
+    on:click={dropdown.show}
+    active={view.filters && view.filters.length}>
+    <Icon name="filter" />
+    Filter
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <FilterPopover {view} onClosed={dropdown.hide} />
+</Popover>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
new file mode 100644
index 0000000000..dbe88d8f1f
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import GroupByPopover from "../popovers/GroupByPopover.svelte"
+
+  export let view = {}
+
+  let anchor
+  let dropdown
+</script>
+
+<div bind:this={anchor}>
+  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
+    <Icon name="group" />
+    Group By
+  </TextButton>
+</div>
+<Popover bind:this={dropdown} {anchor} align="left">
+  <GroupByPopover {view} onClosed={dropdown.hide} />
+</Popover>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
new file mode 100644
index 0000000000..2e8771ac6e
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
@@ -0,0 +1,46 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import RecordFieldControl from "../RecordFieldControl.svelte"
+  import * as api from "../api"
+  import { ModalContent } from "@budibase/bbui"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+
+  export let record = {}
+
+  let errors = []
+
+  $: creating = record?._id == null
+  $: model = record.modelId
+    ? $backendUiStore.models.find(model => model._id === record?.modelId)
+    : $backendUiStore.selectedModel
+  $: modelSchema = Object.entries(model?.schema ?? {})
+
+  async function saveRecord() {
+    const recordResponse = await api.saveRecord(
+      { ...record, modelId: model._id },
+      model._id
+    )
+    if (recordResponse.errors) {
+      errors = Object.keys(recordResponse.errors)
+        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
+        .flat()
+      // Prevent modal closing if there were errors
+      return false
+    }
+    notifier.success("Record saved successfully.")
+    backendUiStore.actions.records.save(recordResponse)
+  }
+</script>
+
+<ModalContent
+  title={creating ? 'Create Row' : 'Edit Row'}
+  confirmText={creating ? 'Create Row' : 'Save Row'}
+  onConfirm={saveRecord}>
+  <ErrorsBox {errors} />
+  {#each modelSchema as [key, meta]}
+    <div>
+      <RecordFieldControl {meta} bind:value={record[key]} />
+    </div>
+  {/each}
+</ModalContent>
diff --git a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
similarity index 71%
rename from packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
index f994fe655b..0275b68414 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
+  import { Button, Input, Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
@@ -19,9 +12,7 @@
   ]
 
   export let view = {}
-
-  let anchor
-  let dropdown
+  export let onClosed
 
   $: viewModel = $backendUiStore.models.find(
     ({ _id }) => _id === $backendUiStore.selectedView.modelId
@@ -36,18 +27,12 @@
     if (!view.calculation) view.calculation = "stats"
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
+    onClosed()
     analytics.captureEvent("Added View Calculate", { field: view.field })
-    dropdown.hide()
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show} active={!!view.field}>
-    <Icon name="calculate" />
-    Calculate
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
+<div class="actions">
   <h5>Calculate</h5>
   <div class="input-group-row">
     <!-- <p>The</p>
@@ -66,30 +51,33 @@
       {/each}
     </Select>
   </div>
-  <div class="button-group">
-    <Button secondary on:click={dropdown.hide}>Cancel</Button>
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveView}>Save</Button>
   </div>
-</Popover>
+</div>
 
 <style>
+  .actions {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
   h5 {
-    margin-bottom: var(--spacing-l);
+    margin: 0;
     font-weight: 500;
   }
 
-  .button-group {
-    margin-top: var(--spacing-l);
+  .footer {
     display: flex;
     justify-content: flex-end;
-    gap: var(--spacing-s);
+    gap: var(--spacing-m);
   }
 
   .input-group-row {
     display: grid;
-    grid-template-columns: auto 1fr 20px 1fr;
+    grid-template-columns: auto 1fr;
     gap: var(--spacing-s);
-    margin-bottom: var(--spacing-l);
     align-items: center;
   }
 
diff --git a/packages/builder/src/components/database/DataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
similarity index 56%
rename from packages/builder/src/components/database/DataTable/popovers/ColumnHeader.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
index 3cee5fbf93..de431035da 100644
--- a/packages/builder/src/components/database/DataTable/popovers/ColumnHeader.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
@@ -2,17 +2,20 @@
   import { backendUiStore } from "builderStore"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
+  import CreateEditColumnPopover from "./CreateEditColumnPopover.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { notifier } from "../../../../builderStore/store/notifications"
 
   export let field
 
   let anchor
   let dropdown
-
   let editing
+  let confirmDeleteDialog
 
   $: sortColumn = $backendUiStore.sort && $backendUiStore.sort.column
   $: sortDirection = $backendUiStore.sort && $backendUiStore.sort.direction
+  $: type = field?.type
 
   function showEditor() {
     editing = true
@@ -23,8 +26,18 @@
     editing = false
   }
 
-  function deleteField() {
-    backendUiStore.actions.models.deleteField(field)
+  function showDelete() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
+  function deleteColumn() {
+    if (field.name === $backendUiStore.selectedModel.primaryDisplay) {
+      notifier.danger("You cannot delete the primary display column")
+    } else {
+      backendUiStore.actions.models.deleteField(field)
+      notifier.success("Column deleted")
+    }
     hideEditor()
   }
 
@@ -37,21 +50,23 @@
   }
 </script>
 
-<div bind:this={anchor} on:click={dropdown.show}>
-  {field.name}
+<div class="container" bind:this={anchor} on:click={dropdown.show}>
+  <span>{field.name}</span>
   <Icon name="arrowdown" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   {#if editing}
     <h5>Edit Column</h5>
-    <CreateEditColumn onClosed={hideEditor} {field} />
+    <CreateEditColumnPopover onClosed={hideEditor} {field} />
   {:else}
     <ul>
-      <li data-cy="edit-column-header" on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-column-header" on:click={deleteField}>
+      {#if type !== 'link'}
+        <li data-cy="edit-column-header" on:click={showEditor}>
+          <Icon name="edit" />
+          Edit
+        </li>
+      {/if}
+      <li data-cy="delete-column-header" on:click={showDelete}>
         <Icon name="delete" />
         Delete
       </li>
@@ -70,8 +85,25 @@
     </ul>
   {/if}
 </DropdownMenu>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  body={`Are you sure you wish to delete this column? Your data will be deleted and this action cannot be undone.`}
+  okText="Delete Column"
+  onOk={deleteColumn}
+  title="Confirm Delete" />
 
 <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .container span {
+    text-transform: capitalize;
+  }
+
   h5 {
     padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     margin: 0;
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
new file mode 100644
index 0000000000..2e2ad6f158
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
@@ -0,0 +1,144 @@
+<script>
+  import { onMount } from "svelte"
+  import {
+    Input,
+    TextArea,
+    Button,
+    Select,
+    Toggle,
+    Label,
+  } from "@budibase/bbui"
+  import { cloneDeep, merge } from "lodash/fp"
+  import { store, backendUiStore } from "builderStore"
+  import { FIELDS } from "constants/backend"
+  import { notifier } from "builderStore/store/notifications"
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
+  import NumberBox from "components/common/NumberBox.svelte"
+  import ValuesList from "components/common/ValuesList.svelte"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import Checkbox from "components/common/Checkbox.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import DatePicker from "components/common/DatePicker.svelte"
+  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
+  import * as api from "../api"
+
+  let fieldDefinitions = cloneDeep(FIELDS)
+
+  export let onClosed
+  export let field = {
+    type: "string",
+    constraints: fieldDefinitions.STRING.constraints,
+  }
+
+  let originalName = field.name
+  $: modelOptions = $backendUiStore.models.filter(
+    model => model._id !== $backendUiStore.draftModel._id
+  )
+  $: required = !!field?.constraints?.presence
+
+  async function saveColumn() {
+    backendUiStore.update(state => {
+      backendUiStore.actions.models.saveField({
+        originalName,
+        field,
+      })
+      return state
+    })
+    onClosed()
+  }
+
+  function handleFieldConstraints(event) {
+    const { type, constraints } = fieldDefinitions[
+      event.target.value.toUpperCase()
+    ]
+    field.type = type
+    field.constraints = constraints
+  }
+
+  function onChangeRequired(e) {
+    const req = e.target.checked
+    field.constraints.presence = req ? { allowEmpty: false } : false
+    required = req
+  }
+</script>
+
+<div class="actions">
+  <Input label="Name" thin bind:value={field.name} />
+
+  <Select
+    secondary
+    thin
+    label="Type"
+    on:change={handleFieldConstraints}
+    bind:value={field.type}>
+    {#each Object.values(fieldDefinitions) as field}
+      <option value={field.type}>{field.name}</option>
+    {/each}
+  </Select>
+
+  {#if field.type !== 'link'}
+    <Toggle
+      checked={required}
+      on:change={onChangeRequired}
+      thin
+      text="Required" />
+  {/if}
+
+  {#if field.type === 'string'}
+    <Input
+      thin
+      type="number"
+      label="Max Length"
+      bind:value={field.constraints.length.maximum} />
+  {:else if field.type === 'options'}
+    <ValuesList
+      label="Options (one per line)"
+      bind:values={field.constraints.inclusion} />
+  {:else if field.type === 'datetime'}
+    <DatePicker
+      label="Earliest"
+      bind:value={field.constraints.datetime.earliest} />
+    <DatePicker label="Latest" bind:value={field.constraints.datetime.latest} />
+  {:else if field.type === 'number'}
+    <Input
+      thin
+      type="number"
+      label="Min Value"
+      bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
+    <Input
+      thin
+      type="number"
+      label="Max Value"
+      bind:value={field.constraints.numericality.lessThanOrEqualTo} />
+  {:else if field.type === 'link'}
+    <Select label="Table" thin secondary bind:value={field.modelId}>
+      <option value="">Choose an option</option>
+      {#each modelOptions as model}
+        <option value={model._id}>{model.name}</option>
+      {/each}
+    </Select>
+    <Input
+      label={`Column Name in Other Table`}
+      thin
+      bind:value={field.fieldName} />
+  {/if}
+  <footer>
+    <Button secondary on:click={onClosed}>Cancel</Button>
+    <Button primary on:click={saveColumn}>Save Column</Button>
+  </footer>
+</div>
+
+<style>
+  .actions {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    min-width: 400px;
+  }
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/database/DataTable/popovers/View.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
similarity index 58%
rename from packages/builder/src/components/database/DataTable/popovers/View.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
index 90208a0025..8cd0785044 100644
--- a/packages/builder/src/components/database/DataTable/popovers/View.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
@@ -1,19 +1,11 @@
 <script>
-  import {
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
+  import { Button, Input, Select } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
-  let anchor
-  let dropdown
+  export let onClosed
 
   let name
   let field
@@ -36,45 +28,35 @@
       field,
     })
     notifier.success(`View ${name} created`)
-    dropdown.hide()
+    onClosed()
     analytics.captureEvent("View Created", { name })
     $goto(`../../../view/${name}`)
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="view" />
-    Create New View
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
+<div class="actions">
   <h5>Create View</h5>
-  <div class="input-group-column">
-    <Input placeholder="View Name" thin bind:value={name} />
-  </div>
-  <div class="button-group">
-    <Button secondary on:click={dropdown.hide}>Cancel</Button>
+  <Input label="View Name" thin bind:value={name} />
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveView}>Save View</Button>
   </div>
-</Popover>
+</div>
 
 <style>
   h5 {
-    margin-bottom: var(--spacing-l);
+    margin: 0;
     font-weight: 500;
   }
 
-  .button-group {
-    margin-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-s);
+  .actions {
+    display: grid;
+    grid-gap: var(--spacing-xl);
   }
 
-  .input-group-column {
+  .footer {
     display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
+    justify-content: flex-end;
+    gap: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
new file mode 100644
index 0000000000..0d52689a6e
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
@@ -0,0 +1,61 @@
+<script>
+  import api from "builderStore/api"
+  import { Button, Select } from "@budibase/bbui"
+
+  const FORMATS = [
+    {
+      name: "CSV",
+      key: "csv",
+    },
+    {
+      name: "JSON",
+      key: "json",
+    },
+  ]
+
+  export let view
+  export let onClosed
+
+  let exportFormat = FORMATS[0].key
+
+  async function exportView() {
+    const response = await api.post(
+      `/api/views/export?format=${exportFormat}`,
+      view
+    )
+    const downloadInfo = await response.json()
+    onClosed()
+    window.location = downloadInfo.url
+  }
+</script>
+
+<div class="popover">
+  <h5>Export Data</h5>
+  <Select label="Format" secondary thin bind:value={exportFormat}>
+    {#each FORMATS as format}
+      <option value={format.key}>{format.name}</option>
+    {/each}
+  </Select>
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+    <Button primary on:click={exportView}>Export</Button>
+  </div>
+</div>
+
+<style>
+  .popover {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/database/DataTable/popovers/Filter.svelte b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
similarity index 55%
rename from packages/builder/src/components/database/DataTable/popovers/Filter.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
index fbf3b59db1..3d6241f0ab 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Filter.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
@@ -1,13 +1,5 @@
 <script>
-  import {
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-    DatePicker,
-  } from "@budibase/bbui"
+  import { Button, Input, Select, DatePicker } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
@@ -51,9 +43,7 @@
   ]
 
   export let view = {}
-
-  let anchor
-  let dropdown
+  export let onClosed
 
   $: viewModel = $backendUiStore.models.find(
     ({ _id }) => _id === $backendUiStore.selectedView.modelId
@@ -63,7 +53,7 @@
   function saveView() {
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
-    dropdown.hide()
+    onClosed()
     analytics.captureEvent("Added View Filter", {
       filters: JSON.stringify(view.filters),
     })
@@ -115,96 +105,93 @@
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton
-    text
-    small
-    on:click={dropdown.show}
-    active={view.filters && view.filters.length}>
-    <Icon name="filter" />
-    Filter
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
+<div class="actions">
   <h5>Filter</h5>
-  <div class="input-group-row">
-    {#each view.filters as filter, idx}
-      {#if idx === 0}
-        <p>Where</p>
-      {:else}
-        <Select secondary thin bind:value={filter.conjunction}>
+  {#if view.filters.length}
+    <div class="input-group-row">
+      {#each view.filters as filter, idx}
+        {#if idx === 0}
+          <p>Where</p>
+        {:else}
+          <Select secondary thin bind:value={filter.conjunction}>
+            <option value="">Choose an option</option>
+            {#each CONJUNCTIONS as conjunction}
+              <option value={conjunction.key}>{conjunction.name}</option>
+            {/each}
+          </Select>
+        {/if}
+        <Select
+          secondary
+          thin
+          bind:value={filter.key}
+          on:change={fieldChanged(filter)}>
           <option value="">Choose an option</option>
-          {#each CONJUNCTIONS as conjunction}
-            <option value={conjunction.key}>{conjunction.name}</option>
+          {#each fields as field}
+            <option value={field}>{field}</option>
           {/each}
         </Select>
-      {/if}
-      <Select
-        secondary
-        thin
-        bind:value={filter.key}
-        on:change={fieldChanged(filter)}>
-        <option value="">Choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
-      <Select secondary thin bind:value={filter.condition}>
-        <option value="">Choose an option</option>
-        {#each CONDITIONS as condition}
-          <option value={condition.key}>{condition.name}</option>
-        {/each}
-      </Select>
-      {#if filter.key && isMultipleChoice(filter.key)}
-        <Select secondary thin bind:value={filter.value}>
+        <Select secondary thin bind:value={filter.condition}>
           <option value="">Choose an option</option>
-          {#each fieldOptions(filter.key) as option}
-            <option value={option}>{option.toString()}</option>
+          {#each CONDITIONS as condition}
+            <option value={condition.key}>{condition.name}</option>
           {/each}
         </Select>
-      {:else if filter.key && isDate(filter.key)}
-        <DatePicker
-          bind:value={filter.value}
-          placeholder={filter.key || fields[0]} />
-      {:else if filter.key && isNumber(filter.key)}
-        <Input
-          thin
-          bind:value={filter.value}
-          placeholder={filter.key || fields[0]}
-          type="number" />
-      {:else}
-        <Input
-          thin
-          placeholder={filter.key || fields[0]}
-          bind:value={filter.value} />
-      {/if}
-      <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
-    {/each}
-  </div>
-  <div class="button-group">
+        {#if filter.key && isMultipleChoice(filter.key)}
+          <Select secondary thin bind:value={filter.value}>
+            <option value="">Choose an option</option>
+            {#each fieldOptions(filter.key) as option}
+              <option value={option}>{option.toString()}</option>
+            {/each}
+          </Select>
+        {:else if filter.key && isDate(filter.key)}
+          <DatePicker
+            bind:value={filter.value}
+            placeholder={filter.key || fields[0]} />
+        {:else if filter.key && isNumber(filter.key)}
+          <Input
+            thin
+            bind:value={filter.value}
+            placeholder={filter.key || fields[0]}
+            type="number" />
+        {:else}
+          <Input
+            thin
+            placeholder={filter.key || fields[0]}
+            bind:value={filter.value} />
+        {/if}
+        <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
+      {/each}
+    </div>
+  {/if}
+  <div class="footer">
     <Button text on:click={addFilter}>Add Filter</Button>
-    <div>
-      <Button secondary on:click={dropdown.hide}>Cancel</Button>
+    <div class="buttons">
+      <Button secondary on:click={onClosed}>Cancel</Button>
       <Button primary on:click={saveView}>Save</Button>
     </div>
   </div>
-</Popover>
+</div>
 
 <style>
+  .actions {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
   h5 {
-    margin-bottom: var(--spacing-l);
+    margin: 0;
     font-weight: 500;
   }
 
-  .button-group {
-    margin-top: var(--spacing-l);
+  .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-
-  :global(.button-group > div > button) {
-    margin-left: var(--spacing-m);
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-m);
   }
 
   .ri-close-circle-fill {
@@ -215,7 +202,6 @@
     display: grid;
     grid-template-columns: minmax(50px, auto) 1fr 1fr 1fr 15px;
     gap: var(--spacing-s);
-    margin-bottom: var(--spacing-l);
     align-items: center;
   }
 
diff --git a/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
similarity index 56%
rename from packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
index 9b16141812..da5cf7b8ec 100644
--- a/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
@@ -1,26 +1,10 @@
 <script>
-  import {
-    Popover,
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
+  import { Button, Input, Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
 
-  const CALCULATIONS = [
-    {
-      name: "Statistics",
-      key: "stats",
-    },
-  ]
-
   export let view = {}
-
-  let anchor
-  let dropdown
+  export let onClosed
 
   $: viewModel = $backendUiStore.models.find(
     ({ _id }) => _id === $backendUiStore.selectedView.modelId
@@ -30,20 +14,14 @@
   function saveView() {
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
-    dropdown.hide()
+    onClosed()
   }
 </script>
 
-<div bind:this={anchor}>
-  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
-    <Icon name="group" />
-    Group By
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <h5>Group By</h5>
+<div class="actions">
+  <h5>Group</h5>
   <div class="input-group-row">
-    <p>Group By</p>
+    <p>By</p>
     <Select secondary thin bind:value={view.groupBy}>
       <option value="">Choose an option</option>
       {#each fields as field}
@@ -51,30 +29,33 @@
       {/each}
     </Select>
   </div>
-  <div class="button-group">
-    <Button secondary on:click={dropdown.hide}>Cancel</Button>
+  <div class="footer">
+    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveView}>Save</Button>
   </div>
-</Popover>
+</div>
 
 <style>
+  .actions {
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
   h5 {
-    margin-bottom: var(--spacing-l);
+    margin: 0;
     font-weight: 500;
   }
 
-  .button-group {
-    margin-top: var(--spacing-l);
+  .footer {
     display: flex;
     justify-content: flex-end;
-    gap: var(--spacing-s);
+    gap: var(--spacing-m);
   }
 
   .input-group-row {
     display: grid;
-    grid-template-columns: 75px 1fr 20px 1fr;
+    grid-template-columns: 20px 1fr;
     gap: var(--spacing-s);
-    margin-bottom: var(--spacing-l);
     align-items: center;
   }
 
diff --git a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
new file mode 100644
index 0000000000..040fc34fab
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
@@ -0,0 +1,94 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
+  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
+  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
+  let modal
+
+  function showModal() {
+    dropdown.hide()
+    modal.show()
+  }
+
+  function showDelete() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteRow() {
+    await api.deleteRecord(row)
+    notifier.success("Record deleted")
+    backendUiStore.actions.records.delete(row)
+  }
+</script>
+
+<div bind:this={anchor} on:click={dropdown.show}>
+  <i class="ri-more-line" />
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <ul>
+    <li data-cy="edit-row" on:click={showModal}>
+      <Icon name="edit" />
+      <span>Edit</span>
+    </li>
+    <li data-cy="delete-row" on:click={showDelete}>
+      <Icon name="delete" />
+      <span>Delete</span>
+    </li>
+  </ul>
+</DropdownMenu>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  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" />
+<Modal bind:this={modal}>
+  <CreateEditRecordModal record={row} />
+</Modal>
+
+<style>
+  .ri-more-line:hover {
+    cursor: pointer;
+  }
+
+  h5 {
+    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
+    margin: 0;
+    font-weight: 500;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    padding: var(--spacing-s) 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+    font-size: var(--font-size-xs);
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/backend/ModelNavigator/ListItem.svelte
similarity index 74%
rename from packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
rename to packages/builder/src/components/backend/ModelNavigator/ListItem.svelte
index 54d9eef0e9..31dd5b5ac4 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/ListItem.svelte
@@ -19,26 +19,24 @@
 
 <style>
   .indented {
-    grid-template-columns: 50px 1fr 20px;
+    grid-template-columns: 46px 1fr 20px;
   }
-
   .indented i {
     justify-self: end;
   }
 
   div {
-    padding: 0 10px 0 10px;
-    height: 36px;
-    border-radius: 5px;
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: var(--border-radius-m);
     display: grid;
-    grid-template-columns: 30px 1fr 20px;
+    grid-template-columns: 20px 1fr 20px;
     align-items: center;
     transition: 0.3s background-color;
     color: var(--ink);
     font-weight: 400;
     font-size: 14px;
-    margin-top: 4px;
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-xs);
+    grid-gap: var(--spacing-s);
   }
 
   .selected {
@@ -53,6 +51,5 @@
   i {
     color: var(--grey-7);
     font-size: 20px;
-    margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
similarity index 74%
rename from packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
rename to packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
index a055c0dc67..627acab415 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
@@ -1,16 +1,12 @@
 <script>
-  import { getContext } from "svelte"
-  import { slide } from "svelte/transition"
-  import { Switcher } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
   import ListItem from "./ListItem.svelte"
-  import { Button } from "@budibase/bbui"
-  import CreateTablePopover from "./CreateTable.svelte"
-  import EditTablePopover from "./EditTable.svelte"
-  import EditViewPopover from "./EditView.svelte"
-
-  const { open, close } = getContext("simple-modal")
+  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"
 
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
@@ -30,8 +26,9 @@
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
-        <h4>Tables</h4>
-        <CreateTablePopover />
+        <Heading small>Tables</Heading>
+        <Spacer medium />
+        <CreateTableModal />
         <div class="hierarchy-items-container">
           {#each $backendUiStore.models as model}
             <ListItem
@@ -63,17 +60,18 @@
 </div>
 
 <style>
-  h4 {
-    font-weight: 500;
+  h5 {
+    font-size: 18px;
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: var(--spacing-xl);
   }
 
   .items-root {
     display: flex;
     flex-direction: column;
-    max-height: 100%;
-    height: 100%;
-    background: var(--white);
-    padding: 20px;
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
   .hierarchy {
@@ -82,7 +80,7 @@
   }
 
   .hierarchy-items-container {
-    margin-top: 20px;
+    margin-top: var(--spacing-xl);
     flex: 1 1 auto;
   }
 </style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/ModelNavigator/TableDataImport.svelte
similarity index 97%
rename from packages/builder/src/components/nav/ModelNavigator/TableDataImport.svelte
rename to packages/builder/src/components/backend/ModelNavigator/TableDataImport.svelte
index 1356bae25c..388152376f 100644
--- a/packages/builder/src/components/nav/ModelNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/TableDataImport.svelte
@@ -154,7 +154,7 @@
     overflow: hidden;
     border-radius: var(--border-radius-s);
     color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-l);
+    padding: var(--spacing-m) var(--spacing-l);
     transition: all 0.2s ease 0s;
     display: inline-flex;
     text-rendering: optimizeLegibility;
@@ -169,6 +169,8 @@
     width: 100%;
     background-color: var(--grey-2);
     font-size: var(--font-size-xs);
+    line-height: normal;
+    border: var(--border-transparent);
   }
 
   .omit-button {
diff --git a/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
new file mode 100644
index 0000000000..1cc0e8894c
--- /dev/null
+++ b/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  import { backendUiStore } 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 TableDataImport from "../TableDataImport.svelte"
+  import analytics from "analytics"
+
+  let modal
+  let name
+  let dataImport
+
+  function resetState() {
+    name = ""
+    dataImport = undefined
+  }
+
+  async function saveTable() {
+    const model = await backendUiStore.actions.models.save({
+      name,
+      schema: dataImport.schema || {},
+      dataImport,
+    })
+    notifier.success(`Table ${name} created successfully.`)
+    $goto(`./model/${model._id}`)
+    analytics.captureEvent("Table Created", { name })
+  }
+</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={!name || (dataImport && !dataImport.valid)}>
+    <Input
+      data-cy="table-name-input"
+      thin
+      label="Table Name"
+      bind:value={name} />
+    <div>
+      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+      <TableDataImport bind:dataImport />
+    </div>
+  </ModalContent>
+</Modal>
diff --git a/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte
new file mode 100644
index 0000000000..028b78a1e8
--- /dev/null
+++ b/packages/builder/src/components/backend/ModelNavigator/popovers/EditTablePopover.svelte
@@ -0,0 +1,141 @@
+<script>
+  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 ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let table
+
+  let anchor
+  let dropdown
+  let editing
+  let confirmDeleteDialog
+
+  $: fields = Object.keys(table.schema)
+
+  function showEditor() {
+    editing = true
+  }
+
+  function hideEditor() {
+    dropdown?.hide()
+    editing = false
+  }
+
+  function showModal() {
+    hideEditor()
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteTable() {
+    await backendUiStore.actions.models.delete(table)
+    notifier.success("Table deleted")
+    hideEditor()
+  }
+
+  async function save() {
+    await backendUiStore.actions.models.save(table)
+    notifier.success("Table renamed successfully")
+    hideEditor()
+  }
+</script>
+
+<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} />
+      <Select
+        label="Primary Display Column"
+        thin
+        secondary
+        bind:value={table.primaryDisplay}>
+        <option value="">Choose an option</option>
+        {#each fields as field}
+          <option value={field}>{field}</option>
+        {/each}
+      </Select>
+      <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-table" on:click={showModal}>
+        <Icon name="delete" />
+        Delete
+      </li>
+    </ul>
+  {/if}
+</DropdownMenu>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`}
+  okText="Delete Table"
+  onOk={deleteTable}
+  title="Confirm Delete" />
+
+<style>
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.icon i {
+    font-size: 16px;
+  }
+
+  .actions {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    min-width: 400px;
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  footer {
+    display: flex;
+    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/nav/ModelNavigator/EditView.svelte b/packages/builder/src/components/backend/ModelNavigator/popovers/EditViewPopover.svelte
similarity index 51%
rename from packages/builder/src/components/nav/ModelNavigator/EditView.svelte
rename to packages/builder/src/components/backend/ModelNavigator/popovers/EditViewPopover.svelte
index 7faf9b980e..bd1e184e06 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/popovers/EditViewPopover.svelte
@@ -1,20 +1,18 @@
 <script>
-  import { getContext } from "svelte"
+  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 DeleteViewModal from "components/database/DataTable/modals/DeleteView.svelte"
-
-  const { open, close } = getContext("simple-modal")
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let view
 
   let anchor
   let dropdown
-
   let editing
   let originalName = view.name
+  let confirmDeleteDialog
 
   function showEditor() {
     editing = true
@@ -23,76 +21,96 @@
   function hideEditor() {
     dropdown.hide()
     editing = false
-    close()
   }
 
-  const deleteView = () => {
-    open(
-      DeleteViewModal,
-      {
-        onClosed: close,
-        viewName: view.name,
-      },
-      { styleContent: { padding: "0" } }
-    )
+  function showDelete() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
   }
 
-  function save() {
-    backendUiStore.actions.views.save({
+  async function save() {
+    await backendUiStore.actions.views.save({
       originalName,
       ...view,
     })
-    notifier.success("Renamed View Successfully.")
+    notifier.success("View renamed successfully")
     hideEditor()
   }
+
+  async function deleteView() {
+    const name = view.name
+    const id = view.modelId
+    await backendUiStore.actions.views.delete(name)
+    notifier.success("View deleted")
+    $goto(`./model/${id}`)
+  }
 </script>
 
-<div bind:this={anchor} on:click={dropdown.show}>
+<div bind:this={anchor} class="icon" on:click={dropdown.show}>
   <i class="ri-more-line" />
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
+<DropdownMenu align="left" {anchor} bind:this={dropdown}>
   {#if editing}
-    <h5>Edit View</h5>
-    <div class="container">
-      <Input placeholder="View Name" thin bind:value={view.name} />
-    </div>
-    <footer>
-      <div class="button-margin-3">
+    <div class="actions">
+      <h5>Edit View</h5>
+      <Input label="View Name" thin bind:value={view.name} />
+      <footer>
         <Button secondary on:click={hideEditor}>Cancel</Button>
-      </div>
-      <div class="button-margin-4">
         <Button primary on:click={save}>Save</Button>
-      </div>
-    </footer>
+      </footer>
+    </div>
   {:else}
     <ul>
       <li on:click={showEditor}>
         <Icon name="edit" />
         Edit
       </li>
-      <li data-cy="delete-view" on:click={deleteView}>
+      <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" />
 
 <style>
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.icon i {
+    font-size: 16px;
+  }
+
+  .actions {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    min-width: 400px;
+  }
+
   h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     margin: 0;
     font-weight: 500;
   }
 
-  .container {
-    padding: var(--spacing-xl);
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-m);
   }
 
   ul {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     list-style: none;
-    padding-left: 0;
     margin: 0;
     padding: var(--spacing-s) 0;
   }
@@ -115,29 +133,4 @@
   li:active {
     color: var(--blue);
   }
-
-  footer {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  .button-margin-1 {
-    grid-column-start: 1;
-    display: grid;
-  }
-
-  .button-margin-3 {
-    grid-column-start: 3;
-    display: grid;
-  }
-
-  .button-margin-4 {
-    grid-column-start: 4;
-    display: grid;
-  }
 </style>
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 31e2d3ad86..2cd27573f4 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -1,57 +1,31 @@
 <script>
-  import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
+  import { Modal, ModalContent } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
-  export let okText = "OK"
+  export let okText = "Confirm"
   export let cancelText = "Cancel"
-  export let onOk = () => {}
-  export let onCancel = () => {}
+  export let onOk = undefined
+  export let onCancel = undefined
+
+  let modal
 
   export const show = () => {
-    theModal.show()
+    modal.show()
   }
-
   export const hide = () => {
-    theModal.hide()
-  }
-
-  let theModal
-
-  const cancel = () => {
-    hide()
-    onCancel()
-  }
-
-  const ok = () => {
-    const result = onOk()
-    // allow caller to return false, to cancel the "ok"
-    if (result === false) return
-    hide()
+    modal.hide()
   }
 </script>
 
-<Modal id={title} bind:this={theModal}>
-  <h2>{title}</h2>
-  <Spacer extraLarge />
-  <slot class="rows">{body}</slot>
-  <Spacer extraLarge />
-  <div class="modal-footer">
-    <Button red wide on:click={ok}>{okText}</Button>
-    <Button secondary wide on:click={cancel}>{cancelText}</Button>
-  </div>
+<Modal bind:this={modal} on:hide={onCancel}>
+  <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
+    <div class="body">{body}</div>
+  </ModalContent>
 </Modal>
 
 <style>
-  h2 {
-    font-size: var(--font-size-xl);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 600;
-  }
-
-  .modal-footer {
-    display: grid;
-    grid-gap: var(--spacing-s);
+  .body {
+    font-size: var(--font-size-s);
   }
 </style>
diff --git a/packages/builder/src/components/common/DatePicker.svelte b/packages/builder/src/components/common/DatePicker.svelte
index ec9d41a17b..913e00fc75 100644
--- a/packages/builder/src/components/common/DatePicker.svelte
+++ b/packages/builder/src/components/common/DatePicker.svelte
@@ -11,6 +11,4 @@
   }
 </script>
 
-<div class="bb-margin-m">
-  <DatePicker placeholder={label} on:change={onChange} {value} />
-</div>
+<DatePicker {label} on:change={onChange} {value} />
diff --git a/packages/builder/src/components/common/ErrorsBox.svelte b/packages/builder/src/components/common/ErrorsBox.svelte
index 0e565a4ad8..9e29784c66 100644
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@@ -5,9 +5,25 @@
 </script>
 
 {#if hasErrors}
-  <div class="bb__alert bb__alert--danger">
+  <div class="container bb__alert bb__alert--danger">
     {#each errors as error}
-      <div>{error.dataPath} {error.message}</div>
+      <div class="error">{error.dataPath} {error.message}</div>
     {/each}
   </div>
 {/if}
+
+<style>
+  .container {
+    border-radius: var(--border-radius-m);
+    margin: 0;
+    padding: var(--spacing-m);
+  }
+
+  .error {
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+  }
+  .error:first-letter {
+    text-transform: uppercase;
+  }
+</style>
diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte
index 2976ffd913..e7cf245eb8 100644
--- a/packages/builder/src/components/common/LinkedRecordSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRecordSelector.svelte
@@ -2,101 +2,52 @@
   import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
+  import { Select, Label, Multiselect } from "@budibase/bbui"
+  import { capitalise } from "../../helpers"
 
-  export let modelId
-  export let linkName
-  export let linked = []
+  export let schema
+  export let linkedRecords = []
 
   let records = []
-  let model = {}
 
-  let linkedRecords = new Set(linked)
+  $: label = capitalise(schema.name)
+  $: linkedModelId = schema.modelId
+  $: linkedModel = $backendUiStore.models.find(
+    model => model._id === linkedModelId
+  )
+  $: fetchRecords(linkedModelId)
 
-  $: linked = [...linkedRecords]
-  $: FIELDS_TO_HIDE = [$backendUiStore.selectedModel.name]
-  $: schema = $backendUiStore.selectedModel.schema
-
-  async function fetchRecords() {
-    const FETCH_RECORDS_URL = `/api/${modelId}/records`
-    const response = await api.get(FETCH_RECORDS_URL)
-    const modelResponse = await api.get(`/api/models/${modelId}`)
-
-    model = await modelResponse.json()
-    records = await response.json()
-  }
-
-  function linkRecord(id) {
-    if (linkedRecords.has(id)) {
-      linkedRecords.delete(id)
-    } else {
-      linkedRecords.add(id)
+  async function fetchRecords(linkedModelId) {
+    const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
+    try {
+      const response = await api.get(FETCH_RECORDS_URL)
+      records = await response.json()
+    } catch (error) {
+      console.log(error)
+      records = []
     }
-
-    linkedRecords = linkedRecords
   }
 
-  onMount(() => {
-    fetchRecords()
-  })
+  function getPrettyName(record) {
+    return record[linkedModel.primaryDisplay || "_id"]
+  }
 </script>
 
-<section>
-  <header>
-    <h3>{linkName}</h3>
-  </header>
-  {#each records as record}
-    <div class="linked-record" on:click={() => linkRecord(record._id)}>
-      <div class="fields" class:selected={linkedRecords.has(record._id)}>
-        {#each Object.keys(model.schema).filter(key => !FIELDS_TO_HIDE.includes(key)) as key}
-          <div class="field">
-            <span>{model.schema[key].name}</span>
-            <p>{record[key]}</p>
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/each}
-</section>
-
-<style>
-  .fields.selected {
-    background: var(--grey-2);
-    border: var(--purple) 1px solid;
-  }
-
-  h3 {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    color: var(--ink);
-  }
-
-  .fields {
-    padding: 15px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 20px;
-    background: var(--white);
-    border: 1px solid var(--grey);
-    border-radius: 5px;
-    transition: 0.5s all;
-    margin-bottom: 8px;
-  }
-
-  .fields:hover {
-    cursor: pointer;
-  }
-
-  .field span {
-    color: var(--ink-lighter);
-    font-size: 12px;
-  }
-
-  .field p {
-    color: var(--ink);
-    font-size: 14px;
-    word-break: break-word;
-    font-weight: 500;
-    margin-top: 4px;
-  }
-</style>
+{#if linkedModel.primaryDisplay == null}
+  <Label extraSmall grey>{label}</Label>
+  <Label small black>
+    Please choose a primary display column for the
+    <b>{linkedModel.name}</b>
+    table.
+  </Label>
+{:else}
+  <Multiselect
+    secondary
+    bind:value={linkedRecords}
+    {label}
+    placeholder="Choose some options">
+    {#each records as record}
+      <option value={record._id}>{getPrettyName(record)}</option>
+    {/each}
+  </Multiselect>
+{/if}
diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
index 425eb60fb2..ad32f228cb 100644
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
@@ -1,7 +1,7 @@
 <script>
   import { notificationStore } from "builderStore/store/notifications"
   import { onMount, onDestroy } from "svelte"
-  import { fade } from "svelte/transition"
+  import { fly } from "svelte/transition"
 
   export let themes = {
     danger: "#E26D69",
@@ -24,36 +24,42 @@
   }
 </script>
 
-<ul class="notifications">
+<div class="notifications">
   {#each $notificationStore.notifications as notification (notification.id)}
-    <li
+    <div
       class="toast"
       style="background: {themes[notification.type]};"
-      transition:fade>
+      transition:fly={{ y: -30 }}>
       <div class="content">{notification.message}</div>
       {#if notification.icon}
         <i class={notification.icon} />
       {/if}
-    </li>
+    </div>
   {/each}
-</ul>
+</div>
 
 <style>
   .notifications {
-    width: 40vw;
-    list-style: none;
     position: fixed;
-    top: 0;
+    top: 10px;
     left: 0;
     right: 0;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
     padding: 0;
     z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    pointer-events: none;
   }
 
   .toast {
+    flex: 0 0 auto;
     margin-bottom: 10px;
+    border-radius: var(--border-radius-s);
+    /* The toasts now support being auto sized, so this static width could be removed */
+    width: 40vw;
   }
 
   .content {
diff --git a/packages/builder/src/components/common/NumberBox.svelte b/packages/builder/src/components/common/NumberBox.svelte
index 8a38f8a0d2..106b9e67d2 100644
--- a/packages/builder/src/components/common/NumberBox.svelte
+++ b/packages/builder/src/components/common/NumberBox.svelte
@@ -26,7 +26,6 @@
   .numberbox {
     display: grid;
     align-items: center;
-    margin-bottom: 16px;
   }
 
   label {
diff --git a/packages/builder/src/components/common/ValuesList.svelte b/packages/builder/src/components/common/ValuesList.svelte
index 19cd6c533a..ff8cdb5479 100644
--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@@ -1,5 +1,6 @@
 <script>
   import { join } from "lodash/fp"
+  import { TextArea, Label } from "@budibase/bbui"
 
   export let values
   export let label
@@ -15,35 +16,12 @@
   $: valuesText = join("\n")(values)
 </script>
 
-<div class="margin">
-  <label class="label">{label}</label>
-
-  <textarea value={valuesText} on:change={inputChanged} />
-
+<div class="container">
+  <TextArea {label} value={valuesText} thin on:change={inputChanged} />
 </div>
 
 <style>
-  .margin {
-    margin-bottom: 16px;
-    display: grid;
-  }
-  .label {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
-  textarea {
-    font-size: 14px;
-    height: 200px;
-    width: 100%;
-    border-radius: 5px;
-    border: none;
-    cursor: text;
-    background: var(--grey-2);
-    padding: 12px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    font-family: Inter;
+  .container :global(textarea) {
+    min-height: 100px;
   }
 </style>
diff --git a/packages/builder/src/components/database/DataTable/LinkedRecord.svelte b/packages/builder/src/components/database/DataTable/LinkedRecord.svelte
deleted file mode 100644
index 0cbf9ab307..0000000000
--- a/packages/builder/src/components/database/DataTable/LinkedRecord.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { fade } from "svelte/transition"
-  import { backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-
-  export let ids = []
-  export let field
-
-  let records = []
-  let open = false
-  let model
-
-  $: FIELDS_TO_HIDE = [$backendUiStore.selectedModel.name]
-
-  async function fetchRecords() {
-    const response = await api.post("/api/records/search", {
-      keys: ids,
-    })
-    const modelResponse = await api.get(`/api/models/${field.modelId}`)
-    records = await response.json()
-    model = await modelResponse.json()
-  }
-
-  $: ids && fetchRecords()
-
-  function toggleOpen() {
-    open = !open
-  }
-
-  onMount(() => {
-    fetchRecords()
-  })
-</script>
-
-<section>
-  <a on:click={toggleOpen}>{records.length}</a>
-  {#if open}
-    <div class="popover" transition:fade>
-      <header>
-        <h3>{field.name}</h3>
-        <i class="ri-close-circle-fill" on:click={toggleOpen} />
-      </header>
-      {#each records as record}
-        <div class="linked-record">
-          <div class="fields">
-            {#each Object.keys(model.schema).filter(key => !FIELDS_TO_HIDE.includes(key)) as key}
-              <div class="field">
-                <span>{model.schema[key].name}</span>
-                <p>{record[key]}</p>
-              </div>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
-</section>
-
-<style>
-  section {
-    display: relative;
-  }
-
-  header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-  }
-
-  i {
-    font-size: 24px;
-    color: var(--ink-lighter);
-  }
-
-  i:hover {
-    cursor: pointer;
-  }
-
-  a {
-    font-size: 14px;
-  }
-
-  .popover {
-    width: 500px;
-    position: absolute;
-    right: 15%;
-    padding: 20px;
-    background: var(--grey-1);
-    border: 1px solid var(--grey);
-  }
-
-  h3 {
-    font-size: 20px;
-    font-weight: bold;
-    margin: 0;
-  }
-
-  .fields {
-    padding: 15px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 20px;
-    background: var(--white);
-    border: 1px solid var(--grey);
-    border-radius: 5px;
-    margin-bottom: 8px;
-  }
-
-  .field span {
-    color: var(--ink-lighter);
-    font-size: 12px;
-  }
-
-  .field p {
-    color: var(--ink);
-    font-size: 14px;
-    word-break: break-word;
-    font-weight: 500;
-    margin-top: 4px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/Table.svelte b/packages/builder/src/components/database/DataTable/Table.svelte
deleted file mode 100644
index 5b167c71f7..0000000000
--- a/packages/builder/src/components/database/DataTable/Table.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import fsort from "fast-sort"
-  import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import AttachmentList from "./AttachmentList.svelte"
-  import TablePagination from "./TablePagination.svelte"
-  import RowPopover from "./popovers/Row.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
-  import ViewPopover from "./popovers/View.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
-  import EditRowPopover from "./popovers/EditRow.svelte"
-  import CalculationPopover from "./popovers/Calculate.svelte"
-
-  export let schema = []
-  export let data = []
-  export let title
-
-  const ITEMS_PER_PAGE = 10
-
-  let currentPage = 0
-
-  $: columns = schema ? Object.keys(schema) : []
-
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
-  $: paginatedData =
-    sorted && sorted.length
-      ? sorted.slice(
-          currentPage * ITEMS_PER_PAGE,
-          currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
-        )
-      : []
-</script>
-
-<section>
-  <div class="table-controls">
-    <h2 class="title">{title}</h2>
-    <div class="popovers">
-      <slot />
-    </div>
-  </div>
-  <table class="bb-table">
-    <thead>
-      <tr>
-        {#each columns as header}
-          <th>{header}</th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#if paginatedData.length === 0}
-        <div class="no-data">No Data.</div>
-      {/if}
-      {#each paginatedData as row}
-        <tr>
-          {#each columns as header}
-            <td>
-              {#if schema[header].type === 'attachment'}
-                <AttachmentList files={row[header] || []} />
-              {:else}{getOr('', header, row)}{/if}
-            </td>
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-  <TablePagination
-    {data}
-    bind:currentPage
-    pageItemCount={paginatedData.length}
-    {ITEMS_PER_PAGE} />
-</section>
-
-<style>
-  section {
-    margin-bottom: 20px;
-  }
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    text-transform: capitalize;
-  }
-
-  table {
-    border: 1px solid var(--grey-4);
-    background: #fff;
-    border-radius: 3px;
-    border-collapse: collapse;
-  }
-
-  thead {
-    height: 40px;
-    background: var(--grey-3);
-    border: 1px solid var(--grey-4);
-  }
-
-  thead th {
-    color: var(--ink);
-    text-transform: capitalize;
-    font-weight: 500;
-    font-size: 14px;
-    text-rendering: optimizeLegibility;
-    transition: 0.5s all;
-    vertical-align: middle;
-  }
-
-  th:hover {
-    color: var(--blue);
-    cursor: pointer;
-  }
-
-  td {
-    max-width: 200px;
-    text-overflow: ellipsis;
-    border: 1px solid var(--grey-4);
-  }
-
-  tbody tr {
-    border-bottom: 1px solid var(--grey-4);
-    transition: 0.3s background-color;
-    color: var(--ink);
-    font-size: 12px;
-  }
-
-  tbody tr:hover {
-    background: var(--grey-1);
-  }
-
-  .table-controls {
-    width: 100%;
-  }
-
-  .popovers {
-    display: flex;
-  }
-
-  :global(.popovers > div) {
-    margin-right: var(--spacing-m);
-  }
-
-  .no-data {
-    padding: 14px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
deleted file mode 100644
index 164683ef5f..0000000000
--- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import fsort from "fast-sort"
-  import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
-  import Table from "./Table.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import LinkedRecord from "./LinkedRecord.svelte"
-  import TablePagination from "./TablePagination.svelte"
-  import RowPopover from "./popovers/Row.svelte"
-  import ColumnPopover from "./popovers/Column.svelte"
-  import ViewPopover from "./popovers/View.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
-  import EditRowPopover from "./popovers/EditRow.svelte"
-  import CalculationPopover from "./popovers/Calculate.svelte"
-  import GroupByPopover from "./popovers/GroupBy.svelte"
-  import FilterPopover from "./popovers/Filter.svelte"
-  import ExportPopover from "./popovers/Export.svelte"
-
-  export let view = {}
-
-  let data = []
-
-  $: name = view.name
-  $: filters = view.filters
-  $: field = view.field
-  $: groupBy = view.groupBy
-  $: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy)
-
-  async function fetchViewData(name, field, groupBy) {
-    const params = new URLSearchParams()
-
-    if (field) {
-      params.set("field", field)
-      params.set("stats", true)
-    }
-    if (groupBy) params.set("group", groupBy)
-
-    let QUERY_VIEW_URL = `/api/views/${name}?${params}`
-
-    const response = await api.get(QUERY_VIEW_URL)
-    data = await response.json()
-  }
-</script>
-
-<Table title={decodeURI(name)} schema={view.schema} {data}>
-  <FilterPopover {view} />
-  <CalculationPopover {view} />
-  {#if view.calculation}
-    <GroupByPopover {view} />
-  {/if}
-  <ExportPopover {view} />
-</Table>
diff --git a/packages/builder/src/components/database/DataTable/index.js b/packages/builder/src/components/database/DataTable/index.js
deleted file mode 100644
index bd9df8885c..0000000000
--- a/packages/builder/src/components/database/DataTable/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ModelDataTable.svelte"
diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte
deleted file mode 100644
index 1e5e23823c..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { Input, TextArea, Button, Select } from "@budibase/bbui"
-  import { cloneDeep, merge } from "lodash/fp"
-  import { store, backendUiStore } from "builderStore"
-  import { FIELDS } from "constants/backend"
-  import { notifier } from "builderStore/store/notifications"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import NumberBox from "components/common/NumberBox.svelte"
-  import ValuesList from "components/common/ValuesList.svelte"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import Checkbox from "components/common/Checkbox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import DatePicker from "components/common/DatePicker.svelte"
-  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
-  import * as api from "../api"
-
-  let fieldDefinitions = cloneDeep(FIELDS)
-
-  export let onClosed
-  export let field = {
-    type: "string",
-    constraints: fieldDefinitions.STRING.constraints,
-  }
-
-  let originalName = field.name
-  $: required = field && field.constraints && field.constraints.presence
-
-  async function saveColumn() {
-    backendUiStore.update(state => {
-      backendUiStore.actions.models.saveField({
-        originalName,
-        field,
-      })
-
-      return state
-    })
-    onClosed()
-  }
-
-  function handleFieldConstraints(event) {
-    const { type, constraints } = fieldDefinitions[
-      event.target.value.toUpperCase()
-    ]
-
-    field.type = type
-    field.constraints = constraints
-  }
-
-  const getPresence = required => (required ? { allowEmpty: false } : false)
-
-  const requiredChanged = ev => {
-    const req = ev.target.checked
-    field.constraints.presence = req ? { allowEmpty: false } : false
-    required = req
-  }
-</script>
-
-<div class="actions">
-  <Input placeholder="Name" thin bind:value={field.name} />
-
-  <Select
-    secondary
-    thin
-    on:change={handleFieldConstraints}
-    bind:value={field.type}>
-    {#each Object.values(fieldDefinitions) as field}
-      <option value={field.type}>{field.name}</option>
-    {/each}
-  </Select>
-
-  <div class="info">
-    <div class="field">
-      <label>Required</label>
-      <input type="checkbox" checked={required} on:change={requiredChanged} />
-    </div>
-
-    {#if field.type === 'string' && field.constraints}
-      <NumberBox
-        label="Max Length"
-        bind:value={field.constraints.length.maximum} />
-      <ValuesList
-        label="Categories"
-        bind:values={field.constraints.inclusion} />
-    {:else if field.type === 'datetime' && field.constraints}
-      <DatePicker
-        label="Earliest"
-        bind:value={field.constraints.datetime.earliest} />
-      <DatePicker
-        label="Latest"
-        bind:value={field.constraints.datetime.latest} />
-    {:else if field.type === 'number' && field.constraints}
-      <NumberBox
-        label="Min Value"
-        bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
-      <NumberBox
-        label="Max Value"
-        bind:value={field.constraints.numericality.lessThanOrEqualTo} />
-    {:else if field.type === 'link'}
-      <div class="field">
-        <label>Link</label>
-        <select class="budibase__input" bind:value={field.modelId}>
-          <option value={''} />
-          {#each $backendUiStore.models as model}
-            {#if model._id !== $backendUiStore.draftModel._id}
-              <option value={model._id}>{model.name}</option>
-            {/if}
-          {/each}
-        </select>
-      </div>
-    {/if}
-  </div>
-
-</div>
-<footer>
-  <div class="button-margin-3">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-  </div>
-  <div class="button-margin-4">
-    <Button primary on:click={saveColumn}>Save Column</Button>
-  </div>
-</footer>
-
-<style>
-  .actions {
-    padding: var(--spacing-l) var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-  }
-
-  footer {
-    padding: 20px 30px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  .field {
-    display: grid;
-    grid-template-columns: auto 20px 1fr;
-    align-items: center;
-    grid-gap: 5px;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: var(--spacing-l);
-    font-family: var(--font-normal);
-  }
-
-  .button-margin-3 {
-    grid-column-start: 3;
-    display: grid;
-  }
-
-  .button-margin-4 {
-    grid-column-start: 4;
-    display: grid;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
deleted file mode 100644
index 8edecd913c..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-  import { onMount, tick } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { compose, map, get, flatten } from "lodash/fp"
-  import { Input, TextArea, Button } from "@budibase/bbui"
-  import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
-  import RecordFieldControl from "./RecordFieldControl.svelte"
-  import * as api from "../api"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-
-  export let record = {}
-  export let onClosed
-
-  let errors = []
-  let selectedModel
-
-  $: modelSchema = $backendUiStore.selectedModel
-    ? Object.entries($backendUiStore.selectedModel.schema)
-    : []
-
-  async function saveRecord() {
-    const recordResponse = await api.saveRecord(
-      {
-        ...record,
-        modelId: $backendUiStore.selectedModel._id,
-      },
-      $backendUiStore.selectedModel._id
-    )
-    if (recordResponse.errors) {
-      errors = Object.keys(recordResponse.errors)
-        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
-        .flat()
-      return
-    }
-
-    onClosed()
-    notifier.success("Record saved successfully.")
-    backendUiStore.actions.records.save(recordResponse)
-  }
-</script>
-
-<div class="actions">
-  <ErrorsBox {errors} />
-  <form on:submit|preventDefault>
-    {#each modelSchema as [key, meta]}
-      <div class="bb-margin-xl">
-        {#if meta.type === 'link'}
-          <LinkedRecordSelector
-            bind:linked={record[key]}
-            linkName={meta.name}
-            modelId={meta.modelId} />
-        {:else}
-          <RecordFieldControl {meta} bind:value={record[key]} />
-        {/if}
-      </div>
-    {/each}
-  </form>
-</div>
-<footer>
-  <div class="button-margin-3">
-    <Button secondary on:click={onClosed}>Cancel</Button>
-  </div>
-  <div class="button-margin-4">
-    <Button primary on:click={saveRecord}>Save</Button>
-  </div>
-</footer>
-
-<style>
-  .actions {
-    padding: var(--spacing-l) var(--spacing-xl);
-  }
-
-  footer {
-    padding: 20px 30px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  .button-margin-3 {
-    grid-column-start: 3;
-    display: grid;
-  }
-
-  .button-margin-4 {
-    grid-column-start: 4;
-    display: grid;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte b/packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte
deleted file mode 100644
index 4b4d51329e..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/DeleteRecord.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-  import ActionButton from "components/common/ActionButton.svelte"
-  import { notifier } from "builderStore/store/notifications"
-  import { store, backendUiStore } from "builderStore"
-  import * as api from "../api"
-
-  export let record
-  export let onClosed
-</script>
-
-<section>
-  <div class="content">
-    <header>
-      <i class="ri-information-line alert" />
-      <h4 class="budibase__title--4">Delete Record</h4>
-    </header>
-    <p>
-      Are you sure you want to delete this record? All of your data will be
-      permanently removed. This action cannot be undone.
-    </p>
-  </div>
-  <div class="modal-actions">
-    <ActionButton on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton
-      alert
-      on:click={async () => {
-        await api.deleteRecord(record)
-        notifier.danger('Record deleted')
-        backendUiStore.actions.records.delete(record)
-        onClosed()
-      }}>
-      Delete
-    </ActionButton>
-  </div>
-</section>
-
-<style>
-  .alert {
-    color: rgba(255, 0, 31, 1);
-    background: var(--grey-1);
-    padding: 5px;
-  }
-
-  .modal-actions {
-    padding: 10px;
-    background: var(--grey-1);
-    border-top: 1px solid #ccc;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-  }
-  .content {
-    padding: 30px;
-  }
-
-  h4 {
-    margin: 0 0 0 10px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/modals/DeleteTable.svelte b/packages/builder/src/components/database/DataTable/modals/DeleteTable.svelte
deleted file mode 100644
index c47b9e632a..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/DeleteTable.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import ActionButton from "components/common/ActionButton.svelte"
-  import { notifier } from "builderStore/store/notifications"
-  import { store, backendUiStore } from "builderStore"
-  import * as api from "../api"
-
-  export let table
-  export let onClosed
-
-  function deleteTable() {
-    backendUiStore.actions.models.delete(table)
-  }
-</script>
-
-<section>
-  <div class="content">
-    <header>
-      <i class="ri-information-line alert" />
-      <h4 class="budibase__title--4">Delete Table</h4>
-    </header>
-    <p>
-      Are you sure you want to delete this table? All of your data will be
-      permanently removed. This action cannot be undone.
-    </p>
-  </div>
-  <div class="modal-actions">
-    <ActionButton on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton
-      alert
-      on:click={async () => {
-        await backendUiStore.actions.models.delete(table)
-        notifier.danger('Table deleted')
-        onClosed()
-      }}>
-      Delete
-    </ActionButton>
-  </div>
-</section>
-
-<style>
-  .alert {
-    color: rgba(255, 0, 31, 1);
-    background: var(--grey-1);
-    padding: 5px;
-  }
-
-  .modal-actions {
-    padding: 10px;
-    background: var(--grey-1);
-    border-top: 1px solid #ccc;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-  }
-  .content {
-    padding: 30px;
-  }
-
-  h4 {
-    margin: 0 0 0 10px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte b/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte
deleted file mode 100644
index 9d6c11cdb0..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/DeleteView.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import { notifier } from "builderStore/store/notifications"
-  import { store, backendUiStore } from "builderStore"
-  import * as api from "../api"
-
-  export let viewName
-  export let onClosed
-</script>
-
-<section>
-  <div class="content">
-    <header>
-      <i class="ri-information-line alert" />
-      <h4 class="budibase__title--4">Delete View</h4>
-    </header>
-    <p>
-      Are you sure you want to delete this view? All of your data will be
-      permanently removed. This action cannot be undone.
-    </p>
-  </div>
-  <div class="modal-actions">
-    <ActionButton on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton
-      alert
-      on:click={async () => {
-        await backendUiStore.actions.views.delete(viewName)
-        notifier.danger(`View ${viewName} deleted.`)
-        $goto(`./backend`)
-        onClosed()
-      }}>
-      Delete
-    </ActionButton>
-  </div>
-</section>
-
-<style>
-  .alert {
-    color: rgba(255, 0, 31, 1);
-    background: var(--grey-1);
-    padding: 5px;
-  }
-
-  .modal-actions {
-    padding: 10px;
-    background: var(--grey-1);
-    border-top: 1px solid #ccc;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-  }
-  .content {
-    padding: 30px;
-  }
-
-  h4 {
-    margin: 0 0 0 10px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
deleted file mode 100644
index 991a5fea63..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-  import { Input, Select, Label, DatePicker } from "@budibase/bbui"
-  import Dropzone from "components/common/Dropzone.svelte"
-
-  export let meta
-  export let value = meta.type === "boolean" ? false : ""
-  export let originalValue
-
-  let isSelect =
-    meta.type === "string" &&
-    meta.constraints &&
-    meta.constraints.inclusion &&
-    meta.constraints.inclusion.length > 0
-
-  let type = determineInputType(meta)
-
-  function determineInputType(meta) {
-    if (meta.type === "datetime") return "date"
-    if (meta.type === "number") return "number"
-    if (meta.type === "boolean") return "checkbox"
-    if (meta.type === "attachment") return "file"
-    if (isSelect) return "select"
-
-    return "text"
-  }
-
-  const handleInput = event => {
-    if (event.target.type === "checkbox") {
-      value = event.target.checked
-      return
-    }
-
-    if (event.target.type === "number") {
-      value = parseInt(event.target.value)
-      return
-    }
-
-    value = event.target.value
-  }
-</script>
-
-{#if type === 'select'}
-  <Select thin secondary data-cy="{meta.name}-select" bind:value>
-    <option />
-    {#each meta.constraints.inclusion as opt}
-      <option value={opt}>{opt}</option>
-    {/each}
-  </Select>
-{:else if type === 'date'}
-  <Label small forAttr={'datepicker-label'}>{meta.name}</Label>
-  <DatePicker bind:value />
-{:else if type === 'file'}
-  <Label small forAttr={'dropzone-label'}>{meta.name}</Label>
-  <Dropzone bind:files={value} />
-{:else}
-  {#if type === 'checkbox'}
-    <label>{meta.name}</label>
-  {/if}
-  <Input
-    thin
-    placeholder={meta.name}
-    data-cy="{meta.name}-input"
-    checked={value}
-    {type}
-    {value}
-    on:change={handleInput} />
-{/if}
-
-<style>
-  label {
-    font-weight: 500;
-    font-size: var(--font-size-s);
-    margin-bottom: 12px;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/modals/index.js b/packages/builder/src/components/database/DataTable/modals/index.js
deleted file mode 100644
index af0b3cd70b..0000000000
--- a/packages/builder/src/components/database/DataTable/modals/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as DeleteRecordModal } from "./DeleteRecord.svelte"
-export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte"
diff --git a/packages/builder/src/components/database/DataTable/popovers/Column.svelte b/packages/builder/src/components/database/DataTable/popovers/Column.svelte
deleted file mode 100644
index 2047a9a31b..0000000000
--- a/packages/builder/src/components/database/DataTable/popovers/Column.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { backendUiStore } from "builderStore"
-  import {
-    DropdownMenu,
-    TextButton as Button,
-    Icon,
-    Input,
-    Select,
-  } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
-
-  let anchor
-  let dropdown
-  let fieldName
-</script>
-
-<div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
-    <Icon name="addcolumn" />
-    Create New Column
-  </Button>
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <h5>Create Column</h5>
-  <CreateEditColumn onClosed={dropdown.hide} />
-</DropdownMenu>
-
-<style>
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-</style>
diff --git a/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte b/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte
deleted file mode 100644
index a5a04c79c8..0000000000
--- a/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { backendUiStore } from "builderStore"
-  import {
-    DropdownMenu,
-    Button,
-    Icon,
-    Input,
-    Select,
-    Heading,
-  } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-  import CreateEditRecord from "../modals/CreateEditRecord.svelte"
-  import DeleteRecordModal from "../modals/DeleteRecord.svelte"
-
-  const { open, close } = getContext("simple-modal")
-
-  export let row
-
-  let anchor
-  let dropdown
-
-  let editing
-
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown.hide()
-    editing = false
-    close()
-  }
-
-  const deleteRow = () => {
-    open(
-      DeleteRecordModal,
-      {
-        onClosed: hideEditor,
-        record: row,
-      },
-      { styleContent: { padding: "0" } }
-    )
-  }
-</script>
-
-<div bind:this={anchor} on:click={dropdown.show}>
-  <i class="ri-more-line" />
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  {#if editing}
-    <h5>Edit Row</h5>
-    <CreateEditRecord onClosed={hideEditor} record={row} />
-  {:else}
-    <ul>
-      <li data-cy="edit-row" on:click={showEditor}>
-        <Icon name="edit" />
-        <span>Edit</span>
-      </li>
-      <li data-cy="delete-row" on:click={deleteRow}>
-        <Icon name="delete" />
-        <span>Delete</span>
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
-
-<style>
-  .ri-more-line:hover {
-    cursor: pointer;
-  }
-
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    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/database/DataTable/popovers/Export.svelte b/packages/builder/src/components/database/DataTable/popovers/Export.svelte
deleted file mode 100644
index 00514edb9c..0000000000
--- a/packages/builder/src/components/database/DataTable/popovers/Export.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-  import {
-    TextButton,
-    Button,
-    Icon,
-    Input,
-    Select,
-    Popover,
-  } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import api from "builderStore/api"
-
-  const FORMATS = [
-    {
-      name: "CSV",
-      key: "csv",
-    },
-    {
-      name: "JSON",
-      key: "json",
-    },
-  ]
-
-  export let view
-
-  let anchor
-  let dropdown
-  let exportFormat
-
-  async function exportView() {
-    const response = await api.post(
-      `/api/views/export?format=${exportFormat}`,
-      view
-    )
-    const downloadInfo = await response.json()
-    window.location = downloadInfo.url
-  }
-</script>
-
-<div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="download" />
-    Export
-  </TextButton>
-</div>
-<Popover bind:this={dropdown} {anchor} align="left">
-  <h5>Export Format</h5>
-  <Select secondary thin bind:value={exportFormat}>
-    <option value={''}>Select an option</option>
-    {#each FORMATS as format}
-      <option value={format.key}>{format.name}</option>
-    {/each}
-  </Select>
-  <div class="button-group">
-    <Button secondary on:click={dropdown.hide}>Cancel</Button>
-    <Button primary on:click={exportView}>Export</Button>
-  </div>
-</Popover>
-
-<style>
-  h5 {
-    margin-top: 0;
-  }
-
-  .button-group {
-    margin-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-  }
-</style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte b/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
deleted file mode 100644
index fe723843b3..0000000000
--- a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import Spinner from "components/common/Spinner.svelte"
-  import {
-    DropdownMenu,
-    Button,
-    Label,
-    Heading,
-    Icon,
-    Input,
-    Select,
-    Dropzone,
-    Spacer,
-  } from "@budibase/bbui"
-  import TableDataImport from "./TableDataImport.svelte"
-  import api from "builderStore/api"
-  import analytics from "analytics"
-
-  let anchor
-  let dropdown
-  let name
-  let dataImport
-  let loading
-
-  async function saveTable() {
-    loading = true
-    const model = await backendUiStore.actions.models.save({
-      name,
-      schema: dataImport.schema || {},
-      dataImport,
-    })
-    notifier.success(`Table ${name} created successfully.`)
-    $goto(`./model/${model._id}`)
-    analytics.captureEvent("Table Created", { name })
-    name = ""
-    dropdown.hide()
-    loading = false
-  }
-
-  const onClosed = () => {
-    name = ""
-    dropdown.hide()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <Button primary wide on:click={dropdown.show}>Create New Table</Button>
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <div class="container">
-    <h5>Create Table</h5>
-    <Label grey extraSmall>Name</Label>
-    <Input
-      data-cy="table-name-input"
-      placeholder="Table Name"
-      thin
-      bind:value={name} />
-    <Spacer medium />
-    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-    <TableDataImport bind:dataImport />
-  </div>
-  <footer>
-    <div class="button-margin-3">
-      <Button secondary on:click={onClosed}>Cancel</Button>
-    </div>
-    <div class="button-margin-4">
-      <Button
-        disabled={!name || (dataImport && !dataImport.valid)}
-        primary
-        on:click={saveTable}>
-        <span style={`margin-right: ${loading ? '10px' : 0};`}>Save</span>
-        {#if loading}
-          <Spinner size="10" />
-        {/if}
-      </Button>
-    </div>
-  </footer>
-</DropdownMenu>
-
-<style>
-  h5 {
-    margin-bottom: var(--spacing-m);
-    margin-top: 0;
-    font-weight: 500;
-  }
-
-  .container {
-    padding: var(--spacing-l);
-    margin: 0;
-  }
-
-  footer {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  .button-margin-3 {
-    grid-column-start: 3;
-    display: grid;
-  }
-
-  .button-margin-4 {
-    grid-column-start: 4;
-    display: grid;
-  }
-</style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte b/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
deleted file mode 100644
index e7926063dd..0000000000
--- a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-  import DeleteTableModal from "components/database/DataTable/modals/DeleteTable.svelte"
-
-  const { open, close } = getContext("simple-modal")
-
-  export let table
-
-  let anchor
-  let dropdown
-
-  let editing
-
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown.hide()
-    editing = false
-    close()
-  }
-
-  const deleteTable = () => {
-    open(
-      DeleteTableModal,
-      {
-        onClosed: close,
-        table,
-      },
-      { styleContent: { padding: "0" } }
-    )
-  }
-
-  function save() {
-    backendUiStore.actions.models.save(table)
-    hideEditor()
-  }
-</script>
-
-<div bind:this={anchor} on:click={dropdown.show}>
-  <i class="ri-more-line" />
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  {#if editing}
-    <h5>Edit Table</h5>
-    <div class="container">
-      <Input placeholder="Table Name" thin bind:value={table.name} />
-    </div>
-    <footer>
-      <div class="button-margin-3">
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-      </div>
-      <div class="button-margin-4">
-        <Button primary on:click={save}>Save</Button>
-      </div>
-    </footer>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-table" on:click={deleteTable}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
-
-<style>
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .container {
-    padding: var(--spacing-xl);
-  }
-
-  ul {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    list-style: none;
-    padding-left: 0;
-    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);
-  }
-
-  footer {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  .button-margin-1 {
-    grid-column-start: 1;
-    display: grid;
-  }
-
-  .button-margin-3 {
-    grid-column-start: 3;
-    display: grid;
-  }
-
-  .button-margin-4 {
-    grid-column-start: 4;
-    display: grid;
-  }
-</style>
diff --git a/packages/builder/src/components/nav/NavItem.svelte b/packages/builder/src/components/nav/NavItem.svelte
deleted file mode 100644
index 002c4e0802..0000000000
--- a/packages/builder/src/components/nav/NavItem.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { isActive, url, goto } from "@sveltech/routify"
-
-  export let label = ""
-  export let href
-</script>
-
-<div
-  on:click={() => $goto(href)}
-  class="budibase__nav-item backend-nav-item"
-  class:selected={$isActive(href)}>
-  {label}
-</div>
-
-<style>
-  .backend-nav-item {
-    padding-left: 25px;
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 9d669bc7b2..3bb6d6e40d 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -1,32 +1,17 @@
 <script>
-  import Modal from "./Modal.svelte"
+  import SettingsModal from "./SettingsModal.svelte"
   import { SettingsIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
-  import { isActive, goto, layout } from "@sveltech/routify"
+  import { Modal } from "@budibase/bbui"
 
-  // Handle create app modal
-  const { open } = getContext("simple-modal")
-
-  const showSettingsModal = () => {
-    open(
-      Modal,
-      {
-        name: "Placeholder App Name",
-        description: "This is a hardcoded description that needs to change",
-      },
-      {
-        closeButton: false,
-        closeOnEsc: true,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
-  }
+  let modal
 </script>
 
-<span class="topnavitemright settings" on:click={showSettingsModal}>
+<span class="topnavitemright settings" on:click={modal.show}>
   <SettingsIcon />
 </span>
+<Modal bind:this={modal} width="600px">
+  <SettingsModal />
+</Modal>
 
 <style>
   span:first-letter {
@@ -35,8 +20,7 @@
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0px 20px 0px 0px;
-    padding-top: 4px;
+    margin: 0 20px 0 0;
     font-weight: 500;
     font-size: 1rem;
     height: 100%;
diff --git a/packages/builder/src/components/settings/Modal.svelte b/packages/builder/src/components/settings/Modal.svelte
deleted file mode 100644
index 56e44c1776..0000000000
--- a/packages/builder/src/components/settings/Modal.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script>
-  import { General, Users, DangerZone, APIKeys } from "./tabs"
-
-  import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
-  import { SettingsIcon, CloseIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
-  import { post } from "builderStore/api"
-
-  const { open, close } = getContext("simple-modal")
-  export let name = ""
-  export let description = ""
-  const tabs = [
-    {
-      title: "General",
-      key: "GENERAL",
-      component: General,
-    },
-    {
-      title: "Users",
-      key: "USERS",
-      component: Users,
-    },
-    {
-      title: "API Keys",
-      key: "API_KEYS",
-      component: APIKeys,
-    },
-    {
-      title: "Danger Zone",
-      key: "DANGERZONE",
-      component: DangerZone,
-    },
-  ]
-  let value = "GENERAL"
-  $: selectedTab = tabs.find(tab => tab.key === value).component
-</script>
-
-<div class="container">
-  <div class="body">
-    <div class="heading">
-      <span class="icon">
-        <SettingsIcon />
-      </span>
-      <h3>Settings</h3>
-    </div>
-    <Switcher headings={tabs} bind:value>
-      <svelte:component this={selectedTab} />
-    </Switcher>
-  </div>
-  <div class="close-button" on:click={close}>
-    <CloseIcon />
-  </div>
-</div>
-
-<style>
-  .container {
-    position: relative;
-    height: 36rem;
-  }
-
-  .close-button {
-    cursor: pointer;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-  }
-  .close-button :global(svg) {
-    width: 24px;
-    height: 24px;
-  }
-  .heading {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  h3 {
-    margin: 0;
-    font-size: 24px;
-    font-weight: bold;
-  }
-  .icon {
-    display: grid;
-    border-radius: 3px;
-    align-content: center;
-    justify-content: center;
-    margin-right: 12px;
-    height: 20px;
-    width: 20px;
-    padding: 10px;
-    background-color: var(--blue-light);
-    color: var(--grey-7);
-  }
-  .body {
-    padding: 40px 40px 40px 40px;
-    display: grid;
-    grid-gap: 20px;
-  }
-</style>
diff --git a/packages/builder/src/components/settings/SettingsModal.svelte b/packages/builder/src/components/settings/SettingsModal.svelte
new file mode 100644
index 0000000000..44ab581521
--- /dev/null
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { General, Users, DangerZone, APIKeys } from "./tabs"
+  import { Switcher, ModalContent } from "@budibase/bbui"
+
+  const tabs = [
+    {
+      title: "General",
+      key: "GENERAL",
+      component: General,
+    },
+    {
+      title: "Users",
+      key: "USERS",
+      component: Users,
+    },
+    {
+      title: "API Keys",
+      key: "API_KEYS",
+      component: APIKeys,
+    },
+    {
+      title: "Danger Zone",
+      key: "DANGERZONE",
+      component: DangerZone,
+    },
+  ]
+
+  let value = "GENERAL"
+
+  $: selectedTab = tabs.find(tab => tab.key === value).component
+</script>
+
+<ModalContent
+  title="Settings"
+  showConfirmButton={false}
+  showCancelButton={false}>
+  <div class="container">
+    <Switcher headings={tabs} bind:value>
+      <svelte:component this={selectedTab} />
+    </Switcher>
+  </div>
+</ModalContent>
+
+<style>
+  .container :global(section > header) {
+    /* Fix margin defined in BBUI as L rather than XL */
+    margin-bottom: var(--spacing-xl);
+  }
+  .container :global(textarea) {
+    min-height: 60px;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
index 43ffc33fe2..30b03d9755 100644
--- a/packages/builder/src/components/settings/UserRow.svelte
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -14,7 +14,7 @@
     bind:value={user.username}
     name="Name"
     placeholder="Username" />
-  <Select disabled={!editMode} bind:value={user.accessLevelId} thin>
+  <Select disabled={!editMode} bind:value={user.accessLevelId} thin secondary>
     <option value="">Choose an option</option>
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
@@ -37,19 +37,7 @@
   .inputs {
     display: grid;
     justify-items: stretch;
-    grid-gap: 18px;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  .inputs :global(input) {
-    padding: 10px 12px;
-    border-radius: var(--rounded-small);
-  }
-  .inputs :global(select) {
-    padding: 9px 12px;
-    border-radius: var(--rounded-small);
-  }
-  .inputs :global(button) {
-    border-radius: var(--rounded-small);
-    height: initial;
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 1fr 1fr 140px;
   }
 </style>
diff --git a/packages/builder/src/components/settings/tabs/APIKeys.svelte b/packages/builder/src/components/settings/tabs/APIKeys.svelte
index 7645548348..8a3c9fc710 100644
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@@ -1,8 +1,6 @@
 <script>
-  import { Input, Button } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { Input } from "@budibase/bbui"
   import api from "builderStore/api"
-  import posthog from "posthog-js"
   import analytics from "analytics"
 
   let keys = { budibase: "" }
@@ -34,23 +32,17 @@
 </script>
 
 <div class="container">
-  <div class="background">
-    <Input
-      on:save={e => updateKey(['budibase', e.detail])}
-      thin
-      edit
-      value={keys.budibase}
-      label="Budibase" />
-  </div>
+  <Input
+    on:save={e => updateKey(['budibase', e.detail])}
+    thin
+    edit
+    value={keys.budibase}
+    label="Budibase API Key" />
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-gap: var(--space);
-  }
-  .background {
-    border-radius: 5px;
-    padding: 12px 0px;
+    grid-gap: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index e87c5c4cd9..ee592ec6b1 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -1,6 +1,6 @@
 <script>
   import { params, goto } from "@sveltech/routify"
-  import { Input, TextArea, Button } from "@budibase/bbui"
+  import { Input, TextArea, Button, Body } from "@budibase/bbui"
   import { del } from "builderStore/api"
 
   let value = ""
@@ -9,51 +9,50 @@
   async function deleteApp() {
     loading = true
     const id = $params.application
-    const res = await del(`/api/${id}`)
-    const json = await res.json()
-
+    await del(`/api/${id}`)
     loading = false
-    if (res.ok) {
-      $goto("/")
-      return json
-    } else {
-      throw new Error(json)
-    }
+    $goto("/")
   }
 </script>
 
 <div class="background">
-  <p>
-    Type DELETE into the textbox, then click the following button to delete your
-    web app:
-  </p>
+  <Body>
+    Type
+    <b>DELETE</b>
+    into the textbox, then click the following button to delete your entire web
+    app.
+  </Body>
   <Input
     on:change={e => (value = e.target.value)}
     on:input={e => (value = e.target.value)}
     thin
     disabled={loading}
     placeholder="" />
-
-  <Button
-    disabled={value !== 'DELETE' || loading}
-    red
-    wide
-    on:click={deleteApp}>
-    Delete Entire Web App
-  </Button>
+  <div class="buttons">
+    <Button
+      primary
+      disabled={value !== 'DELETE' || loading}
+      red
+      on:click={deleteApp}>
+      Delete Entire App
+    </Button>
+  </div>
 </div>
 
 <style>
   .background {
     display: grid;
-    grid-gap: 16px;
-    border-radius: 5px;
-    padding: 12px 0px;
+    grid-gap: var(--spacing-xl);
   }
-  p {
+  .background :global(p) {
+    line-height: 1.2;
     margin: 0;
   }
-  .background :global(button) {
-    max-width: 100%;
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
   }
 </style>
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 7069dd2812..04d4672d50 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -22,19 +22,18 @@
     thin
     edit
     value={$store.name}
-    label="Name" />
+    label="App Name" />
   <TextArea
     on:save={e => updateApplication({ description: e.detail })}
     thin
     edit
     value={$store.description}
-    label="Description" />
+    label="App Description" />
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-gap: 32px;
-    margin-top: 32px;
+    grid-gap: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index aced8bc0a2..d24dcc7a6b 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select, Button } from "@budibase/bbui"
+  import { Input, Select, Button, Label } from "@budibase/bbui"
   import UserRow from "../UserRow.svelte"
 
   import { store, backendUiStore } from "builderStore"
@@ -8,7 +8,7 @@
 
   let username = ""
   let password = ""
-  let accessLevelId
+  let accessLevelId = "ADMIN"
 
   $: valid = username && password && accessLevelId
   $: appId = $store.appId
@@ -52,8 +52,8 @@
 </script>
 
 <div class="container">
-  <div class="background">
-    <div class="title">Create new user</div>
+  <div>
+    <Label extraSmall grey>Create New User</Label>
     <div class="inputs">
       <Input thin bind:value={username} name="Name" placeholder="Username" />
       <Input
@@ -61,20 +61,18 @@
         bind:value={password}
         name="Password"
         placeholder="Password" />
-      <Select bind:value={accessLevelId} thin>
+      <Select secondary bind:value={accessLevelId} thin>
         <option value="">Choose an option</option>
         <option value="ADMIN">Admin</option>
         <option value="POWER_USER">Power User</option>
       </Select>
-    </div>
-    <div class="create-button">
-      <Button on:click={createUser} small primary>Create</Button>
+      <Button on:click={createUser} primary>Create</Button>
     </div>
   </div>
-  <div class="background-users">
-    <div class="title">Current Users</div>
+  <div>
+    <Label extraSmall grey>Current Users</Label>
     {#await fetchUsersPromise}
-      Loading state!
+      Loading...
     {:then users}
       <ul>
         {#each users as user}
@@ -95,57 +93,21 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 32px;
-    margin-top: 32px;
-  }
-  .background {
-    position: relative;
-    display: grid;
-    grid-gap: 12px;
-    border-radius: 5px;
+    grid-gap: var(--spacing-xl);
   }
 
-  .background-users {
-    position: relative;
-    display: grid;
-    grid-gap: 12px;
-    border-radius: 5px;
-  }
-
-  .create-button {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-  }
-  .create-button :global(button) {
-    font-size: var(--font-size-sm);
-    min-width: 100px;
-    border-radius: var(--rounded-small);
-  }
-  .title {
-    font-size: 14px;
-    font-weight: 500;
-  }
   .inputs {
     display: grid;
-    margin-top: 12px;
-    grid-gap: 18px;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  .inputs :global(input) {
-    padding: 10px 12px;
-    border-radius: var(--rounded-small);
-  }
-  .inputs :global(select) {
-    padding: 10px 12px;
-    border-radius: var(--rounded-small);
-    background-color: var(--grey-2);
+    justify-items: stretch;
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 1fr 1fr 1fr 140px;
   }
+
   ul {
     list-style: none;
     padding: 0;
     display: grid;
-    grid-gap: 8px;
-    margin-top: 0;
+    grid-gap: var(--spacing-m);
+    margin: 0;
   }
 </style>
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 1987a11ff2..34a3faa966 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,60 +1,35 @@
 <script>
-  import Button from "components/common/Button.svelte"
+  import { TextButton } from "@budibase/bbui"
+  import { Heading } from "@budibase/bbui"
+  import { Spacer } from "@budibase/bbui"
   export let name, _id
 </script>
 
 <div class="apps-card">
-  <h3 class="app-title">{name}</h3>
+  <Heading small black>{name}</Heading>
+  <Spacer medium />
   <div class="card-footer">
-    <a href={`/_builder/${_id}`} class="app-button">Open {name}</a>
+    <TextButton text medium blue href="/_builder/{_id}">
+      Open {name} →
+    </TextButton>
   </div>
 </div>
 
 <style>
   .apps-card {
     background-color: var(--white);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
+      var(--spacing-xl);
     max-width: 300px;
     max-height: 150px;
     border-radius: var(--border-radius-m);
     border: var(--border-dark);
   }
 
-  .app-button:hover {
-    background-color: var(--white);
-    color: var(--black);
-    text-decoration: none;
-  }
-
-  .app-title {
-    font-size: var(--font-size-l);
-    font-weight: 600;
-    color: var(--ink);
-    text-transform: capitalize;
-  }
-
   .card-footer {
     display: flex;
     flex-direction: row;
     align-items: baseline;
     justify-content: space-between;
   }
-
-  .app-button {
-    align-items: center;
-    display: flex;
-    background-color: var(--ink);
-    color: var(--white);
-    border: 1.5px var(--ink) solid;
-    width: 100%;
-    justify-content: center;
-    padding: 8px 16px;
-    border-radius: var(--border-radius-s);
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-sizing: border-box;
-    font-family: var(--font-sans);
-  }
 </style>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 0a87e63cbb..aeed85655e 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <div class="root">
-  <Heading medium black>Your Apps</Heading>
+  <Heading lh medium black>Your Apps</Heading>
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />
@@ -48,8 +48,4 @@
     grid-gap: var(--layout-m);
     justify-content: start;
   }
-
-  .root {
-    margin: 20px 80px;
-  }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 3e3e1a4a9d..e171dc836e 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,6 +1,5 @@
 <script>
   import { writable } from "svelte/store"
-
   import { store, automationStore, backendUiStore } from "builderStore"
   import { string, object } from "yup"
   import api, { get } from "builderStore/api"
@@ -11,12 +10,10 @@
   import { Input, TextArea, Button } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
 
-  const { open, close } = getContext("simple-modal")
   //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
   const createAppStore = writable({ currentStep: 0, values: {} })
 
@@ -172,7 +169,7 @@
       }
       const userResp = await api.post(`/api/users`, user)
       const json = await userResp.json()
-      $goto(`./${appJson._id}`)
+      $goto(`/${appJson._id}`)
     } catch (error) {
       console.error(error)
     }
@@ -197,10 +194,6 @@
 
   let onChange = () => {}
 
-  function _onCancel() {
-    close()
-  }
-
   async function _onOkay() {
     await createNewApp()
   }
@@ -253,9 +246,6 @@
       {/if}
     </div>
   </div>
-  <div class="close-button" on:click={_onCancel}>
-    <CloseIcon />
-  </div>
   <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
@@ -280,16 +270,6 @@
     align-content: center;
     background: #f5f5f5;
   }
-  .close-button {
-    cursor: pointer;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-  }
-  .close-button :global(svg) {
-    width: 24px;
-    height: 24px;
-  }
   .heading {
     display: flex;
     flex-direction: row;
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
index 09f2931207..2c6a51698e 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -1,20 +1,22 @@
 <script>
-  import { Input, Heading, Body } from "@budibase/bbui"
+  import { Label, Heading, Input } from "@budibase/bbui"
   export let validationErrors
   export let template
 
   let blurred = { appName: false }
 </script>
 
-{#if template}
-  <Heading small black>Selected Template</Heading>
-  <Body>{template.name}</Body>
-{/if}
 <h2>Create your web app</h2>
 <div class="container">
+  {#if template}
+    <div class="template">
+      <Label extraSmall grey>Selected Template</Label>
+      <Heading small>{template.name}</Heading>
+    </div>
+  {/if}
   <Input
     on:input={() => (blurred.appName = true)}
-    label="Web app name"
+    label="Web App Name"
     name="applicationName"
     placeholder="Enter name of your web application"
     type="name"
@@ -24,6 +26,11 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 40px;
+    grid-gap: var(--spacing-xl);
+  }
+
+  .template :global(label) {
+    /*  Fix layout due to LH 0 on heading */
+    margin-bottom: 16px;
   }
 </style>
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
index 71fa979d2d..06c42c553f 100644
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@@ -21,7 +21,7 @@
     placeholder="Password"
     type="password"
     error={blurred.password && validationErrors.password} />
-  <Select secondary name="accessLevelId">
+  <Select label="Access Level" secondary name="accessLevelId">
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>
@@ -30,6 +30,6 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 40px;
+    grid-gap: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index e296f3cdd8..64e0671c83 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading, Body } from "@budibase/bbui"
+  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
   import AppCard from "./AppCard.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import api from "builderStore/api"
@@ -15,7 +15,7 @@
 </script>
 
 <div class="root">
-  <Heading medium black>Start With a Template</Heading>
+  <Heading lh medium black>Start With a Template</Heading>
   {#await templatesPromise}
     <div class="spinner-container">
       <Spinner size="30" />
@@ -24,11 +24,12 @@
     <div class="templates">
       {#each templates as template}
         <div class="templates-card">
-          <Heading black medium>{template.name}</Heading>
+          <Heading black small>{template.name}</Heading>
+          <Spacer small />
           <Body medium grey>{template.category}</Body>
-          <Body small black>{template.description}</Body>
+          <Body lh small black>{template.description}</Body>
           <div>
-            <img src={template.image} width="300" />
+            <img src={template.image} width="100%" />
           </div>
           <div class="card-footer">
             <Button secondary on:click={() => onSelect(template)}>
@@ -68,8 +69,4 @@
     color: var(--ink);
     text-transform: capitalize;
   }
-
-  .root {
-    margin: 20px 80px;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 166c486fa1..5ba0798718 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -42,8 +42,8 @@
     height: 24px;
     width: 24px;
     background: var(--grey-4);
-    right: 7px;
-    bottom: 7px;
+    right: var(--spacing-s);
+    bottom: 9px;
   }
   button:hover {
     background: var(--grey-5);
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 1c18e08dc7..842e480b8e 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -1,6 +1,13 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Button, TextArea, Label, Body } from "@budibase/bbui"
+  import {
+    Button,
+    TextArea,
+    Label,
+    Body,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -26,9 +33,10 @@
 
 <div class="container" data-cy="binding-dropdown-modal">
   <div class="list">
-    <Label size="l" color="dark">Objects</Label>
+    <Heading extraSmall>Objects</Heading>
+    <Spacer medium />
     {#if context}
-      <Label size="s" color="dark">Table</Label>
+      <Heading extraSmall>Tables</Heading>
       <ul>
         {#each context as { readableBinding }}
           <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
@@ -36,7 +44,7 @@
       </ul>
     {/if}
     {#if instance}
-      <Label size="s" color="dark">Components</Label>
+      <Heading extraSmall>Components</Heading>
       <ul>
         {#each instance as { readableBinding }}
           <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
@@ -45,15 +53,21 @@
     {/if}
   </div>
   <div class="text">
-    <Label size="l" color="dark">Data binding</Label>
-    <Body size="s" color="dark">
+    <Heading extraSmall>Data binding</Heading>
+    <Spacer small />
+    <Body extraSmall lh>
       Binding connects one piece of data to another and makes it dynamic. Click
       the objects on the left, to add them to the textbox.
     </Body>
-    <TextArea bind:value placeholder="" />
+    <Spacer large />
+    <TextArea
+      thin
+      bind:value
+      placeholder="Add text, or lick the objects on the left to add them to the
+      textbox." />
     <div class="controls">
-      <a href="#">
-        <Body size="s" color="light">Learn more about binding</Body>
+      <a href="https://docs.budibase.com/design/binding">
+        <Body small grey>Learn more about binding</Body>
       </a>
       <Button on:click={cancel} secondary>Cancel</Button>
       <Button on:click={close} primary>Done</Button>
@@ -73,17 +87,19 @@
   .controls {
     margin-top: var(--spacing-m);
     display: grid;
-    align-items: center;
+    align-items: baseline;
     grid-gap: var(--spacing-l);
     grid-template-columns: 1fr auto auto;
   }
   .list {
     width: 150px;
     border-right: 1.5px solid var(--grey-4);
+    padding: var(--spacing-xl);
   }
   .text {
     width: 600px;
-    display: grid;
+    padding: var(--spacing-xl);
+    font-family: var(--font-sans);
   }
   .text :global(p) {
     margin: 0;
@@ -99,15 +115,16 @@
     display: flex;
     font-family: var(--font-sans);
     font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
+    color: var(--grey-7);
+    padding: var(--spacing-s) 0;
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
   }
 
   li:hover {
-    background-color: var(--grey-2);
+    color: var(--ink);
+    font-weight: 500;
   }
 
   li:active {
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 1c3353c888..828c99a2a0 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -99,9 +98,9 @@
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation={() => {}}>
-  <button on:click={dropdown.show}>
-    <MoreIcon />
-  </button>
+  <div class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
 </div>
 <DropdownMenu
   class="menu"
@@ -112,27 +111,27 @@
   align="left">
   <ul>
     <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      <i class="icon ri-delete-bin-2-line" />
+      <i class="ri-delete-bin-2-line" />
       Delete
     </li>
     <li class="item" on:click={moveUpComponent}>
-      <i class="icon ri-arrow-up-line" />
+      <i class="ri-arrow-up-line" />
       Move up
     </li>
     <li class="item" on:click={moveDownComponent}>
-      <i class="icon ri-arrow-down-line" />
+      <i class="ri-arrow-down-line" />
       Move down
     </li>
     <li class="item" on:click={copyComponent}>
-      <i class="icon ri-repeat-one-line" />
+      <i class="ri-repeat-one-line" />
       Duplicate
     </li>
     <li class="item" on:click={() => storeComponentForCopy(true)}>
-      <i class="icon ri-scissors-cut-line" />
+      <i class="ri-scissors-cut-line" />
       Cut
     </li>
     <li class="item" on:click={() => storeComponentForCopy(false)}>
-      <i class="icon ri-file-copy-line" />
+      <i class="ri-file-copy-line" />
       Copy
     </li>
     <hr class="hr-style" />
@@ -140,21 +139,21 @@
       class="item"
       class:disabled={noPaste}
       on:click={() => pasteComponent('above')}>
-      <i class="icon ri-insert-row-top" />
+      <i class="ri-insert-row-top" />
       Paste above
     </li>
     <li
       class="item"
       class:disabled={noPaste}
       on:click={() => pasteComponent('below')}>
-      <i class="icon ri-insert-row-bottom" />
+      <i class="ri-insert-row-bottom" />
       Paste below
     </li>
     <li
       class="item"
       class:disabled={noPaste || noChildrenAllowed}
       on:click={() => pasteComponent('inside')}>
-      <i class="icon ri-insert-column-right" />
+      <i class="ri-insert-column-right" />
       Paste inside
     </li>
   </ul>
@@ -171,7 +170,7 @@
   ul {
     list-style: none;
     padding: 0;
-    margin: 0;
+    margin: var(--spacing-s) 0;
   }
 
   li {
@@ -180,44 +179,29 @@
     font-size: var(--font-size-xs);
     color: var(--ink);
     padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
+    margin: auto 0;
     align-items: center;
     cursor: pointer;
   }
-
-  button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  li:hover {
+  li:not(.disabled):hover {
     background-color: var(--grey-2);
   }
-
   li:active {
     color: var(--blue);
   }
-
-  .item {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-  }
-
-  .icon {
+  li i {
     margin-right: 8px;
+    font-size: var(--font-size-s);
   }
-
-  .disabled {
+  li.disabled {
     color: var(--grey-4);
     cursor: default;
   }
 
+  .icon i {
+    font-size: 16px;
+  }
+
   .hr-style {
     margin: 8px 0;
     color: var(--grey-4);
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index d9c619fae3..bec42b7f4f 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -190,9 +190,9 @@
   .item {
     display: grid;
     grid-template-columns: 1fr auto auto auto;
-    padding: 0px 5px 0px 15px;
-    margin: auto 0px;
-    border-radius: 5px;
+    padding: 0 var(--spacing-m);
+    margin: 0;
+    border-radius: var(--border-radius-m);
     height: 36px;
     align-items: center;
   }
@@ -205,9 +205,6 @@
   .actions {
     display: none;
     color: var(--ink);
-    padding: 0 5px;
-    width: 24px;
-    height: 24px;
     border-style: none;
     background: rgba(0, 0, 0, 0);
     cursor: pointer;
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 1aecd84314..0e45f2fcac 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,6 +1,12 @@
 <script>
   import { store } from "builderStore"
-  import { TextButton, Button, Heading, DropdownMenu } from "@budibase/bbui"
+  import {
+    TextButton,
+    Button,
+    Body,
+    DropdownMenu,
+    ModalContent,
+  } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
   import actionTypes from "./actions"
@@ -22,12 +28,6 @@
     actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
       .component
 
-  const closeModal = () => {
-    dispatch("close")
-    draftEventHandler = { parameters: [] }
-    actions = []
-  }
-
   const updateEventHandler = (updatedHandler, index) => {
     actions[index] = updatedHandler
   }
@@ -54,20 +54,17 @@
 
   const saveEventData = () => {
     dispatch("change", actions)
-    closeModal()
   }
 </script>
 
-<div class="root">
-
-  <div class="header">
-    <Heading small dark>Actions</Heading>
+<ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>
+  <div slot="header">
     <div bind:this={addActionButton}>
       <TextButton text small blue on:click={addActionDropdown.show}>
-        Add Action
         <div style="height: 20px; width: 20px;">
           <AddIcon />
         </div>
+        Add Action
       </TextButton>
     </div>
     <DropdownMenu
@@ -89,11 +86,7 @@
       {#each actions as action, index}
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
-            <p
-              class="bb-body bb-body--small bb-body--color-dark"
-              style="margin: var(--spacing-s) 0;">
-              {index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}
-            </p>
+            <Body small lh>{index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}</Body>
             <div class="row-expander" class:rotate={action !== selectedAction}>
               <ArrowDownIcon />
             </div>
@@ -115,30 +108,12 @@
     {/if}
   </div>
 
-  <div class="footer">
+  <div slot="footer">
     <a href="https://docs.budibase.com">Learn more about Actions</a>
-    <Button secondary on:click={closeModal}>Cancel</Button>
-    <Button primary on:click={saveEventData}>Save</Button>
   </div>
-</div>
+</ModalContent>
 
 <style>
-  .root {
-    max-height: 50vh;
-    width: 700px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-xl);
-    padding-bottom: 0;
-  }
-
   .action-header {
     display: flex;
     flex-direction: row;
@@ -166,8 +141,7 @@
 
   .actions-container {
     flex: 1;
-    min-height: 0px;
-    padding-bottom: var(--spacing-s);
+    min-height: 0;
     padding-top: 0;
     border: var(--border-light);
     border-width: 0 0 1px 0;
@@ -177,10 +151,6 @@
   .action-container {
     border: var(--border-light);
     border-width: 1px 0 0 0;
-    padding-left: var(--spacing-xl);
-    padding-right: var(--spacing-xl);
-    padding-top: 0;
-    padding-bottom: 0;
   }
 
   .selected-action-container {
@@ -195,22 +165,13 @@
     flex-direction: row;
   }
 
-  .footer {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-s);
-    padding: var(--spacing-xl);
-    padding-top: var(--spacing-m);
-  }
-
-  .footer > a {
+  a {
     flex: 1;
     color: var(--grey-5);
     font-size: var(--font-size-s);
     text-decoration: none;
   }
-
-  .footer > a:hover {
+  a:hover {
     color: var(--blue);
   }
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index 52986b0efd..044d0ca5d5 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -1,25 +1,17 @@
 <script>
   import { Button, Modal } from "@budibase/bbui"
   import EventEditorModal from "./EventEditorModal.svelte"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
   export let value
   export let name
 
-  let eventsModal
+  let modal
 </script>
 
-<Button secondary small on:click={eventsModal.show}>Define Actions</Button>
+<Button secondary small on:click={modal.show}>Define Actions</Button>
 
-<Modal bind:this={eventsModal} maxWidth="100vw" hideCloseButton padding="0">
-  <EventEditorModal
-    event={value}
-    eventType={name}
-    on:change
-    on:close={eventsModal.hide} />
+<Modal bind:this={modal} width="600px">
+  <EventEditorModal event={value} eventType={name} on:change />
 </Modal>
-
-<style>
-
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index 0d84a80f38..14e6656381 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -1,29 +1,14 @@
 <script>
-  import { getContext } from "svelte"
-  import {
-    keys,
-    map,
-    some,
-    includes,
-    cloneDeep,
-    isEqual,
-    sortBy,
-    filter,
-    difference,
-  } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import Checkbox from "components/common/Checkbox.svelte"
+  import { keys, map, includes, filter } from "lodash/fp"
   import EventEditorModal from "./EventEditorModal.svelte"
-
-  import { PencilIcon } from "components/common/Icons"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
+  import { Modal } from "@budibase/bbui"
 
   export const EVENT_TYPE = "event"
-
   export let component
 
   let events = []
   let selectedEvent = null
+  let modal
 
   $: {
     events = Object.keys(component)
@@ -35,28 +20,9 @@
       }))
   }
 
-  // Handle create app modal
-  const { open, close } = getContext("simple-modal")
-
   const openModal = event => {
     selectedEvent = event
-    open(
-      EventEditorModal,
-      {
-        eventOptions: events,
-        event: selectedEvent,
-        onClose: () => {
-          close()
-          selectedEvent = null
-        },
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
+    modal.show()
   }
 </script>
 
@@ -81,6 +47,10 @@
   </form>
 </div>
 
+<Modal bind:this={modal} width="600px">
+  <EventEditorModal eventOptions={events} event={selectedEvent} />
+</Modal>
+
 <style>
   .root {
     font-size: 10pt;
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte
index b84dcd58a4..b3a6079284 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte
@@ -60,7 +60,7 @@
     align-items: baseline;
   }
 
-  .root :global(.relative:nth-child(2)) {
+  .root :global(> div:nth-child(2)) {
     grid-column-start: 2;
     grid-column-end: 6;
   }
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
index 659fb954eb..0b4ab2860e 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
@@ -22,7 +22,7 @@
     align-items: baseline;
   }
 
-  .root :global(.relative) {
+  .root :global(> div) {
     flex: 1;
     margin-left: var(--spacing-l);
   }
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
index 6ee3a2aed4..229fec90c5 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
@@ -119,7 +119,7 @@
     align-items: baseline;
   }
 
-  .root :global(.relative:nth-child(2)) {
+  .root :global(> div:nth-child(2)) {
     grid-column-start: 2;
     grid-column-end: 6;
   }
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 41e077ecd6..64c3ee45f4 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -1,57 +1,25 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
+  import { store } from "builderStore"
   import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
-  import NewScreen from "components/userInterface/CreateScreen/NewScreen.svelte"
+  import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
+  import { Button, Spacer, Modal } from "@budibase/bbui"
 
-  const newScreen = () => {
-    newScreenPicker.show()
-  }
-
-  let newScreenPicker
+  let modal
 </script>
 
 <PagesList />
 
-<button class="newscreen" on:click={newScreen}>Create New Screen</button>
-
+<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">
   <ComponentsHierarchy screens={$store.screens} />
 </div>
 
-<NewScreen bind:this={newScreenPicker} />
-
-<style>
-  .newscreen {
-    cursor: pointer;
-    border: 1px solid var(--purple);
-    border-radius: 5px;
-    width: 100%;
-    height: 36px;
-    padding: 8px 16px;
-    margin: 20px 0px 12px 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--purple);
-    color: var(--white);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 3ms;
-    outline: none;
-  }
-
-  .newscreen:hover {
-    background: var(--purple-light);
-    color: var(--purple);
-  }
-
-  .icon {
-    color: var(--ink);
-    font-size: 16px;
-    margin-right: 4px;
-  }
-</style>
+<Modal bind:this={modal}>
+  <NewScreenModal />
+</Modal>
diff --git a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
index 1b48c100c7..5ad1a2c79f 100644
--- a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
@@ -1,6 +1,14 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { TextArea, Label, Body, Button, Popover } from "@budibase/bbui"
+  import {
+    TextArea,
+    Label,
+    Heading,
+    Body,
+    Spacer,
+    Button,
+    Popover,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
@@ -20,11 +28,12 @@
 <Popover {anchor} {align} bind:this={popover}>
   <div class="container">
     <div class="bindings">
-      <Label large>Available bindings</Label>
+      <Heading small>Available bindings</Heading>
       <div class="bindings__wrapper">
         <div class="bindings__list">
           {#each categories as [categoryName, bindings]}
-            <Label small>{categoryName}</Label>
+            <Heading extraSmall>{categoryName}</Heading>
+            <Spacer extraSmall />
             {#each bindings as binding}
               <div class="binding" on:click={() => onClickBinding(binding)}>
                 <span class="binding__label">{binding.label}</span>
@@ -38,14 +47,17 @@
       </div>
     </div>
     <div class="editor">
-      <Label large>Data binding</Label>
-      <Body small>
+      <Heading small>Data binding</Heading>
+      <Body small lh black>
         Binding connects one piece of data to another and makes it dynamic.
         Click the objects on the left to add them to the textbox.
       </Body>
-      <TextArea thin bind:value placeholder="..." />
+      <TextArea
+        thin
+        bind:value
+        placeholder="Add options from the left, type text, or do both" />
       <div class="controls">
-        <a href="#">
+        <a href="https://docs.budibase.com/design/binding">
           <Body small>Learn more about binding</Body>
         </a>
         <Button on:click={popover.hide} primary>Done</Button>
diff --git a/packages/builder/src/components/userInterface/ModelViewSelect.svelte b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
index 605fdfa130..282c6c93f0 100644
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@@ -1,16 +1,16 @@
 <script>
-  import { Button, Icon, DropdownMenu } from "@budibase/bbui"
+  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { backendUiStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
-  let anchor, dropdown
+  let anchorRight, dropdownRight
 
   export let value = {}
 
   function handleSelected(selected) {
     dispatch("change", selected)
-    dropdown.hide()
+    dropdownRight.hide()
   }
 
   const models = $backendUiStore.models.map(m => ({
@@ -30,21 +30,17 @@
   }, [])
 </script>
 
-<div bind:this={anchor}>
-  <Button secondary small on:click={dropdown.show}>
+<div class="dropdownbutton" bind:this={anchorRight}>
+  <Button secondary wide on:click={dropdownRight.show}>
     <span>{value.label ? value.label : 'Model / View'}</span>
     <Icon name="arrowdown" />
   </Button>
 </div>
-<DropdownMenu
-  bind:this={dropdown}
-  width="175px"
-  borderColor="#d1d1d1ff"
-  {anchor}
-  align="right">
-  <div class="model-view-container">
-    <p>Tables</p>
-
+<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+  <div class="dropdown">
+    <div class="title">
+      <Heading extraSmall>Tables</Heading>
+    </div>
     <ul>
       {#each models as model}
         <li
@@ -55,7 +51,9 @@
       {/each}
     </ul>
     <hr />
-    <p>Views</p>
+    <div class="title">
+      <Heading extraSmall>Views</Heading>
+    </div>
     <ul>
       {#each views as view}
         <li
@@ -69,23 +67,19 @@
 </DropdownMenu>
 
 <style>
-  .model-view-container {
-    padding-bottom: 8px;
-    font: var(--smallheavybodytext);
+  .dropdownbutton {
+    width: 100%;
   }
-
-  p {
-    color: var(--grey-7);
-    margin: 0px;
-    padding: 8px;
+  .dropdown {
+    padding: var(--spacing-m) 0;
+    z-index: 99999999;
   }
-
-  span {
-    text-transform: capitalize;
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
   }
 
   hr {
-    margin: 10px 0px 5px 0px;
+    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
   }
 
   ul {
@@ -97,7 +91,8 @@
   li {
     cursor: pointer;
     margin: 0px;
-    padding: 5px 8px;
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
   }
 
   .selected {
diff --git a/packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte b/packages/builder/src/components/userInterface/NewScreenModal.svelte
similarity index 57%
rename from packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte
rename to packages/builder/src/components/userInterface/NewScreenModal.svelte
index 9a48ffe530..d418d83dfe 100644
--- a/packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte
+++ b/packages/builder/src/components/userInterface/NewScreenModal.svelte
@@ -1,22 +1,14 @@
 <script>
   import { store, backendUiStore } from "builderStore"
-  import { Input, Button, Spacer, Select, Modal } from "@budibase/bbui"
+  import { Input, Button, Spacer, Select, ModalContent } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
-  import { createEventDispatcher } from "svelte"
   import { some } from "lodash/fp"
 
-  const dispatch = createEventDispatcher()
   const CONTAINER = "@budibase/standard-components/container"
 
-  export const show = () => {
-    dialog.show()
-  }
-
-  let screens
   let name = ""
   let routeError
   let baseComponent = CONTAINER
-  let dialog
   let templateIndex = 0
   let draftScreen
 
@@ -73,7 +65,6 @@
     name = ""
     route = ""
     baseComponent = CONTAINER
-    dialog.hide()
   }
 
   const routeNameExists = route => {
@@ -99,64 +90,32 @@
   }
 </script>
 
-<Modal bind:this={dialog} minWidth="500px">
+<ModalContent title="New Screen" confirmText="Create Screen" onConfirm={save}>
 
-  <h2>New Screen</h2>
-  <Spacer extraLarge />
+  <Select
+    label="Choose a Template"
+    bind:value={templateIndex}
+    secondary
+    on:change={templateChanged}>
+    {#if templates}
+      {#each templates as template, index}
+        <option value={index}>{template.name}</option>
+      {/each}
+    {/if}
+  </Select>
 
-  <div class="bb-margin-xl">
-    <label>Choose a Template</label>
-    <Select bind:value={templateIndex} secondary on:change={templateChanged}>
-      {#if templates}
-        {#each templates as template, index}
-          <option value={index}>{template.name}</option>
-        {/each}
-      {/if}
-    </Select>
-  </div>
-  <div data-cy="new-screen-dialog">
-    <div class="bb-margin-xl">
-      <Input label="Name" bind:value={name} />
-    </div>
+  <Input label="Name" bind:value={name} />
 
-    <div class="bb-margin-xl">
-      <Input
-        label="Url"
-        error={routeError}
-        bind:value={route}
-        on:change={routeChanged} />
-    </div>
+  <Input
+    label="Url"
+    error={routeError}
+    bind:value={route}
+    on:change={routeChanged} />
 
-    <div class="bb-margin-xl">
-      <label>Screen Type</label>
-      <Select bind:value={baseComponent} secondary>
-        {#each baseComponents as component}
-          <option value={component}>{componentShortName(component)}</option>
-        {/each}
-      </Select>
-    </div>
+  <Select label="Screen Type" bind:value={baseComponent} secondary>
+    {#each baseComponents as component}
+      <option value={component}>{componentShortName(component)}</option>
+    {/each}
+  </Select>
 
-  </div>
-
-  <Spacer extraLarge />
-
-  <div data-cy="create-screen-footer" class="modal-footer">
-    <Button secondary medium on:click={finished}>Cancel</Button>
-    <Button blue medium on:click={save}>Create Screen</Button>
-  </div>
-
-</Modal>
-
-<style>
-  h2 {
-    font-size: var(--font-size-xl);
-    margin: 0;
-    font-family: var(--font-sans);
-    font-weight: 600;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
+</ModalContent>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 395c842122..59cdbd868b 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -10,7 +10,7 @@
   } from "builderStore/replaceBindings"
   import { DropdownMenu } from "@budibase/bbui"
   import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
-  import { onMount, getContext } from "svelte"
+  import { onMount } from "svelte"
 
   export let label = ""
   export let componentInstance = {}
@@ -118,7 +118,7 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    width: 260px;
+    min-width: 260px;
     margin: 8px 0px;
     align-items: center;
   }
@@ -143,13 +143,15 @@
   }
   button {
     position: absolute;
+    cursor: pointer;
     background: none;
     border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: rgb(224, 224, 224);
-    right: 5px;
+    height: 90%;
+    width: 2rem;
+    background: var(--grey-2);
+    right: 10px;
     --spacing-s: 0;
+    border-left: 0.5px solid var(--grey-3);
+    outline-color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 86e5ab90b5..0da68c51d0 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -10,8 +10,6 @@
   export let onStyleChanged = () => {}
   export let open = false
 
-  $: console.log(properties)
-
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 111336bcfe..f0e7360ca3 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import api from "builderStore/api"
@@ -10,7 +9,7 @@
 
   let confirmDeleteDialog
   let dropdown
-  let buttonForDropdown
+  let anchor
 
   const hideDropdown = () => {
     dropdown.hide()
@@ -34,14 +33,17 @@
   }
 </script>
 
-<div class="root boundary" on:click|stopPropagation={() => {}}>
-  <button on:click={() => dropdown.show()} bind:this={buttonForDropdown}>
-    <MoreIcon />
-  </button>
-  <DropdownMenu bind:this={dropdown} anchor={buttonForDropdown}>
-    <ul class="menu" on:click={hideDropdown}>
-      <li class="item" on:click={() => confirmDeleteDialog.show()}>
-        <i class="icon ri-delete-bin-2-line" />
+<div
+  bind:this={anchor}
+  class="root boundary"
+  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>
@@ -71,41 +73,40 @@
     outline: none;
   }
 
-  .menu {
+  ul {
     z-index: 100000;
     overflow: visible;
-    padding: 12px 0px;
-    border-radius: 5px;
-    margin: 0;
+    margin: var(--spacing-s) 0;
+    border-radius: var(--border-radius-s);
+    padding: 0;
   }
 
-  .menu li {
-    border-style: none;
-    background-color: transparent;
-    list-style-type: none;
-    padding: 4px 16px;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .item {
+  li {
     display: flex;
-    align-items: center;
-    font-size: 14px;
-  }
-
-  .icon {
-    margin-right: 8px;
-  }
-
-  .menu li:not(.disabled) {
-    cursor: pointer;
-    color: var(--grey-7);
-  }
-
-  .menu li:not(.disabled):hover {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
     color: var(--ink);
-    background-color: var(--grey-1);
+    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;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 85c8030216..0bf8095e41 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -4,23 +4,21 @@
   import PageLayout from "./PageLayout.svelte"
   import PagesList from "./PagesList.svelte"
   import { store } from "builderStore"
-  import NewScreen from "./NewScreen.svelte"
-  import CurrentItemPreview from "./CurrentItemPreview.svelte"
+  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 = ""
-
-  const newScreen = () => {
-    newScreenPicker.show()
-  }
-
   let settingsView
+  let modal
+
   const settings = () => {
     settingsView.show()
   }
@@ -29,30 +27,24 @@
 </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={newScreen}>
+          <button on:click={modal.show}>
             <AddIcon />
           </button>
         </div>
@@ -61,22 +53,21 @@
         <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>
 
-<NewScreen bind:this={newScreenPicker} />
+<Modal bind:this={modal}>
+  <NewScreenModal />
+</Modal>
+
 <SettingsView bind:this={settingsView} />
 
 <style>
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 8cf9f12230..55a2d2c6c7 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -1,6 +1,6 @@
 export const FIELDS = {
   STRING: {
-    name: "Plain Text",
+    name: "Text",
     icon: "ri-text",
     type: "string",
     constraints: {
@@ -9,6 +9,16 @@ export const FIELDS = {
       presence: false,
     },
   },
+  OPTIONS: {
+    name: "Options",
+    icon: "ri-list-check-2",
+    type: "options",
+    constraints: {
+      type: "string",
+      presence: { allowEmpty: true },
+      inclusion: [],
+    },
+  },
   NUMBER: {
     name: "Number",
     icon: "ri-number-1",
@@ -28,15 +38,6 @@ export const FIELDS = {
       presence: false,
     },
   },
-  // OPTIONS: {
-  //   name: "Options",
-  //   icon: "ri-list-check-2",
-  //   type: "options",
-  //   constraints: {
-  //     type: "string",
-  //     presence: { allowEmpty: true },
-  //   },
-  // },
   DATETIME: {
     name: "Date/Time",
     icon: "ri-calendar-event-fill",
@@ -60,15 +61,15 @@ export const FIELDS = {
       presence: false,
     },
   },
-  // LINKED_FIELDS: {
-  //   name: "Linked Fields",
-  //   icon: "ri-link",
-  //   type: "link",
-  //   modelId: null,
-  //   constraints: {
-  //     type: "array",
-  //   },
-  // },
+  LINK: {
+    name: "Relationship",
+    icon: "ri-link",
+    type: "link",
+    constraints: {
+      type: "array",
+      presence: { allowEmpty: true },
+    },
+  },
 }
 
 export const FILE_TYPES = {
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index ad12dd54e8..e33a46ad2c 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,13 +1,9 @@
 <script>
-  import Modal from "svelte-simple-modal"
   import { store, automationStore, backendUiStore } from "builderStore"
   import SettingsLink from "components/settings/Link.svelte"
   import { get } from "builderStore/api"
-
-  import { fade } from "svelte/transition"
-  import { isActive, goto, layout, url } from "@sveltech/routify"
-
-  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
+  import { isActive, goto, layout } from "@sveltech/routify"
+  import { PreviewIcon } from "components/common/Icons/"
 
   // Get Package and set store
   export let application
@@ -47,50 +43,46 @@
   }
 </script>
 
-<Modal>
-  <div class="root">
+<div class="root">
+  <div class="top-nav">
+    <div class="topleftnav">
+      <button class="home-logo">
+        <img
+          src="/_builder/assets/bb-logo.svg"
+          alt="budibase icon"
+          on:click={() => $goto(`/`)} />
+      </button>
 
-    <div class="top-nav">
-      <div class="topleftnav">
-        <button class="home-logo">
-          <img
-            src="/_builder/assets/bb-logo.svg"
-            alt="budibase icon"
-            on:click={() => $goto(`/`)} />
-        </button>
-
-        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
-        {/each}
-      </div>
-      <div class="toprightnav">
-        <SettingsLink />
+      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+      {#each $layout.children as { path, title }}
         <span
-          class:active={false}
-          class="topnavitemright"
-          on:click={() => window.open(`/${application}`)}>
-          <PreviewIcon />
+          class:active={$isActive(path)}
+          class="topnavitem"
+          on:click={topItemNavigate(path)}>
+          {title}
         </span>
-      </div>
+      {/each}
+    </div>
+    <div class="toprightnav">
+      <SettingsLink />
+      <span
+        class:active={false}
+        class="topnavitemright"
+        on:click={() => window.open(`/${application}`)}>
+        <PreviewIcon />
+      </span>
     </div>
-
-    {#await promise}
-      <!-- This should probably be some kind of loading state? -->
-      <div />
-    {:then}
-      <slot />
-    {:catch error}
-      <p>Something went wrong: {error.message}</p>
-    {/await}
-
   </div>
-</Modal>
+
+  {#await promise}
+    <!-- This should probably be some kind of loading state? -->
+    <div />
+  {:then _}
+    <slot />
+  {:catch error}
+    <p>Something went wrong: {error.message}</p>
+  {/await}
+</div>
 
 <style>
   .root {
@@ -135,10 +127,9 @@
   .topnavitem {
     cursor: pointer;
     color: var(--grey-5);
-    margin: 0px 00px 0px 20px;
-    padding-top: 4px;
+    margin: 0 0 0 20px;
     font-weight: 500;
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-m);
     height: 100%;
     align-items: center;
     box-sizing: border-box;
@@ -157,8 +148,7 @@
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0px 20px 0px 0px;
-    padding-top: 4px;
+    margin: 0 20px 0 0;
     font-weight: 500;
     font-size: 1rem;
     height: 100%;
@@ -183,10 +173,6 @@
     align-items: center;
   }
 
-  .home-logo:hover {
-    color: var(--hovercolor);
-  }
-
   .home-logo:active {
     outline: none;
   }
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index b4fa599f89..95cf31e2c8 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -34,6 +34,6 @@
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-xl) var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 2ace085890..f5a5c4e89c 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -1,8 +1,7 @@
 <script>
-  import { getContext } from "svelte"
   import { store, backendUiStore } from "builderStore"
-  import * as api from "components/database/DataTable/api"
-  import ModelNavigator from "components/nav/ModelNavigator/ModelNavigator.svelte"
+  import * as api from "components/backend/DataTable/api"
+  import ModelNavigator from "components/backend/ModelNavigator/ModelNavigator.svelte"
 </script>
 
 <!-- routify:options index=1 -->
@@ -17,7 +16,7 @@
 
 <style>
   .root {
-    height: 100%;
+    height: calc(100vh - 60px);
     display: grid;
     grid-template-columns: 300px minmax(0, 1fr);
     background: var(--grey-1);
@@ -25,11 +24,12 @@
   }
   .content {
     flex: 1 1 auto;
-    margin: 20px 40px;
+    padding: var(--spacing-xl) 40px;
+    overflow-y: auto;
   }
   .nav {
-    flex: 0 1 auto;
-    width: 300px;
-    height: 100%;
+    overflow-y: auto;
+    background: var(--white);
+    padding: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
index c80dcae5af..c2cf7f6ff9 100644
--- a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
@@ -1,12 +1,6 @@
 <script>
-  import { getContext } from "svelte"
-  import { Button } from "@budibase/bbui"
-  import ModelDataTable from "components/database/DataTable"
+  import ModelDataTable from "components/backend/DataTable/ModelDataTable.svelte"
   import { backendUiStore } from "builderStore"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/DataTable/api"
-
-  const { open, close } = getContext("simple-modal")
 
   $: selectedModel = $backendUiStore.selectedModel
 </script>
@@ -14,12 +8,12 @@
 {#if $backendUiStore.selectedDatabase._id && selectedModel.name}
   <ModelDataTable />
 {:else}
-  <i style="color: var(--grey-4)">create your first table to start building</i>
+  <i>Create your first table to start building</i>
 {/if}
 
 <style>
   i {
-    font-size: 20px;
-    margin-right: 10px;
+    font-size: var(--font-size-xl);
+    color: var(--grey-4);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/[selectedField]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/[selectedField]/index.svelte
new file mode 100644
index 0000000000..c9a1475716
--- /dev/null
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/[selectedField]/index.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { params } from "@sveltech/routify"
+  import RelationshipDataTable from "components/backend/DataTable/RelationshipDataTable.svelte"
+</script>
+
+<RelationshipDataTable
+  modelId={$params.selectedModel}
+  recordId={$params.selectedRecord}
+  fieldName={decodeURI($params.selectedField)} />
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/index.svelte
new file mode 100644
index 0000000000..0ab07a246b
--- /dev/null
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/index.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  $goto("../../")
+</script>
+
+<!-- routify:options index=false -->
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/index.svelte
new file mode 100644
index 0000000000..aa3b39f016
--- /dev/null
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/index.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { goto } from "@sveltech/routify"
+  $goto("../")
+</script>
+
+<!-- routify:options index=false -->
diff --git a/packages/builder/src/pages/[application]/backend/model/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
index d9a69b4250..74e14a5ad4 100644
--- a/packages/builder/src/pages/[application]/backend/model/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
@@ -21,9 +21,7 @@
 </script>
 
 <div class="root">
-  <div class="node-view">
-    <slot />
-  </div>
+  <slot />
 </div>
 
 <style>
@@ -31,9 +29,4 @@
     height: 100%;
     position: relative;
   }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
index 101655ddb9..2e800648e8 100644
--- a/packages/builder/src/pages/[application]/backend/model/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -22,5 +22,14 @@
 </script>
 
 {#if $backendUiStore.models.length === 0}
-  Please create a table
-{:else}Please select a table{/if}
+  <i>Create your first table to start building</i>
+{:else}
+  <i>Select a table to edit</i>
+{/if}
+
+<style>
+  i {
+    font-size: var(--font-size-xl);
+    color: var(--grey-4);
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
index b42b4a2700..8a0c87b98b 100644
--- a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
@@ -1,12 +1,6 @@
 <script>
-  import { getContext } from "svelte"
-  import { Button } from "@budibase/bbui"
-  import ViewDataTable from "components/database/DataTable/ViewDataTable"
+  import ViewDataTable from "components/backend/DataTable/ViewDataTable"
   import { backendUiStore } from "builderStore"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/DataTable/api"
-
-  const { open, close } = getContext("simple-modal")
 
   $: selectedView = $backendUiStore.selectedView
 </script>
@@ -14,13 +8,12 @@
 {#if $backendUiStore.selectedDatabase._id && selectedView}
   <ViewDataTable view={selectedView} />
 {:else}
-  <i>create your first table to start building</i>
+  <i>Create your first table to start building</i>
 {/if}
 
 <style>
   i {
-    font-size: 20px;
-    margin-right: 10px;
+    font-size: var(--font-size-xl);
     color: var(--grey-4);
   }
 </style>
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 8a4346350f..40adf3c76c 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -1,5 +1,4 @@
 <script>
-  import Modal from "svelte-simple-modal"
   import { Home as Link } from "@budibase/bbui"
   import {
     AppsIcon,
@@ -7,43 +6,41 @@
     DocumentationIcon,
     CommunityIcon,
     BugIcon,
-  } from "components/common/Icons/"
+  } from "components/common/Icons"
 </script>
 
-<Modal>
-  <div class="root">
-    <div class="ui-nav">
-      <div class="home-logo">
-        <img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
-      </div>
-
-      <div class="nav-section">
-        <Link icon={AppsIcon} title="Apps" href="/" active />
-        <Link
-          icon={HostingIcon}
-          title="Hosting"
-          href="https://portal.budi.live/" />
-        <Link
-          icon={DocumentationIcon}
-          title="Documentation"
-          href="https://docs.budibase.com/" />
-        <Link
-          icon={CommunityIcon}
-          title="Community"
-          href="https://forum.budibase.com/" />
-
-        <Link
-          icon={BugIcon}
-          title="Raise an issue"
-          href="https://github.com/Budibase/budibase" />
-      </div>
+<div class="root">
+  <div class="ui-nav">
+    <div class="home-logo">
+      <img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
     </div>
 
-    <div class="main">
-      <slot />
+    <div class="nav-section">
+      <Link icon={AppsIcon} title="Apps" href="/" active />
+      <Link
+        icon={HostingIcon}
+        title="Hosting"
+        href="https://portal.budi.live/" />
+      <Link
+        icon={DocumentationIcon}
+        title="Documentation"
+        href="https://docs.budibase.com/" />
+      <Link
+        icon={CommunityIcon}
+        title="Community"
+        href="https://forum.budibase.com/" />
+
+      <Link
+        icon={BugIcon}
+        title="Raise an issue"
+        href="https://github.com/Budibase/budibase" />
     </div>
   </div>
-</Modal>
+
+  <div class="main">
+    <slot />
+  </div>
+</div>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 8bec57be69..a5a799f825 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,17 +1,31 @@
 <script>
-  import { getContext } from "svelte"
   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"
-  import { Button } from "@budibase/bbui"
   import analytics from "analytics"
 
+  let promise = getApps()
   let hasKey
+  let template
+  let modal
+
+  async function getApps() {
+    const res = await get("/api/applications")
+    const json = await res.json()
+
+    if (res.ok) {
+      return json
+    } else {
+      throw new Error(json)
+    }
+  }
 
   async function fetchKeys() {
     const response = await api.get(`/api/keys/`)
@@ -27,62 +41,51 @@
     }
 
     if (!keys.budibase) {
-      showCreateAppModal()
+      modal.show()
     }
   }
 
-  // Handle create app modal
-  const { open } = getContext("simple-modal")
-
-  const showCreateAppModal = template => {
-    open(
-      CreateAppModal,
-      {
-        hasKey,
-        template,
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        closeOnOuterClick: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
+  function selectTemplate(newTemplate) {
+    template = newTemplate
+    modal.show()
   }
 
   checkIfKeysAndApps()
 </script>
 
-<div class="header">
-  <div class="welcome">Welcome to the Budibase Beta</div>
-  <Button primary purple on:click={() => showCreateAppModal()}>
-    Create New Web App
-  </Button>
-</div>
-
-<div class="banner">
-  <img src="/_builder/assets/orange-landscape.png" alt="rocket" />
-  <div class="banner-content">
-    Every accomplishment starts with a decision to try.
+<div class="container">
+  <div class="header">
+    <Heading medium black>Welcome to the Budibase Beta</Heading>
+    <Button primary purple on:click={modal.show}>Create New Web App</Button>
   </div>
+
+  <div class="banner">
+    <img src="/_builder/assets/orange-landscape.png" alt="rocket" />
+    <div class="banner-content">
+      Every accomplishment starts with a decision to try.
+    </div>
+  </div>
+
+  <TemplateList onSelect={selectTemplate} />
+
+  <AppList />
 </div>
 
-<TemplateList onSelect={showCreateAppModal} />
-<AppList />
+<Modal bind:this={modal} padding={false} width="600px">
+  <CreateAppModal {hasKey} {template} />
+</Modal>
 
 <style>
+  .container {
+    display: grid;
+    gap: var(--spacing-xl);
+    margin: 40px 80px;
+  }
+
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 40px 80px 0px 80px;
-  }
-
-  .welcome {
-    font-size: var(--font-size-3xl);
-    color: var(--ink);
-    font-weight: 600;
   }
 
   .banner {
@@ -92,7 +95,6 @@
     position: relative;
     text-align: center;
     color: white;
-    margin: 20px 80px 40px 80px;
     border-radius: 16px;
   }
 
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index c7ab89dcd6..05b6eed9b8 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -709,13 +709,23 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.34.6":
-  version "1.34.6"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.34.6.tgz#d94a9c0af52244ded20dfcd7c93dbd6b184460dc"
-  integrity sha512-FLYKst1WDjQWpZPOm5w31M5mpdc4FZaHNT5UPyE+LTOtVJquUPycyS1Y/lhGjt/QjwP/Gn8wSvwwsD0gCNJvvg==
+"@budibase/bbui@^1.41.0":
+  version "1.41.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce"
+  integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
+    svelte-portal "^1.0.0"
+
+"@budibase/client@^0.1.25":
+  version "0.1.25"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.25.tgz#f08c4a614f9018eb0f0faa6d20bb05f7a3215c70"
+  integrity sha512-vZ0cqJwLYcs7MHihFnJO3qOe7qxibnB4Va1+IYNfnPc9kcxy4KvfQxCx/G/DDxP9CXfEvsguy9ymzR3RUAvBHw==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
 
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
@@ -1393,6 +1403,11 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+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-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1447,6 +1462,13 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+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-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2396,6 +2418,26 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+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-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2565,6 +2607,54 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  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==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.1"
+    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:
+  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==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.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"
@@ -2871,7 +2961,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@~2.0.1:
+foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3245,16 +3335,31 @@ 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"
 
+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"
   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"
@@ -3263,6 +3368,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
+is-callable@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
+  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3281,7 +3391,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+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"
 
@@ -3346,10 +3456,25 @@ is-installed-globally@^0.3.2:
     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-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
+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"
@@ -3406,6 +3531,18 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+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"
@@ -3414,16 +3551,41 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
+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"
   dependencies:
     has-symbols "^1.0.1"
 
+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:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
+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"
@@ -3444,6 +3606,11 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+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==
+
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4563,6 +4730,19 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
+object-inspect@^1.8.0:
+  version "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.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4594,6 +4774,16 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
+  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.0"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
 object.getownpropertydescriptors@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
@@ -5074,6 +5264,19 @@ 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==
+
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5481,6 +5684,14 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
+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"
@@ -5707,7 +5918,7 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5730,7 +5941,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -5844,9 +6055,10 @@ svelte-portal@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
 
-svelte-simple-modal@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.4.2.tgz#2cfe26ec8c0760b89813d65dfee836399620d6b2"
+svelte-portal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
+  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
 svelte@^3.24.1:
   version "3.25.1"
@@ -6185,10 +6397,43 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
+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"
 
+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/server/package.json b/packages/server/package.json
index bcf79f73bf..7cb434c696 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@jest/test-sequencer": "^24.8.0",
-    "electron": "8.2.5",
+    "electron": "10.1.3",
     "electron-builder": "^22.7.0",
     "electron-builder-notarize": "^1.1.2",
     "eslint": "^6.8.0",
diff --git a/packages/server/src/api/controllers/client.js b/packages/server/src/api/controllers/client.js
index 400ccde358..31f901001a 100644
--- a/packages/server/src/api/controllers/client.js
+++ b/packages/server/src/api/controllers/client.js
@@ -25,7 +25,7 @@ const getClientId = ctx => {
     (ctx.body && ctx.body.clientId) ||
     env.CLIENT_ID
   if (!clientId) {
-    ctx.throw(400, "ClientId not suplied")
+    ctx.throw(400, "ClientId not supplied")
   }
   return clientId
 }
diff --git a/packages/server/src/api/controllers/instance.js b/packages/server/src/api/controllers/instance.js
index f97eb6cdd3..2c11713c91 100644
--- a/packages/server/src/api/controllers/instance.js
+++ b/packages/server/src/api/controllers/instance.js
@@ -2,6 +2,7 @@ const fs = require("fs")
 const CouchDB = require("../../db")
 const client = require("../../db/clientDb")
 const newid = require("../../db/newid")
+const { createLinkView } = require("../../db/linkedRecords")
 const { join } = require("../../utilities/sanitisedPath")
 const { downloadTemplate } = require("../../utilities/templates")
 
@@ -22,8 +23,12 @@ exports.create = async function(ctx) {
       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 records
+  await createLinkView(instanceId)
 
   // Add the new instance under the app clientDB
   const clientDb = new CouchDB(client.name(clientId))
diff --git a/packages/server/src/api/controllers/model.js b/packages/server/src/api/controllers/model.js
index c2e2c2e236..c8a2a112da 100644
--- a/packages/server/src/api/controllers/model.js
+++ b/packages/server/src/api/controllers/model.js
@@ -1,4 +1,5 @@
 const CouchDB = require("../../db")
+const linkRecords = require("../../db/linkedRecords")
 const csvParser = require("../../utilities/csvParser")
 const {
   getRecordParams,
@@ -23,7 +24,8 @@ exports.find = async function(ctx) {
 }
 
 exports.save = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   const { dataImport, ...rest } = ctx.request.body
   const modelToSave = {
     type: "model",
@@ -31,15 +33,31 @@ exports.save = async function(ctx) {
     views: {},
     ...rest,
   }
+  // get the model in its previous state for differencing
+  let oldModel
+  let oldModelId = ctx.request.body._id
+  if (oldModelId) {
+    // if it errors then the oldModelId is invalid - can't diff it
+    try {
+      oldModel = await db.get(oldModelId)
+    } catch (err) {
+      oldModel = null
+    }
+  }
 
   // rename record fields when table column is renamed
   const { _rename } = modelToSave
-  if (_rename) {
+  if (_rename && modelToSave.schema[_rename.updated].type === "link") {
+    throw "Cannot rename a linked field."
+  } else if (_rename && modelToSave.primaryDisplay === _rename.old) {
+    throw "Cannot rename the primary display field."
+  } else if (_rename) {
     const records = await db.allDocs(
       getRecordParams(modelToSave._id, null, {
         include_docs: true,
       })
     )
+
     const docs = records.rows.map(({ doc }) => {
       doc[_rename.updated] = doc[_rename.old]
       delete doc[_rename.old]
@@ -62,23 +80,18 @@ exports.save = async function(ctx) {
   const result = await db.post(modelToSave)
   modelToSave._rev = result.rev
 
-  const { schema } = ctx.request.body
-  for (let key of Object.keys(schema)) {
-    // model has a linked record
-    if (schema[key].type === "link") {
-      // create the link field in the other model
-      const linkedModel = await db.get(schema[key].modelId)
-      linkedModel.schema[modelToSave.name] = {
-        name: modelToSave.name,
-        type: "link",
-        modelId: modelToSave._id,
-        constraints: {
-          type: "array",
-        },
-      }
-      await db.put(linkedModel)
-    }
-  }
+  // update linked records
+  await linkRecords.updateLinks({
+    instanceId,
+    eventType: oldModel
+      ? linkRecords.EventType.MODEL_UPDATED
+      : linkRecords.EventType.MODEL_SAVE,
+    model: modelToSave,
+    oldModel: oldModel,
+  })
+
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emitModel(`model:save`, instanceId, modelToSave)
 
   if (dataImport && dataImport.path) {
     // Populate the table with records imported from CSV in a bulk update
@@ -98,7 +111,8 @@ exports.save = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
 
   const modelToDelete = await db.get(ctx.params.modelId)
 
@@ -114,16 +128,15 @@ exports.destroy = async function(ctx) {
     records.rows.map(record => ({ _id: record.id, _deleted: true }))
   )
 
-  // Delete linked record fields in dependent models
-  for (let key of Object.keys(modelToDelete.schema)) {
-    const { type, modelId } = modelToDelete.schema[key]
-    if (type === "link") {
-      const linkedModel = await db.get(modelId)
-      delete linkedModel.schema[modelToDelete.name]
-      await db.put(linkedModel)
-    }
-  }
+  // update linked records
+  await linkRecords.updateLinks({
+    instanceId,
+    eventType: linkRecords.EventType.MODEL_DELETE,
+    model: modelToDelete,
+  })
 
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emitModel(`model:delete`, instanceId, modelToDelete)
   ctx.status = 200
   ctx.message = `Model ${ctx.params.modelId} deleted.`
 }
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 58327d0d2f..e7718665e2 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -1,25 +1,11 @@
 const CouchDB = require("../../db")
 const validateJs = require("validate.js")
+const linkRecords = require("../../db/linkedRecords")
 const { getRecordParams, generateRecordID } = require("../../db/utils")
 const { cloneDeep } = require("lodash")
 
 const MODEL_VIEW_BEGINS_WITH = "all_model:"
 
-function emitEvent(eventType, ctx, record) {
-  let event = {
-    record,
-    instanceId: ctx.user.instanceId,
-  }
-  // add syntactic sugar for mustache later
-  if (record._id) {
-    event.id = record._id
-  }
-  if (record._rev) {
-    event.revision = record._rev
-  }
-  ctx.eventEmitter && ctx.eventEmitter.emit(eventType, event)
-}
-
 validateJs.extend(validateJs.validators.datetime, {
   parse: function(value) {
     return new Date(value).getTime()
@@ -31,14 +17,14 @@ validateJs.extend(validateJs.validators.datetime, {
 })
 
 exports.patch = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   let record = await db.get(ctx.params.id)
   const model = await db.get(record.modelId)
   const patchfields = ctx.request.body
-
   record = coerceRecordValues(record, model)
 
-  for (let key in patchfields) {
+  for (let key of Object.keys(patchfields)) {
     if (!model.schema[key]) continue
     record[key] = patchfields[key]
   }
@@ -57,16 +43,28 @@ exports.patch = async function(ctx) {
     return
   }
 
+  // returned record is cleaned and prepared for writing to DB
+  record = await linkRecords.updateLinks({
+    instanceId,
+    eventType: linkRecords.EventType.RECORD_UPDATE,
+    record,
+    modelId: record.modelId,
+    model,
+  })
   const response = await db.put(record)
   record._rev = response.rev
   record.type = "record"
+
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emitRecord(`record:update`, instanceId, record, model)
   ctx.body = record
   ctx.status = 200
   ctx.message = `${model.name} updated successfully.`
 }
 
 exports.save = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   let record = ctx.request.body
   record.modelId = ctx.params.modelId
 
@@ -94,6 +92,15 @@ exports.save = async function(ctx) {
 
   const existingRecord = record._rev && (await db.get(record._id))
 
+  // make sure link records are up to date
+  record = await linkRecords.updateLinks({
+    instanceId,
+    eventType: linkRecords.EventType.RECORD_SAVE,
+    record,
+    modelId: record.modelId,
+    model,
+  })
+
   if (existingRecord) {
     const response = await db.put(record)
     record._rev = response.rev
@@ -108,37 +115,16 @@ exports.save = async function(ctx) {
   const response = await db.post(record)
   record._rev = response.rev
 
-  // create links in other tables
-  for (let key in record) {
-    if (model.schema[key] && model.schema[key].type === "link") {
-      const linked = await db.allDocs({
-        include_docs: true,
-        keys: record[key],
-      })
-
-      // add this record to the linked records in attached models
-      const linkedDocs = linked.rows.map(row => {
-        const doc = row.doc
-        return {
-          ...doc,
-          [model.name]: doc[model.name]
-            ? [...doc[model.name], record._id]
-            : [record._id],
-        }
-      })
-
-      await db.bulkDocs(linkedDocs)
-    }
-  }
-
-  emitEvent(`record:save`, ctx, record)
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emitRecord(`record:save`, instanceId, record, model)
   ctx.body = record
   ctx.status = 200
   ctx.message = `${model.name} created successfully`
 }
 
 exports.fetchView = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   const { stats, group, field } = ctx.query
   const viewName = ctx.params.viewName
 
@@ -165,50 +151,69 @@ exports.fetchView = async function(ctx) {
     response.rows = response.rows.map(row => row.doc)
   }
 
-  ctx.body = response.rows
+  ctx.body = await linkRecords.attachLinkInfo(instanceId, response.rows)
 }
 
 exports.fetchModelRecords = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   const response = await db.allDocs(
     getRecordParams(ctx.params.modelId, null, {
       include_docs: true,
     })
   )
   ctx.body = response.rows.map(row => row.doc)
+  ctx.body = await linkRecords.attachLinkInfo(
+    instanceId,
+    response.rows.map(row => row.doc)
+  )
 }
 
 exports.search = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   const response = await db.allDocs({
     include_docs: true,
     ...ctx.request.body,
   })
-  ctx.body = response.rows.map(row => row.doc)
+  ctx.body = await linkRecords.attachLinkInfo(
+    instanceId,
+    response.rows.map(row => row.doc)
+  )
 }
 
 exports.find = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   const record = await db.get(ctx.params.recordId)
   if (record.modelId !== ctx.params.modelId) {
     ctx.throw(400, "Supplied modelId does not match the records modelId")
     return
   }
-  ctx.body = record
+  ctx.body = await linkRecords.attachLinkInfo(instanceId, record)
 }
 
 exports.destroy = async function(ctx) {
-  const db = new CouchDB(ctx.user.instanceId)
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
   const record = await db.get(ctx.params.recordId)
   if (record.modelId !== ctx.params.modelId) {
     ctx.throw(400, "Supplied modelId doesn't match the record's modelId")
     return
   }
+  await linkRecords.updateLinks({
+    instanceId,
+    eventType: linkRecords.EventType.RECORD_DELETE,
+    record,
+    modelId: record.modelId,
+  })
   ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId)
   ctx.status = 200
-  // for automations
+
+  // for automations include the record that was deleted
   ctx.record = record
-  emitEvent(`record:delete`, ctx, record)
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emitRecord(`record:delete`, instanceId, record)
 }
 
 exports.validate = async function(ctx) {
@@ -227,7 +232,7 @@ async function validate({ instanceId, modelId, record, model }) {
     model = await db.get(modelId)
   }
   const errors = {}
-  for (let fieldName in model.schema) {
+  for (let fieldName of Object.keys(model.schema)) {
     const res = validateJs.single(
       record[fieldName],
       model.schema[fieldName].constraints
@@ -237,6 +242,51 @@ async function validate({ instanceId, modelId, record, model }) {
   return { valid: Object.keys(errors).length === 0, errors }
 }
 
+exports.fetchEnrichedRecord = async function(ctx) {
+  const instanceId = ctx.user.instanceId
+  const db = new CouchDB(instanceId)
+  const modelId = ctx.params.modelId
+  const recordId = ctx.params.recordId
+  if (instanceId == null || modelId == null || recordId == null) {
+    ctx.status = 400
+    ctx.body = {
+      status: 400,
+      error:
+        "Cannot handle request, URI params have not been successfully prepared.",
+    }
+    return
+  }
+  // need model to work out where links go in record
+  const [model, record] = await Promise.all([db.get(modelId), db.get(recordId)])
+  // get the link docs
+  const linkVals = await linkRecords.getLinkDocuments({
+    instanceId,
+    modelId,
+    recordId,
+  })
+  // look up the actual records based on the ids
+  const response = await db.allDocs({
+    include_docs: true,
+    keys: linkVals.map(linkVal => linkVal.id),
+  })
+  // need to include the IDs in these records for any links they may have
+  let linkedRecords = await linkRecords.attachLinkInfo(
+    instanceId,
+    response.rows.map(row => row.doc)
+  )
+  // insert the link records in the correct place throughout the main record
+  for (let fieldName of Object.keys(model.schema)) {
+    let field = model.schema[fieldName]
+    if (field.type === "link") {
+      record[fieldName] = linkedRecords.filter(
+        linkRecord => linkRecord.modelId === field.modelId
+      )
+    }
+  }
+  ctx.body = record
+  ctx.status = 200
+}
+
 function coerceRecordValues(rec, model) {
   const record = cloneDeep(rec)
   for (let [key, value] of Object.entries(record)) {
@@ -254,6 +304,16 @@ function coerceRecordValues(rec, model) {
 }
 
 const TYPE_TRANSFORM_MAP = {
+  link: {
+    "": [],
+    [null]: [],
+    [undefined]: undefined,
+  },
+  options: {
+    "": "",
+    [null]: "",
+    [undefined]: undefined,
+  },
   string: {
     "": "",
     [null]: "",
diff --git a/packages/server/src/api/controllers/view/index.js b/packages/server/src/api/controllers/view/index.js
index 145ea31864..140bd4bf40 100644
--- a/packages/server/src/api/controllers/view/index.js
+++ b/packages/server/src/api/controllers/view/index.js
@@ -4,6 +4,7 @@ const fs = require("fs")
 const { join } = require("../../../utilities/sanitisedPath")
 const os = require("os")
 const exporters = require("./exporters")
+const { fetchView } = require("../record")
 
 const controller = {
   fetch: async ctx => {
@@ -12,6 +13,10 @@ const controller = {
     const response = []
 
     for (let name of Object.keys(designDoc.views)) {
+      // Only return custom views
+      if (name === "by_link") {
+        continue
+      }
       response.push({
         name,
         ...designDoc.views[name],
@@ -77,34 +82,23 @@ const controller = {
     ctx.message = `View ${ctx.params.viewName} saved successfully.`
   },
   exportView: async ctx => {
-    const db = new CouchDB(ctx.user.instanceId)
     const view = ctx.request.body
     const format = ctx.query.format
 
-    // fetch records for the view
-    const response = await db.query(`database/${view.name}`, {
-      include_docs: !view.calculation,
-      group: view.groupBy,
-    })
-
-    if (view.calculation === "stats") {
-      response.rows = response.rows.map(row => ({
-        group: row.key,
-        field: view.field,
-        ...row.value,
-        avg: row.value.sum / row.value.count,
-      }))
-    } else {
-      response.rows = response.rows.map(row => row.doc)
+    // Fetch view records
+    ctx.params.viewName = view.name
+    ctx.query.group = view.groupBy
+    if (view.field) {
+      ctx.query.stats = true
+      ctx.query.field = view.field
     }
+    await fetchView(ctx)
 
+    // Export part
     let headers = Object.keys(view.schema)
-
     const exporter = exporters[format]
-    const exportedFile = exporter(headers, response.rows)
-
+    const exportedFile = exporter(headers, ctx.body)
     const filename = `${view.name}.${format}`
-
     fs.writeFileSync(join(os.tmpdir(), filename), exportedFile)
 
     ctx.body = {
diff --git a/packages/server/src/api/routes/record.js b/packages/server/src/api/routes/record.js
index e291a153ce..ddc26a55af 100644
--- a/packages/server/src/api/routes/record.js
+++ b/packages/server/src/api/routes/record.js
@@ -6,6 +6,11 @@ const { READ_MODEL, WRITE_MODEL } = require("../../utilities/accessLevels")
 const router = Router()
 
 router
+  .get(
+    "/api/:modelId/:recordId/enrich",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.fetchEnrichedRecord
+  )
   .get(
     "/api/:modelId/records",
     authorized(READ_MODEL, ctx => ctx.params.modelId),
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index a0b5185000..4cc533e1da 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -45,7 +45,7 @@ describe("/models", () => {
         .expect(200)
         .end(async (err, res) => {
             expect(res.res.statusMessage).toEqual("Model TestModel saved successfully.");            
-            expect(res.body.name).toEqual("TestModel");            
+            expect(res.body.name).toEqual("TestModel");
             done();
         });
       })
@@ -201,10 +201,10 @@ describe("/models", () => {
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
-            expect(res.res.statusMessage).toEqual(`Model ${testModel._id} deleted.`);            
-            const dependentModel = await getDocument(instance._id, linkedModel._id)
-            expect(dependentModel.schema.TestModel).not.toBeDefined();
-            done();
+          expect(res.res.statusMessage).toEqual(`Model ${testModel._id} deleted.`);
+          const dependentModel = await getDocument(instance._id, linkedModel._id)
+          expect(dependentModel.schema.TestModel).not.toBeDefined();
+          done();
         });
       })
 
diff --git a/packages/server/src/automations/queue/inMemoryQueue.js b/packages/server/src/automations/queue/inMemoryQueue.js
deleted file mode 100644
index 927eeb60b6..0000000000
--- a/packages/server/src/automations/queue/inMemoryQueue.js
+++ /dev/null
@@ -1,44 +0,0 @@
-let events = require("events")
-
-// Bull works with a Job wrapper around all messages that contains a lot more information about
-// the state of the message, implement this for the sake of maintaining API consistency
-function newJob(queue, message) {
-  return {
-    timestamp: Date.now(),
-    queue: queue,
-    data: message,
-  }
-}
-
-// designed to replicate Bull (https://github.com/OptimalBits/bull) in memory as a sort of mock
-class InMemoryQueue {
-  // opts is not used by this as there is no real use case when in memory, but is the same API as Bull
-  constructor(name, opts) {
-    this._name = name
-    this._opts = opts
-    this._messages = []
-    this._emitter = new events.EventEmitter()
-  }
-
-  // same API as bull, provide a callback and it will respond when messages are available
-  process(func) {
-    this._emitter.on("message", async () => {
-      if (this._messages.length <= 0) {
-        return
-      }
-      let msg = this._messages.shift()
-      let resp = func(msg)
-      if (resp.then != null) {
-        await resp
-      }
-    })
-  }
-
-  // simply puts a message to the queue and emits to the queue for processing
-  add(msg) {
-    this._messages.push(newJob(this._name, msg))
-    this._emitter.emit("message")
-  }
-}
-
-module.exports = InMemoryQueue
diff --git a/packages/server/src/automations/steps/createRecord.js b/packages/server/src/automations/steps/createRecord.js
index 379aaa02b4..d0d6a36f5a 100644
--- a/packages/server/src/automations/steps/createRecord.js
+++ b/packages/server/src/automations/steps/createRecord.js
@@ -2,10 +2,10 @@ const recordController = require("../../api/controllers/record")
 const automationUtils = require("../automationUtils")
 
 module.exports.definition = {
-  name: "Create Record",
-  tagline: "Create a {{inputs.enriched.model.name}} record",
+  name: "Create Row",
+  tagline: "Create a {{inputs.enriched.model.name}} row",
   icon: "ri-save-3-fill",
-  description: "Create a record to your database",
+  description: "Add a row to your database",
   type: "ACTION",
   stepId: "CREATE_RECORD",
   inputs: {},
@@ -32,7 +32,7 @@ module.exports.definition = {
         record: {
           type: "object",
           customType: "record",
-          description: "The new record",
+          description: "The new row",
         },
         response: {
           type: "object",
@@ -44,11 +44,11 @@ module.exports.definition = {
         },
         id: {
           type: "string",
-          description: "The identifier of the new record",
+          description: "The identifier of the new row",
         },
         revision: {
           type: "string",
-          description: "The revision of the new record",
+          description: "The revision of the new row",
         },
       },
       required: ["success", "id", "revision"],
diff --git a/packages/server/src/automations/steps/deleteRecord.js b/packages/server/src/automations/steps/deleteRecord.js
index cf66ff0ba3..0a02099bd4 100644
--- a/packages/server/src/automations/steps/deleteRecord.js
+++ b/packages/server/src/automations/steps/deleteRecord.js
@@ -1,10 +1,10 @@
 const recordController = require("../../api/controllers/record")
 
 module.exports.definition = {
-  description: "Delete a record from your database",
+  description: "Delete a row from your database",
   icon: "ri-delete-bin-line",
-  name: "Delete Record",
-  tagline: "Delete a {{inputs.enriched.model.name}} record",
+  name: "Delete Row",
+  tagline: "Delete a {{inputs.enriched.model.name}} row",
   type: "ACTION",
   stepId: "DELETE_RECORD",
   inputs: {},
@@ -18,11 +18,11 @@ module.exports.definition = {
         },
         id: {
           type: "string",
-          title: "Record ID",
+          title: "Row ID",
         },
         revision: {
           type: "string",
-          title: "Record Revision",
+          title: "Row Revision",
         },
       },
       required: ["modelId", "id", "revision"],
@@ -32,7 +32,7 @@ module.exports.definition = {
         record: {
           type: "object",
           customType: "record",
-          description: "The deleted record",
+          description: "The deleted row",
         },
         response: {
           type: "object",
diff --git a/packages/server/src/automations/steps/updateRecord.js b/packages/server/src/automations/steps/updateRecord.js
index c6608f0726..403af5e5cd 100644
--- a/packages/server/src/automations/steps/updateRecord.js
+++ b/packages/server/src/automations/steps/updateRecord.js
@@ -2,10 +2,10 @@ const recordController = require("../../api/controllers/record")
 const automationUtils = require("../automationUtils")
 
 module.exports.definition = {
-  name: "Update Record",
+  name: "Update Row",
   tagline: "Update a {{inputs.enriched.model.name}} record",
   icon: "ri-refresh-fill",
-  description: "Update a record to your database",
+  description: "Update a row in your database",
   type: "ACTION",
   stepId: "UPDATE_RECORD",
   inputs: {},
@@ -15,11 +15,11 @@ module.exports.definition = {
         record: {
           type: "object",
           customType: "record",
-          title: "Record",
+          title: "Table",
         },
         recordId: {
           type: "string",
-          title: "Record ID",
+          title: "Row ID",
         },
       },
       required: ["record", "recordId"],
diff --git a/packages/server/src/automations/triggers.js b/packages/server/src/automations/triggers.js
index 7da4ae3616..44bf8b14f6 100644
--- a/packages/server/src/automations/triggers.js
+++ b/packages/server/src/automations/triggers.js
@@ -1,9 +1,9 @@
 const CouchDB = require("../db")
 const emitter = require("../events/index")
-const InMemoryQueue = require("./queue/inMemoryQueue")
+const InMemoryQueue = require("../utilities/queue/inMemoryQueue")
 const { getAutomationParams } = require("../db/utils")
 
-let automationQueue = new InMemoryQueue()
+let automationQueue = new InMemoryQueue("automationQueue")
 
 const FAKE_STRING = "TEST"
 const FAKE_BOOL = false
@@ -12,11 +12,11 @@ const FAKE_DATETIME = "1970-01-01T00:00:00.000Z"
 
 const BUILTIN_DEFINITIONS = {
   RECORD_SAVED: {
-    name: "Record Saved",
+    name: "Row Saved",
     event: "record:save",
     icon: "ri-save-line",
-    tagline: "Record is added to {{inputs.enriched.model.name}}",
-    description: "Fired when a record is saved to your database",
+    tagline: "Row is added to {{inputs.enriched.model.name}}",
+    description: "Fired when a row is saved to your database",
     stepId: "RECORD_SAVED",
     inputs: {},
     schema: {
@@ -35,15 +35,15 @@ const BUILTIN_DEFINITIONS = {
           record: {
             type: "object",
             customType: "record",
-            description: "The new record that was saved",
+            description: "The new row that was saved",
           },
           id: {
             type: "string",
-            description: "Record ID - can be used for updating",
+            description: "Row ID - can be used for updating",
           },
           revision: {
             type: "string",
-            description: "Revision of record",
+            description: "Revision of row",
           },
         },
         required: ["record", "id"],
@@ -52,11 +52,11 @@ const BUILTIN_DEFINITIONS = {
     type: "TRIGGER",
   },
   RECORD_DELETED: {
-    name: "Record Deleted",
+    name: "Row Deleted",
     event: "record:delete",
     icon: "ri-delete-bin-line",
-    tagline: "Record is deleted from {{inputs.enriched.model.name}}",
-    description: "Fired when a record is deleted from your database",
+    tagline: "Row is deleted from {{inputs.enriched.model.name}}",
+    description: "Fired when a row is deleted from your database",
     stepId: "RECORD_DELETED",
     inputs: {},
     schema: {
@@ -75,7 +75,7 @@ const BUILTIN_DEFINITIONS = {
           record: {
             type: "object",
             customType: "record",
-            description: "The record that was deleted",
+            description: "The row that was deleted",
           },
         },
         required: ["record", "id"],
diff --git a/packages/server/src/db/linkedRecords/LinkController.js b/packages/server/src/db/linkedRecords/LinkController.js
new file mode 100644
index 0000000000..b006e798c2
--- /dev/null
+++ b/packages/server/src/db/linkedRecords/LinkController.js
@@ -0,0 +1,307 @@
+const CouchDB = require("../index")
+const { IncludeDocs, getLinkDocuments } = require("./linkUtils")
+const { generateLinkID } = require("../utils")
+
+/**
+ * Creates a new link document structure which can be put to the database. It is important to
+ * note that while this talks about linker/linked the link is bi-directional and for all intent
+ * and purposes it does not matter from which direction the link was initiated.
+ * @param {string} modelId1 The ID of the first model (the linker).
+ * @param {string} modelId2 The ID of the second model (the linked).
+ * @param {string} fieldName1 The name of the field in the linker table.
+ * @param {string} fieldName2 The name of the field in the linked table.
+ * @param {string} recordId1 The ID of the record which is acting as the linker.
+ * @param {string} recordId2 The ID of the record which is acting as the linked.
+ * @constructor
+ */
+function LinkDocument(
+  modelId1,
+  fieldName1,
+  recordId1,
+  modelId2,
+  fieldName2,
+  recordId2
+) {
+  // build the ID out of unique references to this link document
+  this._id = generateLinkID(modelId1, modelId2, recordId1, recordId2)
+  // required for referencing in view
+  this.type = "link"
+  this.doc1 = {
+    modelId: modelId1,
+    fieldName: fieldName1,
+    recordId: recordId1,
+  }
+  this.doc2 = {
+    modelId: modelId2,
+    fieldName: fieldName2,
+    recordId: recordId2,
+  }
+}
+
+class LinkController {
+  constructor({ instanceId, modelId, record, model, oldModel }) {
+    this._instanceId = instanceId
+    this._db = new CouchDB(instanceId)
+    this._modelId = modelId
+    this._record = record
+    this._model = model
+    this._oldModel = oldModel
+  }
+
+  /**
+   * Retrieves the model, if it was not already found in the eventData.
+   * @returns {Promise<object>} This will return a model based on the event data, either
+   * if it was in the event already, or it uses the specified modelId to get it.
+   */
+  async model() {
+    if (this._model == null) {
+      this._model =
+        this._model == null ? await this._db.get(this._modelId) : this._model
+    }
+    return this._model
+  }
+
+  /**
+   * Checks if the model this was constructed with has any linking columns currently.
+   * If the model has not been retrieved this will retrieve it based on the eventData.
+   * @params {object|null} model If a model that is not known to the link controller is to be tested.
+   * @returns {Promise<boolean>} True if there are any linked fields, otherwise it will return
+   * false.
+   */
+  async doesModelHaveLinkedFields(model = null) {
+    if (model == null) {
+      model = await this.model()
+    }
+    for (let fieldName of Object.keys(model.schema)) {
+      const { type } = model.schema[fieldName]
+      if (type === "link") {
+        return true
+      }
+    }
+    return false
+  }
+
+  /**
+   * Utility function for main getLinkDocuments function - refer to it for functionality.
+   */
+  getRecordLinkDocs(recordId) {
+    return getLinkDocuments({
+      instanceId: this._instanceId,
+      modelId: this._modelId,
+      recordId,
+      includeDocs: IncludeDocs.INCLUDE,
+    })
+  }
+
+  /**
+   * Utility function for main getLinkDocuments function - refer to it for functionality.
+   */
+  getModelLinkDocs() {
+    return getLinkDocuments({
+      instanceId: this._instanceId,
+      modelId: this._modelId,
+      includeDocs: IncludeDocs.INCLUDE,
+    })
+  }
+
+  // all operations here will assume that the model
+  // this operation is related to has linked records
+  /**
+   * When a record is saved this will carry out the necessary operations to make sure
+   * the link has been created/updated.
+   * @returns {Promise<object>} returns the record that has been cleaned and prepared to be written to the DB - links
+   * have also been created.
+   */
+  async recordSaved() {
+    const model = await this.model()
+    const record = this._record
+    const operations = []
+    // get link docs to compare against
+    const linkDocs = await this.getRecordLinkDocs(record._id)
+    for (let fieldName of Object.keys(model.schema)) {
+      // get the links this record wants to make
+      const recordField = record[fieldName]
+      const field = model.schema[fieldName]
+      if (field.type === "link" && recordField != null) {
+        // check which links actual pertain to the update in this record
+        const thisFieldLinkDocs = linkDocs.filter(
+          linkDoc =>
+            linkDoc.doc1.fieldName === fieldName ||
+            linkDoc.doc2.fieldName === fieldName
+        )
+        const linkDocIds = thisFieldLinkDocs.map(linkDoc => {
+          return linkDoc.doc1.recordId === record._id
+            ? linkDoc.doc2.recordId
+            : linkDoc.doc1.recordId
+        })
+        // iterate through the link IDs in the record field, see if any don't exist already
+        for (let linkId of recordField) {
+          if (linkId && linkId !== "" && linkDocIds.indexOf(linkId) === -1) {
+            operations.push(
+              new LinkDocument(
+                model._id,
+                fieldName,
+                record._id,
+                field.modelId,
+                field.fieldName,
+                linkId
+              )
+            )
+          }
+        }
+        // find the docs that need to be deleted
+        let toDeleteDocs = thisFieldLinkDocs
+          .filter(doc => {
+            let correctDoc =
+              doc.doc1.fieldName === fieldName ? doc.doc2 : doc.doc1
+            return recordField.indexOf(correctDoc.recordId) === -1
+          })
+          .map(doc => {
+            return { ...doc, _deleted: true }
+          })
+        // now add the docs to be deleted to the bulk operation
+        operations.push(...toDeleteDocs)
+        // replace this field with a simple entry to denote there are links
+        delete record[fieldName]
+      }
+    }
+    await this._db.bulkDocs(operations)
+    return record
+  }
+
+  /**
+   * When a record is deleted this will carry out the necessary operations to make sure
+   * any links that existed have been removed.
+   * @returns {Promise<object>} The operation has been completed and the link documents should now
+   * be accurate. This also returns the record that was deleted.
+   */
+  async recordDeleted() {
+    const record = this._record
+    // need to get the full link docs to be be able to delete it
+    const linkDocs = await this.getRecordLinkDocs(record._id)
+    if (linkDocs.length === 0) {
+      return null
+    }
+    const toDelete = linkDocs.map(doc => {
+      return {
+        ...doc,
+        _deleted: true,
+      }
+    })
+    await this._db.bulkDocs(toDelete)
+    return record
+  }
+
+  /**
+   * Remove a field from a model as well as any linked records that pertained to it.
+   * @param {string} fieldName The field to be removed from the model.
+   * @returns {Promise<void>} The model has now been updated.
+   */
+  async removeFieldFromModel(fieldName) {
+    let oldModel = this._oldModel
+    let field = oldModel.schema[fieldName]
+    const linkDocs = await this.getModelLinkDocs()
+    let toDelete = linkDocs.filter(linkDoc => {
+      let correctFieldName =
+        linkDoc.doc1.modelId === oldModel._id
+          ? linkDoc.doc1.fieldName
+          : linkDoc.doc2.fieldName
+      return correctFieldName === fieldName
+    })
+    await this._db.bulkDocs(
+      toDelete.map(doc => {
+        return {
+          ...doc,
+          _deleted: true,
+        }
+      })
+    )
+    // remove schema from other model
+    let linkedModel = await this._db.get(field.modelId)
+    delete linkedModel.schema[field.fieldName]
+    this._db.put(linkedModel)
+  }
+
+  /**
+   * When a model is saved this will carry out the necessary operations to make sure
+   * any linked models are notified and updated correctly.
+   * @returns {Promise<object>} The operation has been completed and the link documents should now
+   * be accurate. Also returns the model that was operated on.
+   */
+  async modelSaved() {
+    const model = await this.model()
+    const schema = model.schema
+    for (let fieldName of Object.keys(schema)) {
+      const field = schema[fieldName]
+      if (field.type === "link") {
+        // create the link field in the other model
+        const linkedModel = await this._db.get(field.modelId)
+        linkedModel.schema[field.fieldName] = {
+          name: field.fieldName,
+          type: "link",
+          // these are the props of the table that initiated the link
+          modelId: model._id,
+          fieldName: fieldName,
+        }
+        await this._db.put(linkedModel)
+      }
+    }
+    return model
+  }
+
+  /**
+   * Update a model, this means if a field is removed need to handle removing from other table and removing
+   * any link docs that pertained to it.
+   * @returns {Promise<Object>} The model which has been saved, same response as with the modelSaved function.
+   */
+  async modelUpdated() {
+    const oldModel = this._oldModel
+    // first start by checking if any link columns have been deleted
+    const newModel = await this.model()
+    for (let fieldName of Object.keys(oldModel.schema)) {
+      const field = oldModel.schema[fieldName]
+      // this field has been removed from the model schema
+      if (field.type === "link" && newModel.schema[fieldName] == null) {
+        await this.removeFieldFromModel(fieldName)
+      }
+    }
+    // now handle as if its a new save
+    return this.modelSaved()
+  }
+
+  /**
+   * When a model is deleted this will carry out the necessary operations to make sure
+   * any linked models have the joining column correctly removed as well as removing any
+   * now stale linking documents.
+   * @returns {Promise<object>} The operation has been completed and the link documents should now
+   * be accurate. Also returns the model that was operated on.
+   */
+  async modelDeleted() {
+    const model = await this.model()
+    const schema = model.schema
+    for (let fieldName of Object.keys(schema)) {
+      const field = schema[fieldName]
+      if (field.type === "link") {
+        const linkedModel = await this._db.get(field.modelId)
+        delete linkedModel.schema[model.name]
+        await this._db.put(linkedModel)
+      }
+    }
+    // need to get the full link docs to delete them
+    const linkDocs = await this.getModelLinkDocs()
+    if (linkDocs.length === 0) {
+      return null
+    }
+    // get link docs for this model and configure for deletion
+    const toDelete = linkDocs.map(doc => {
+      return {
+        ...doc,
+        _deleted: true,
+      }
+    })
+    await this._db.bulkDocs(toDelete)
+    return model
+  }
+}
+
+module.exports = LinkController
diff --git a/packages/server/src/db/linkedRecords/index.js b/packages/server/src/db/linkedRecords/index.js
new file mode 100644
index 0000000000..115553696c
--- /dev/null
+++ b/packages/server/src/db/linkedRecords/index.js
@@ -0,0 +1,120 @@
+const LinkController = require("./LinkController")
+const { IncludeDocs, getLinkDocuments, createLinkView } = require("./linkUtils")
+
+/**
+ * This functionality makes sure that when records with links are created, updated or deleted they are processed
+ * correctly - making sure that no stale links are left around and that all links have been made successfully.
+ */
+
+const EventType = {
+  RECORD_SAVE: "record:save",
+  RECORD_UPDATE: "record:update",
+  RECORD_DELETE: "record:delete",
+  MODEL_SAVE: "model:save",
+  MODEL_UPDATED: "model:updated",
+  MODEL_DELETE: "model:delete",
+}
+
+exports.EventType = EventType
+// re-export utils here for ease of use
+exports.IncludeDocs = IncludeDocs
+exports.getLinkDocuments = getLinkDocuments
+exports.createLinkView = createLinkView
+
+/**
+ * Update link documents for a record or model - 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} modelId The ID of the of the model which is being changed.
+ * @param {object|null} record The record which is changing, e.g. created, updated or deleted.
+ * @param {object|null} model If the model has already been retrieved this can be used to reduce database gets.
+ * @param {object|null} oldModel If the model is being updated then the old model can be provided for differencing.
+ * @returns {Promise<object>} When the update is complete this will respond successfully. Returns the record for
+ * record operations and the model for model operations.
+ */
+exports.updateLinks = async function({
+  eventType,
+  instanceId,
+  record,
+  modelId,
+  model,
+  oldModel,
+}) {
+  if (instanceId == null) {
+    throw "Cannot operate without an instance ID."
+  }
+  // make sure model ID is set
+  if (modelId == null && model != null) {
+    arguments[0].modelId = model._id
+  }
+  let linkController = new LinkController(arguments[0])
+  if (
+    !(await linkController.doesModelHaveLinkedFields()) &&
+    (oldModel == null ||
+      !(await linkController.doesModelHaveLinkedFields(oldModel)))
+  ) {
+    return record
+  }
+  switch (eventType) {
+    case EventType.RECORD_SAVE:
+    case EventType.RECORD_UPDATE:
+      return await linkController.recordSaved()
+    case EventType.RECORD_DELETE:
+      return await linkController.recordDeleted()
+    case EventType.MODEL_SAVE:
+      return await linkController.modelSaved()
+    case EventType.MODEL_UPDATED:
+      return await linkController.modelUpdated()
+    case EventType.MODEL_DELETE:
+      return await linkController.modelDeleted()
+    default:
+      throw "Type of event is not known, linked record handler requires update."
+  }
+}
+
+/**
+ * Update a record with information about the links that pertain to it.
+ * @param {string} instanceId The instance in which this record has been created.
+ * @param {object} records The record(s) themselves which is to be updated with info (if applicable). This can be
+ * a single record object or an array of records - both will be handled.
+ * @returns {Promise<object>} The updated record (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, records) => {
+  // handle a single record as well as multiple
+  let wasArray = true
+  if (!(records instanceof Array)) {
+    records = [records]
+    wasArray = false
+  }
+  // start by getting all the link values for performance reasons
+  let responses = await Promise.all(
+    records.map(record =>
+      getLinkDocuments({
+        instanceId,
+        modelId: record.modelId,
+        recordId: record._id,
+        includeDocs: IncludeDocs.EXCLUDE,
+      })
+    )
+  )
+  // can just use an index to access responses, order maintained
+  let index = 0
+  // now iterate through the records and all field information
+  for (let record of records) {
+    // get all links for record, ignore fieldName for now
+    const linkVals = responses[index++]
+    for (let linkVal of linkVals) {
+      // work out which link pertains to this record
+      if (!(record[linkVal.fieldName] instanceof Array)) {
+        record[linkVal.fieldName] = [linkVal.id]
+      } else {
+        record[linkVal.fieldName].push(linkVal.id)
+      }
+    }
+  }
+  // if it was an array when it came in then handle it as an array in response
+  // otherwise return the first element as there was only one input
+  return wasArray ? records : records[0]
+}
diff --git a/packages/server/src/db/linkedRecords/linkUtils.js b/packages/server/src/db/linkedRecords/linkUtils.js
new file mode 100644
index 0000000000..7680a2603f
--- /dev/null
+++ b/packages/server/src/db/linkedRecords/linkUtils.js
@@ -0,0 +1,92 @@
+const CouchDB = require("../index")
+const Sentry = require("@sentry/node")
+
+/**
+ * Only needed so that boolean parameters are being used for includeDocs
+ * @type {{EXCLUDE: boolean, INCLUDE: boolean}}
+ */
+exports.IncludeDocs = {
+  INCLUDE: true,
+  EXCLUDE: false,
+}
+
+/**
+ * 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.
+ * @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)
+  const designDoc = await db.get("_design/database")
+  const view = {
+    map: function(doc) {
+      if (doc.type === "link") {
+        let doc1 = doc.doc1
+        let doc2 = doc.doc2
+        emit([doc1.modelId, doc1.recordId], {
+          id: doc2.recordId,
+          fieldName: doc1.fieldName,
+        })
+        emit([doc2.modelId, doc2.recordId], {
+          id: doc1.recordId,
+          fieldName: doc2.fieldName,
+        })
+      }
+    }.toString(),
+  }
+  designDoc.views = {
+    ...designDoc.views,
+    by_link: view,
+  }
+  await db.put(designDoc)
+}
+
+/**
+ * Gets the linking documents, not the linked documents themselves.
+ * @param {string} instanceId The instance in which we are searching for linked records.
+ * @param {string} modelId The model which we are searching for linked records 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.
+ * @param {string|null} recordId The ID of the record which we want to find linking documents for -
+ * if this is not specified then it will assume model or field level depending on whether the
+ * field name has been specified.
+ * @param {boolean|null} includeDocs whether to include docs in the response call, this is considerably slower so only
+ * use this if actually interested in the docs themselves.
+ * @returns {Promise<object[]>} This will return an array of the linking documents that were found
+ * (if any).
+ */
+exports.getLinkDocuments = async function({
+  instanceId,
+  modelId,
+  recordId,
+  includeDocs,
+}) {
+  const db = new CouchDB(instanceId)
+  let params
+  if (recordId != null) {
+    params = { key: [modelId, recordId] }
+  }
+  // only model is known
+  else {
+    params = { startKey: [modelId], endKey: [modelId, {}] }
+  }
+  params.include_docs = !!includeDocs
+  try {
+    const response = await db.query("database/by_link", params)
+    if (includeDocs) {
+      return response.rows.map(row => row.doc)
+    } else {
+      return response.rows.map(row => row.value)
+    }
+  } 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)
+      return exports.getLinkDocuments(arguments[0])
+    } else {
+      Sentry.captureException(err)
+    }
+  }
+}
diff --git a/packages/server/src/events/index.js b/packages/server/src/events/index.js
index 2d6d2fa585..d02cac447d 100644
--- a/packages/server/src/events/index.js
+++ b/packages/server/src/events/index.js
@@ -6,6 +6,45 @@ const EventEmitter = require("events").EventEmitter
  * future.
  */
 
-const emitter = new EventEmitter()
+/**
+ * Extending the standard emitter to some syntactic sugar and standardisation to the emitted event.
+ * This is specifically quite important for mustache used in automations.
+ */
+class BudibaseEmitter extends EventEmitter {
+  emitRecord(eventName, instanceId, record, model = null) {
+    let event = {
+      record,
+      instanceId,
+      modelId: record.modelId,
+    }
+    if (model) {
+      event.model = model
+    }
+    event.id = record._id
+    if (record._rev) {
+      event.revision = record._rev
+    }
+    this.emit(eventName, event)
+  }
+
+  emitModel(eventName, instanceId, model = null) {
+    const modelId = model._id
+    let event = {
+      model: {
+        ...model,
+        modelId: modelId,
+      },
+      instanceId,
+      modelId: modelId,
+    }
+    event.id = modelId
+    if (model._rev) {
+      event.revision = model._rev
+    }
+    this.emit(eventName, event)
+  }
+}
+
+const emitter = new BudibaseEmitter()
 
 module.exports = emitter
diff --git a/packages/server/src/utilities/queue/inMemoryQueue.js b/packages/server/src/utilities/queue/inMemoryQueue.js
new file mode 100644
index 0000000000..6c1d73801d
--- /dev/null
+++ b/packages/server/src/utilities/queue/inMemoryQueue.js
@@ -0,0 +1,78 @@
+let events = require("events")
+
+/**
+ * Bull works with a Job wrapper around all messages that contains a lot more information about
+ * the state of the message, this object constructor implements the same schema of Bull jobs
+ * for the sake of maintaining API consistency.
+ * @param {string} queue The name of the queue which the message will be carried on.
+ * @param {object} message The JSON message which will be passed back to the consumer.
+ * @returns {Object} A new job which can now be put onto the queue, this is mostly an
+ * internal structure so that an in memory queue can be easily swapped for a Bull queue.
+ */
+function newJob(queue, message) {
+  return {
+    timestamp: Date.now(),
+    queue: queue,
+    data: message,
+  }
+}
+
+/**
+ * This is designed to replicate Bull (https://github.com/OptimalBits/bull) in memory as a sort of mock.
+ * It is relatively simple, using an event emitter internally to register when messages are available
+ * to the consumers - in can support many inputs and many consumers.
+ */
+class InMemoryQueue {
+  /**
+   * The constructor the queue, exactly the same as that of Bulls.
+   * @param {string} name The name of the queue which is being configured.
+   * @param {object|null} opts This is not used by the in memory queue as there is no real use
+   * case when in memory, but is the same API as Bull
+   */
+  constructor(name, opts = null) {
+    this._name = name
+    this._opts = opts
+    this._messages = []
+    this._emitter = new events.EventEmitter()
+  }
+
+  /**
+   * Same callback API as Bull, each callback passed to this will consume messages as they are
+   * available. Please note this is a queue service, not a notification service, so each
+   * consumer will receive different messages.
+   * @param {function<object>} func The callback function which will return a "Job", the same
+   * as the Bull API, within this job the property "data" contains the JSON message. Please
+   * note this is incredibly limited compared to Bull as in reality the Job would contain
+   * a lot more information about the queue and current status of Bull cluster.
+   */
+  process(func) {
+    this._emitter.on("message", async () => {
+      if (this._messages.length <= 0) {
+        return
+      }
+      let msg = this._messages.shift()
+      let resp = func(msg)
+      if (resp.then != null) {
+        await resp
+      }
+    })
+  }
+
+  // simply puts a message to the queue and emits to the queue for processing
+  /**
+   * Simple function to replicate the add message functionality of Bull, putting
+   * a new message on the queue. This then emits an event which will be used to
+   * return the message to a consumer (if one is attached).
+   * @param {object} msg A message to be transported over the queue, this should be
+   * a JSON message as this is required by Bull.
+   */
+  add(msg) {
+    if (typeof msg !== "object") {
+      throw "Queue only supports carrying JSON."
+    }
+    this._messages.push(newJob(this._name, msg))
+    this._emitter.emit("message")
+  }
+}
+
+module.exports = InMemoryQueue
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 5c68d56319..cf6c3a5afd 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -2001,9 +2001,10 @@ electron-updater@^4.3.1:
     lodash.isequal "^4.5.0"
     semver "^7.1.3"
 
-electron@8.2.5:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-8.2.5.tgz#ae3cb23d5517b2189fd35298e487198d65d1a291"
+electron@10.1.3:
+  version "10.1.3"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-10.1.3.tgz#7e276e373bf30078bd4cb1184850a91268dc0e6c"
+  integrity sha512-CR8LrlG47MdAp317SQ3vGYa2o2cIMdMSMPYH46OVitFLk35dwE9fn3VqvhUIXhCHYcNWIAPzMhkVHpkoFdKWuw==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index f2107b99a1..91d19ba6aa 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -16,17 +16,17 @@
     "@budibase/client": "^0.1.25",
     "@rollup/plugin-commonjs": "^11.1.0",
     "lodash": "^4.17.15",
-    "rollup": "^1.11.0",
+    "rollup": "^2.11.2",
     "rollup-plugin-commonjs": "^10.0.2",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-livereload": "^1.0.1",
     "rollup-plugin-node-resolve": "^5.0.0",
     "rollup-plugin-postcss": "^3.1.5",
-    "rollup-plugin-svelte": "^5.0.0",
-    "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^7.0.2",
     "shortid": "^2.2.15",
     "sirv-cli": "^0.4.4",
-    "svelte": "^3.12.1"
+    "svelte": "^3.29.0"
   },
   "keywords": [
     "svelte"
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.34.2",
+    "@budibase/bbui": "^1.41.0",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 0b8267c87f..3cb7b7204c 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -1,265 +1,10 @@
 <script>
-  import { onMount } from "svelte"
-  import { fade } from "svelte/transition"
-  import { Label, DatePicker } from "@budibase/bbui"
-  import Dropzone from "./attachments/Dropzone.svelte"
-  import debounce from "lodash.debounce"
+  import Form from "./Form.svelte"
 
   export let _bb
   export let model
   export let title
   export let buttonText
-
-  const TYPE_MAP = {
-    string: "text",
-    boolean: "checkbox",
-    number: "number",
-  }
-
-  const DEFAULTS_FOR_TYPE = {
-    string: "",
-    boolean: false,
-    number: null,
-    link: [],
-  }
-
-  let record
-  let store = _bb.store
-  let schema = {}
-  let modelDef = {}
-  let saved = false
-  let recordId
-  let isNew = true
-  let errors = {}
-
-  $: if (model && model.length !== 0) {
-    fetchModel()
-  }
-
-  $: fields = schema ? Object.keys(schema) : []
-
-  $: errorMessages = Object.entries(errors).map(
-    ([field, message]) => `${field} ${message}`
-  )
-
-  async function fetchModel() {
-    const FETCH_MODEL_URL = `/api/models/${model}`
-    const response = await _bb.api.get(FETCH_MODEL_URL)
-    modelDef = await response.json()
-    schema = modelDef.schema
-    record = {
-      modelId: model,
-    }
-  }
-
-  const save = debounce(async () => {
-    for (let field of fields) {
-      // Assign defaults to empty fields to prevent validation issues
-      if (!(field in record)) {
-        record[field] = DEFAULTS_FOR_TYPE[schema[field].type]
-      }
-    }
-
-    const SAVE_RECORD_URL = `/api/${model}/records`
-    const response = await _bb.api.post(SAVE_RECORD_URL, record)
-
-    const json = await response.json()
-
-    if (response.status === 200) {
-      store.update(state => {
-        state[model] = state[model] ? [...state[model], json] : [json]
-        return state
-      })
-
-      errors = {}
-
-      // wipe form, if new record, otherwise update
-      // model to get new _rev
-      record = isNew ? { modelId: model } : json
-
-      // set saved, and unset after 1 second
-      // i.e. make the success notifier appear, then disappear again after time
-      saved = true
-      setTimeout(() => {
-        saved = false
-      }, 1000)
-    }
-
-    if (response.status === 400) {
-      errors = json.errors
-    }
-  })
-
-  onMount(async () => {
-    const routeParams = _bb.routeParams()
-    recordId =
-      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
-    isNew = !recordId || recordId === "new"
-
-    if (isNew) {
-      record = { modelId: model }
-      return
-    }
-
-    const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-    const response = await _bb.api.get(GET_RECORD_URL)
-    const json = await response.json()
-    record = json
-  })
 </script>
 
-<form class="form" on:submit|preventDefault>
-  {#if title}
-    <h1>{title}</h1>
-  {/if}
-  {#each errorMessages as error}
-    <p class="error">{error}</p>
-  {/each}
-  <hr />
-  <div class="form-content">
-    {#each fields as field}
-      <div class="form-item">
-        <Label small forAttr={'form-stacked-text'}>{field}</Label>
-        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select bind:value={record[field]}>
-            {#each schema[field].constraints.inclusion as opt}
-              <option>{opt}</option>
-            {/each}
-          </select>
-        {:else if schema[field].type === 'datetime'}
-          <DatePicker bind:value={record[field]} />
-        {:else if schema[field].type === 'boolean'}
-          <input class="input" type="checkbox" bind:checked={record[field]} />
-        {:else if schema[field].type === 'number'}
-          <input class="input" type="number" bind:value={record[field]} />
-        {:else if schema[field].type === 'string'}
-          <input class="input" type="text" bind:value={record[field]} />
-        {:else if schema[field].type === 'attachment'}
-          <Dropzone bind:files={record[field]} />
-        {/if}
-      </div>
-      <hr />
-    {/each}
-    <div class="button-block">
-      <button on:click={save} class:saved>
-        {#if saved}
-          <div in:fade>
-            <span class:saved>Success</span>
-          </div>
-        {:else}
-          <div>{buttonText || 'Submit Form'}</div>
-        {/if}
-      </button>
-    </div>
-  </div>
-</form>
-
-<style>
-  .form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .form-content {
-    margin-bottom: 20px;
-    width: 100%;
-  }
-
-  .input {
-    border-radius: 5px;
-    border: 1px solid #e6e6e6;
-    padding: 1rem;
-    font-size: 16px;
-  }
-
-  .form-item {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 16px;
-  }
-
-  hr {
-    border: 1px solid var(--grey-1);
-    margin: 20px 0px;
-  }
-
-  hr:nth-last-child(2) {
-    border: 1px solid #fff;
-    margin: 20px 0px;
-  }
-
-  .button-block {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  button {
-    font-size: 16px;
-    padding: 0.4em;
-    box-sizing: border-box;
-    border-radius: 4px;
-    color: white;
-    background-color: #393c44;
-    outline: none;
-    width: 300px;
-    height: 40px;
-    cursor: pointer;
-    transition: all 0.2s ease 0s;
-    overflow: hidden;
-    outline: none;
-    user-select: none;
-    white-space: nowrap;
-    text-align: center;
-  }
-
-  button.saved {
-    background-color: #84c991;
-    border: none;
-  }
-
-  button:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  }
-
-  input[type="checkbox"] {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    margin: 0;
-    vertical-align: bottom;
-    position: relative;
-    top: -1px;
-    *overflow: hidden;
-  }
-
-  select::-ms-expand {
-    display: none;
-  }
-  select {
-    display: inline-block;
-    cursor: pointer;
-    align-items: baseline;
-    box-sizing: border-box;
-    padding: 1em 1em;
-    border: 1px solid #eaeaea;
-    border-radius: 5px;
-    font: inherit;
-    line-height: inherit;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -ms-appearance: none;
-    appearance: none;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-      linear-gradient(135deg, currentColor 50%, transparent 50%);
-    background-position: right 17px top 1.5em, right 10px top 1.5em;
-    background-size: 7px 7px, 7px 7px;
-  }
-
-  .error {
-    color: red;
-    font-weight: 500;
-  }
-</style>
+<Form {_bb} {model} {title} {buttonText} wide={false} />
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 41aa5443a2..68dfd7b7cf 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -1,252 +1,10 @@
 <script>
-  import { onMount } from "svelte"
-  import { fade } from "svelte/transition"
-  import { Label, DatePicker } from "@budibase/bbui"
-  import debounce from "lodash.debounce"
+  import Form from "./Form.svelte"
 
   export let _bb
   export let model
   export let title
   export let buttonText
-
-  const TYPE_MAP = {
-    string: "text",
-    boolean: "checkbox",
-    number: "number",
-  }
-
-  const DEFAULTS_FOR_TYPE = {
-    string: "",
-    boolean: false,
-    number: null,
-    link: [],
-  }
-
-  let record
-  let store = _bb.store
-  let schema = {}
-  let modelDef = {}
-  let saved = false
-  let recordId
-  let isNew = true
-  let errors = {}
-
-  $: if (model && model.length !== 0) {
-    fetchModel()
-  }
-
-  $: fields = schema ? Object.keys(schema) : []
-
-  $: errorMessages = Object.entries(errors).map(
-    ([field, message]) => `${field} ${message}`
-  )
-
-  async function fetchModel() {
-    const FETCH_MODEL_URL = `/api/models/${model}`
-    const response = await _bb.api.get(FETCH_MODEL_URL)
-    modelDef = await response.json()
-    schema = modelDef.schema
-    record = {
-      modelId: model,
-    }
-  }
-
-  const save = debounce(async () => {
-    for (let field of fields) {
-      // Assign defaults to empty fields to prevent validation issues
-      if (!(field in record))
-        record[field] = DEFAULTS_FOR_TYPE[schema[field].type]
-    }
-
-    const SAVE_RECORD_URL = `/api/${model}/records`
-    const response = await _bb.api.post(SAVE_RECORD_URL, record)
-
-    const json = await response.json()
-
-    if (response.status === 200) {
-      store.update(state => {
-        state[model] = state[model] ? [...state[model], json] : [json]
-        return state
-      })
-
-      errors = {}
-
-      // wipe form, if new record, otherwise update
-      // model to get new _rev
-      record = isNew ? { modelId: model } : json
-
-      // set saved, and unset after 1 second
-      // i.e. make the success notifier appear, then disappear again after time
-      saved = true
-      setTimeout(() => {
-        saved = false
-      }, 1000)
-    }
-
-    if (response.status === 400) {
-      errors = json.errors
-    }
-  })
-
-  onMount(async () => {
-    const routeParams = _bb.routeParams()
-    recordId =
-      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
-    isNew = !recordId || recordId === "new"
-
-    if (isNew) {
-      record = { modelId: model }
-      return
-    }
-
-    const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-    const response = await _bb.api.get(GET_RECORD_URL)
-    const json = await response.json()
-    record = json
-  })
 </script>
 
-<form class="form" on:submit|preventDefault>
-  {#if title}
-    <h1>{title}</h1>
-  {/if}
-  {#each errorMessages as error}
-    <p class="error">{error}</p>
-  {/each}
-  <hr />
-  <div class="form-content">
-    {#each fields as field}
-      <div class="form-item">
-        <Label small forAttr={'form-stacked-text'}>{field}</Label>
-        {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select bind:value={record[field]}>
-            {#each schema[field].constraints.inclusion as opt}
-              <option>{opt}</option>
-            {/each}
-          </select>
-        {:else if schema[field].type === 'datetime'}
-          <DatePicker bind:value={record[field]} />
-        {:else if schema[field].type === 'boolean'}
-          <input class="input" type="checkbox" bind:checked={record[field]} />
-        {:else if schema[field].type === 'number'}
-          <input class="input" type="number" bind:value={record[field]} />
-        {:else if schema[field].type === 'string'}
-          <input class="input" type="text" bind:value={record[field]} />
-        {/if}
-      </div>
-      <hr />
-    {/each}
-    <div class="button-block">
-      <button on:click={save} class:saved>
-        {#if saved}
-          <div in:fade>
-            <span class:saved>Success</span>
-          </div>
-        {:else}
-          <div>{buttonText || 'Submit Form'}</div>
-        {/if}
-      </button>
-    </div>
-  </div>
-</form>
-
-<style>
-  .form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: auto;
-    padding: 40px;
-  }
-  .form-content {
-    margin-bottom: 20px;
-  }
-  .input {
-    border-radius: 5px;
-    border: 1px solid #e6e6e6;
-    padding: 1em;
-    font-size: 16px;
-  }
-
-  .form-item {
-    display: grid;
-    grid-template-columns: 30% 1fr;
-    margin-bottom: 16px;
-    align-items: center;
-    gap: 1em;
-  }
-
-  hr {
-    border: 1px solid #f5f5f5;
-    margin: 40px 0px;
-  }
-  hr:nth-last-child(2) {
-    border: 1px solid #f5f5f5;
-    margin: 40px 0px;
-  }
-  .button-block {
-    display: flex;
-    justify-content: flex-end;
-  }
-  button {
-    font-size: 16px;
-    padding: 8px 16px;
-    box-sizing: border-box;
-    border-radius: 4px;
-    color: white;
-    background-color: black;
-    outline: none;
-    height: 40px;
-    cursor: pointer;
-    transition: all 0.2s ease 0s;
-    overflow: hidden;
-    outline: none;
-    user-select: none;
-    white-space: nowrap;
-    text-align: center;
-  }
-
-  button.saved {
-    background-color: #84c991;
-    border: none;
-  }
-
-  button:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  }
-
-  input[type="checkbox"] {
-    transform: scale(2);
-    cursor: pointer;
-  }
-
-  select::-ms-expand {
-    display: none;
-  }
-  select {
-    cursor: pointer;
-    display: inline-block;
-    align-items: baseline;
-    box-sizing: border-box;
-    padding: 1em 1em;
-    border: 1px solid #eaeaea;
-    border-radius: 5px;
-    font: inherit;
-    line-height: inherit;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -ms-appearance: none;
-    appearance: none;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-      linear-gradient(135deg, currentColor 50%, transparent 50%);
-    background-position: right 17px top 1.5em, right 10px top 1.5em;
-    background-size: 7px 7px, 7px 7px;
-  }
-
-  .error {
-    color: red;
-    font-weight: 500;
-  }
-</style>
+<Form {_bb} {model} {title} {buttonText} wide={true} />
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index fe967338f5..5b950fec4b 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { cssVars, createClasses } from "./cssVars"
+  import { cssVars } from "./cssVars"
   import ArrowUp from "./icons/ArrowUp.svelte"
   import ArrowDown from "./icons/ArrowDown.svelte"
   import fsort from "fast-sort"
@@ -13,6 +13,7 @@
   export let stripeColor
   export let borderColor
   export let datasource = {}
+  export let _bb
 
   let data = []
   let headers = []
@@ -29,11 +30,19 @@
 
   $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
 
+  async function fetchModel(modelId) {
+    const FETCH_MODEL_URL = `/api/models/${modelId}`
+    const response = await _bb.api.get(FETCH_MODEL_URL)
+    const model = await response.json()
+    schema = model.schema
+  }
+
   onMount(async () => {
     if (!isEmpty(datasource)) {
       data = await fetchData(datasource)
-      if (data) {
-        headers = Object.keys(data[0]).filter(shouldDisplayField)
+      if (data && data.length) {
+        await fetchModel(data[0].modelId)
+        headers = Object.keys(schema).filter(shouldDisplayField)
       }
     }
   })
@@ -85,11 +94,15 @@
     {#each sorted as row (row._id)}
       <tr>
         {#each headers as header}
-          <!-- Rudimentary solution for attachments on array given this entire table will be replaced by AG Grid -->
-          {#if Array.isArray(row[header])}
-            <AttachmentList files={row[header]} />
-          {:else if row[header]}
-            <td>{row[header]}</td>
+          {#if schema[header]}
+            <!-- Rudimentary solution for attachments on array given this entire table will be replaced by AG Grid -->
+            {#if schema[header].type === 'attachment'}
+              <AttachmentList files={row[header]} />
+            {:else if schema[header].type === 'link'}
+              <td>{row[header] ? row[header].length : 0} related row(s)</td>
+            {:else if row[header]}
+              <td>{row[header]}</td>
+            {/if}
           {/if}
         {/each}
       </tr>
diff --git a/packages/standard-components/src/ErrorsBox.svelte b/packages/standard-components/src/ErrorsBox.svelte
new file mode 100644
index 0000000000..ac948fb28b
--- /dev/null
+++ b/packages/standard-components/src/ErrorsBox.svelte
@@ -0,0 +1,31 @@
+<script>
+  export let errors = []
+
+  $: hasErrors = errors.length > 0
+</script>
+
+{#if hasErrors}
+  <div class="container">
+    {#each errors as error}
+      <div class="error">{error.dataPath} {error.message}</div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .container {
+    border-radius: var(--border-radius-m);
+    margin: 0;
+    padding: var(--spacing-m);
+    background-color: var(--red-light);
+  }
+
+  .error {
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    color: var(--red-dark);
+  }
+  .error:first-letter {
+    text-transform: uppercase;
+  }
+</style>
diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
new file mode 100644
index 0000000000..937a58f271
--- /dev/null
+++ b/packages/standard-components/src/Form.svelte
@@ -0,0 +1,197 @@
+<script>
+  import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
+  import {
+    Label,
+    DatePicker,
+    Input,
+    Select,
+    Button,
+    Toggle,
+  } from "@budibase/bbui"
+  import Dropzone from "./attachments/Dropzone.svelte"
+  import LinkedRecordSelector from "./LinkedRecordSelector.svelte"
+  import debounce from "lodash.debounce"
+  import ErrorsBox from "./ErrorsBox.svelte"
+  import { capitalise } from "./helpers"
+
+  export let _bb
+  export let model
+  export let title
+  export let buttonText
+  export let wide = false
+
+  const TYPE_MAP = {
+    string: "text",
+    boolean: "checkbox",
+    number: "number",
+  }
+
+  const DEFAULTS_FOR_TYPE = {
+    string: "",
+    boolean: false,
+    number: null,
+    link: [],
+  }
+
+  let record
+  let store = _bb.store
+  let schema = {}
+  let modelDef = {}
+  let saved = false
+  let recordId
+  let isNew = true
+  let errors = {}
+
+  $: fields = schema ? Object.keys(schema) : []
+  $: if (model && model.length !== 0) {
+    fetchModel()
+  }
+
+  async function fetchModel() {
+    const FETCH_MODEL_URL = `/api/models/${model}`
+    const response = await _bb.api.get(FETCH_MODEL_URL)
+    modelDef = await response.json()
+    schema = modelDef.schema
+    record = {
+      modelId: model,
+    }
+  }
+
+  const save = debounce(async () => {
+    for (let field of fields) {
+      // Assign defaults to empty fields to prevent validation issues
+      if (!(field in record)) {
+        record[field] = DEFAULTS_FOR_TYPE[schema[field].type]
+      }
+    }
+
+    const SAVE_RECORD_URL = `/api/${model}/records`
+    const response = await _bb.api.post(SAVE_RECORD_URL, record)
+
+    const json = await response.json()
+
+    if (response.status === 200) {
+      store.update(state => {
+        state[model] = state[model] ? [...state[model], json] : [json]
+        return state
+      })
+
+      errors = {}
+
+      // wipe form, if new record, otherwise update
+      // model to get new _rev
+      record = isNew ? { modelId: model } : json
+
+      // set saved, and unset after 1 second
+      // i.e. make the success notifier appear, then disappear again after time
+      saved = true
+      setTimeout(() => {
+        saved = false
+      }, 3000)
+    }
+
+    if (response.status === 400) {
+      errors = Object.keys(json.errors)
+        .map(k => ({ dataPath: k, message: json.errors[k] }))
+        .flat()
+    }
+  })
+
+  onMount(async () => {
+    const routeParams = _bb.routeParams()
+    recordId =
+      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
+    isNew = !recordId || recordId === "new"
+
+    if (isNew) {
+      record = { modelId: model }
+      return
+    }
+
+    const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+    const response = await _bb.api.get(GET_RECORD_URL)
+    record = await response.json()
+  })
+</script>
+
+<form class="form" on:submit|preventDefault>
+  {#if title}
+    <h1>{title}</h1>
+  {/if}
+  <div class="form-content">
+    <ErrorsBox {errors} />
+    {#each fields as field}
+      <div class="form-field" class:wide>
+        {#if !(schema[field].type === 'boolean' && !wide)}
+          <Label extraSmall={!wide} grey={!wide}>
+            {capitalise(schema[field].name)}
+          </Label>
+        {/if}
+        {#if schema[field].type === 'options'}
+          <Select secondary bind:value={record[field]}>
+            <option value="">Choose an option</option>
+            {#each schema[field].constraints.inclusion as opt}
+              <option>{opt}</option>
+            {/each}
+          </Select>
+        {:else if schema[field].type === 'datetime'}
+          <DatePicker bind:value={record[field]} />
+        {:else if schema[field].type === 'boolean'}
+          <Toggle
+            text={wide ? null : capitalise(schema[field].name)}
+            bind:checked={record[field]} />
+        {:else if schema[field].type === 'number'}
+          <Input type="number" bind:value={record[field]} />
+        {:else if schema[field].type === 'string'}
+          <Input bind:value={record[field]} />
+        {:else if schema[field].type === 'attachment'}
+          <Dropzone bind:files={record[field]} />
+        {:else if schema[field].type === 'link'}
+          <LinkedRecordSelector
+            secondary
+            showLabel={false}
+            bind:linkedRecords={record[field]}
+            schema={schema[field]} />
+        {/if}
+      </div>
+    {/each}
+    <div class="buttons">
+      <Button primary on:click={save} green={saved}>
+        {#if saved}Success{:else}{buttonText || 'Submit Form'}{/if}
+      </Button>
+    </div>
+  </div>
+</form>
+
+<style>
+  .form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form-content {
+    margin-bottom: var(--spacing-xl);
+    display: grid;
+    gap: var(--spacing-xl);
+    width: 100%;
+  }
+
+  .form-field {
+    display: grid;
+  }
+  .form-field.wide {
+    align-items: center;
+    grid-template-columns: 30% 1fr;
+    gap: var(--spacing-xl);
+  }
+  .form-field.wide :global(label) {
+    margin-bottom: 0;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/packages/standard-components/src/LinkedRecordSelector.svelte b/packages/standard-components/src/LinkedRecordSelector.svelte
new file mode 100644
index 0000000000..4ea84223f3
--- /dev/null
+++ b/packages/standard-components/src/LinkedRecordSelector.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { onMount } from "svelte"
+  import { Select, Label, Multiselect } from "@budibase/bbui"
+  import api from "./api"
+  import { capitalise } from "./helpers"
+
+  export let schema = {}
+  export let linkedRecords = []
+  export let showLabel = true
+  export let secondary
+
+  let linkedModel
+
+  $: label = capitalise(schema.name)
+  $: linkedModelId = schema.modelId
+  $: recordsPromise = fetchRecords(linkedModelId)
+  $: fetchModel(linkedModelId)
+
+  async function fetchModel() {
+    if (linkedModelId == null) {
+      return
+    }
+    const FETCH_MODEL_URL = `/api/models/${linkedModelId}`
+    const response = await api.get(FETCH_MODEL_URL)
+    linkedModel = await response.json()
+  }
+
+  async function fetchRecords(linkedModelId) {
+    if (linkedModelId == null) {
+      return
+    }
+    const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
+    const response = await api.get(FETCH_RECORDS_URL)
+    return await response.json()
+  }
+
+  function getPrettyName(record) {
+    return record[linkedModel?.primaryDisplay || "_id"]
+  }
+</script>
+
+{#if linkedModel != null}
+  {#if linkedModel.primaryDisplay == null}
+    {#if showLabel}
+      <Label extraSmall grey>{label}</Label>
+    {/if}
+    <Label small black>
+      Please choose a primary display column for the
+      <b>{linkedModel.name}</b>
+      table.
+    </Label>
+  {:else}
+    {#await recordsPromise then records}
+      <Multiselect
+        {secondary}
+        bind:value={linkedRecords}
+        label={showLabel ? label : null}
+        placeholder="Choose some options">
+        {#each records as record}
+          <option value={record._id}>{getPrettyName(record)}</option>
+        {/each}
+      </Multiselect>
+    {/await}
+  {/if}
+{/if}
diff --git a/packages/standard-components/src/RecordDetail.svelte b/packages/standard-components/src/RecordDetail.svelte
index 30ab336427..e82cae36d8 100644
--- a/packages/standard-components/src/RecordDetail.svelte
+++ b/packages/standard-components/src/RecordDetail.svelte
@@ -8,7 +8,12 @@
   let store = _bb.store
   let target
 
-  // this function should only get called when in builder preview mode
+  async function fetchModel(id) {
+    const FETCH_MODEL_URL = `/api/models/${id}`
+    const response = await _bb.api.get(FETCH_MODEL_URL)
+    return await response.json()
+  }
+
   async function fetchFirstRecord() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
@@ -38,6 +43,14 @@
     }
 
     if (record) {
+      // Fetch model schema so we can check for linked records
+      const model = await fetchModel(record.modelId)
+      for (let key of Object.keys(model.schema)) {
+        if (model.schema[key].type === "link") {
+          record[key] = Array.isArray(record[key]) ? record[key].length : 0
+        }
+      }
+
       _bb.attachChildren(target, {
         context: record,
       })
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index 950c1e43b6..77a7fd8134 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -1,7 +1,7 @@
 <script>
   import { FILE_TYPES } from "./fileTypes"
 
-  export let files
+  export let files = []
   export let height = "70"
   export let width = "70"
 </script>
diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js
index 7a1c4b5f7c..a0c50c233a 100644
--- a/packages/standard-components/src/fetchData.js
+++ b/packages/standard-components/src/fetchData.js
@@ -4,7 +4,28 @@ export default async function fetchData(datasource) {
   const { isModel, name } = datasource
 
   if (name) {
-    return isModel ? await fetchModelData() : await fetchViewData()
+    const records = isModel ? await fetchModelData() : await fetchViewData()
+
+    // Fetch model schema so we can check for linked records
+    if (records && records.length) {
+      const model = await fetchModel(records[0].modelId)
+      const keys = Object.keys(model.schema)
+      records.forEach(record => {
+        for (let key of keys) {
+          if (model.schema[key].type === "link") {
+            record[key] = Array.isArray(record[key]) ? record[key].length : 0
+          }
+        }
+      })
+    }
+
+    return records
+  }
+
+  async function fetchModel(id) {
+    const FETCH_MODEL_URL = `/api/models/${id}`
+    const response = await api.get(FETCH_MODEL_URL)
+    return await response.json()
   }
 
   async function fetchModelData() {
diff --git a/packages/standard-components/src/helpers.js b/packages/standard-components/src/helpers.js
new file mode 100644
index 0000000000..2989f4d39c
--- /dev/null
+++ b/packages/standard-components/src/helpers.js
@@ -0,0 +1 @@
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
diff --git a/yarn.lock b/yarn.lock
index 2022a94d16..8c37dc6f01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -913,11 +913,6 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-argsarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/argsarray/-/argsarray-0.0.1.tgz#6e7207b4ecdb39b0af88303fa5ae22bda8df61cb"
-  integrity sha1-bnIHtOzbObCviDA/pa4ivajfYcs=
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -2336,11 +2331,6 @@ ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
 
-immediate@~3.0.5:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
-  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
-
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -2387,7 +2377,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
 
@@ -2638,11 +2628,6 @@ is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
 isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -2805,13 +2790,6 @@ libnpmpublish@^1.1.1:
     semver "^5.5.1"
     ssri "^6.0.1"
 
-lie@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
-  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
-  dependencies:
-    immediate "~3.0.5"
-
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -2861,11 +2839,6 @@ lodash.ismatch@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
 
-lodash.pick@^4.0.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
-  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
-
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
@@ -3204,16 +3177,6 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
-ndjson@^1.4.3:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/ndjson/-/ndjson-1.5.0.tgz#ae603b36b134bcec347b452422b0bf98d5832ec8"
-  integrity sha1-rmA7NrE0vOw0e0UkIrC/mNWDLsg=
-  dependencies:
-    json-stringify-safe "^5.0.1"
-    minimist "^1.2.0"
-    split2 "^2.1.0"
-    through2 "^2.0.3"
-
 neo-async@^2.6.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
@@ -3717,34 +3680,6 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
-pouch-stream@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/pouch-stream/-/pouch-stream-0.4.1.tgz#0c6d8475c9307677627991a2f079b301c3b89bdd"
-  integrity sha1-DG2EdckwdndieZGi8HmzAcO4m90=
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^1.0.27-1"
-
-pouchdb-promise@^6.0.4:
-  version "6.4.3"
-  resolved "https://registry.yarnpkg.com/pouchdb-promise/-/pouchdb-promise-6.4.3.tgz#74516f4acf74957b54debd0fb2c0e5b5a68ca7b3"
-  integrity sha512-ruJaSFXwzsxRHQfwNHjQfsj58LBOY1RzGzde4PM5CWINZwFjCQAhZwfMrch2o/0oZT6d+Xtt0HTWhq35p3b0qw==
-  dependencies:
-    lie "3.1.1"
-
-pouchdb-replication-stream@^1.2.9:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/pouchdb-replication-stream/-/pouchdb-replication-stream-1.2.9.tgz#aa4fa5d8f52df4825392f18e07c7e11acffc650a"
-  integrity sha1-qk+l2PUt9IJTkvGOB8fhGs/8ZQo=
-  dependencies:
-    argsarray "0.0.1"
-    inherits "^2.0.3"
-    lodash.pick "^4.0.0"
-    ndjson "^1.4.3"
-    pouch-stream "^0.4.0"
-    pouchdb-promise "^6.0.4"
-    through2 "^2.0.0"
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -3927,16 +3862,6 @@ read@1, read@~1.0.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@^1.0.27-1:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readdir-scoped-modules@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
@@ -4291,7 +4216,7 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-split2@^2.0.0, split2@^2.1.0:
+split2@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
   dependencies:
@@ -4396,11 +4321,6 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -4521,7 +4441,7 @@ text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-through2@^2.0.0, through2@^2.0.2, through2@^2.0.3:
+through2@^2.0.0, through2@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   dependencies: