diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js
index c2a22c4f9..92d1f907b 100644
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@@ -14,35 +14,26 @@ context("Create a automation", () => {
     cy.createTestTableWithData()
 
     cy.contains("automate").click()
-    cy.contains("Create New Automation").click()
+    cy.get("[data-cy=new-automation]").click()
     cy.get(".modal").within(() => {
       cy.get("input").type("Add Row")
-      cy.get(".buttons")
-        .contains("Create")
-        .click()
+      cy.get(".buttons").contains("Create").click()
     })
 
     // Add trigger
-    cy.get("[data-cy=add-automation-component]").click()
-    cy.get("[data-cy=ROW_SAVED]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
+    cy.contains("Trigger").click()
+    cy.contains("Row Saved").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
     })
 
     // Create action
-    cy.get("[data-cy=CREATE_ROW]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
-      cy.get("input")
-        .first()
-        .type("goodboy")
-      cy.get("input")
-        .eq(1)
-        .type("11")
+    cy.contains("Action").click()
+    cy.contains("Create Row").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
+      cy.get("input").first().type("goodboy")
+      cy.get("input").eq(1).type("11")
     })
 
     // Save
@@ -50,7 +41,7 @@ context("Create a automation", () => {
 
     // Activate Automation
     cy.get("[data-cy=activate-automation]").click()
-    cy.get(".stop-button.highlighted").should("be.visible")
+    cy.get(".ri-stop-circle-fill.highlighted").should("be.visible")
   })
 
   it("should add row when a new row is added", () => {
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index bf978d3e3..6931fdb86 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,54 +1,60 @@
-xcontext('Create Components', () => {
+xcontext("Create Components", () => {
+  before(() => {
+    cy.server()
+    cy.visit("localhost:4001/_builder")
+    // https://on.cypress.io/type
+    cy.createApp("Table App", "Table App Description")
+    cy.createTable("dog", "name", "age")
+    cy.addRow("bob", "15")
+  })
 
-    before(() => {
-        cy.server()
-        cy.visit('localhost:4001/_builder')
-        // https://on.cypress.io/type
-        cy.createApp('Table App', 'Table App Description')
-        cy.createTable('dog', 'name', 'age')
-        cy.addRow('bob', '15')
-    })
+  // https://on.cypress.io/interacting-with-elements
+  it("should add a container", () => {
+    cy.navigateToFrontend()
+    cy.get(".switcher > :nth-child(2)").click()
+    cy.contains("Container").click()
+  })
+  it("should add a headline", () => {
+    cy.addHeadlineComponent("An Amazing headline!")
 
-    // https://on.cypress.io/interacting-with-elements
-    it('should add a container', () => {
-        cy.contains('frontend').click()
-        cy.get('.switcher > :nth-child(2)').click()
+    getIframeBody().contains("An Amazing headline!")
+  })
+  it("change the font size of the headline", () => {
+    cy.contains("Typography").click()
+    cy.get("[data-cy=font-size-prop-control]").click()
+    cy.contains("60px").click()
+    cy.contains("Design").click()
 
-        cy.contains('Container').click()
-    })
-    it('should add a headline', () => {
-        cy.addHeadlineComponent('An Amazing headline!')
-
-        getIframeBody().contains('An Amazing headline!')
-    })
-    it('change the font size of the headline', () => {
-        cy.contains('Typography').click()
-        cy.get('[data-cy=font-size-prop-control]').click()
-        cy.contains("60px").click()
-        cy.contains('Design').click()
-
-        getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')
-    })
+    getIframeBody()
+      .contains("An Amazing headline!")
+      .should("have.css", "font-size", "60px")
+  })
 })
 
 const getIframeDocument = () => {
-    return cy
-        .get('iframe')
-        // Cypress yields jQuery element, which has the real
-        // DOM element under property "0".
-        // From the real DOM iframe element we can get
-        // the "document" element, it is stored in "contentDocument" property
-        // Cypress "its" command can access deep properties using dot notation
-        // https://on.cypress.io/its
-        .its('0.contentDocument').should('exist')
+  return (
+    cy
+      .get("iframe")
+      // Cypress yields jQuery element, which has the real
+      // DOM element under property "0".
+      // From the real DOM iframe element we can get
+      // the "document" element, it is stored in "contentDocument" property
+      // Cypress "its" command can access deep properties using dot notation
+      // https://on.cypress.io/its
+      .its("0.contentDocument")
+      .should("exist")
+  )
 }
 
 const getIframeBody = () => {
-    // get the document
-    return getIframeDocument()
-        // automatically retries until body is loaded
-        .its('body').should('not.be.undefined')
-        // wraps "body" DOM element to allow
-        // chaining more Cypress commands, like ".find(...)"
-        .then(cy.wrap)
-}
\ No newline at end of file
+  // get the document
+  return (
+    getIframeDocument()
+      // automatically retries until body is loaded
+      .its("body")
+      .should("not.be.undefined")
+      // wraps "body" DOM element to allow
+      // chaining more Cypress commands, like ".find(...)"
+      .then(cy.wrap)
+  )
+}
diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 0715d61c0..fdad39b95 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -8,7 +8,7 @@ context("Create a Table", () => {
     cy.createTable("dog")
 
     // Check if Table exists
-    cy.get(".title span").should("have.text", "dog")
+    cy.get(".table-title h1").should("have.text", "dog")
   })
 
   it("adds a new column to the table", () => {
@@ -26,9 +26,7 @@ context("Create a Table", () => {
       .trigger("mouseover")
       .find(".ri-pencil-line")
       .click({ force: true })
-    cy.get(".actions input")
-      .first()
-      .type("updated")
+    cy.get(".actions input").first().type("updated")
     // Unset table display column
     cy.contains("display column").click()
     cy.contains("Save Column").click()
@@ -36,7 +34,8 @@ context("Create a Table", () => {
   })
 
   it("edits a row", () => {
-    cy.get("button").contains("Edit").click()
+    cy.contains("button", "Edit").click({ force: true })
+    cy.wait(1000)
     cy.get(".modal input").type("Updated")
     cy.contains("Save").click()
     cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
@@ -50,10 +49,10 @@ context("Create a Table", () => {
   })
 
   it("deletes a column", () => {
-    cy
-    .contains("header", "name")
-    .trigger("mouseover")
-    .find(".ri-pencil-line").click({ force: true })
+    cy.contains("header", "name")
+      .trigger("mouseover")
+      .find(".ri-pencil-line")
+      .click({ force: true })
     cy.contains("Delete").click()
     cy.wait(50)
     cy.get(".buttons").contains("Delete").click()
@@ -61,9 +60,7 @@ context("Create a Table", () => {
   })
 
   it("deletes a table", () => {
-    cy.contains("div", "dog")
-      .get(".ri-more-line")
-      .click()
+    cy.contains(".nav-item", "dog").get(".actions").invoke("show").click()
     cy.get("[data-cy=delete-table]").click()
     cy.contains("Delete Table").click()
     cy.contains("dog").should("not.exist")
diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index ca0dd60f8..60bd8c15d 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -22,10 +22,12 @@ context("Create a View", () => {
       cy.get("input").type("Test View")
       cy.contains("Save View").click()
     })
-    cy.get(".title").contains("Test View")
+    cy.get(".table-title h1").contains("Test View")
     cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(3)
-      const headers = Array.from($headers).map(header => header.textContent.trim())
+      const headers = Array.from($headers).map(header =>
+        header.textContent.trim()
+      )
       expect(headers).to.deep.eq(["group", "age", "rating"])
     })
   })
@@ -33,14 +35,8 @@ context("Create a View", () => {
   it("filters the view by age over 10", () => {
     cy.contains("Filter").click()
     cy.contains("Add Filter").click()
-    cy.get(".menu-container")
-      .find("select")
-      .first()
-      .select("age")
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("More Than")
+    cy.get(".menu-container").find("select").first().select("age")
+    cy.get(".menu-container").find("select").eq(1).select("More Than")
     cy.get(".menu-container").find("input").type(18)
     cy.contains("Save").click()
     cy.get("[role=rowgroup] .ag-row").get($values => {
@@ -53,20 +49,16 @@ context("Create a View", () => {
     cy.viewport("macbook-15")
 
     cy.contains("Calculate").click()
-    cy.get(".menu-container")
-      .find("select")
-      .eq(0)
-      .select("Statistics")
+    cy.get(".menu-container").find("select").eq(0).select("Statistics")
     cy.wait(50)
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("age")
+    cy.get(".menu-container").find("select").eq(1).select("age")
     cy.contains("Save").click()
     cy.get(".ag-center-cols-viewport").scrollTo("100%")
     cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(7)
-      const headers = Array.from($headers).map(header => header.textContent.trim())
+      const headers = Array.from($headers).map(header =>
+        header.textContent.trim()
+      )
       expect(headers).to.deep.eq([
         "field",
         "sum",
@@ -78,16 +70,10 @@ context("Create a View", () => {
       ])
     })
     cy.get(".ag-cell").then($values => {
-      const values = Array.from($values).map(header => header.textContent.trim())
-      expect(values).to.deep.eq([
-        "age",
-        "155",
-        "20",
-        "49",
-        "5",
-        "5347",
-        "31",
-      ])
+      const values = Array.from($values).map(header =>
+        header.textContent.trim()
+      )
+      expect(values).to.deep.eq(["age", "155", "20", "49", "5", "5347", "31"])
     })
   })
 
@@ -102,8 +88,7 @@ context("Create a View", () => {
     cy.contains("Students").should("be.visible")
     cy.contains("Teachers").should("be.visible")
 
-    cy
-      .get(".ag-row[row-index=0]")
+    cy.get(".ag-row[row-index=0]")
       .find(".ag-cell")
       .then($values => {
         const values = Array.from($values).map(value => value.textContent)
@@ -120,10 +105,11 @@ context("Create a View", () => {
   })
 
   it("renames a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Edit").click()
+    cy.get("[data-cy=edit-view]").click()
     cy.get(".menu-container").within(() => {
       cy.get("input").type(" Updated")
       cy.contains("Save").click()
@@ -132,11 +118,11 @@ context("Create a View", () => {
   })
 
   it("deletes a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated").click()
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View Updated")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Delete").click()
+    cy.get("[data-cy=delete-view]").click()
     cy.contains("Delete View").click()
     cy.contains("TestView Updated").should("not.be.visible")
   })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index b2a41d9d4..f82ff3082 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -51,7 +51,7 @@ Cypress.Commands.add("createApp", name => {
         .click()
         .type("test")
       cy.contains("Submit").click()
-      cy.contains("Create New Table", {
+      cy.get("[data-cy=new-table]", {
         timeout: 20000,
       }).should("be.visible")
     })
@@ -65,7 +65,7 @@ Cypress.Commands.add("createTestTableWithData", () => {
 
 Cypress.Commands.add("createTable", tableName => {
   // Enter table name
-  cy.contains("Create New Table").click()
+  cy.get("[data-cy=new-table]").click()
   cy.get(".modal").within(() => {
     cy.get("input")
       .first()
@@ -79,9 +79,7 @@ Cypress.Commands.add("createTable", tableName => {
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
-  cy.get(".root")
-    .contains(tableName)
-    .click()
+  cy.contains(".nav-item", tableName).click()
   cy.contains("Create New Column").click()
 
   // Configure column
@@ -155,7 +153,7 @@ Cypress.Commands.add("navigateToFrontend", () => {
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
-  cy.contains("Create New Screen").click()
+  cy.get("[data-cy=new-screen]").click()
   cy.get(".modal").within(() => {
     cy.get("input")
       .eq(0)
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 6dc786f52..1426a7bee 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -85,14 +85,6 @@
      box-sizing: border-box; 
 }
 
-.preview-pane {
-    grid-column: 2;
-    margin: 80px 60px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-}
-
 .budibase__table {
     border: 1px solid var(--grey-4);
     background: #fff;
diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 64755606c..9a193112f 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -106,11 +106,15 @@ const contextToBindables = (tables, walkResult) => context => {
     }
   }
 
+  const stringType = { type: "string" }
   return (
     Object.entries(schema)
       .map(newBindable)
       // add _id and _rev fields - not part of schema, but always valid
-      .concat([newBindable(["_id", "string"]), newBindable(["_rev", "string"])])
+      .concat([
+        newBindable(["_id", stringType]),
+        newBindable(["_rev", stringType]),
+      ])
   )
 }
 
diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js
index 9ab8ef16d..a4565c229 100644
--- a/packages/builder/src/builderStore/getNewComponentName.js
+++ b/packages/builder/src/builderStore/getNewComponentName.js
@@ -2,7 +2,9 @@ import { walkProps } from "./storeUtils"
 import { get_capitalised_name } from "../helpers"
 
 export default function(component, state) {
-  const capitalised = get_capitalised_name(component)
+  const capitalised = get_capitalised_name(
+    component.name || component._component
+  )
 
   const matchingComponents = []
 
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 4e7b089f5..906968230 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -371,7 +371,7 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
     const component = getComponentDefinition(state, componentToAdd)
 
     const instanceId = get(backendUiStore).selectedDatabase._id
-    const instanceName = getNewComponentName(componentToAdd, state)
+    const instanceName = getNewComponentName(component, state)
 
     const newComponent = createProps(
       component,
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index c832ddd8b..f8a3699f4 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -1,12 +1,12 @@
 <script>
-  import { afterUpdate } from "svelte"
   import { automationStore, backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import Flowchart from "./flowchart/FlowChart.svelte"
+  import Flowchart from "./FlowChart/FlowChart.svelte"
+  import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
   $: automationLive = automation?.live
   $: instanceId = $backendUiStore.selectedDatabase._id
+  $: automationCount = $automationStore.automations?.length ?? 0
 
   function onSelect(block) {
     automationStore.update(state => {
@@ -14,80 +14,19 @@
       return state
     })
   }
-
-  function setAutomationLive(live) {
-    automation.live = live
-    automationStore.actions.save({ instanceId, automation })
-    if (live) {
-      notifier.info(`Automation ${automation.name} enabled.`)
-    } else {
-      notifier.danger(`Automation ${automation.name} disabled.`)
-    }
-  }
 </script>
 
-<section>
+{#if automation}
+  <BlockList />
   <Flowchart {automation} {onSelect} />
-</section>
-<footer>
-  {#if automation}
-    <button
-      class:highlighted={automationLive}
-      class:hoverable={automationLive}
-      class="stop-button hoverable">
-      <i class="ri-stop-fill" on:click={() => setAutomationLive(false)} />
-    </button>
-    <button
-      class:highlighted={!automationLive}
-      class:hoverable={!automationLive}
-      class="play-button hoverable"
-      data-cy="activate-automation"
-      on:click={() => setAutomationLive(true)}>
-      <i class="ri-play-fill" />
-    </button>
-  {/if}
-</footer>
+{:else if automationCount === 0}
+  <i>Create your first automation to get started</i>
+{:else}<i>Select an automation to edit</i>{/if}
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    overflow: auto;
-    height: 100%;
-    position: relative;
-  }
-
-  footer {
-    position: absolute;
-    bottom: var(--spacing-xl);
-    right: 30px;
-    display: flex;
-    align-items: flex-end;
-  }
-
-  footer > button {
-    border-radius: 100%;
-    color: var(--white);
-    width: 76px;
-    height: 76px;
-    border: none;
-    background: #adaec4;
-    font-size: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  footer > button:first-child {
-    margin-right: var(--spacing-m);
-  }
-
-  .play-button.highlighted {
-    background: var(--purple);
-  }
-
-  .stop-button.highlighted {
-    background: var(--red);
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
new file mode 100644
index 000000000..de3e9660a
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -0,0 +1,136 @@
+<script>
+  import { sortBy } from "lodash/fp"
+  import { automationStore } from "builderStore"
+  import { DropdownMenu, Modal } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import analytics from "analytics"
+  import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
+
+  $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
+  $: tabs = [
+    {
+      label: "Trigger",
+      value: "TRIGGER",
+      icon: "ri-organization-chart",
+      disabled: hasTrigger,
+    },
+    {
+      label: "Action",
+      value: "ACTION",
+      icon: "ri-flow-chart",
+      disabled: !hasTrigger,
+    },
+    {
+      label: "Logic",
+      value: "LOGIC",
+      icon: "ri-filter-line",
+      disabled: !hasTrigger,
+    },
+  ]
+
+  let selectedIndex
+  let anchors = []
+  let popover
+  let webhookModal
+  $: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
+  $: blocks = sortBy(entry => entry[1].name)(
+    Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
+  )
+
+  function onChangeTab(idx) {
+    selectedIndex = idx
+    popover.show()
+  }
+
+  function closePopover() {
+    selectedIndex = null
+    popover.hide()
+  }
+
+  function addBlockToAutomation(stepId, blockDefinition) {
+    const newBlock = {
+      ...blockDefinition,
+      inputs: blockDefinition.inputs || {},
+      stepId,
+      type: selectedTab,
+    }
+    automationStore.actions.addBlockToAutomation(newBlock)
+    analytics.captureEvent("Added Automation Block", {
+      name: blockDefinition.name,
+    })
+    closePopover()
+    if (stepId === "WEBHOOK") {
+      webhookModal.show()
+    }
+  }
+</script>
+
+<div class="tab-container">
+  {#each tabs as tab, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="tab"
+      class:disabled={tab.disabled}
+      on:click={tab.disabled ? null : () => onChangeTab(idx)}
+      class:active={idx === selectedIndex}>
+      {#if tab.icon}<i class={tab.icon} />{/if}
+      <span>{tab.label}</span>
+      <i class="ri-arrow-down-s-line arrow" />
+    </div>
+  {/each}
+</div>
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
+  <DropdownContainer>
+    {#each blocks as [stepId, blockDefinition]}
+      <DropdownItem
+        icon={blockDefinition.icon}
+        title={blockDefinition.name}
+        subtitle={blockDefinition.description}
+        on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
+    {/each}
+  </DropdownContainer>
+</DropdownMenu>
+<Modal bind:this={webhookModal} width="30%">
+  <CreateWebhookModal />
+</Modal>
+
+<style>
+  .tab-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+    min-height: 24px;
+  }
+
+  .tab {
+    color: var(--grey-7);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .tab span {
+    font-weight: 500;
+    user-select: none;
+  }
+  .tab.active,
+  .tab:not(.disabled):hover {
+    color: var(--ink);
+    cursor: pointer;
+  }
+  .tab.disabled {
+    color: var(--grey-5);
+  }
+  .tab i:not(:last-child) {
+    font-size: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
similarity index 66%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 09a0d097d..48bafb8cd 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -3,7 +3,6 @@
   import Arrow from "./Arrow.svelte"
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
-  import { automationStore } from "builderStore"
 
   export let automation
   export let onSelect
@@ -18,16 +17,9 @@
       blocks = blocks.concat(automation.definition.steps || [])
     }
   }
-  $: automationCount = $automationStore.automations?.length ?? 0
 </script>
 
-{#if automationCount === 0}
-  <i>Create your first automation to get started</i>
-{:else if automation == null}
-  <i>Select an automation to edit</i>
-{:else if !blocks.length}
-  <i>Add some steps to your automation to get started</i>
-{/if}
+{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
 <section class="canvas">
   {#each blocks as block, idx (block.id)}
     <div
@@ -44,19 +36,18 @@
 </section>
 
 <style>
-  i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
-    padding: var(--spacing-xl) 40px;
-    align-self: flex-start;
-  }
-
   section {
-    position: absolute;
-    padding: 40px;
+    margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
+    padding: var(--spacing-l) 40px 0 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+  /* Fix for firefox not respecting bottom padding in scrolling containers */
+  section > *:last-child {
+    padding-bottom: 40px;
   }
 
   .block {
@@ -65,4 +56,9 @@
     justify-content: flex-start;
     align-items: center;
   }
+
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
similarity index 84%
rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 2c78875eb..a96e85d58 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -10,6 +10,11 @@
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
   $: blockIdx = steps.findIndex(step => step.id === block.id)
+  $: allowDeleteTrigger = !steps.length
+
+  function deleteStep() {
+    automationStore.actions.deleteAutomationBlock(block)
+  }
 </script>
 
 <div
@@ -30,6 +35,9 @@
     <div class="label">
       {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
     </div>
+    {#if block.type !== 'TRIGGER' || allowDeleteTrigger}
+      <i on:click|stopPropagation={deleteStep} class="delete ri-close-line" />
+    {/if}
   </header>
   <hr />
   <p>
@@ -61,6 +69,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: var(--spacing-xs);
   }
   header span {
     flex: 1 1 auto;
@@ -74,7 +83,13 @@
   }
   header i {
     font-size: 20px;
-    margin-right: 5px;
+  }
+  header i.delete {
+    opacity: 0.5;
+  }
+  header i.delete:hover {
+    cursor: pointer;
+    opacity: 1;
   }
 
   .ACTION {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
new file mode 100644
index 000000000..c4a39d69b
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { onMount } from "svelte"
+  import { automationStore } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import EditAutomationPopover from "./EditAutomationPopover.svelte"
+
+  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
+
+  onMount(() => {
+    automationStore.actions.fetch()
+  })
+</script>
+
+<div class="automations-list">
+  {#each $automationStore.automations as automation, idx}
+    <NavItem
+      border={idx > 0}
+      icon="ri-stackshare-line"
+      text={automation.name}
+      selected={automation._id === selectedAutomationId}
+      on:click={() => automationStore.actions.select(automation)}>
+      <EditAutomationPopover {automation} />
+    </NavItem>
+  {/each}
+</div>
+
+<style>
+  .automations-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
deleted file mode 100644
index 328c0d612..000000000
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { automationStore } from "builderStore"
-  import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Button, Modal } from "@budibase/bbui"
-
-  let modal
-
-  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
-
-  onMount(() => {
-    automationStore.actions.fetch()
-  })
-</script>
-
-<section>
-  <Button primary wide on:click={modal.show}>Create New Automation</Button>
-  <ul>
-    {#each $automationStore.automations as automation}
-      <li
-        class="automation-item"
-        class:selected={automation._id === selectedAutomationId}
-        on:click={() => automationStore.actions.select(automation)}>
-        <i class="ri-stackshare-line" class:live={automation.live} />
-        {automation.name}
-      </li>
-    {/each}
-  </ul>
-</section>
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
-
-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: var(--spacing-xl) 0 0 0;
-    flex: 1;
-  }
-
-  i {
-    color: var(--grey-6);
-  }
-  i.live {
-    color: var(--ink);
-  }
-
-  li {
-    font-size: 14px;
-  }
-
-  .automation-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    border-radius: var(--border-radius-m);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin-bottom: var(--spacing-xs);
-    color: var(--ink);
-  }
-  .automation-item i {
-    font-size: 24px;
-    margin-right: var(--spacing-m);
-  }
-  .automation-item:hover {
-    cursor: pointer;
-    background: var(--grey-1);
-  }
-  .automation-item.selected {
-    background: var(--grey-2);
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 9a29025d5..e09803e13 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,50 +1,44 @@
 <script>
-  import { automationStore } from "builderStore"
-  import AutomationList from "./AutomationList/AutomationList.svelte"
-  import BlockList from "./BlockList/BlockList.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import AutomationList from "./AutomationList.svelte"
+  import CreateAutomationModal from "./CreateAutomationModal.svelte"
+  import { Modal } from "@budibase/bbui"
+  import { automationStore, backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
 
   let selectedTab = "AUTOMATIONS"
+  let modal
 </script>
 
-<Heading black small>
-  <span
-    data-cy="automation-list"
-    class="hoverable automation-header"
-    class:selected={selectedTab === 'AUTOMATIONS'}
-    on:click={() => (selectedTab = 'AUTOMATIONS')}>
-    Automations
-  </span>
-  {#if $automationStore.selectedAutomation}
-    <span
-      data-cy="add-automation-component"
-      class="hoverable"
-      class:selected={selectedTab === 'ADD'}
-      on:click={() => (selectedTab = 'ADD')}>
-      Steps
-    </span>
-  {/if}
-</Heading>
-<Spacer medium />
-{#if selectedTab === 'AUTOMATIONS'}
-  <AutomationList />
-{:else if selectedTab === 'ADD'}
-  <BlockList />
-{/if}
+<div class="title">
+  <h1>Automations</h1>
+  <i
+    on:click={modal.show}
+    data-cy="new-automation"
+    class="ri-add-circle-fill" />
+</div>
+<AutomationList />
+<Modal bind:this={modal}>
+  <CreateAutomationModal />
+</Modal>
 
 <style>
-  header {
-    font-size: 18px;
-    font-weight: 600;
-    background: none;
+  .title {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
   }
-
-  .automation-header {
-    margin-right: var(--spacing-xl);
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 
   span:not(.selected) {
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
deleted file mode 100644
index 9d48acb6e..000000000
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { backendUiStore, automationStore } from "builderStore"
-  import CreateWebookModal from "../../Shared/CreateWebhookModal.svelte"
-  import analytics from "analytics"
-  import { Modal } from "@budibase/bbui"
-
-  export let blockDefinition
-  export let stepId
-  export let blockType
-
-  let modal
-
-  $: instanceId = $backendUiStore.selectedDatabase._id
-  $: automation = $automationStore.selectedAutomation?.automation
-
-  function addBlockToAutomation() {
-    automationStore.actions.addBlockToAutomation({
-      ...blockDefinition,
-      inputs: blockDefinition.inputs || {},
-      stepId,
-      type: blockType,
-    })
-    if (stepId === "WEBHOOK") {
-      modal.show()
-    }
-    analytics.captureEvent("Added Automation Block", {
-      name: blockDefinition.name,
-    })
-  }
-</script>
-
-<div
-  class="automation-block hoverable"
-  on:click={addBlockToAutomation}
-  data-cy={stepId}>
-  <div><i class={blockDefinition.icon} /></div>
-  <div class="automation-text">
-    <h4>{blockDefinition.name}</h4>
-    <p>{blockDefinition.description}</p>
-  </div>
-</div>
-<Modal bind:this={modal} width="30%">
-  <CreateWebookModal />
-</Modal>
-
-<style>
-  .automation-block {
-    display: grid;
-    grid-template-columns: 20px auto;
-    align-items: center;
-    margin-top: var(--spacing-s);
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-m);
-  }
-  .automation-block:hover {
-    background-color: var(--grey-1);
-  }
-  .automation-block:first-child {
-    margin-top: 0;
-  }
-
-  i {
-    color: var(--grey-7);
-    font-size: 20px;
-  }
-
-  .automation-text {
-    margin-left: 16px;
-  }
-  .automation-text h4 {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 5px;
-    margin-top: 0;
-  }
-  .automation-text p {
-    font-size: 12px;
-    line-height: 1.4;
-    color: var(--grey-7);
-    margin: 0;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
deleted file mode 100644
index 1455f60ef..000000000
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { sortBy } from "lodash/fp"
-  import { automationStore } from "builderStore"
-  import AutomationBlock from "./AutomationBlock.svelte"
-  import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
-
-  let selectedTab = "TRIGGER"
-  let buttonProps = []
-  $: blocks = sortBy(entry => entry[1].name)(
-    Object.entries($automationStore.blockDefinitions[selectedTab])
-  )
-
-  $: {
-    if ($automationStore.selectedAutomation.hasTrigger()) {
-      buttonProps = [
-        { value: "ACTION", text: "Action" },
-        { value: "LOGIC", text: "Logic" },
-      ]
-      if (selectedTab === "TRIGGER") {
-        selectedTab = "ACTION"
-      }
-    } else {
-      buttonProps = [{ value: "TRIGGER", text: "Trigger" }]
-      if (selectedTab !== "TRIGGER") {
-        selectedTab = "TRIGGER"
-      }
-    }
-  }
-
-  function onChangeTab(tab) {
-    selectedTab = tab
-  }
-</script>
-
-<section>
-  <FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
-  <div id="blocklist">
-    {#each blocks as [stepId, blockDefinition]}
-      <AutomationBlock {blockDefinition} {stepId} blockType={selectedTab} />
-    {/each}
-  </div>
-</section>
-
-<style>
-  #blocklist {
-    margin-top: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
rename to packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
new file mode 100644
index 000000000..a3ec5b2ae
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -0,0 +1,88 @@
+<script>
+  import { automationStore, backendUiStore } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let automation
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+  $: instanceId = $backendUiStore.selectedDatabase._id
+
+  function showModal() {
+    dropdown.hide()
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteAutomation() {
+    await automationStore.actions.delete({
+      instanceId,
+      automation,
+    })
+    notifier.success("Automation deleted.")
+  }
+</script>
+
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={showModal} />
+    </DropdownContainer>
+  </DropdownMenu>
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete Automation"
+  onOk={deleteAutomation}
+  title="Confirm Deletion">
+  Are you sure you wish to delete the automation
+  <i>{automation.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<style>
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.icon i {
+    font-size: 16px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: var(--spacing-s) 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/index.js b/packages/builder/src/components/automation/AutomationPanel/index.js
deleted file mode 100644
index 3ba95ab3b..000000000
--- a/packages/builder/src/components/automation/AutomationPanel/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AutomationPanel } from "./AutomationPanel.svelte"
-export { default as BlockList } from "./BlockList/BlockList.svelte"
-export { default as AutomationList } from "./AutomationList/AutomationList.svelte"
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 3d7150eb7..8bb4dc36d 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -1,10 +1,10 @@
 <script>
-  import TableSelector from "./ParamInputs/TableSelector.svelte"
-  import RowSelector from "./ParamInputs/RowSelector.svelte"
-  import { Button, Input, TextArea, Select, Label } from "@budibase/bbui"
+  import TableSelector from "./TableSelector.svelte"
+  import RowSelector from "./RowSelector.svelte"
+  import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "../../userInterface/BindableInput.svelte"
+  import BindableInput from "components/userInterface/BindableInput.svelte"
 
   export let block
   export let webhookModal
@@ -47,43 +47,41 @@
   }
 </script>
 
-<div class="container" data-cy="automation-block-setup">
-  <div class="block-label">{block.name}</div>
-  {#each inputs as [key, value]}
-    <div class="bb-margin-xl block-field">
-      <Label extraSmall grey>{value.title}</Label>
-      {#if value.type === 'string' && value.enum}
-        <Select bind:value={block.inputs[key]} thin secondary>
-          <option value="">Choose an option</option>
-          {#each value.enum as option, idx}
-            <option value={option}>
-              {value.pretty ? value.pretty[idx] : option}
-            </option>
-          {/each}
-        </Select>
-      {:else if value.customType === 'password'}
-        <Input type="password" thin bind:value={block.inputs[key]} />
-      {:else if value.customType === 'table'}
-        <TableSelector bind:value={block.inputs[key]} />
-      {:else if value.customType === 'row'}
-        <RowSelector bind:value={block.inputs[key]} {bindings} />
-      {:else if value.customType === 'webhookUrl'}
-        <WebhookDisplay value={block.inputs[key]} />
-      {:else if value.type === 'string' || value.type === 'number'}
-        <BindableInput
-          type="string"
-          thin
-          bind:value={block.inputs[key]}
-          {bindings} />
-      {/if}
-    </div>
-  {/each}
-  {#if stepId === 'WEBHOOK'}
-    <Button wide secondary on:click={() => webhookModal.show()}>
-      Setup webhook
-    </Button>
-  {/if}
-</div>
+<div class="block-label">{block.name}</div>
+{#each inputs as [key, value]}
+  <div class="block-field">
+    <Label extraSmall grey>{value.title}</Label>
+    {#if value.type === 'string' && value.enum}
+      <Select bind:value={block.inputs[key]} extraThin secondary>
+        <option value="">Choose an option</option>
+        {#each value.enum as option, idx}
+          <option value={option}>
+            {value.pretty ? value.pretty[idx] : option}
+          </option>
+        {/each}
+      </Select>
+    {:else if value.customType === 'password'}
+      <Input type="password" extraThin bind:value={block.inputs[key]} />
+    {:else if value.customType === 'table'}
+      <TableSelector bind:value={block.inputs[key]} />
+    {:else if value.customType === 'row'}
+      <RowSelector bind:value={block.inputs[key]} {bindings} />
+    {:else if value.customType === 'webhookUrl'}
+      <WebhookDisplay value={block.inputs[key]} />
+    {:else if value.type === 'string' || value.type === 'number'}
+      <BindableInput
+        type="string"
+        extraThin
+        bind:value={block.inputs[key]}
+        {bindings} />
+    {/if}
+  </div>
+{/each}
+{#if stepId === 'WEBHOOK'}
+  <Button wide secondary on:click={() => webhookModal.show()}>
+    Set Up Webhook
+  </Button>
+{/if}
 
 <style>
   .block-field {
@@ -92,7 +90,7 @@
 
   .block-label {
     font-weight: 500;
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
 
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
similarity index 87%
rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte
rename to packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index a54f54b04..117f00d1a 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,7 +1,7 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Input, Select, Label } from "@budibase/bbui"
-  import BindableInput from "../../../userInterface/BindableInput.svelte"
+  import BindableInput from "../../userInterface/BindableInput.svelte"
 
   export let value
   export let bindings
@@ -19,7 +19,7 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value={value.tableId} thin secondary>
+  <Select bind:value={value.tableId} extraThin secondary>
     <option value="">Choose an option</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
@@ -31,7 +31,7 @@
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if schemaHasOptions(schema)}
-        <Select label={field} thin secondary bind:value={value[field]}>
+        <Select label={field} extraThin secondary bind:value={value[field]}>
           <option value="">Choose an option</option>
           {#each schema.constraints.inclusion as option}
             <option value={option}>{option}</option>
@@ -39,7 +39,7 @@
         </Select>
       {:else if schema.type === 'string' || schema.type === 'number'}
         <BindableInput
-          thin
+          extraThin
           bind:value={value[field]}
           label={field}
           type="string"
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 3f2179976..97e536e2e 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -2,25 +2,27 @@
   import { backendUiStore, automationStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import { Button, Input, Label, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
-  let selectedTab = "SETUP"
-  let confirmDeleteDialog
   let webhookModal
 
   $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
-  $: allowDeleteBlock =
-    $automationStore.selectedBlock?.type !== "TRIGGER" ||
-    !automation?.definition?.steps?.length
   $: name = automation?.name ?? ""
+  $: automationLive = automation?.live
 
-  function deleteAutomationBlock() {
-    automationStore.actions.deleteAutomationBlock(
-      $automationStore.selectedBlock
-    )
+  function setAutomationLive(live) {
+    if (automation.live === live) {
+      return
+    }
+    automation.live = live
+    automationStore.actions.save({ instanceId, automation })
+    if (live) {
+      notifier.info(`Automation ${automation.name} enabled.`)
+    } else {
+      notifier.danger(`Automation ${automation.name} disabled.`)
+    }
   }
 
   async function testAutomation() {
@@ -41,115 +43,78 @@
     })
     notifier.success(`Automation ${automation.name} saved.`)
   }
-
-  async function deleteAutomation() {
-    await automationStore.actions.delete({
-      instanceId,
-      automation,
-    })
-    notifier.success("Automation deleted.")
-  }
 </script>
 
-<section>
-  <header>
-    <span
-      class="hoverable"
-      class:selected={selectedTab === 'SETUP'}
-      on:click={() => (selectedTab = 'SETUP')}>
-      Setup
-    </span>
-  </header>
-  <div class="content">
-    {#if $automationStore.selectedBlock}
-      <AutomationBlockSetup
-        bind:block={$automationStore.selectedBlock}
-        {webhookModal} />
-    {:else if $automationStore.selectedAutomation}
-      <div class="block-label">Automation <b>{automation.name}</b></div>
-      <Button secondary wide on:click={testAutomation}>Test Automation</Button>
-    {/if}
-  </div>
-  <div class="buttons">
-    {#if $automationStore.selectedBlock}
-      <Button
-        green
-        wide
-        data-cy="save-automation-setup"
-        on:click={saveAutomation}>
-        Save Automation
-      </Button>
-      <Button
-        disabled={!allowDeleteBlock}
-        red
-        wide
-        on:click={deleteAutomationBlock}>
-        Delete Step
-      </Button>
-    {:else if $automationStore.selectedAutomation}
-      <Button
-        green
-        wide
-        data-cy="save-automation-setup"
-        on:click={saveAutomation}>
-        Save Automation
-      </Button>
-      <Button red wide on:click={() => confirmDeleteDialog.show()}>
-        Delete Automation
-      </Button>
-    {/if}
-  </div>
-</section>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete the automation '${name}'?`}
-  okText="Delete Automation"
-  onOk={deleteAutomation} />
+<div class="title">
+  <h1>Setup</h1>
+  <i
+    class:highlighted={automationLive}
+    class:hoverable={automationLive}
+    on:click={() => setAutomationLive(false)}
+    class="ri-stop-circle-fill" />
+  <i
+    class:highlighted={!automationLive}
+    class:hoverable={!automationLive}
+    data-cy="activate-automation"
+    on:click={() => setAutomationLive(true)}
+    class="ri-play-circle-fill" />
+</div>
+{#if $automationStore.selectedBlock}
+  <AutomationBlockSetup
+    bind:block={$automationStore.selectedBlock}
+    {webhookModal} />
+{:else if $automationStore.selectedAutomation}
+  <div class="block-label">{automation.name}</div>
+  <Button secondary wide on:click={testAutomation}>Test Automation</Button>
+{/if}
+<Button
+  secondary
+  wide
+  data-cy="save-automation-setup"
+  on:click={saveAutomation}>
+  Save Automation
+</Button>
 <Modal bind:this={webhookModal} width="30%">
   <CreateWebookModal />
 </Modal>
 
 <style>
-  section {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-
-  header {
-    font-size: 18px;
-    font-weight: 600;
-    font-family: inter, sans-serif;
+  .title {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
-    color: var(--ink);
+    gap: var(--spacing-xs);
+  }
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+    flex: 1 1 auto;
   }
-  header > span {
+  .title i {
+    font-size: 20px;
     color: var(--grey-5);
-    margin-right: var(--spacing-xl);
-    cursor: pointer;
   }
-  .selected {
+  .title i.highlighted {
     color: var(--ink);
   }
+  .title i.hoverable:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
 
   .block-label {
+    font-size: var(--font-size-xs);
     font-weight: 500;
-    font-size: 14px;
     color: var(--grey-7);
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .content {
-    flex: 1 0 auto;
   }
 
-  .buttons {
-    display: grid;
-    gap: var(--spacing-m);
+  .footer {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: stretch;
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
similarity index 88%
rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte
rename to packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index ba0b55cc8..9727fa1d5 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value secondary thin>
+  <Select bind:value secondary extraThin>
     <option value="">Choose an option</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
diff --git a/packages/builder/src/components/automation/SetupPanel/index.js b/packages/builder/src/components/automation/SetupPanel/index.js
deleted file mode 100644
index ccfbddaf1..000000000
--- a/packages/builder/src/components/automation/SetupPanel/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SetupPanel } from "./SetupPanel.svelte"
diff --git a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
index 246c31381..8be9400ca 100644
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
@@ -3,12 +3,8 @@
   import WebhookDisplay from "./WebhookDisplay.svelte"
   import { ModalContent } from "@budibase/bbui"
   import { onMount, onDestroy } from "svelte"
-  import { cloneDeep } from "lodash/fp"
-  import analytics from "analytics"
 
   const POLL_RATE_MS = 2500
-  const DEFAULT_SCHEMA_OUTPUT = "Any input allowed"
-  let name
   let interval
   let finished = false
   let schemaURL
@@ -88,8 +84,7 @@
     text-decoration: none;
   }
   p {
-    margin-top: 0;
-    padding-top: 0;
+    margin: 0;
     text-align: justify;
   }
   .finished-text {
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index cac9a5839..5b9293bc8 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -1,7 +1,7 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
   import { Input } from "@budibase/bbui"
-  import { store } from "../../../builderStore"
+  import { store } from "builderStore"
 
   export let value
   export let production = false
diff --git a/packages/builder/src/components/automation/index.js b/packages/builder/src/components/automation/index.js
deleted file mode 100644
index cb5a603ea..000000000
--- a/packages/builder/src/components/automation/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AutomationBuilder } from "./AutomationBuilder/AutomationBuilder.svelte"
-export { default as SetupPanel } from "./SetupPanel/SetupPanel.svelte"
-export { default as AutomationPanel } from "./AutomationPanel/AutomationPanel.svelte"
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 8d72c1257..9a5eaef83 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -12,7 +12,6 @@
 
   $: title = $backendUiStore.selectedTable.name
   $: schema = $backendUiStore.selectedTable.schema
-  $: tableId = $backendUiStore.selectedTable._id
   $: tableView = {
     schema,
     name: $backendUiStore.selectedView.name,
diff --git a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
index d9bae810c..ede4d5402 100644
--- a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
@@ -1,7 +1,6 @@
 <script>
   import api from "builderStore/api"
   import Table from "./Table.svelte"
-  import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
 
   export let tableId
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 8dd25da3c..35986785d 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,6 +1,5 @@
 <script>
   import { fade } from "svelte/transition"
-  import { Button } from "@budibase/bbui"
   import { goto, params } from "@sveltech/routify"
   import AgGrid from "@budibase/svelte-ag-grid"
 
@@ -8,11 +7,7 @@
   import { notifier } from "builderStore/store/notifications"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
-  import {
-    getRenderer,
-    editRowRenderer,
-    deleteRowRenderer,
-  } from "./cells/cellRenderers"
+  import { getRenderer, editRowRenderer } from "./cells/cellRenderers"
   import TableLoadingOverlay from "./TableLoadingOverlay"
   import TableHeader from "./TableHeader"
   import "@budibase/svelte-ag-grid/dist/index.css"
@@ -58,8 +53,8 @@
           resizable: false,
           suppressMovable: true,
           suppressMenu: true,
-          minWidth: 100,
-          width: 100,
+          minWidth: 84,
+          width: 84,
           cellRenderer: editRowRenderer,
         },
       ]
@@ -100,7 +95,7 @@
   }
 
   const deleteRows = async () => {
-    const response = await api.post(`/api/${tableId}/rows`, {
+    await api.post(`/api/${tableId}/rows`, {
       rows: selectedRows,
       type: "delete",
     })
@@ -110,16 +105,23 @@
   }
 </script>
 
-<section>
-  <div class="table-controls">
-    <h2 class="title"><span>{title}</span></h2>
-    <div class="popovers">
-      <slot />
-      {#if selectedRows.length > 0}
-        <DeleteRowsButton {selectedRows} {deleteRows} />
-      {/if}
-    </div>
+<div>
+  <div class="table-title">
+    <h1>{title}</h1>
+    {#if loading}
+      <div transition:fade>
+        <Spinner size="10" />
+      </div>
+    {/if}
   </div>
+  <div class="popovers">
+    <slot />
+    {#if selectedRows.length > 0}
+      <DeleteRowsButton {selectedRows} {deleteRows} />
+    {/if}
+  </div>
+</div>
+<div class="grid-wrapper">
   <AgGrid
     {theme}
     {options}
@@ -127,35 +129,57 @@
     {columnDefs}
     {loading}
     on:select={({ detail }) => (selectedRows = detail)} />
-</section>
+</div>
 
 <style>
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    margin-top: 0;
+  .table-title {
+    height: 24px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-
-  .title > span {
-    margin-right: var(--spacing-xs);
+  .table-title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
   }
-
-  .table-controls {
-    width: 100%;
+  .table-title > div {
+    margin-left: var(--spacing-xs);
   }
 
   .popovers {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .popovers :global(button) {
+    font-weight: 500;
+    margin-top: var(--spacing-l);
+  }
+  .popovers :global(button svg) {
+    margin-right: var(--spacing-xs);
+  }
+
+  .grid-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .grid-wrapper :global(> *) {
+    height: auto;
+    flex: 1 1 auto;
   }
 
-  :global(.popovers > div) {
-    margin-right: var(--spacing-m);
-    margin-bottom: var(--spacing-xl);
+  :global(.ag-theme-alpine) {
+    --ag-border-color: var(--grey-4);
+    --ag-header-background-color: var(--grey-1);
+    --ag-odd-row-background-color: var(--grey-1);
+    --ag-row-border-color: var(--grey-3);
   }
 
   :global(.ag-menu) {
@@ -168,11 +192,15 @@
   }
 
   :global(.ag-header-cell-text) {
-    font-family: Inter;
+    font-family: var(--font-sans);
     font-weight: 600;
     color: var(--ink);
   }
 
+  tbody tr:hover {
+    background: var(--grey-1);
+  }
+
   :global(.ag-filter) {
     padding: var(--spacing-s);
     outline: none;
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index fc933e374..f55969087 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { TextButton, Icon, Modal, ModalContent } from "@budibase/bbui"
-  import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
+  import { TextButton, Icon } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
   export let deleteRows
@@ -21,14 +21,12 @@
     row(s)
   </TextButton>
 </div>
-<Modal bind:this={modal}>
-  <ModalContent
-    red
-    confirmText="Delete"
-    onConfirm={confirmDeletion}
-    title="Confirm Row Deletion">
-    Are you sure you want to delete
-    {selectedRows.length}
-    row{selectedRows.length > 1 ? 's' : ''}?
-  </ModalContent>
-</Modal>
+<ConfirmDialog
+  bind:this={modal}
+  okText="Delete"
+  onOk={confirmDeletion}
+  title="Confirm Deletion">
+  Are you sure you want to delete
+  {selectedRows.length}
+  row{selectedRows.length > 1 ? 's' : ''}?
+</ConfirmDialog>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index c831ef819..866e574bc 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -170,7 +170,7 @@
   okText="Delete Column"
   onOk={deleteColumn}
   onCancel={hideDeleteDialog}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   .actions {
diff --git a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
index 51b830b48..b9f9cf32e 100644
--- a/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte
@@ -1,14 +1,11 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
   import * as api from "../api"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let row
 
-  let anchor
-  let dropdown
   let confirmDeleteDialog
 
   function showDelete() {
@@ -28,7 +25,7 @@
   body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
   okText="Delete Row"
   onOk={deleteRow}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   .ri-delete-bin-line:hover {
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
index d3c2ab03d..d5b3b63e0 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
@@ -1,13 +1,9 @@
 <script>
-  import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal, Button } from "@budibase/bbui"
+  import { Modal, Button } from "@budibase/bbui"
   import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
 
   export let row
 
-  let anchor
-  let dropdown
-  let confirmDeleteDialog
   let modal
 
   function showModal(e) {
@@ -16,7 +12,7 @@
   }
 </script>
 
-<Button translucent small on:click={showModal}>Edit</Button>
+<Button data-cy="edit-row" translucent small on:click={showModal}>Edit</Button>
 <Modal bind:this={modal}>
   <CreateEditRowModal {row} />
 </Modal>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 1e766072f..d328df4b4 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -1,10 +1,9 @@
 <script>
-  import { Heading, Body, Button, Select, Label } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { notifier } from "builderStore/store/notifications"
   import { FIELDS } from "constants/backend"
   import api from "builderStore/api"
 
-  const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 1
 
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index b8683d3db..5a57fe6a4 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -5,9 +5,10 @@
   import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
+  import NavItem from "components/common/NavItem.svelte"
 
+  let modal
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -20,67 +21,68 @@
     backendUiStore.actions.views.select(view)
     $goto(`./view/${view.name}`)
   }
+
+  function onClickView(table, viewName) {
+    if (selectedView === viewName) {
+      return
+    }
+    selectView({
+      name: viewName,
+      ...table.views[viewName],
+    })
+  }
 </script>
 
-<div class="items-root">
-  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-    <div class="hierarchy">
-      <div class="components-list-container">
-        <Heading small>Tables</Heading>
-        <Spacer medium />
-        <CreateTableModal />
-        <div class="hierarchy-items-container">
-          {#each $backendUiStore.tables as table}
-            <ListItem
-              selected={selectedView === `all_${table._id}`}
-              title={table.name}
-              icon="ri-table-fill"
-              on:click={() => selectTable(table)}>
-              <EditTablePopover {table} />
-            </ListItem>
-            {#each Object.keys(table.views || {}) as viewName}
-              <ListItem
-                indented
-                selected={selectedView === viewName}
-                title={viewName}
-                icon="ri-eye-line"
-                on:click={() => (selectedView === viewName ? {} : selectView({
-                        name: viewName,
-                        ...table.views[viewName],
-                      }))}>
-                <EditViewPopover
-                  view={{ name: viewName, ...table.views[viewName] }} />
-              </ListItem>
-            {/each}
-          {/each}
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
+{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+  <div class="title">
+    <h1>Tables</h1>
+    <i data-cy="new-table" on:click={modal.show} class="ri-add-circle-fill" />
+  </div>
+  <div class="hierarchy-items-container">
+    {#each $backendUiStore.tables as table, idx}
+      <NavItem
+        border={idx > 0}
+        icon="ri-table-line"
+        text={table.name}
+        selected={selectedView === `all_${table._id}`}
+        on:click={() => selectTable(table)}>
+        <EditTablePopover {table} />
+      </NavItem>
+      {#each Object.keys(table.views || {}) as viewName}
+        <NavItem
+          indentLevel={1}
+          icon="ri-eye-line"
+          text={viewName}
+          selected={selectedView === viewName}
+          on:click={() => onClickView(table, viewName)}>
+          <EditViewPopover
+            view={{ name: viewName, ...table.views[viewName] }} />
+        </NavItem>
+      {/each}
+    {/each}
+  </div>
+{/if}
+<Modal bind:this={modal}>
+  <CreateTableModal />
+</Modal>
 
 <style>
-  h5 {
-    font-size: 18px;
-    font-weight: 600;
-    margin-top: 0;
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .items-root {
+  .title {
     display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
-
-  .hierarchy {
-    display: flex;
-    flex-direction: column;
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
   }
-
-  .hierarchy-items-container {
-    margin-top: var(--spacing-xl);
-    flex: 1 1 auto;
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index dd691e9e8..146f881b2 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -2,8 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
+  import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -22,12 +21,6 @@
   let dataImport
   let error = ""
 
-  function resetState() {
-    name = ""
-    dataImport = undefined
-    error = ""
-  }
-
   function checkValid(evt) {
     const tableName = evt.target.value
     if ($backendUiStore.models?.some(model => model.name === tableName)) {
@@ -84,23 +77,20 @@
   }
 </script>
 
-<Button primary wide on:click={modal.show}>Create New Table</Button>
-<Modal bind:this={modal} on:hide={resetState}>
-  <ModalContent
-    title="Create Table"
-    confirmText="Create"
-    onConfirm={saveTable}
-    disabled={error || !name || (dataImport && !dataImport.valid)}>
-    <Input
-      data-cy="table-name-input"
-      thin
-      label="Table Name"
-      on:input={checkValid}
-      bind:value={name}
-      {error} />
-    <div>
-      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-      <TableDataImport bind:dataImport />
-    </div>
-  </ModalContent>
-</Modal>
+<ModalContent
+  title="Create Table"
+  confirmText="Create"
+  onConfirm={saveTable}
+  disabled={error || !name || (dataImport && !dataImport.valid)}>
+  <Input
+    data-cy="table-name-input"
+    thin
+    label="Table Name"
+    on:input={checkValid}
+    bind:value={name}
+    {error} />
+  <div>
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <TableDataImport bind:dataImport />
+  </div>
+</ModalContent>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 25f74671f..c794999ac 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -1,11 +1,9 @@
 <script>
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import screenTemplates from "builderStore/store/screenTemplates"
-  import api from "builderStore/api"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let table
 
@@ -66,42 +64,46 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit Table</h5>
+        <Input
+          label="Table Name"
+          thin
+          bind:value={table.name}
+          on:input={checkValid}
+          {error} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary disabled={error} on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-table"
+          title="Edit"
+          on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showModal}
+          data-cy="delete-table" />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit Table</h5>
-      <Input
-        label="Table Name"
-        thin
-        bind:value={table.name}
-        on:input={checkValid}
-        {error} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary disabled={error} on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-table" on:click={showModal}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Delete">
+  title="Confirm Deletion">
   Are you sure you wish to delete the table
   <i>{table.name}?</i>
   The following will also be deleted:
@@ -155,29 +157,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 9c165355d..331f336d4 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -2,9 +2,9 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let view
 
@@ -46,38 +46,42 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
-  <i class="ri-more-line" />
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit View</h5>
+        <Input label="View Name" thin bind:value={view.name} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-view"
+          title="Edit"
+          on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          data-cy="delete-view"
+          on:click={showDelete} />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit View</h5>
-      <Input label="View Name" thin bind:value={view.name} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-view" on:click={showDelete}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Delete" />
+  title="Confirm Deletion" />
 
 <style>
   div.icon {
@@ -108,29 +112,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
deleted file mode 100644
index 3af21e439..000000000
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-  export let disabled = false
-  export let hidden = false
-  export let secondary = false
-  export let primary = true
-  export let cancel = false
-  export let alert = false
-  export let warning = false
-</script>
-
-<button
-  on:click
-  class="button"
-  class:hidden
-  class:secondary
-  class:primary
-  class:alert
-  class:cancel
-  class:warning
-  {disabled}>
-  <slot />
-</button>
-
-<style>
-  .primary {
-    color: #ffffff;
-    background: var(--blue);
-    border: solid 1px var(--blue);
-  }
-
-  .alert {
-    color: white;
-    background: #e26d69;
-    border: solid 1px #e26d69;
-  }
-
-  .cancel {
-    color: var(--secondary40);
-    background: none;
-  }
-
-  .secondary {
-    color: var(--ink);
-    border: solid 1px var(--grey-4);
-    background: white;
-  }
-
-  .button {
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: 3px;
-    padding: 10px 20px;
-    height: 40px;
-  }
-
-  .button:hover {
-    cursor: pointer;
-    filter: saturate(90%);
-  }
-
-  .button:disabled {
-    color: rgba(22, 48, 87, 0.2);
-    cursor: default;
-    background: transparent;
-  }
-
-  .hidden {
-    visibility: hidden;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Button.svelte b/packages/builder/src/components/common/Button.svelte
deleted file mode 100644
index a5fe3752a..000000000
--- a/packages/builder/src/components/common/Button.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script>
-  export let color = "primary"
-  export let className = ""
-  export let style = ""
-  export let groupPosition = ""
-  export let grouped = false
-
-  $: borderClass = grouped ? "" : "border-normal"
-</script>
-
-<button
-  class="{color}
-  {className}
-  {borderClass}
-  {grouped ? 'grouped' : ''}"
-  {style}
-  on:click>
-  <slot />
-</button>
-
-<style>
-  .border-normal {
-    border-radius: var(--borderradiusall);
-  }
-  .border-left {
-    border-radius: var(--borderradius) 0 0 var(--borderradius);
-  }
-  .border-right {
-    border-radius: 0 var(--borderradius) var(--borderradius) 0;
-  }
-  .border-middle {
-    border-radius: 0;
-  }
-
-  button {
-    border-style: solid;
-    padding: 7.5px 15px;
-    cursor: pointer;
-    margin: 5px;
-    border-radius: 5px;
-  }
-
-  /* ---- PRIMARY ----*/
-  .primary {
-    background-color: var(--blue);
-    border-color: var(--blue);
-    color: var(--white);
-  }
-
-  .primary:hover {
-    background-color: var(--blue);
-    border-color: var(--blue);
-  }
-
-  .primary:active {
-    background-color: var(--primarydark);
-    border-color: var(--primarydark);
-  }
-
-  .primary-outline {
-    background-color: var(--white);
-    border-color: var(--blue);
-    color: var(--blue);
-  }
-
-  .primary-outline:hover {
-    background-color: var(--primary10);
-  }
-
-  .primary-outline:pressed {
-    background-color: var(--primary25);
-  }
-
-  /* ---- secondary ----*/
-
-  .secondary {
-    background-color: var(--ink);
-    border-color: var(--ink);
-    color: var(--white);
-  }
-
-  .secondary:hover {
-    background-color: var(--secondary75);
-    border-color: var(--secondary75);
-  }
-
-  .secondary:pressed {
-    background-color: var(--secondarydark);
-    border-color: var(--secondarydark);
-  }
-
-  .secondary-outline {
-    background-color: var(--white);
-    border-color: var(--ink);
-    color: var(--ink);
-  }
-
-  .secondary-outline:hover {
-    background-color: var(--secondary10);
-  }
-
-  .secondary-outline:pressed {
-    background-color: var(--secondary25);
-  }
-
-  /* ---- success ----*/
-  .success {
-    background-color: var(--success100);
-    border-color: var(--success100);
-    color: var(--white);
-  }
-
-  .success:hover {
-    background-color: var(--success75);
-    border-color: var(--success75);
-  }
-
-  .success:pressed {
-    background-color: var(--successdark);
-    border-color: var(--successdark);
-  }
-
-  .success-outline {
-    background-color: var(--white);
-    border-color: var(--success100);
-    color: var(--success100);
-  }
-
-  .success-outline:hover {
-    background-color: var(--success10);
-  }
-
-  .success-outline:pressed {
-    background-color: var(--success25);
-  }
-
-  /* ---- deletion ----*/
-  .deletion {
-    background-color: var(--red);
-    border-color: var(--red);
-    color: var(--white);
-  }
-
-  .deletion:hover {
-    background-color: var(--red-light);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion:pressed {
-    background-color: var(--red-dark);
-    border-color: var(--red-dark);
-    color: var(--white);
-  }
-
-  .deletion-outline {
-    background-color: var(--white);
-    border-color: var(--red);
-    color: var(--red);
-  }
-
-  .deletion-outline:hover {
-    background-color: var(--red-light);
-    color: var(--red);
-  }
-
-  .deletion-outline:pressed {
-    background-color: var(--red-dark);
-    color: var(--white);
-  }
-</style>
diff --git a/packages/builder/src/components/common/ButtonGroup.svelte b/packages/builder/src/components/common/ButtonGroup.svelte
deleted file mode 100644
index 7b57ea34c..000000000
--- a/packages/builder/src/components/common/ButtonGroup.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  export let style = ""
-</script>
-
-<div class="root" {style}>
-  <slot />
-</div>
-
-<style>
-  .root {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
new file mode 100644
index 000000000..0e881a479
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
@@ -0,0 +1,13 @@
+<div class="dropdown-container" on:click>
+  <slot />
+</div>
+
+<style>
+  .dropdown-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: var(--spacing-s) 0;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
new file mode 100644
index 000000000..66a384fc9
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -0,0 +1,70 @@
+<script>
+  export let icon
+  export let title
+  export let subtitle
+  export let disabled
+</script>
+
+<div
+  class="dropdown-item"
+  class:disabled
+  on:click
+  class:big={subtitle != null}
+  {...$$restProps}>
+  {#if icon}<i class={icon} />{/if}
+  <div class="content">
+    <div class="title">{title}</div>
+    {#if subtitle != null}
+      <div class="subtitle">{subtitle}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .dropdown-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding: var(--spacing-xs) var(--spacing-l);
+    color: var(--ink);
+  }
+  .dropdown-item.disabled,
+  .dropdown-item.disabled .subtitle {
+    pointer-events: none;
+    color: var(--grey-5);
+  }
+  .dropdown-item.big {
+    padding: var(--spacing-s) var(--spacing-l);
+  }
+  .dropdown-item:not(.disabled):hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .title,
+  .subtitle {
+    font-size: var(--font-size-xs);
+  }
+
+  .title {
+    font-weight: 400;
+  }
+
+  .subtitle {
+    color: var(--grey-7);
+    font-weight: 400;
+  }
+
+  i {
+    font-size: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/index.js b/packages/builder/src/components/common/Dropdowns/index.js
new file mode 100644
index 000000000..a95e303ec
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/index.js
@@ -0,0 +1,2 @@
+export { default as DropdownContainer } from "./DropdownContainer.svelte"
+export { default as DropdownItem } from "./DropdownItem.svelte"
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 53cd60614..be9382908 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,11 +1,13 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
-  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
+  import { Dropzone } from "@budibase/bbui"
   import api from "builderStore/api"
 
   export let files = []
 
-  function handleFileTooLarge() {
+  const BYTES_IN_MB = 1000000
+
+  function handleFileTooLarge(fileSizeLimit) {
     notifier.danger(
       `Files cannot exceed ${fileSizeLimit /
         BYTES_IN_MB}MB. Please try again with smaller files.`
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
new file mode 100644
index 000000000..b0f90a10a
--- /dev/null
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -0,0 +1,109 @@
+<script>
+  export let icon
+  export let withArrow = false
+  export let withActions = true
+  export let indentLevel = 0
+  export let text
+  export let border = true
+  export let selected = false
+  export let opened = false
+  export let draggable = false
+</script>
+
+<div
+  class="nav-item"
+  class:border
+  class:selected
+  style={`padding-left: ${indentLevel * 18}px`}
+  {draggable}
+  on:dragend
+  on:dragstart
+  on:dragover
+  on:drop
+  on:click
+  ondragover="return false"
+  ondragenter="return false">
+  <div class="content">
+    {#if withArrow}
+      <div class:opened class="icon arrow">
+        <i class="ri-arrow-right-s-line" />
+      </div>
+    {/if}
+    {#if icon}
+      <div class="icon"><i class={icon} /></div>
+    {/if}
+    <div class="text">{text}</div>
+    {#if withActions}
+      <div class="actions">
+        <slot />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .nav-item {
+    border-radius: var(--border-radius-m);
+    cursor: pointer;
+    color: var(--grey-7);
+  }
+  .nav-item.border {
+    border-top: 1px solid var(--grey-1);
+  }
+  .nav-item.selected {
+    background-color: var(--grey-2);
+    color: var(--ink);
+  }
+  .nav-item:hover {
+    background-color: var(--grey-1);
+  }
+  .nav-item:hover .actions {
+    display: flex;
+  }
+
+  .content {
+    padding: 0 var(--spacing-m);
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .icon {
+    font-size: 16px;
+    flex: 0 0 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon.arrow {
+    margin: 0 -2px 0 -6px;
+    font-size: 12px;
+  }
+  .icon.arrow.opened {
+    transform: rotate(90deg);
+  }
+  .icon + .icon {
+    margin-left: -4px;
+  }
+
+  .text {
+    flex: 1 1 auto;
+    font-weight: 500;
+    font-size: var(--font-size-xs);
+  }
+
+  .actions {
+    display: none;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/common/NumberBox.svelte b/packages/builder/src/components/common/NumberBox.svelte
deleted file mode 100644
index 106b9e67d..000000000
--- a/packages/builder/src/components/common/NumberBox.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  export let value
-  export let label
-
-  const inputChanged = ev => {
-    try {
-      value = Number(ev.target.value)
-    } catch (_) {
-      value = null
-    }
-  }
-
-  let numberText = value === null || value === undefined ? "" : value.toString()
-</script>
-
-<div class="numberbox">
-  <label>{label}</label>
-  <input
-    class="budibase__input"
-    type="number"
-    {value}
-    on:change={inputChanged} />
-</div>
-
-<style>
-  .numberbox {
-    display: grid;
-    align-items: center;
-  }
-
-  label {
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
-</style>
diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
deleted file mode 100644
index 707bbfcc6..000000000
--- a/packages/builder/src/components/common/Switcher.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-  export let tabs = []
-  export const selectTab = tabName => {
-    selected = tabName
-    selectedIndex = tabs.indexOf(selected)
-  }
-
-  let selected = tabs.length > 0 && tabs[0]
-  let selectedIndex = 0
-
-  const isSelected = tab => selected === tab
-</script>
-
-<div class="root">
-  <div class="switcher">
-    {#each tabs as tab}
-      <button class:selected={selected === tab} on:click={() => selectTab(tab)}>
-        {tab}
-      </button>
-    {/each}
-  </div>
-
-  <div class="panel">
-    {#if selectedIndex === 0}
-      <slot name="0" />
-    {:else if selectedIndex === 1}
-      <slot name="1" />
-    {:else if selectedIndex === 2}
-      <slot name="2" />
-    {:else if selectedIndex === 3}
-      <slot name="3" />
-    {/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px;
-    border-left: solid 1px var(--grey-2);
-    box-sizing: border-box;
-  }
-
-  .switcher {
-    display: flex;
-    margin: 0px 20px 20px 0px;
-    box-sizing: border-box;
-  }
-
-  .switcher > button {
-    display: inline-block;
-    border: none;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--grey-5);
-    margin-right: 20px;
-    background: none;
-    outline: none;
-    font-family: Inter;
-  }
-
-  .switcher > .selected {
-    color: var(--ink);
-  }
-
-  .panel {
-    min-height: 0;
-    height: 100%;
-    overflow-y: auto;
-  }
-</style>
diff --git a/packages/builder/src/components/common/core.js b/packages/builder/src/components/common/core.js
deleted file mode 100644
index 19a3c9afe..000000000
--- a/packages/builder/src/components/common/core.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { flow } from "lodash/fp"
-
-export const pipe = (arg, funcs) => flow(funcs)(arg)
diff --git a/packages/builder/src/components/common/eventHandlers.js b/packages/builder/src/components/common/eventHandlers.js
deleted file mode 100644
index 2e7a62ac3..000000000
--- a/packages/builder/src/components/common/eventHandlers.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { eventHandlers } from "../../../../client/src/state/eventHandlers"
-export { EVENT_TYPE_MEMBER_NAME } from "../../../../client/src/state/eventHandlers"
-
-export const allHandlers = () => {
-  const handlersObj = eventHandlers()
-
-  const handlers = Object.keys(handlersObj).map(name => ({
-    name,
-    ...handlersObj[name],
-  }))
-
-  return handlers
-}
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 3bb6d6e40..f28dbae03 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -1,32 +1,36 @@
 <script>
   import SettingsModal from "./SettingsModal.svelte"
-  import { SettingsIcon } from "components/common/Icons/"
   import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
-<span class="topnavitemright settings" on:click={modal.show}>
-  <SettingsIcon />
-</span>
+<div class="topnavitemright settings" on:click={modal.show}>
+  <i class="ri-settings-3-line" />
+</div>
 <Modal bind:this={modal} width="600px">
   <SettingsModal />
 </Modal>
 
 <style>
-  span:first-letter {
-    text-transform: capitalize;
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
   }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
+  }
+  .topnavitemright:hover i {
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/settings/TabTitle.svelte b/packages/builder/src/components/settings/TabTitle.svelte
deleted file mode 100644
index 8e2a2d6c1..000000000
--- a/packages/builder/src/components/settings/TabTitle.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<h3>
-  <slot />
-</h3>
-
-<style>
-  h3 {
-    font-size: 18px;
-    font-weight: bold;
-    color: var(--ink);
-    margin-top: 40px;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 7ee707d49..4118c2b9e 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -7,9 +7,8 @@
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
-  import { Input, TextArea, Button } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
-  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 85c50711a..fd7270cdf 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -2,7 +2,7 @@
   import { store, backendUiStore } from "builderStore"
   import { map, join } from "lodash/fp"
   import iframeTemplate from "./iframeTemplate"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../../helpers"
 
   let iframe
   let styles = ""
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 5ba079871..bb73dfd80 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -43,7 +43,7 @@
     width: 24px;
     background: var(--grey-4);
     right: var(--spacing-s);
-    bottom: 9px;
+    bottom: 5px;
   }
   button:hover {
     background: var(--grey-5);
diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
index 15335cbb8..ba3f4e920 100644
--- a/packages/builder/src/components/userInterface/CategoryTab.svelte
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -18,9 +18,13 @@
 <style>
   .tabs {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
     list-style: none;
-    font-size: 18px;
-    font-weight: 600;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    height: 24px;
   }
 
   li {
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 59a8e4e1e..62eb49145 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -3,10 +3,10 @@
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last, cloneDeep } from "lodash/fp"
+  import { last } from "lodash/fp"
   import { getParent, saveCurrentPreviewItem } from "builderStore/storeUtils"
-  import { uuid } from "builderStore/uuid"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let component
 
@@ -98,110 +98,65 @@
   }
 </script>
 
-<div bind:this={anchor} on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
+  <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
+    <DropdownContainer on:click={hideDropdown}>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+      <DropdownItem
+        icon="ri-arrow-up-line"
+        title="Move up"
+        on:click={moveUpComponent} />
+      <DropdownItem
+        icon="ri-arrow-down-line"
+        title="Move down"
+        on:click={moveDownComponent} />
+      <DropdownItem
+        icon="ri-repeat-one-line"
+        title="Duplicate"
+        on:click={copyComponent} />
+      <DropdownItem
+        icon="ri-scissors-cut-line"
+        title="Cut"
+        on:click={() => storeComponentForCopy(true)} />
+      <DropdownItem
+        icon="ri-file-copy-line"
+        title="Copy"
+        on:click={() => storeComponentForCopy(false)} />
+      <hr class="hr-style" />
+      <DropdownItem
+        icon="ri-insert-row-top"
+        title="Paste above"
+        disabled={noPaste}
+        on:click={() => pasteComponent('above')} />
+      <DropdownItem
+        icon="ri-insert-row-bottom"
+        title="Paste below"
+        disabled={noPaste}
+        on:click={() => pasteComponent('below')} />
+      <DropdownItem
+        icon="ri-insert-column-right"
+        title="Paste inside"
+        disabled={noPaste || noChildrenAllowed}
+        on:click={() => pasteComponent('inside')} />
+    </DropdownContainer>
+  </DropdownMenu>
 </div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:click={hideDropdown}
-  width="170px"
-  {anchor}
-  align="left">
-  <ul>
-    <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      <i class="ri-delete-bin-2-line" />
-      Delete
-    </li>
-    <li class="item" on:click={moveUpComponent}>
-      <i class="ri-arrow-up-line" />
-      Move up
-    </li>
-    <li class="item" on:click={moveDownComponent}>
-      <i class="ri-arrow-down-line" />
-      Move down
-    </li>
-    <li class="item" on:click={copyComponent}>
-      <i class="ri-repeat-one-line" />
-      Duplicate
-    </li>
-    <li class="item" on:click={() => storeComponentForCopy(true)}>
-      <i class="ri-scissors-cut-line" />
-      Cut
-    </li>
-    <li class="item" on:click={() => storeComponentForCopy(false)}>
-      <i class="ri-file-copy-line" />
-      Copy
-    </li>
-    <hr class="hr-style" />
-    <li
-      class="item"
-      class:disabled={noPaste}
-      on:click={() => pasteComponent('above')}>
-      <i class="ri-insert-row-top" />
-      Paste above
-    </li>
-    <li
-      class="item"
-      class:disabled={noPaste}
-      on:click={() => pasteComponent('below')}>
-      <i class="ri-insert-row-bottom" />
-      Paste below
-    </li>
-    <li
-      class="item"
-      class:disabled={noPaste || noChildrenAllowed}
-      on:click={() => pasteComponent('inside')}>
-      <i class="ri-insert-column-right" />
-      Paste inside
-    </li>
-  </ul>
-</DropdownMenu>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
+  title="Confirm Deletion"
   body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
   okText="Delete Component"
   onOk={deleteComponent} />
 
 <style>
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
-  .icon i {
-    font-size: 16px;
-  }
-
-  .hr-style {
+  hr {
     margin: 8px 0;
-    color: var(--grey-4);
+    background-color: var(--grey-4);
+    height: 1px;
+    border: none;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 1331ce0bd..475b86454 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -63,41 +63,31 @@
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {categories}
-    {selectedCategory} />
-
-  {#if displayName}
-    <div class="instance-name">{componentInstance._instanceName}</div>
+<CategoryTab
+  onClick={category => (selectedCategory = category)}
+  {categories}
+  {selectedCategory} />
+
+{#if displayName}
+  <div class="instance-name">{componentInstance._instanceName}</div>
+{/if}
+
+<div class="component-props-container">
+  {#if selectedCategory.value === 'design'}
+    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+  {:else if selectedCategory.value === 'settings'}
+    <SettingsView
+      {componentInstance}
+      {componentDefinition}
+      {panelDefinition}
+      displayNameField={displayName}
+      onChange={store.setComponentProp}
+      onScreenPropChange={store.setPageOrScreenProp}
+      screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
   {/if}
-
-  <div class="component-props-container">
-    {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
-    {:else if selectedCategory.value === 'settings'}
-      <SettingsView
-        {componentInstance}
-        {componentDefinition}
-        {panelDefinition}
-        displayNameField={displayName}
-        onChange={store.setComponentProp}
-        onScreenPropChange={store.setPageOrScreenProp}
-        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {/if}
-  </div>
 </div>
 
 <style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-
   .title > div:nth-child(1) {
     grid-column-start: name;
     color: var(--ink);
@@ -108,7 +98,6 @@
   }
 
   .component-props-container {
-    margin-top: 16px;
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
@@ -118,8 +107,7 @@
   }
 
   .instance-name {
-    margin-top: 20px;
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 00ce42cf6..f43faf033 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -2,47 +2,97 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
-  import CategoryTab from "./CategoryTab.svelte"
+  import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
-  import Tab from "./ItemTab/Tab.svelte"
+  const categories = components.categories
+  let selectedIndex
+  let anchors = []
+  let popover
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
 
-  export let toggleTab
+  const close = () => {
+    popover.hide()
+  }
 
-  const categories = components.categories
-  let selectedCategory = categories[0]
+  const onCategoryChosen = (category, idx) => {
+    if (category.isCategory) {
+      selectedIndex = idx
+      popover.show()
+    } else {
+      onComponentChosen(category)
+    }
+  }
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component, component.presetProps)
-
-    toggleTab("Navigate")
-
-    // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
-
-    // Go to correct URL
     $goto(`./:page/:screen/${path}`)
+    close()
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {selectedCategory}
-    {categories} />
-
-  <div class="panel">
-    <Tab
-      list={selectedCategory}
-      on:selectItem={e => onComponentChosen(e.detail)}
-      {toggleTab} />
-  </div>
+<div class="container">
+  {#each categories as category, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="category"
+      on:click={() => onCategoryChosen(category, idx)}
+      class:active={idx === selectedIndex}>
+      {#if category.icon}<i class={category.icon} />{/if}
+      <span>{category.name}</span>
+      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+    </div>
+  {/each}
 </div>
+<DropdownMenu
+  on:close={() => (selectedIndex = null)}
+  bind:this={popover}
+  {anchor}
+  align="left">
+  <DropdownContainer>
+    {#each categories[selectedIndex].children as item}
+      {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
+        <DropdownItem
+          icon={item.icon}
+          title={item.name}
+          on:click={() => onComponentChosen(item)} />
+      {/if}
+    {/each}
+  </DropdownContainer>
+</DropdownMenu>
 
 <style>
-  .panel {
-    margin-top: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 20px;
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    z-index: 1;
+    min-height: 24px;
+    flex-wrap: wrap;
+    gap: var(--spacing-l);
+  }
+
+  .category {
+    color: var(--grey-7);
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .category span {
+    font-weight: 500;
+    user-select: none;
+  }
+  .category.active,
+  .category:hover {
+    color: var(--ink);
+  }
+  .category i:not(:last-child) {
+    font-size: 16px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index add2a99d6..48fe72f8d 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -1,13 +1,12 @@
 <script>
-  import { params, goto } from "@sveltech/routify"
+  import { goto } from "@sveltech/routify"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { pipe } from "components/common/core"
+  import { trimCharsStart, trimChars } from "lodash/fp"
+  import { pipe } from "../../helpers"
   import { store } from "builderStore"
-  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import { writable } from "svelte/store"
+  import NavItem from "components/common/NavItem.svelte"
 
   export let screens = []
 
@@ -24,8 +23,6 @@
   let confirmDeleteDialog
   let componentToDelete = ""
 
-  const joinPath = join("/")
-
   const normalizedName = name =>
     pipe(name, [
       trimCharsStart("./"),
@@ -42,26 +39,15 @@
 
 <div class="root">
   {#each sortedScreens as screen}
-    <div
-      class="budibase__nav-item screen-header-row"
-      class:selected={$store.currentComponentInfo._id === screen.props._id}
-      on:click|stopPropagation={() => changeScreen(screen)}>
-      <span
-        class="icon"
-        class:rotate={$store.currentPreviewItem.name !== screen.props._instanceName}>
-        {#if screen.props._children.length}
-          <ArrowDownIcon />
-        {/if}
-      </span>
-
-      <i class="ri-artboard-2-fill icon" />
-
-      <span class="title">{screen.props._instanceName}</span>
-
-      <div class="dropdown-menu">
-        <ScreenDropdownMenu {screen} />
-      </div>
-    </div>
+    <NavItem
+      icon="ri-artboard-2-line"
+      text={screen.props._instanceName}
+      withArrow={screen.props._children.length}
+      selected={$store.currentComponentInfo._id === screen.props._id}
+      opened={$store.currentPreviewItem.name === screen.props._id}
+      on:click={() => changeScreen(screen)}>
+      <ScreenDropdownMenu {screen} />
+    </NavItem>
 
     {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
       <ComponentsHierarchyChildren
@@ -71,55 +57,3 @@
     {/if}
   {/each}
 </div>
-
-<style>
-  .root {
-    font-weight: 400;
-    color: var(--ink);
-  }
-
-  .screen-header-row {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .title {
-    margin-left: 14px;
-    font-size: 14px;
-    font-weight: 400;
-    flex: 1;
-  }
-
-  .icon {
-    display: inline-block;
-    transition: 0.2s;
-    font-size: 24px;
-    width: 18px;
-    color: var(--grey-7);
-  }
-
-  .icon:nth-of-type(2) {
-    width: 14px;
-    margin: 0 0 0 5px;
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(-90deg);
-  }
-
-  .dropdown-menu {
-    display: none;
-    color: var(--ink);
-    padding: 0 5px;
-    width: 24px;
-    height: 24px;
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .budibase__nav-item:hover .dropdown-menu {
-    display: block;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 5f3a29d51..d854c9b90 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -2,14 +2,9 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
-  import { pipe } from "components/common/core"
+  import { pipe } from "../../helpers"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
-  import {
-    XCircleIcon,
-    ChevronUpIcon,
-    ChevronDownIcon,
-    CopyIcon,
-  } from "../common/Icons"
+  import NavItem from "components/common/NavItem.svelte"
   import { getComponentDefinition } from "builderStore/storeUtils"
 
   export let components = []
@@ -40,7 +35,6 @@
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
-
   const get_capitalised_name = name => pipe(name, [get_name, capitalise])
   const isScreenslot = name => name === "##builtin/screenslot"
 
@@ -134,29 +128,22 @@
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {level * 20 + 40}px" />
+          class="drop-item"
+          style="margin-left: {(level + 1) * 18}px" />
       {/if}
 
-      <div
-        class="budibase__nav-item item"
-        class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 40}px"
-        draggable={true}
+      <NavItem
+        draggable
         on:dragend={dragend}
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={drop}
-        ondragover="return false"
-        ondragenter="return false">
-        <div class="nav-item">
-          <i class="icon ri-arrow-right-circle-line" />
-          {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-        </div>
-        <div class="actions">
-          <ComponentDropdownMenu {component} />
-        </div>
-      </div>
+        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
+        withArrow
+        indentLevel={level + 1}
+        selected={currentComponent === component}>
+        <ComponentDropdownMenu {component} />
+      </NavItem>
 
       {#if component._children}
         <svelte:self
@@ -172,8 +159,8 @@
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 2 : 0)) * 20 + 40}px" />
+          class="drop-item"
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 18}px" />
       {/if}
     </li>
   {/each}
@@ -186,47 +173,9 @@
     margin: 0;
   }
 
-  .item {
-    display: grid;
-    grid-template-columns: 1fr auto auto auto;
-    padding: 0 var(--spacing-m);
-    margin: 0;
-    border-radius: var(--border-radius-m);
-    height: 36px;
-    align-items: center;
-  }
-
   .drop-item {
+    border-radius: var(--border-radius-m);
+    height: 32px;
     background: var(--blue-light);
-    height: 36px;
-  }
-
-  .actions {
-    display: none;
-    color: var(--ink);
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .item:hover {
-    background: var(--grey-1);
-    cursor: pointer;
-  }
-  .item:hover .actions {
-    display: block;
-  }
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: var(--ink);
-  }
-
-  .icon {
-    color: var(--grey-7);
-    margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index b783b3848..cbb532fca 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -48,7 +48,7 @@
         {/each}
       {:else}
         <div class="no-design">
-          This component does not have any design properties.
+          This component doesn't have any design properties.
         </div>
       {/if}
     </div>
@@ -61,10 +61,10 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    gap: var(--spacing-l);
   }
 
   .design-view-state-categories {
-    flex: 0 0 50px;
   }
 
   .positioned-wrapper {
@@ -79,10 +79,15 @@
     min-height: 0;
     margin: 0 -20px;
     padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
 
   .no-design {
-    font-size: var(--font-size-s);
-    color: var(--grey-6);
+    font-size: var(--font-size-xs);
+    color: var(--grey-5);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
index 1e2908ab5..224ba3e38 100644
--- a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
@@ -29,7 +29,13 @@
 </script>
 
 <div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
     <option value="" />
     {#each urls as url}
       <option value={url.url}>{url.name}</option>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 0e45f2fca..2fc19bd6b 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,14 +1,7 @@
 <script>
-  import { store } from "builderStore"
-  import {
-    TextButton,
-    Button,
-    Body,
-    DropdownMenu,
-    ModalContent,
-  } from "@budibase/bbui"
+  import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
-  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index cb1d1dd1d..483780a2c 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -1,11 +1,6 @@
 <script>
   import { Input, DataList, Select } from "@budibase/bbui"
-  import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
   import { store, automationStore } from "builderStore"
-  import { ArrowDownIcon } from "components/common/Icons/"
-  import { createEventDispatcher } from "svelte"
 
   export let parameter
 
diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
index 5299e7d5c..62429bf55 100644
--- a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { FeedbackIcon } from "components/common/Icons/"
   import { Popover } from "@budibase/bbui"
   import { store } from "builderStore"
 
@@ -16,41 +15,37 @@
   }, FIVE_MINUTES)
 </script>
 
-<span
-  class="container"
-  bind:this={iconContainer}
-  on:click={popover.show}
-  class:highlight={$store.highlightFeedbackIcon}>
-  <FeedbackIcon />
-</span>
+<div class="container" bind:this={iconContainer} on:click={popover.show}>
+  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
+</div>
 <Popover bind:this={popover} anchor={iconContainer} align="right">
   <FeedbackIframe on:finished={popover.hide} />
 </Popover>
 
 <style>
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  i.highlight {
+    color: var(--blue);
+    filter: drop-shadow(0 0 20px var(--blue));
+  }
+
   .container {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
-
-  .container:hover {
+  .container:hover i {
     color: var(--ink);
-    font-weight: 500;
-  }
-
-  .highlight {
-    color: var(--blue);
-  }
-
-  .highlight > :global(svg) {
-    filter: drop-shadow(0 0 20px var(--blue));
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index f27a2902e..0d7cd280d 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -22,23 +22,22 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    max-height: 36px;
-    padding: 8px 2px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: #ffffff;
+    background: white;
     color: var(--grey-7);
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 400;
+    border-radius: var(--border-radius-m);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 64c3ee45f..94621a40e 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -4,22 +4,41 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button, Spacer, Modal } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
+<div class="title">
+  <h1>Screens</h1>
+  <i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
+</div>
 <PagesList />
-
-<Spacer medium />
-<Button primary wide on:click={modal.show}>Create New Screen</Button>
-<Spacer medium />
-<PageLayout layout={$store.pages[$store.currentPageName]} />
-
 <div class="nav-items-container">
+  <PageLayout layout={$store.pages[$store.currentPageName]} />
   <ComponentsHierarchy screens={$store.screens} />
 </div>
-
 <Modal bind:this={modal}>
   <NewScreenModal />
 </Modal>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
index 614170243..fe3a02971 100644
--- a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@@ -1,291 +1,291 @@
-<script>
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
-  import { createEventDispatcher, tick } from "svelte"
-
-  import icons from "./icons.js"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-  export let maxIconsPerPage = 30
-
-  let searchTerm = ""
-  let selectedLetter = "A"
-
-  let currentPage = 1
-  let filteredIcons = findIconByTerm(selectedLetter)
-
-  $: dispatch("change", value)
-
-  const alphabet = [
-    "A",
-    "B",
-    "C",
-    "D",
-    "E",
-    "F",
-    "G",
-    "H",
-    "I",
-    "J",
-    "K",
-    "L",
-    "M",
-    "N",
-    "O",
-    "P",
-    "Q",
-    "R",
-    "S",
-    "T",
-    "U",
-    "V",
-    "W",
-    "X",
-    "Y",
-    "Z",
-  ]
-  let buttonAnchor, dropdown
-  let loading = false
-
-  function findIconByTerm(term) {
-    const r = new RegExp(`\^${term}`, "i")
-    return icons.filter(i => r.test(i.label))
-  }
-
-  async function switchLetter(letter) {
-    currentPage = 1
-    searchTerm = ""
-    loading = true
-    selectedLetter = letter
-    filteredIcons = findIconByTerm(letter)
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function findIconOnPage() {
-    loading = true
-    const iconIdx = filteredIcons.findIndex(i => i.value === value)
-    if (iconIdx !== -1) {
-      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
-    }
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function setSelectedUI() {
-    if (value) {
-      const letter = displayValue.substring(0, 1)
-      await switchLetter(letter)
-      await findIconOnPage()
-    }
-  }
-
-  async function pageClick(next) {
-    loading = true
-    if (next && currentPage < totalPages) {
-      currentPage++
-    } else if (!next && currentPage > 1) {
-      currentPage--
-    }
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  async function searchForIcon(e) {
-    currentPage = 1
-    loading = true
-    filteredIcons = findIconByTerm(searchTerm)
-    await tick() //svg icons do not update without tick
-    loading = false
-  }
-
-  $: displayValue = value ? value.substring(7) : "Pick Icon"
-
-  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
-  $: pageEndIdx = maxIconsPerPage * currentPage
-  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
-
-  $: pagerText = `Page ${currentPage} of ${totalPages}`
-</script>
-
-<div bind:this={buttonAnchor}>
-  <Button secondary on:click={dropdown.show}>{displayValue}</Button>
-</div>
-<DropdownMenu
-  bind:this={dropdown}
-  on:open={setSelectedUI}
-  anchor={buttonAnchor}>
-  <div class="container">
-    <div class="search-area">
-      <div class="alphabet-area">
-        {#each alphabet as letter, idx}
-          <span
-            class="letter"
-            class:letter-selected={letter === selectedLetter}
-            on:click={() => switchLetter(letter)}>
-            {letter}
-          </span>
-          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
-        {/each}
-      </div>
-      <div class="search-input">
-        <div class="input-wrapper">
-          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
-        </div>
-        <Button secondary on:click={searchForIcon}>Search</Button>
-      </div>
-      <div class="page-area">
-        <div class="pager">
-          <span on:click={() => pageClick(false)}>
-            <i class="page-btn fas fa-chevron-left" />
-          </span>
-          <span>{pagerText}</span>
-          <span on:click={() => pageClick(true)}>
-            <i class="page-btn fas fa-chevron-right" />
-          </span>
-        </div>
-      </div>
-    </div>
-    {#if pagedIcons.length > 0}
-      <div class="icon-area">
-        {#if !loading}
-          {#each pagedIcons as icon}
-            <div
-              class="icon-container"
-              class:selected={value === icon.value}
-              on:click={() => (value = icon.value)}>
-              <div class="icon-preview">
-                <i class={`${icon.value} fa-3x`} />
-              </div>
-              <div class="icon-label">{icon.label}</div>
-            </div>
-          {/each}
-        {/if}
-      </div>
-    {:else}
-      <div class="no-icons">
-        <h5>
-          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
-        </h5>
-      </div>
-    {/if}
-  </div>
-</DropdownMenu>
-
-<style>
-  .container {
-    width: 610px;
-    height: 350px;
-    display: flex;
-    flex-direction: column;
-    padding: 10px 0px 10px 15px;
-    overflow-x: hidden;
-  }
-
-  .search-area {
-    flex: 0 0 80px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .icon-area {
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-gap: 5px;
-    justify-content: flex-start;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
-  }
-
-  .no-icons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .alphabet-area {
-    display: flex;
-    flex-flow: row wrap;
-    padding-bottom: 10px;
-    padding-right: 15px;
-    justify-content: space-around;
-  }
-
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .search-input {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    padding-right: 15px;
-  }
-
-  .input-wrapper {
-    width: 510px;
-    margin-right: 5px;
-  }
-
-  .page-area {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .letter {
-    color: var(--blue);
-  }
-
-  .letter:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  .letter-selected {
-    text-decoration: underline;
-  }
-
-  .icon-container {
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    border: var(--border-dark);
-  }
-
-  .icon-container:hover {
-    cursor: pointer;
-    background: var(--grey-2);
-  }
-
-  .selected {
-    background: var(--grey-3);
-  }
-
-  .icon-preview {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .icon-label {
-    flex: 0 0 20px;
-    text-align: center;
-    font-size: 12px;
-  }
-
-  .page-btn {
-    color: var(--blue);
-  }
-
-  .page-btn:hover {
-    cursor: pointer;
-  }
-</style>
+<script>
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { createEventDispatcher, tick } from "svelte"
+
+  import icons from "./icons.js"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let maxIconsPerPage = 30
+
+  let searchTerm = ""
+  let selectedLetter = "A"
+
+  let currentPage = 1
+  let filteredIcons = findIconByTerm(selectedLetter)
+
+  $: dispatch("change", value)
+
+  const alphabet = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ]
+  let buttonAnchor, dropdown
+  let loading = false
+
+  function findIconByTerm(term) {
+    const r = new RegExp(`\^${term}`, "i")
+    return icons.filter(i => r.test(i.label))
+  }
+
+  async function switchLetter(letter) {
+    currentPage = 1
+    searchTerm = ""
+    loading = true
+    selectedLetter = letter
+    filteredIcons = findIconByTerm(letter)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function findIconOnPage() {
+    loading = true
+    const iconIdx = filteredIcons.findIndex(i => i.value === value)
+    if (iconIdx !== -1) {
+      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function setSelectedUI() {
+    if (value) {
+      const letter = displayValue.substring(0, 1)
+      await switchLetter(letter)
+      await findIconOnPage()
+    }
+  }
+
+  async function pageClick(next) {
+    loading = true
+    if (next && currentPage < totalPages) {
+      currentPage++
+    } else if (!next && currentPage > 1) {
+      currentPage--
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function searchForIcon(e) {
+    currentPage = 1
+    loading = true
+    filteredIcons = findIconByTerm(searchTerm)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  $: displayValue = value ? value.substring(7) : "Pick Icon"
+
+  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
+  $: pageEndIdx = maxIconsPerPage * currentPage
+  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
+
+  $: pagerText = `Page ${currentPage} of ${totalPages}`
+</script>
+
+<div bind:this={buttonAnchor}>
+  <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}>
+  <div class="container">
+    <div class="search-area">
+      <div class="alphabet-area">
+        {#each alphabet as letter, idx}
+          <span
+            class="letter"
+            class:letter-selected={letter === selectedLetter}
+            on:click={() => switchLetter(letter)}>
+            {letter}
+          </span>
+          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
+        {/each}
+      </div>
+      <div class="search-input">
+        <div class="input-wrapper">
+          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
+        </div>
+        <Button secondary on:click={searchForIcon}>Search</Button>
+      </div>
+      <div class="page-area">
+        <div class="pager">
+          <span on:click={() => pageClick(false)}>
+            <i class="page-btn fas fa-chevron-left" />
+          </span>
+          <span>{pagerText}</span>
+          <span on:click={() => pageClick(true)}>
+            <i class="page-btn fas fa-chevron-right" />
+          </span>
+        </div>
+      </div>
+    </div>
+    {#if pagedIcons.length > 0}
+      <div class="icon-area">
+        {#if !loading}
+          {#each pagedIcons as icon}
+            <div
+              class="icon-container"
+              class:selected={value === icon.value}
+              on:click={() => (value = icon.value)}>
+              <div class="icon-preview">
+                <i class={`${icon.value} fa-3x`} />
+              </div>
+              <div class="icon-label">{icon.label}</div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <div class="no-icons">
+        <h5>
+          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+        </h5>
+      </div>
+    {/if}
+  </div>
+</DropdownMenu>
+
+<style>
+  .container {
+    width: 610px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0px 10px 15px;
+    overflow-x: hidden;
+  }
+
+  .search-area {
+    flex: 0 0 80px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .icon-area {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 5px;
+    justify-content: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px;
+  }
+
+  .no-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .alphabet-area {
+    display: flex;
+    flex-flow: row wrap;
+    padding-bottom: 10px;
+    padding-right: 15px;
+    justify-content: space-around;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-input {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    padding-right: 15px;
+  }
+
+  .input-wrapper {
+    width: 510px;
+    margin-right: 5px;
+  }
+
+  .page-area {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .letter {
+    color: var(--blue);
+  }
+
+  .letter:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .letter-selected {
+    text-decoration: underline;
+  }
+
+  .icon-container {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: var(--border-dark);
+  }
+
+  .icon-container:hover {
+    cursor: pointer;
+    background: var(--grey-2);
+  }
+
+  .selected {
+    background: var(--grey-3);
+  }
+
+  .icon-preview {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-label {
+    flex: 0 0 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .page-btn {
+    color: var(--blue);
+  }
+
+  .page-btn:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
deleted file mode 100644
index 7d118afe6..000000000
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-  export let item
-</script>
-
-<div data-cy={item.name} class="item-item" on:click>
-  <div class="item-icon"><i class={item.icon} /></div>
-  <div class="item-text">
-    <div class="item-name">{item.name}</div>
-  </div>
-</div>
-
-<style>
-  .item-item {
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    padding: 12px 16px 16px 16px;
-    height: 80px;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--grey-1);
-    border-radius: 5px;
-  }
-
-  .item-item:hover {
-    background: var(--grey-2);
-    transition: all 0.3s;
-  }
-
-  .item-icon {
-    border-radius: 3px;
-    display: flex;
-  }
-
-  .item-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .item-name {
-    font-size: 14px;
-    font-weight: 400;
-    text-align: center;
-  }
-
-  i {
-    font-size: 24px;
-    color: var(--grey-7);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
deleted file mode 100644
index 090fad1dc..000000000
--- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
-  import Item from "./Item.svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let list
-
-  let category = list
-
-  const handleClick = item => {
-    if (item.children && item.children.length > 0) {
-      list = item
-    } else {
-      dispatch("selectItem", item)
-    }
-  }
-
-  const goBack = () => {
-    list = category
-  }
-</script>
-
-{#if !list.isCategory}
-  <button class="back-button" on:click={goBack}>Back</button>
-{/if}
-{#each list.children as item}
-  {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
-    <Item {item} on:click={() => handleClick(item)} />
-  {/if}
-{/each}
-
-<style>
-  .back-button {
-    grid-column: 1 / span 2;
-    font-size: 14px;
-    text-align: center;
-    height: 36px;
-    border-radius: 5px;
-    border: solid 1px var(--grey-3);
-    background: white;
-    cursor: pointer;
-    font-weight: 500;
-    font-family: Inter;
-    transition: all 0.3ms;
-  }
-
-  .back-button:hover {
-    background: var(--grey-1);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index aac5c44c0..d9f5964b3 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -13,6 +13,7 @@
   let select
   let selectMenu
   let icon
+  let width = 0
 
   let selectAnchor = null
   let dimensions = { top: 0, bottom: 0, left: 0 }
@@ -91,6 +92,7 @@
     "transform-origin": `center ${positionSide}`,
     [positionSide]: `${dimensions[positionSide]}px`,
     left: `${dimensions.left.toFixed(0)}px`,
+    width: `${width}px`,
   })
 
   $: isOptionsObject = options.every(o => typeof o === "object")
@@ -108,6 +110,7 @@
 </script>
 
 <div
+  bind:clientWidth={width}
   tabindex="0"
   bind:this={select}
   class="bb-select-container"
@@ -164,19 +167,17 @@
 
   .bb-select-container {
     outline: none;
-    height: 36px;
     cursor: pointer;
-    font-size: 14px;
     overflow: hidden;
+    flex: 1 1 auto;
   }
 
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: 0px 12px;
-    height: 36px;
+    padding: var(--spacing-s) var(--spacing-m);
     background-color: var(--grey-2);
-    border-radius: 5px;
+    border-radius: var(--border-radius-m);
     align-items: center;
     white-space: nowrap;
   }
@@ -184,8 +185,11 @@
   .bb-select-anchor > span {
     color: var(--ink);
     font-weight: 400;
-    width: 140px;
     overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--font-size-xs);
+    flex: 1 1 auto;
   }
 
   .bb-select-anchor > i {
@@ -208,7 +212,6 @@
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;
-    width: 160px;
     z-index: 2;
     color: var(--ink);
     font-weight: 400;
@@ -237,7 +240,7 @@
     padding: 5px 0px;
     cursor: pointer;
     padding-left: 10px;
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
   }
 
   li:hover {
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index cebd445ce..c6ac3b529 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -1,21 +1,9 @@
 <script>
   import { goto } from "@sveltech/routify"
-  // import { tick } from "svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-
-  import {
-    last,
-    sortBy,
-    map,
-    trimCharsStart,
-    trimChars,
-    join,
-    compose,
-  } from "lodash/fp"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { pipe } from "components/common/core"
+  import NavItem from "components/common/NavItem.svelte"
+  import { last } from "lodash/fp"
   import { store } from "builderStore"
-  import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
   import { writable } from "svelte/store"
 
   export let layout
@@ -24,13 +12,10 @@
   let componentToDelete = ""
 
   const dragDropStore = writable({})
-  const joinPath = join("/")
 
   const lastPartOfName = c =>
     c && last(c.name ? c.name.split("/") : c._component.split("/"))
 
-  const isComponentSelected = (current, comp) => current === comp
-
   $: _layout = {
     component: layout,
     title: lastPartOfName(layout),
@@ -42,18 +27,14 @@
   }
 </script>
 
-<div
-  class="budibase__nav-item root"
-  class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-  on:click|stopPropagation={setCurrentScreenToLayout}>
-  <span
-    class="icon"
-    class:rotate={$store.currentPreviewItem.name !== _layout.title}>
-    <ArrowDownIcon />
-  </span>
-  <i class="ri-layout-3-fill icon-big" />
-  <span class="title">Master Screen</span>
-</div>
+<NavItem
+  border={false}
+  icon="ri-layout-3-line"
+  text="Master Screen"
+  withArrow
+  selected={$store.currentComponentInfo._id === _layout.component.props._id}
+  opened={$store.currentPreviewItem.name === _layout.title}
+  on:click={setCurrentScreenToLayout} />
 
 {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
   <ComponentsHierarchyChildren
@@ -62,29 +43,3 @@
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />
 {/if}
-
-<style>
-  .title {
-    margin-left: 10px;
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--ink);
-  }
-
-  .icon {
-    width: 24px;
-    display: inline-block;
-    transition: 0.2s;
-    width: 20px;
-    color: var(--grey-7);
-  }
-
-  .icon-big {
-    font-size: 20px;
-    color: var(--grey-7);
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(-90deg);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index df8bdf7d9..51fcce388 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -43,24 +43,23 @@
 
   button {
     cursor: pointer;
-    padding: 0px 16px;
-    height: 36px;
+    padding: 0 var(--spacing-m);
+    height: 32px;
     text-align: center;
     background: #ffffff;
     color: var(--grey-7);
     border-radius: 5px;
-    font-family: inter;
-    font-size: 14px;
-    font-weight: 400;
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
     border: none !important;
-    transition: 0.2s;
     outline: none;
+    font-family: var(--font-sans);
   }
 
   .active {
-    background: var(--grey-3);
+    background: var(--grey-2);
     color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 8d21e6fc8..823dcf618 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -119,16 +119,14 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    margin: 8px 0;
     align-items: center;
   }
-
   .label {
     display: flex;
     align-items: center;
     font-size: 12px;
     font-weight: 400;
-    flex: 0 0 100px;
+    flex: 0 0 80px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;
@@ -149,7 +147,7 @@
     height: 90%;
     width: 2rem;
     background: var(--grey-2);
-    right: 10px;
+    right: 4px;
     --spacing-s: 0;
     border-left: 0.5px solid var(--grey-3);
     outline-color: var(--blue);
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 0da68c51d..2fb304f5c 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -13,14 +13,26 @@
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name} on:open show={open}>
-  {#each properties as props}
-    <PropertyControl
-      label={props.label}
-      control={props.control}
-      key={props.key}
-      value={style[props.key]}
-      onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-      props={{ ...excludeProps(props, ['control', 'label']) }} />
-  {/each}
+<DetailSummary {name} on:open show={open} thin>
+  <div>
+    {#each properties as props}
+      <PropertyControl
+        label={props.label}
+        control={props.control}
+        key={props.key}
+        value={style[props.key]}
+        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
+    {/each}
+  </div>
 </DetailSummary>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
index 1721c1bbb..3abdb3ecd 100644
--- a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
+++ b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
@@ -8,4 +8,4 @@
   export let name, value, placeholder, type
 </script>
 
-<Input {name} {value} {placeholder} {type} thin on:change />
+<Input {name} {value} {placeholder} {type} extraThin on:change />
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
index 7ae8bbf43..75e2483f3 100644
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
@@ -2,9 +2,8 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import api from "builderStore/api"
-  import Portal from "svelte-portal"
   import { DropdownMenu } from "@budibase/bbui"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let screen
 
@@ -12,10 +11,6 @@
   let dropdown
   let anchor
 
-  const hideDropdown = () => {
-    dropdown.hide()
-  }
-
   const deleteScreen = () => {
     store.deleteScreens(screen, $store.currentPageName)
     // update the page if required
@@ -29,79 +24,27 @@
   }
 </script>
 
-<div
-  bind:this={anchor}
-  class="root boundary"
-  on:click|stopPropagation={() => {}}>
+<div bind:this={anchor} on:click|stopPropagation>
   <div class="icon" on:click={() => dropdown.show()}>
     <i class="ri-more-line" />
   </div>
   <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <ul on:click={hideDropdown}>
-      <li on:click={() => confirmDeleteDialog.show()}>
-        <i class="ri-delete-bin-2-line" />
-        Delete
-      </li>
-    </ul>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={() => confirmDeleteDialog.show()} />
+    </DropdownContainer>
   </DropdownMenu>
 </div>
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
+  title="Confirm Deletion"
   body={`Are you sure you wish to delete the screen '${screen.props._instanceName}' ?`}
   okText="Delete Screen"
   onOk={deleteScreen} />
 
 <style>
-  .root {
-    overflow: hidden;
-    z-index: 9;
-  }
-
-  .root button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  ul {
-    z-index: 100000;
-    overflow: visible;
-    margin: var(--spacing-s) 0;
-    border-radius: var(--border-radius-s);
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0;
-    align-items: center;
-    cursor: pointer;
-  }
-  li:not(.disabled):hover {
-    background-color: var(--grey-2);
-  }
-  li:active {
-    color: var(--blue);
-  }
-  li i {
-    margin-right: 8px;
-    font-size: var(--font-size-s);
-  }
-  li.disabled {
-    color: var(--grey-4);
-    cursor: default;
-  }
-
   .icon i {
     font-size: 16px;
   }
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 33174355b..748570595 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -1,88 +1,94 @@
-<script>
-  import { DataList } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-
-  $: urls = getUrls()
-
-  const handleBlur = () => dispatch("change", value)
-
-  // this will get urls of all screens, but only
-  // choose detail screens that are usable in the current context
-  // and substitute the :id param for the actual {{ ._id }} binding
-  const getUrls = () => {
-    const urls = [
-      ...$store.screens
-        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
-        .map(screen => ({
-          name: screen.props._instanceName,
-          url: screen.route,
-          sort: screen.props._component,
-        })),
-    ]
-
-    const bindableProperties = fetchBindableProperties({
-      componentInstanceId: $store.currentComponentInfo._id,
-      components: $store.components,
-      screen: $store.currentPreviewItem,
-      tables: $backendUiStore.tables,
-    })
-
-    const detailScreens = $store.screens.filter(screen =>
-      screen.props._component.endsWith("/rowdetail")
-    )
-
-    for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find(p => {
-        if (
-          p.type === "context" &&
-          p.runtimeBinding.endsWith("._id") &&
-          p.table
-        ) {
-          const tableId =
-            typeof p.table === "string" ? p.table : p.table.tableId
-          return tableId === detailScreen.props.table
-        }
-        return false
-      })
-
-      if (idBinding) {
-        urls.push({
-          name: detailScreen.props._instanceName,
-          url: detailScreen.route.replace(
-            ":id",
-            `{{ ${idBinding.runtimeBinding} }}`
-          ),
-          sort: detailScreen.props._component,
-        })
-      }
-    }
-
-    return urls
-  }
-</script>
-
-<div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
-    <option value="" />
-    {#each urls as url}
-      <option value={url.url}>{url.name}</option>
-    {/each}
-  </DataList>
-</div>
-
-<style>
-  div {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-  }
-  div :global(> div) {
-    flex: 1 1 auto;
-  }
-</style>
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  // this will get urls of all screens, but only
+  // choose detail screens that are usable in the current context
+  // and substitute the :id param for the actual {{ ._id }} binding
+  const getUrls = () => {
+    const urls = [
+      ...$store.screens
+        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+
+    const bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      tables: $backendUiStore.tables,
+    })
+
+    const detailScreens = $store.screens.filter(screen =>
+      screen.props._component.endsWith("/rowdetail")
+    )
+
+    for (let detailScreen of detailScreens) {
+      const idBinding = bindableProperties.find(p => {
+        if (
+          p.type === "context" &&
+          p.runtimeBinding.endsWith("._id") &&
+          p.table
+        ) {
+          const tableId =
+            typeof p.table === "string" ? p.table : p.table.tableId
+          return tableId === detailScreen.props.table
+        }
+        return false
+      })
+
+      if (idBinding) {
+        urls.push({
+          name: detailScreen.props._instanceName,
+          url: detailScreen.route.replace(
+            ":id",
+            `{{ ${idBinding.runtimeBinding} }}`
+          ),
+          sort: detailScreen.props._component,
+        })
+      }
+    }
+
+    return urls
+  }
+</script>
+
+<div>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index d821f1f2e..2aacbd261 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -85,53 +85,65 @@
   }
 </script>
 
-{#if screenOrPageInstance}
-  {#each screenOrPageDefinition as def}
-    <PropertyControl
-      bindable={false}
-      control={def.control}
-      label={def.label}
-      key={def.key}
-      value={screenOrPageInstance[def.key]}
-      onChange={onScreenPropChange}
-      props={{ ...excludeProps(def, ['control', 'label']) }} />
-  {/each}
-{/if}
-
-{#if displayNameField}
-  <PropertyControl
-    control={Input}
-    label="Name"
-    key="_instanceName"
-    value={componentInstance._instanceName}
-    onChange={onInstanceNameChange} />
-  {#if duplicateName}
-    <span class="duplicate-name">Name must be unique</span>
+<div class="settings-view-container">
+  {#if screenOrPageInstance}
+    {#each screenOrPageDefinition as def}
+      <PropertyControl
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={onScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+    {/each}
   {/if}
-{/if}
 
-{#if panelDefinition && panelDefinition.length > 0}
-  {#each panelDefinition as definition}
-    {#if canRenderControl(definition.key, definition.dependsOn)}
-      <PropertyControl
-        control={definition.control}
-        label={definition.label}
-        key={definition.key}
-        value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
-        {componentInstance}
-        {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+  {#if displayNameField}
+    <PropertyControl
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={onInstanceNameChange} />
+    {#if duplicateName}
+      <span class="duplicate-name">Name must be unique</span>
     {/if}
-  {/each}
-{:else}
-  <div>This component does not have any settings.</div>
-{/if}
+  {/if}
+
+  {#if panelDefinition && panelDefinition.length > 0}
+    {#each panelDefinition as definition}
+      {#if canRenderControl(definition.key, definition.dependsOn)}
+        <PropertyControl
+          control={definition.control}
+          label={definition.label}
+          key={definition.key}
+          value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
+          {componentInstance}
+          {onChange}
+          props={{ ...excludeProps(definition, ['control', 'label']) }} />
+      {/if}
+    {/each}
+  {:else}
+    <div class="empty">
+      This component doesn't have any additional settings.
+    </div>
+  {/if}
+</div>
 
 <style>
-  div {
-    font-size: var(--font-size-s);
+  .settings-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--spacing-s);
+  }
+
+  .empty {
+    font-size: var(--font-size-xs);
     margin-top: var(--spacing-m);
-    color: var(--grey-6);
+    color: var(--grey-5);
   }
 
   .duplicate-name {
diff --git a/packages/builder/src/components/userInterface/TableSelect.svelte b/packages/builder/src/components/userInterface/TableSelect.svelte
index 6300aa2d6..d72b6031f 100644
--- a/packages/builder/src/components/userInterface/TableSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableSelect.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Select thin secondary wide on:change {value}>
+  <Select extraThin secondary wide on:change {value}>
     <option value="">Choose a table</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index f38fcc0a7..4fdb477cb 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -1,163 +1,163 @@
-<script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
-  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
-
-  const dispatch = createEventDispatcher()
-  let anchorRight, dropdownRight
-
-  export let value = {}
-
-  function handleSelected(selected) {
-    dispatch("change", selected)
-    dropdownRight.hide()
-  }
-
-  $: tables = $backendUiStore.tables.map(m => ({
-    label: m.name,
-    name: `all_${m._id}`,
-    tableId: m._id,
-    type: "table",
-  }))
-
-  $: views = $backendUiStore.tables.reduce((acc, cur) => {
-    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
-      label: key,
-      name: key,
-      ...value,
-      type: "view",
-    }))
-    return [...acc, ...viewsArr]
-  }, [])
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.currentComponentInfo._id,
-    components: $store.components,
-    screen: $store.currentPreviewItem,
-    tables: $backendUiStore.tables,
-  })
-
-  $: links = bindableProperties
-    .filter(x => x.fieldSchema.type === "link")
-    .map(property => ({
-      label: property.readableBinding,
-      fieldName: property.fieldSchema.name,
-      name: `all_${property.fieldSchema.tableId}`,
-      tableId: property.fieldSchema.tableId,
-      type: "link",
-    }))
-</script>
-
-<div
-  class="dropdownbutton"
-  bind:this={anchorRight}
-  on:click={dropdownRight.show}>
-  <span>{value.label ? value.label : 'Table / View'}</span>
-  <Icon name="arrowdown" />
-</div>
-<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-  <div class="dropdown">
-    <div class="title">
-      <Heading extraSmall>Tables</Heading>
-    </div>
-    <ul>
-      {#each tables as table}
-        <li
-          class:selected={value === table}
-          on:click={() => handleSelected(table)}>
-          {table.label}
-        </li>
-      {/each}
-    </ul>
-    <hr />
-    <div class="title">
-      <Heading extraSmall>Views</Heading>
-    </div>
-    <ul>
-      {#each views as view}
-        <li
-          class:selected={value === view}
-          on:click={() => handleSelected(view)}>
-          {view.label}
-        </li>
-      {/each}
-    </ul>
-    <hr />
-    <div class="title">
-      <Heading extraSmall>Relationships</Heading>
-    </div>
-    <ul>
-      {#each links as link}
-        <li
-          class:selected={value === link}
-          on:click={() => handleSelected(link)}>
-          {link.label}
-        </li>
-      {/each}
-    </ul>
-  </div>
-</DropdownMenu>
-
-<style>
-  .dropdownbutton {
-    background-color: var(--grey-2);
-    border: var(--border-transparent);
-    padding: var(--spacing-m);
-    border-radius: var(--border-radius-m);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-    flex: 1 1 auto;
-  }
-  .dropdownbutton:hover {
-    cursor: pointer;
-    background-color: var(--grey-3);
-  }
-  .dropdownbutton span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    text-align: left;
-    font-size: var(--font-size-xs);
-  }
-  .dropdownbutton :global(svg) {
-    margin: -4px 0;
-  }
-
-  .dropdown {
-    padding: var(--spacing-m) 0;
-    z-index: 99999999;
-  }
-  .title {
-    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-  }
-
-  hr {
-    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0px;
-    margin: 0px;
-  }
-
-  li {
-    cursor: pointer;
-    margin: 0px;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-
-  .selected {
-    background-color: var(--grey-4);
-  }
-
-  li:hover {
-    background-color: var(--grey-4);
-  }
-</style>
+<script>
+  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
+
+  const dispatch = createEventDispatcher()
+  let anchorRight, dropdownRight
+
+  export let value = {}
+
+  function handleSelected(selected) {
+    dispatch("change", selected)
+    dropdownRight.hide()
+  }
+
+  $: tables = $backendUiStore.tables.map(m => ({
+    label: m.name,
+    name: `all_${m._id}`,
+    tableId: m._id,
+    type: "table",
+  }))
+
+  $: views = $backendUiStore.tables.reduce((acc, cur) => {
+    let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
+      label: key,
+      name: key,
+      ...value,
+      type: "view",
+    }))
+    return [...acc, ...viewsArr]
+  }, [])
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    tables: $backendUiStore.tables,
+  })
+
+  $: links = bindableProperties
+    .filter(x => x.fieldSchema?.type === "link")
+    .map(property => ({
+      label: property.readableBinding,
+      fieldName: property.fieldSchema.name,
+      name: `all_${property.fieldSchema.tableId}`,
+      tableId: property.fieldSchema.tableId,
+      type: "link",
+    }))
+</script>
+
+<div
+  class="dropdownbutton"
+  bind:this={anchorRight}
+  on:click={dropdownRight.show}>
+  <span>{value.label ? value.label : 'Table / View'}</span>
+  <Icon name="arrowdown" />
+</div>
+<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+  <div class="dropdown">
+    <div class="title">
+      <Heading extraSmall>Tables</Heading>
+    </div>
+    <ul>
+      {#each tables as table}
+        <li
+          class:selected={value === table}
+          on:click={() => handleSelected(table)}>
+          {table.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Views</Heading>
+    </div>
+    <ul>
+      {#each views as view}
+        <li
+          class:selected={value === view}
+          on:click={() => handleSelected(view)}>
+          {view.label}
+        </li>
+      {/each}
+    </ul>
+    <hr />
+    <div class="title">
+      <Heading extraSmall>Relationships</Heading>
+    </div>
+    <ul>
+      {#each links as link}
+        <li
+          class:selected={value === link}
+          on:click={() => handleSelected(link)}>
+          {link.label}
+        </li>
+      {/each}
+    </ul>
+  </div>
+</DropdownMenu>
+
+<style>
+  .dropdownbutton {
+    background-color: var(--grey-2);
+    border: var(--border-transparent);
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: var(--border-radius-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+  .dropdownbutton:hover {
+    cursor: pointer;
+    background-color: var(--grey-3);
+  }
+  .dropdownbutton span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-align: left;
+    font-size: var(--font-size-xs);
+  }
+  .dropdownbutton :global(svg) {
+    margin: -4px 0;
+  }
+
+  .dropdown {
+    padding: var(--spacing-m) 0;
+    z-index: 99999999;
+  }
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
+  }
+
+  hr {
+    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+  }
+
+  li {
+    cursor: pointer;
+    margin: 0px;
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
+  }
+
+  .selected {
+    background-color: var(--grey-4);
+  }
+
+  li:hover {
+    background-color: var(--grey-4);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
deleted file mode 100644
index 0bf8095e4..000000000
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ /dev/null
@@ -1,193 +0,0 @@
-<script>
-  import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import PageLayout from "./PageLayout.svelte"
-  import PagesList from "./PagesList.svelte"
-  import { store } from "builderStore"
-  import NewScreenModal from "./NewScreenModal.svelte"
-  import CurrentItemPreview from "./AppPreview/CurrentItemPreview.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
-  import { Modal } from "@budibase/bbui"
-
-  let newScreenPicker
-  let confirmDeleteDialog
-  let componentToDelete = ""
-  let settingsView
-  let modal
-
-  const settings = () => {
-    settingsView.show()
-  }
-
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
-</script>
-
-<div class="root">
-  <div class="ui-nav">
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <span class="components-nav-page">Pages</span>
-      </div>
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={modal.show}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
-  </div>
-  <div class="preview-pane">
-    <CurrentItemPreview />
-  </div>
-  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
-    <div class="components-pane">
-      <ComponentsPaneSwitcher />
-    </div>
-  {/if}
-</div>
-
-<Modal bind:this={modal}>
-  <NewScreenModal />
-</Modal>
-
-<SettingsView bind:this={settingsView} />
-
-<style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .root {
-    display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    height: 100%;
-    width: 100%;
-    background: var(--grey-1);
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .preview-pane {
-    grid-column: 2;
-    margin: 40px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-  }
-
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--blue);
-  }
-
-  .navigator-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 600;
-    text-transform: uppercase;
-    padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-  }
-
-  .components-list-container {
-    padding: 10px 0px 0 0;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
index 7ac0dd20b..9979d4dcc 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
@@ -1,5 +1,5 @@
 import { isUndefined, filter, some, includes } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
 const normalString = s => (s || "").trim().toLowerCase()
 
diff --git a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
index dffec1c65..1776ddf23 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js
@@ -1,5 +1,5 @@
 import { split, last } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { pipe } from "../../../helpers"
 
 export const splitName = fullname => {
   const componentName = pipe(fullname, [split("/"), last])
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index db1079b8e..1c4bc632a 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -20,118 +20,154 @@ import { all } from "./propertyCategories.js"
 export default {
   categories: [
     {
-      name: "Basic",
+      _component: "@budibase/standard-components/container",
+      name: "Container",
+      description: "This component contains things within itself",
+      icon: "ri-layout-column-line",
+      commonProps: {},
+      children: [],
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            key: "type",
+            label: "Type",
+            control: OptionSelect,
+            options: [
+              "article",
+              "aside",
+              "details",
+              "div",
+              "figure",
+              "figcaption",
+              "footer",
+              "header",
+              "main",
+              "mark",
+              "nav",
+              "paragraph",
+              "summary",
+            ],
+          },
+        ],
+      },
+    },
+    {
+      name: "Grid",
+      _component: "@budibase/standard-components/datagrid",
+      description:
+        "a datagrid component with functionality to add, remove and edit rows.",
+      icon: "ri-grid-line",
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            label: "Source",
+            key: "datasource",
+            control: TableViewSelect,
+          },
+          {
+            label: "Detail URL",
+            key: "detailUrl",
+            control: DetailScreenSelect,
+          },
+          {
+            label: "Editable",
+            key: "editable",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+          {
+            label: "Theme",
+            key: "theme",
+            control: OptionSelect,
+            options: [
+              "alpine",
+              "alpine-dark",
+              "balham",
+              "balham-dark",
+              "material",
+            ],
+            placeholder: "alpine",
+          },
+          {
+            label: "Height",
+            key: "height",
+            defaultValue: "500",
+            control: Input,
+          },
+          {
+            label: "Pagination",
+            key: "pagination",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+        ],
+      },
+      children: [],
+    },
+    {
+      name: "Repeater",
+      _component: "@budibase/standard-components/list",
+      description: "Renders all children once per row, of a given table",
+      icon: "ri-list-check-2",
+      properties: {
+        design: { ...all },
+        settings: [
+          {
+            label: "Data",
+            key: "datasource",
+            control: TableViewSelect,
+          },
+        ],
+      },
+      children: [],
+    },
+    {
+      _component: "@budibase/standard-components/button",
+      name: "Button",
+      description: "A basic html button that is ready for styling",
+      icon: "ri-share-box-line",
+      children: [],
+      properties: {
+        design: {
+          ...all,
+        },
+        settings: [
+          { label: "Text", key: "text", control: Input },
+          {
+            label: "Disabled",
+            key: "disabled",
+            valueKey: "checked",
+            control: Checkbox,
+          },
+          { label: "On Click", key: "onClick", control: Event },
+        ],
+      },
+    },
+    {
+      name: "Form",
+      icon: "ri-file-edit-line",
       isCategory: true,
       children: [
         {
-          _component: "@budibase/standard-components/container",
-          name: "Container",
-          description: "This component contains things within itself",
-          icon: "ri-layout-row-line",
-          commonProps: {},
-          children: [],
+          _component: "@budibase/standard-components/dataform",
+          name: "Form Basic",
+          icon: "ri-file-edit-line",
           properties: {
             design: { ...all },
-            settings: [
-              {
-                key: "type",
-                label: "Type",
-                control: OptionSelect,
-                options: [
-                  "article",
-                  "aside",
-                  "details",
-                  "div",
-                  "figure",
-                  "figcaption",
-                  "footer",
-                  "header",
-                  "main",
-                  "mark",
-                  "nav",
-                  "paragraph",
-                  "summary",
-                ],
-              },
-            ],
+            settings: [],
           },
         },
         {
-          _component: "@budibase/standard-components/embed",
-          icon: "ri-code-line",
-          name: "Embed",
-          description: "Embed content from 3rd party sources",
+          _component: "@budibase/standard-components/dataformwide",
+          name: "Form Wide",
+          icon: "ri-file-edit-line",
           properties: {
-            design: {
-              ...all,
-            },
-            settings: [{ label: "Embed", key: "embed", control: Input }],
+            design: { ...all },
+            settings: [],
           },
         },
-        {
-          name: "Text",
-          description: "This is a simple text component",
-          icon: "ri-t-box-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/heading",
-              name: "Headline",
-              description: "A component for displaying heading text",
-              icon: "ri-heading",
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    key: "text",
-                    label: "Text",
-                    control: Input,
-                  },
-                  {
-                    key: "type",
-                    label: "Type",
-                    control: OptionSelect,
-                    options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-                  },
-                ],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/text",
-              name: "Paragraph",
-              description: "A component for displaying paragraph text.",
-              icon: "ri-paragraph",
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Text",
-                    key: "text",
-                    control: Input,
-                  },
-                  {
-                    label: "Type",
-                    key: "type",
-                    control: OptionSelect,
-                    options: [
-                      "none",
-                      "bold",
-                      "strong",
-                      "italic",
-                      "emphasis",
-                      "mark",
-                      "small",
-                      "del",
-                      "ins",
-                      "sub",
-                      "sup",
-                    ],
-                  },
-                ],
-              },
-            },
-          ],
-        },
         {
           _component: "@budibase/standard-components/input",
           name: "Textfield",
@@ -152,948 +188,863 @@ export default {
           },
         },
         {
-          _component: "@budibase/standard-components/button",
-          name: "Button",
-          description: "A basic html button that is ready for styling",
-          icon: "ri-share-box-line",
+          _component: "@budibase/standard-components/datepicker",
+          name: "Date Picker",
+          description: "A basic date picker component",
+          icon: "ri-calendar-line",
           children: [],
           properties: {
-            design: {
-              ...all,
-            },
+            design: { ...all },
+            settings: [
+              { label: "Placeholder", key: "placeholder", control: Input },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Card",
+      icon: "ri-archive-drawer-line",
+      isCategory: true,
+      children: [
+        {
+          _component: "@budibase/standard-components/stackedlist",
+          name: "Stacked List",
+          icon: "ri-archive-drawer-line",
+          description:
+            "A basic card component that can contain content and actions.",
+          children: [],
+          properties: {
+            design: { ...all },
             settings: [
-              { label: "Text", key: "text", control: Input },
               {
-                label: "Disabled",
-                key: "disabled",
-                valueKey: "checked",
-                control: Checkbox,
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "{{{context.Image}}}",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "{{context.Heading}}",
+              },
+              {
+                label: "Text 1",
+                key: "text1",
+                control: Input,
+                placeholder: "{{context.Text 1}}",
+              },
+              {
+                label: "Text 2",
+                key: "text2",
+                control: Input,
+                placeholder: "{{context.Text 2}}",
+              },
+              {
+                label: "Text 3",
+                key: "text3",
+                control: Input,
+                placeholder: "{{context.Text 3}}",
+              },
+              {
+                label: "Link URL",
+                key: "destinationUrl",
+                control: ScreenSelect,
+                placeholder: "/table/_id",
               },
-              { label: "onClick", key: "onClick", control: Event },
             ],
           },
         },
         {
-          _component: "@budibase/standard-components/image",
-          name: "Image",
-          description: "A basic component for displaying images",
-          icon: "ri-image-line",
+          _component: "@budibase/standard-components/card",
+          name: "Vertical",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-column-line",
           children: [],
           properties: {
             design: { ...all },
-            settings: [{ label: "URL", key: "url", control: Input }],
+            settings: [
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "Image",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "Heading",
+              },
+              {
+                label: "Description",
+                key: "description",
+                control: Input,
+                placeholder: "Description",
+              },
+              {
+                label: "Link Text",
+                key: "linkText",
+                control: Input,
+                placeholder: "Link Text",
+              },
+              {
+                label: "Link Url",
+                key: "linkUrl",
+                control: ScreenSelect,
+                placeholder: "Link URL",
+              },
+              {
+                label: "Link Color",
+                key: "color",
+                control: Input,
+                placeholder: "Link Color",
+              },
+              {
+                label: "Hover Color",
+                key: "linkHoverColor",
+                control: Input,
+                placeholder: "Hover Color",
+              },
+              {
+                label: "Image Height",
+                key: "imageHeight",
+                control: OptionSelect,
+                options: ["12rem", "16rem", "20rem", "24rem"],
+                placeholder: "Image Height",
+              },
+              {
+                label: "Card Width",
+                key: "cardWidth",
+                control: OptionSelect,
+                options: ["16rem", "20rem", "24rem"],
+                placeholder: "Card Width",
+              },
+            ],
           },
         },
         {
-          _component: "@budibase/standard-components/icon",
-          name: "Icon",
-          description: "A basic component for displaying icons",
-          icon: "ri-sun-fill",
+          _component: "@budibase/standard-components/cardhorizontal",
+          name: "Horizontal",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-row-line",
           children: [],
           properties: {
-            design: {},
+            design: { ...all },
             settings: [
-              { label: "Icon", key: "icon", control: IconSelect },
               {
-                label: "Size",
-                key: "size",
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "Image",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "Heading",
+              },
+              {
+                label: "Description",
+                key: "description",
+                control: Input,
+                placeholder: "Description",
+              },
+              {
+                label: "Subtext",
+                key: "subtext",
+                control: Input,
+                placeholder: "Subtext",
+              },
+              {
+                label: "Link Text",
+                key: "linkText",
+                control: Input,
+                placeholder: "Link Text",
+              },
+              {
+                label: "Link Url",
+                key: "linkUrl",
+                control: ScreenSelect,
+                placeholder: "Link URL",
+              },
+              {
+                label: "Link Color",
+                key: "color",
+                control: Input,
+                placeholder: "Link Color",
+              },
+              {
+                label: "Hover Color",
+                key: "linkHoverColor",
+                control: Input,
+                placeholder: "Hover Color",
+              },
+              {
+                label: "Card Width",
+                key: "cardWidth",
                 control: OptionSelect,
-                defaultValue: "fa-lg",
                 options: [
-                  { value: "fa-xs", label: "xs" },
-                  { value: "fa-sm", label: "sm" },
-                  { value: "fa-lg", label: "lg" },
-                  { value: "fa-2x", label: "2x" },
-                  { value: "fa-3x", label: "3x" },
-                  { value: "fa-5x", label: "5x" },
-                  { value: "fa-7x", label: "7x" },
-                  { value: "fa-10x", label: "10x" },
+                  "24rem",
+                  "28rem",
+                  "32rem",
+                  "40rem",
+                  "48rem",
+                  "60rem",
+                  "100%",
                 ],
+                placeholder: "Card Height",
               },
               {
-                label: "Color",
+                label: "Image Width",
+                key: "imageWidth",
+                control: OptionSelect,
+                options: ["8rem", "12rem", "16rem"],
+                placeholder: "Image Width",
+              },
+              {
+                label: "Image Height",
+                key: "imageHeight",
+                control: OptionSelect,
+                options: ["8rem", "12rem", "16rem", "auto"],
+                placeholder: "Image Height",
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "Chart",
+      icon: "ri-bar-chart-2-line",
+      isCategory: true,
+      children: [
+        {
+          name: "Donut",
+          _component: "@budibase/standard-components/donut",
+          description: "Donut chart",
+          icon: "ri-pie-chart-fill",
+          properties: {
+            settings: [
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Field",
+                key: "nameKey",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Field",
+                key: "valueKey",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Animate Chart",
+                key: "isAnimated",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Hover Highlight",
+                key: "hasHoverAnimation",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Keep Last Hover",
+                key: "hasLastHoverSliceHighlighted",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Colors",
                 key: "color",
-                control: Colorpicker,
-                defaultValue: "#000",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "External Radius",
+                key: "externalRadius",
+                control: Input,
+              },
+              {
+                label: "Internal Radius",
+                key: "internalRadius",
+                control: Input,
+              },
+              {
+                label: "Radius Offset",
+                key: "radiusHoverOffset ",
+                control: Input,
+              },
+              {
+                label: "Show Legend",
+                key: "useLegend ",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Horizontal Legend",
+                key: "horizontalLegend",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Legend Width",
+                key: "legendWidth",
+                control: Input,
               },
             ],
           },
         },
         {
-          _component: "@budibase/standard-components/link",
-          name: "Link",
-          description: "A basic link component for internal and external links",
-          icon: "ri-link",
-          children: [],
+          name: "Bar",
+          _component: "@budibase/standard-components/bar",
+          description: "Bar chart",
+          icon: "ri-bar-chart-fill",
           properties: {
-            design: { ...all },
             settings: [
-              { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: ScreenSelect },
               {
-                label: "Open New Tab",
-                key: "openInNewTab",
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Label",
+                key: "nameLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label Offset",
+                key: "xAxisLabelOffset",
+                control: Input,
+              },
+              {
+                label: "Y Axis Label Offset",
+                key: "yAxisLabelOffset",
+                control: Input,
+              },
+              {
+                label: "Enable Labels",
+                key: "enableLabels",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Colors",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  { label: "Normal", value: "britecharts" },
+                  { label: "Blue Green", value: "blueGreen" },
+                  { label: "Green", value: "green" },
+                  { label: "Grey", value: "grey" },
+                  { label: "Orange", value: "orange" },
+                  { label: "Pink", value: "pink" },
+                  { label: "Purple", value: "purple" },
+                  { label: "Red", value: "red" },
+                  { label: "Teal", value: "teal" },
+                  { label: "Yellow", value: "yellow" },
+                ],
+              },
+              {
+                label: "Gradients",
+                key: "gradient",
+                control: OptionSelect,
+                options: [
+                  { value: "", label: "None" },
+                  { value: "bluePurple", label: "Blue Purple" },
+                  { value: "greenBlue", label: "Green Blue" },
+                  { value: "orangePink", label: "Orange Pink" },
+                ],
+              },
+              {
+                label: "Highlight Single Bar",
+                key: "hasSingleBarHighlight",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Animate",
+                key: "isAnimate",
+                control: Checkbox,
                 valueKey: "checked",
+              },
+              {
+                label: "Horizontal",
+                key: "isHorizontal",
                 control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Label Number Format",
+                key: "labelsNumberFormat",
+                control: Input,
               },
             ],
           },
         },
         {
-          _component: "@budibase/standard-components/datepicker",
-          name: "Date Picker",
-          description: "A basic date picker component",
-          icon: "ri-calendar-line",
-          children: [],
+          name: "Grouped Bar",
+          _component: "@budibase/standard-components/groupedbar",
+          description: "Groupedbar chart",
+          icon: "ri-bar-chart-grouped-fill",
           properties: {
-            design: { ...all },
             settings: [
-              { label: "Placeholder", key: "placeholder", control: Input },
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Name Label",
+                key: "nameLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Group Label",
+                key: "groupLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Color",
+                key: "color",
+                control: OptionSelect,
+                options: [
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
+                ],
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Aspect Ratio",
+                key: "aspectRatio",
+                control: Input,
+              },
+              {
+                label: "Grid",
+                key: "grid",
+                control: OptionSelect,
+                options: ["vertical", "horizontal", "full"],
+              },
+              {
+                label: "Value Label",
+                key: "valueLabel",
+                control: Input,
+              },
+              {
+                label: "Y Ticks",
+                key: "yTicks",
+                control: Input,
+              },
+              {
+                label: "Y Tick Text Offset",
+                key: "yTickTextOffset",
+                control: Input,
+              },
+              {
+                label: "Is Animated",
+                key: "isAnimated",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Is Horizontal",
+                key: "isHorizontal",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Tooltip Title",
+                key: "tooltipTitle",
+                control: Input,
+              },
             ],
           },
         },
-      ],
-    },
-    {
-      name: "Blocks",
-      isCategory: true,
-      children: [
         {
-          name: "List",
-          _component: "@budibase/standard-components/list",
-          description: "Renders all children once per row, of a given table",
-          icon: "ri-file-list-line",
+          name: "Line",
+          _component: "@budibase/standard-components/line",
+          description: "Line chart",
+          icon: "ri-line-chart-line",
           properties: {
-            design: { ...all },
             settings: [
               {
                 label: "Data",
                 key: "datasource",
                 control: TableViewSelect,
               },
-            ],
-          },
-          children: [],
-        },
-        {
-          name: "Grid",
-          _component: "@budibase/standard-components/datagrid",
-          description:
-            "a datagrid component with functionality to add, remove and edit rows.",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [
               {
-                label: "Source",
-                key: "datasource",
-                control: TableViewSelect,
+                label: "Value Label",
+                key: "valueLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
               },
               {
-                label: "Detail URL",
-                key: "detailUrl",
-                control: DetailScreenSelect,
+                label: "Topic Label",
+                key: "topicLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
               },
               {
-                label: "Editable",
-                key: "editable",
-                valueKey: "checked",
-                control: Checkbox,
+                label: "Date Label",
+                key: "dateLabel",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
               },
               {
-                label: "Theme",
-                key: "theme",
+                label: "Colors",
+                key: "color",
                 control: OptionSelect,
                 options: [
-                  "alpine",
-                  "alpine-dark",
-                  "balham",
-                  "balham-dark",
-                  "material",
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
                 ],
-                placeholder: "alpine",
               },
               {
-                label: "Height",
-                key: "height",
-                defaultValue: "500",
+                label: "Gradients",
+                key: "lineGradient",
+                control: OptionSelect,
+                options: [
+                  { value: "", label: "None" },
+                  { value: "bluePurple", label: "Blue Purple" },
+                  { value: "greenBlue", label: "Green Blue" },
+                  { value: "orangePink", label: "Orange Pink" },
+                ],
+              },
+              {
+                label: "Line Curve",
+                key: "lineCurve",
+                control: OptionSelect,
+                options: [
+                  "linear",
+                  "basis",
+                  "natural",
+                  "monotoneX",
+                  "monotoneY",
+                  "step",
+                  "stepAfter",
+                  "stepBefore",
+                  "cardinal",
+                  "catmullRom",
+                ],
+              },
+              {
+                label: "X Axis Value Type",
+                key: "xAxisValueType",
+                control: OptionSelect,
+                options: ["date", "number"],
+              },
+              {
+                label: "Grid",
+                key: "grid",
+                control: OptionSelect,
+                options: ["vertical", "horizontal", "full"],
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
                 control: Input,
               },
               {
-                label: "Pagination",
-                key: "pagination",
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "Show All Datapoints",
+                key: "shouldShowAllDataPoints",
                 valueKey: "checked",
                 control: Checkbox,
               },
-            ],
-          },
-          children: [],
-        },
-        {
-          _component: "@budibase/standard-components/stackedlist",
-          name: "Stacked List",
-          description:
-            "A basic card component that can contain content and actions.",
-          icon: "ri-archive-drawer-line",
-          children: [],
-          properties: {
-            design: { ...all },
-            settings: [
               {
-                label: "Image",
-                key: "imageUrl",
+                label: "Width",
+                key: "width",
                 control: Input,
-                placeholder: "{{{context.Image}}}",
               },
               {
-                label: "Heading",
-                key: "heading",
+                label: "Height",
+                key: "height",
                 control: Input,
-                placeholder: "{{context.Heading}}",
               },
               {
-                label: "Text 1",
-                key: "text1",
+                label: "Is Animated",
+                key: "isAnimated",
+                control: Checkbox,
+                valueKey: "checked",
+              },
+              {
+                label: "Locale",
+                key: "locale",
+                control: OptionSelect,
+                options: ["en-GB", "en-US"],
+              },
+              {
+                label: "X Axis Value Type",
+                key: "xAxisValueType",
+                control: OptionSelect,
+                options: ["date", "numeric"],
+              },
+              {
+                label: "X Axis Format",
+                key: "xAxisFormat",
+                control: OptionSelect,
+                options: [
+                  "day-month",
+                  "minute-hour",
+                  "hour-daymonth",
+                  "month-year",
+                  "custom",
+                ],
+              },
+              {
+                label: "X Axis Custom Format",
+                key: "xAxisCustomFormat",
                 control: Input,
-                placeholder: "{{context.Text 1}}",
               },
               {
-                label: "Text 2",
-                key: "text2",
+                label: "Tooltip Title",
+                key: "tooltipTitle",
                 control: Input,
-                placeholder: "{{context.Text 2}}",
               },
               {
-                label: "Text 3",
-                key: "text3",
+                label: "X Ticks",
+                key: "xTicks",
                 control: Input,
-                placeholder: "{{context.Text 3}}",
               },
               {
-                label: "destinationUrl",
-                key: "destinationUrl",
-                control: ScreenSelect,
-                placeholder: "/table/_id",
+                label: "Y Ticks",
+                key: "yTicks",
+                control: Input,
               },
             ],
           },
         },
+      ],
+    },
+    {
+      name: "Elements",
+      icon: "ri-paragraph",
+      isCategory: true,
+      children: [
         {
-          name: "Card",
-          description: "Card components",
-          icon: "ri-layout-bottom-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/card",
-              name: "Vertical",
-              description:
-                "A basic card component that can contain content and actions.",
-              icon: "ri-layout-column-line",
-              children: [],
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Image",
-                    key: "imageUrl",
-                    control: Input,
-                    placeholder: "Image",
-                  },
-                  {
-                    label: "Heading",
-                    key: "heading",
-                    control: Input,
-                    placeholder: "Heading",
-                  },
-                  {
-                    label: "Description",
-                    key: "description",
-                    control: Input,
-                    placeholder: "Description",
-                  },
-                  {
-                    label: "Link Text",
-                    key: "linkText",
-                    control: Input,
-                    placeholder: "Link Text",
-                  },
-                  {
-                    label: "Link Url",
-                    key: "linkUrl",
-                    control: ScreenSelect,
-                    placeholder: "Link URL",
-                  },
-                  {
-                    label: "Link Color",
-                    key: "color",
-                    control: Input,
-                    placeholder: "Link Color",
-                  },
-                  {
-                    label: "Hover Color",
-                    key: "linkHoverColor",
-                    control: Input,
-                    placeholder: "Hover Color",
-                  },
-                  {
-                    label: "Image Height",
-                    key: "imageHeight",
-                    control: OptionSelect,
-                    options: ["12rem", "16rem", "20rem", "24rem"],
-                    placeholder: "Image Height",
-                  },
-                  {
-                    label: "Card Width",
-                    key: "cardWidth",
-                    control: OptionSelect,
-                    options: ["16rem", "20rem", "24rem"],
-                    placeholder: "Card Width",
-                  },
-                ],
-              },
-            },
-            {
-              _component: "@budibase/standard-components/cardhorizontal",
-              name: "Horizontal",
-              description:
-                "A basic card component that can contain content and actions.",
-              icon: "ri-layout-row-line",
-              children: [],
-              properties: {
-                design: { ...all },
-                settings: [
-                  {
-                    label: "Image",
-                    key: "imageUrl",
-                    control: Input,
-                    placeholder: "Image",
-                  },
-                  {
-                    label: "Heading",
-                    key: "heading",
-                    control: Input,
-                    placeholder: "Heading",
-                  },
-                  {
-                    label: "Description",
-                    key: "description",
-                    control: Input,
-                    placeholder: "Description",
-                  },
-                  {
-                    label: "Subtext",
-                    key: "subtext",
-                    control: Input,
-                    placeholder: "Subtext",
-                  },
-                  {
-                    label: "Link Text",
-                    key: "linkText",
-                    control: Input,
-                    placeholder: "Link Text",
-                  },
-                  {
-                    label: "Link Url",
-                    key: "linkUrl",
-                    control: ScreenSelect,
-                    placeholder: "Link URL",
-                  },
-                  {
-                    label: "Link Color",
-                    key: "color",
-                    control: Input,
-                    placeholder: "Link Color",
-                  },
-                  {
-                    label: "Hover Color",
-                    key: "linkHoverColor",
-                    control: Input,
-                    placeholder: "Hover Color",
-                  },
-                  {
-                    label: "Card Width",
-                    key: "cardWidth",
-                    control: OptionSelect,
-                    options: [
-                      "24rem",
-                      "28rem",
-                      "32rem",
-                      "40rem",
-                      "48rem",
-                      "60rem",
-                      "100%",
-                    ],
-                    placeholder: "Card Height",
-                  },
-                  {
-                    label: "Image Width",
-                    key: "imageWidth",
-                    control: OptionSelect,
-                    options: ["8rem", "12rem", "16rem"],
-                    placeholder: "Image Width",
-                  },
-                  {
-                    label: "Image Height",
-                    key: "imageHeight",
-                    control: OptionSelect,
-                    options: ["8rem", "12rem", "16rem", "auto"],
-                    placeholder: "Image Height",
-                  },
-                ],
-              },
-            },
-          ],
-        },
-        {
-          name: "Form",
-          description: "A component that generates a form from your data.",
-          icon: "ri-file-edit-line",
-          commonProps: {},
-          children: [
-            {
-              _component: "@budibase/standard-components/dataform",
-              name: "Form Basic",
-              icon: "ri-file-edit-line",
-              properties: {
-                design: { ...all },
-                settings: [],
+          _component: "@budibase/standard-components/heading",
+          name: "Headline",
+          icon: "ri-heading",
+          description: "A component for displaying heading text",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                key: "text",
+                label: "Text",
+                control: Input,
               },
-            },
-            {
-              _component: "@budibase/standard-components/dataformwide",
-              name: "Form Wide",
-              icon: "ri-file-edit-line",
-              properties: {
-                design: { ...all },
-                settings: [],
+              {
+                key: "type",
+                label: "Type",
+                control: OptionSelect,
+                options: ["h1", "h2", "h3", "h4", "h5", "h6"],
               },
-            },
-          ],
+            ],
+          },
         },
         {
-          name: "Chart",
-          description: "Shiny chart",
-          icon: "ri-bar-chart-fill",
-          children: [
-            {
-              name: "Donut",
-              _component: "@budibase/standard-components/donut",
-              description: "Donut chart",
-              icon: "ri-pie-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Animate Chart",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Hover Highlight",
-                    key: "hasHoverAnimation",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Keep Last Hover",
-                    key: "hasLastHoverSliceHighlighted",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "External Radius",
-                    key: "externalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Internal Radius",
-                    key: "internalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Radius Offset",
-                    key: "radiusHoverOffset ",
-                    control: Input,
-                  },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend ",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Horizontal Legend",
-                    key: "horizontalLegend",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Legend Width",
-                    key: "legendWidth",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Bar",
-              _component: "@budibase/standard-components/bar",
-              description: "Bar chart",
-              icon: "ri-bar-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Enable Labels",
-                    key: "enableLabels",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      { label: "Normal", value: "britecharts" },
-                      { label: "Blue Green", value: "blueGreen" },
-                      { label: "Green", value: "green" },
-                      { label: "Grey", value: "grey" },
-                      { label: "Orange", value: "orange" },
-                      { label: "Pink", value: "pink" },
-                      { label: "Purple", value: "purple" },
-                      { label: "Red", value: "red" },
-                      { label: "Teal", value: "teal" },
-                      { label: "Yellow", value: "yellow" },
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "gradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Highlight Single Bar",
-                    key: "hasSingleBarHighlight",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Animate",
-                    key: "isAnimate",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Horizontal",
-                    key: "isHorizontal",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Label Number Format",
-                    key: "labelsNumberFormat",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Groupedbar",
-              _component: "@budibase/standard-components/groupedbar",
-              description: "Groupedbar chart",
-              icon: "ri-bar-chart-grouped-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Group Label",
-                    key: "groupLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Tick Text Offset",
-                    key: "yTickTextOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Is Horizontal",
-                    key: "isHorizontal",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Tooltip Title",
-                    key: "tooltipTitle",
-                    control: Input,
-                  },
-                ],
+          _component: "@budibase/standard-components/text",
+          name: "Paragraph",
+          description: "A component for displaying paragraph text.",
+          icon: "ri-paragraph",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Text",
+                key: "text",
+                control: Input,
               },
-            },
-            {
-              name: "Line",
-              _component: "@budibase/standard-components/line",
-              description: "Line chart",
-              icon: "ri-line-chart-fill",
-              properties: {
-                settings: [
-                  {
-                    label: "Data",
-                    key: "datasource",
-                    control: TableViewSelect,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    dependsOn: "datasource",
-                    control: TableViewFieldSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "lineGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Line Curve",
-                    key: "lineCurve",
-                    control: OptionSelect,
-                    options: [
-                      "linear",
-                      "basis",
-                      "natural",
-                      "monotoneX",
-                      "monotoneY",
-                      "step",
-                      "stepAfter",
-                      "stepBefore",
-                      "cardinal",
-                      "catmullRom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Show All Datapoints",
-                    key: "shouldShowAllDataPoints",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: OptionSelect,
-                    options: ["en-GB", "en-US"],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "numeric"],
-                  },
-                  {
-                    label: "X Axis Format",
-                    key: "xAxisFormat",
-                    control: OptionSelect,
-                    options: [
-                      "day-month",
-                      "minute-hour",
-                      "hour-daymonth",
-                      "month-year",
-                      "custom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Custom Format",
-                    key: "xAxisCustomFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Tooltip Title",
-                    key: "tooltipTitle",
-                    control: Input,
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
+              {
+                label: "Type",
+                key: "type",
+                control: OptionSelect,
+                options: [
+                  "none",
+                  "bold",
+                  "strong",
+                  "italic",
+                  "emphasis",
+                  "mark",
+                  "small",
+                  "del",
+                  "ins",
+                  "sub",
+                  "sup",
                 ],
               },
-            },
-          ],
+            ],
+          },
         },
-        // {
-        //  name: "Data List",
-        //  _component: "@budibase/standard-components/datalist",
-        //  description: "Shiny list",
-        //  icon: "ri-file-list-line",
-        //  properties: {
-        //   design: { ...all },
-        //   settings: [{ label: "Table", key: "table", control: TableSelect }],
-        //  },
-        //  children: [],
-        // },
         {
-          name: "Row Detail",
-          _component: "@budibase/standard-components/rowdetail",
-          description:
-            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
+          _component: "@budibase/standard-components/image",
+          name: "Image",
+          description: "A basic component for displaying images",
+          icon: "ri-image-line",
+          children: [],
           properties: {
             design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
+            settings: [{ label: "URL", key: "url", control: Input }],
           },
-          children: [],
         },
         {
-          name: "New Row",
-          _component: "@budibase/standard-components/newrow",
-          description:
-            "Sets up a new row for creation, which can be used with {{ context }}, in children",
-          icon: "ri-profile-line",
+          _component: "@budibase/standard-components/link",
+          name: "Link",
+          description: "A basic link component for internal and external links",
+          icon: "ri-link",
+          children: [],
           properties: {
             design: { ...all },
-            settings: [{ label: "Table", key: "table", control: TableSelect }],
+            settings: [
+              { label: "Text", key: "text", control: Input },
+              { label: "Url", key: "url", control: ScreenSelect },
+              {
+                label: "New Tab",
+                key: "openInNewTab",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+            ],
           },
+        },
+        {
+          _component: "@budibase/standard-components/icon",
+          name: "Icon",
+          description: "A basic component for displaying icons",
+          icon: "ri-sun-fill",
           children: [],
+          properties: {
+            design: {},
+            settings: [
+              { label: "Icon", key: "icon", control: IconSelect },
+              {
+                label: "Size",
+                key: "size",
+                control: OptionSelect,
+                defaultValue: "fa-lg",
+                options: [
+                  { value: "fa-xs", label: "xs" },
+                  { value: "fa-sm", label: "sm" },
+                  { value: "fa-lg", label: "lg" },
+                  { value: "fa-2x", label: "2x" },
+                  { value: "fa-3x", label: "3x" },
+                  { value: "fa-5x", label: "5x" },
+                  { value: "fa-7x", label: "7x" },
+                  { value: "fa-10x", label: "10x" },
+                ],
+              },
+              {
+                label: "Color",
+                key: "color",
+                control: Colorpicker,
+                defaultValue: "#000",
+              },
+            ],
+          },
+        },
+        {
+          _component: "@budibase/standard-components/embed",
+          icon: "ri-code-line",
+          name: "Embed",
+          description: "Embed content from 3rd party sources",
+          properties: {
+            design: {
+              ...all,
+            },
+            settings: [{ label: "Embed", key: "embed", control: Input }],
+          },
         },
       ],
     },
     {
-      name: "Layouts",
+      name: "Other",
+      icon: "ri-more-2-line",
       isCategory: true,
       children: [
         {
@@ -1152,6 +1103,30 @@ export default {
             ],
           },
         },
+        {
+          name: "Row Detail",
+          _component: "@budibase/standard-components/rowdetail",
+          description:
+            "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "table", control: TableSelect }],
+          },
+          children: [],
+        },
+        {
+          name: "New Row",
+          _component: "@budibase/standard-components/newrow",
+          description:
+            "Sets up a new row for creation, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "table", control: TableSelect }],
+          },
+          children: [],
+        },
       ],
     },
   ],
diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js
index 9bfd48a3c..89c7a0a6a 100644
--- a/packages/builder/src/helpers.js
+++ b/packages/builder/src/helpers.js
@@ -1,5 +1,5 @@
-import { last } from "lodash/fp"
-import { pipe } from "components/common/core"
+import { last, flow } from "lodash/fp"
+
 export const buildStyle = styles => {
   let str = ""
   for (let s in styles) {
@@ -15,6 +15,8 @@ export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
 
+export const pipe = (arg, funcs) => flow(funcs)(arg)
+
 export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
 
 export const get_name = s => (!s ? "" : last(s.split("/")))
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 69deda72f..7f4339b97 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -15,7 +15,7 @@
 </head>
 
 <body id="app">
-	
+
 	<script src='/_builder/bundle.js'></script>
 
 </body>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index fb2b233e2..7d0724fac 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -67,23 +67,27 @@
     </div>
     <div class="toprightnav">
       <FeedbackNavLink />
+      <div class="topnavitemright">
+        <a target="_blank" href="https://docs.budibase.com">
+          <i class="ri-question-line" />
+        </a>
+      </div>
+      <div class="topnavitemright">
+        <a
+          target="_blank"
+          href="https://github.com/Budibase/budibase/discussions">
+          <i class="ri-discuss-line" />
+        </a>
+      </div>
       <SettingsLink />
-      <span
-        class:active={false}
-        class="topnavitemright"
+      <Button
+        secondary
         on:click={() => {
           document.cookie = 'budibase:token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
           window.open(`/${application}`)
         }}>
-        <PreviewIcon />
-      </span>
-      <span class="topnavitemright">
-        <a
-          target="_blank"
-          href="https://github.com/Budibase/budibase/discussions">
-          <i class="ri-question-fill help" />
-        </a>
-      </span>
+        Preview
+      </Button>
     </div>
   </div>
   <div class="beta">
@@ -122,7 +126,7 @@
     flex: 0 0 auto;
     height: 60px;
     background: #fff;
-    padding: 0px 20px 0 20px;
+    padding: 0 20px;
     display: flex;
     box-sizing: border-box;
     justify-content: space-between;
@@ -168,20 +172,19 @@
     font-weight: 500;
   }
 
-  .topnavitemright {
+  .topnavitemright a {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
-    font-weight: 500;
-    font-size: 1rem;
-    height: 100%;
+    margin: 0 12px 0 0;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
 
-  .topnavitemright:hover {
+  .topnavitemright a:hover {
     color: var(--ink);
     font-weight: 500;
   }
@@ -207,10 +210,13 @@
     text-transform: capitalize;
   }
 
-  .help {
-    font-size: 24px;
+  i {
+    font-size: 18px;
     color: var(--grey-7);
   }
+  i:hover {
+    color: var(--ink);
+  }
 
   .beta {
     position: absolute;
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 95cf31e2c..08d64474f 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import { automationStore } from "builderStore"
-  import { AutomationPanel, SetupPanel } from "components/automation"
+  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
+  import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
 </script>
 
 <!-- routify:options index=3 -->
@@ -12,28 +13,39 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav">
+    <div class="nav setup">
       <SetupPanel />
     </div>
   {/if}
 </div>
 
 <style>
-  .content {
-    position: relative;
-  }
-
   .root {
     height: calc(100% - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(510px, 1fr) 300px;
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(510px, 1fr) 260px;
+    background: var(--grey-2);
   }
 
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl) var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
+  .content {
+    position: relative;
+    padding: var(--spacing-l) 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/automate/index.svelte b/packages/builder/src/pages/[application]/automate/index.svelte
index 36d04677c..1a15ed48c 100644
--- a/packages/builder/src/pages/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/[application]/automate/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { AutomationBuilder } from "components/automation"
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
 </script>
 
 <AutomationBuilder />
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 1ac92b84c..4bfb984c3 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
-  import * as api from "components/backend/DataTable/api"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
 </script>
 
@@ -18,18 +16,27 @@
   .root {
     height: calc(100vh - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(0, 1fr);
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(0, 1fr);
+    background: var(--grey-2);
   }
   .content {
     flex: 1 1 auto;
-    padding: var(--spacing-xl) 40px;
+    padding: var(--spacing-l) 40px;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
   }
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index b7ee09a4f..c71edee2d 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -11,7 +11,8 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/table/_layout.svelte b/packages/builder/src/pages/[application]/data/table/_layout.svelte
index 3f8b33a09..2eea0be4c 100644
--- a/packages/builder/src/pages/[application]/data/table/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/table/_layout.svelte
@@ -3,10 +3,6 @@
   import { goto, leftover } from "@sveltech/routify"
   import { onMount } from "svelte"
 
-  async function selectTable(table) {
-    backendUiStore.actions.tables.select(table)
-  }
-
   onMount(async () => {
     // navigate to first table in list, if not already selected
     // and this is the final url (i.e. no selectedTable)
@@ -20,13 +16,4 @@
   })
 </script>
 
-<div class="root">
-  <slot />
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-</style>
+<slot />
diff --git a/packages/builder/src/pages/[application]/data/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte
index 15ed1e299..6c661bca5 100644
--- a/packages/builder/src/pages/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/index.svelte
@@ -27,7 +27,8 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
-    color: var(--grey-4);
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
index 3f592e614..312e79900 100644
--- a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte
@@ -11,7 +11,8 @@
 
 <style>
   i {
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-m);
     color: var(--grey-4);
+    margin-top: 2px;
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index 0aae313cc..13f2b4ee5 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -1,15 +1,10 @@
 <script>
   import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
-  import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
   import CurrentItemPreview from "components/userInterface/AppPreview"
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
-  import Switcher from "components/common/Switcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
 
   $: instances = $store.appInstances
@@ -32,30 +27,21 @@
     settingsView.show()
   }
 
-  let leftNavSwitcher
-
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
 <!-- routify:options index=1 -->
 <div class="root">
-
   <div class="ui-nav">
-
-    <Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
-      <div slot="0">
-        <FrontendNavigatePane />
-      </div>
-      <div slot="1">
-        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />
-      </div>
-    </Switcher>
-
+    <FrontendNavigatePane />
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-      <CurrentItemPreview />
+      <ComponentSelectionList />
+      <div class="preview-content">
+        <CurrentItemPreview />
+      </div>
     {/if}
   </div>
 
@@ -64,7 +50,6 @@
       <ComponentPropertiesPanel />
     </div>
   {/if}
-
 </div>
 
 <slot />
@@ -72,35 +57,48 @@
 <style>
   .root {
     display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    width: 100%;
-    background: var(--grey-1);
-    flex: 1;
-    min-height: 0;
+    grid-template-columns: 260px 1fr 260px;
+    background: var(--grey-2);
     align-items: stretch;
+    height: calc(100vh - 60px);
   }
 
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);
-    height: calc(100vh - 69px);
-    padding: 0;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) var(--spacing-xl);
+    overflow-y: auto;
   }
 
   .preview-pane {
     grid-column: 2;
-    margin: 40px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
+  }
+  .preview-content {
     background: #fff;
-    border-radius: 5px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+    flex: 1 1 auto;
   }
 
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    min-height: 0px;
-    height: calc(100vh - 69px);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 
   .nav-group-header > div:nth-child(1) {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 43f3fd02d..a29bf5f44 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,11 +1,7 @@
 <script>
-  import { store } from "builderStore"
   import api from "builderStore/api"
   import AppList from "components/start/AppList.svelte"
-  import { onMount } from "svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import { get } from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button, Heading, Modal } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index d19b2ad85..9adb3c02c 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -92,7 +92,7 @@
 		]
 	},
 	"input": {
-		"name": "Input",
+		"name": "Textfield",
 		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
@@ -222,6 +222,7 @@
 		}
 	},
 	"datagrid": {
+		"name": "Grid",
 		"description": "a datagrid component with functionality to add, remove and edit rows.",
 		"data": true,
 		"props": {
@@ -250,11 +251,13 @@
 		}
 	},
 	"dataform": {
+		"name": "Form",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
 	},
 	"dataformwide": {
+		"name": "Form Wide",
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {}
@@ -275,6 +278,7 @@
 		}
 	},
 	"list": {
+		"name": "Repeater",
 		"description": "A configurable data list that attaches to your backend tables.",
 		"context": "datasource",
 		"children": true,
@@ -296,6 +300,7 @@
 		}
 	},
 	"rowdetail": {
+		"name": "Row Detail",
 		"description": "Loads a row, using an ID in the url",
 		"context": "table",
 		"children": true,
@@ -306,6 +311,7 @@
 		}
 	},
 	"newrow": {
+		"name": "New Row",
 		"description": "Prepares a new row for creation",
 		"context": "table",
 		"children": true,
@@ -673,6 +679,7 @@
 		}
 	},
 	"datepicker": {
+		"name": "Date Picker",
 		"description": "Date Picker",
 		"bindable": "value",
 		"props": {
@@ -704,6 +711,7 @@
 		}
 	},
 	"link": {
+		"name": "Link",
 		"description": "an HTML anchor <a> tag",
 		"props": {
 			"url": "string",
@@ -796,14 +804,14 @@
 		"tags": []
 	},
 	"thead": {
-		"name": "TableHead",
+		"name": "Table Head",
 		"description": "an HTML <thead> tab",
 		"props": {
 			"className": "string"
 		}
 	},
 	"tbody": {
-		"name": "TableBody",
+		"name": "Table Body",
 		"description": "an HTML <tbody> tab",
 		"props": {
 			"className": "string"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index c7261f319..13f3e167a 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.44.1",
+    "@budibase/bbui": "^1.46.0",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
index 9d68c920c..5f6e8056b 100644
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@@ -2,7 +2,7 @@
   import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
   import { FILE_TYPES } from "./fileTypes"
 
-  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
 
   export let files = []