diff --git a/.prettierignore b/.prettierignore
index b1ee287391..b0f9f8cdbf 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -9,4 +9,5 @@ packages/backend-core/coverage
 packages/builder/.routify
 packages/sdk/sdk
 packages/pro/coverage
-**/*.ivm.bundle.js
\ No newline at end of file
+**/*.ivm.bundle.js
+!**/bson-polyfills.ivm.bundle.js
\ No newline at end of file
diff --git a/README.md b/README.md
index 26ad9f80c2..552a849581 100644
--- a/README.md
+++ b/README.md
@@ -54,17 +54,21 @@
 </h3>
 
 <br /><br />
+
 ## ✨ Features
 
-### Build and ship real software 
+### Build and ship real software
+
 Unlike other platforms, with Budibase you build and ship single page applications. Budibase applications have performance baked in and can be designed responsively, providing users with a great experience.
 <br /><br />
 
 ### Open source and extensible
+
 Budibase is open-source - licensed as GPL v3. This should fill you with confidence that Budibase will always be around. You can also code against Budibase or fork it and make changes as you please, providing a developer-friendly experience.
 <br /><br />
 
 ### Load data or start from scratch
+
 Budibase pulls data from multiple sources, including MongoDB, CouchDB, PostgreSQL, MariaDB, MySQL, Airtable, S3, DynamoDB, or a REST API. And unlike other platforms, with Budibase you can start from scratch and create business apps with no data sources. [Request new datasources](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
 
 <p align="center">
@@ -82,10 +86,12 @@ Budibase comes out of the box with beautifully designed, powerful components whi
 <br /><br />
 
 ### Automate processes, integrate with other tools and connect to webhooks
+
 Save time by automating manual processes and workflows. From connecting to webhooks to automating emails, simply tell Budibase what to do and let it work for you. You can easily [create new automations for Budibase here](https://github.com/Budibase/automations) or [Request new automation](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
 <br /><br />
 
 ### Integrate with your favorite tools
+
 Budibase integrates with a number of popular tools allowing you to build apps that perfectly fit your stack.
 
 <p align="center">
@@ -94,6 +100,7 @@ Budibase integrates with a number of popular tools allowing you to build apps th
 <br /><br />
 
 ### Deploy with confidence and security
+
 Budibase is made to scale. With Budibase, you can self-host on your own infrastructure and globally manage users, onboarding, SMTP, apps, groups, theming and more. You can also provide users/groups with an app portal and disseminate user management to the group manager.
 
 - Checkout the promo video: https://youtu.be/xoljVpty_Kw
@@ -104,15 +111,15 @@ Budibase is made to scale. With Budibase, you can self-host on your own infrastr
 
 <br />
 
-
 ## Budibase Public API
+
 As with anything that we build in Budibase, our new public API is simple to use, flexible, and introduces new extensibility. To summarize, the Budibase API enables:
 
 - Budibase as a backend
 - Interoperability
 
-
 #### Docs
+
 You can learn more about the Budibase API at the following places:
 
 - [General documentation](https://docs.budibase.com/docs/public-api): Learn how to get your API key, how to use spec, and how to use Postman
@@ -132,10 +139,8 @@ Deploy Budibase using Docker, Kubernetes, and Digital Ocean on your existing inf
 - [Digital Ocean](https://docs.budibase.com/docs/digitalocean)
 - [Portainer](https://docs.budibase.com/docs/portainer)
 
-
 ### [Get started with Budibase Cloud](https://budibase.com)
 
-
 <br /><br />
 
 ## 🎓 Learning Budibase
@@ -143,7 +148,6 @@ Deploy Budibase using Docker, Kubernetes, and Digital Ocean on your existing inf
 The Budibase documentation [lives here](https://docs.budibase.com/docs).
 <br />
 
-
 <br /><br />
 
 ## 💬 Community
@@ -152,25 +156,24 @@ If you have a question or would like to talk with other Budibase users and join
 
 <br /><br /><br />
 
-
 ## ❗ Code of conduct
 
 Budibase is dedicated to providing everyone a welcoming, diverse, and harassment-free experience. We expect everyone in the Budibase community to abide by our [**Code of Conduct**](https://github.com/Budibase/budibase/blob/HEAD/docs/CODE_OF_CONDUCT.md). Please read it.
 <br />
 
-
 <br /><br />
 
-
 ## 🙌 Contributing to Budibase
 
 From opening a bug report to creating a pull request: every contribution is appreciated and welcomed. If you're planning to implement a new feature or change the API, please create an issue first. This way, we can ensure your work is not in vain.
 Environment setup instructions are available [here](https://github.com/Budibase/budibase/tree/HEAD/docs/CONTRIBUTING.md).
 
 ### Not Sure Where to Start?
-A good place to start contributing is the [First time issues project](https://github.com/Budibase/budibase/projects/22).
+
+A good place to start contributing is by looking for the [good first issue](https://github.com/Budibase/budibase/labels/good%20first%20issue) tag.
 
 ### How the repository is organized
+
 Budibase is a monorepo managed by lerna. Lerna manages the building and publishing of the budibase packages. At a high level, here are the packages that make up Budibase.
 
 - [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - contains code for the budibase builder client-side svelte application.
@@ -183,7 +186,6 @@ For more information, see [CONTRIBUTING.md](https://github.com/Budibase/budibase
 
 <br /><br />
 
-
 ## 📝 License
 
 Budibase is open-source, licensed as [GPL v3](https://www.gnu.org/licenses/gpl-3.0.en.html). The client and component libraries are licensed as [MPL](https://directory.fsf.org/wiki/License:MPL-2.0) - so the apps you build can be licensed however you like.
@@ -202,7 +204,6 @@ If you are having issues between updates of the builder, please use the guide [h
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
-
 <a href="https://github.com/Budibase/budibase/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=Budibase/budibase" />
 </a>
diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js
index 9348706399..d9d894c33e 100644
--- a/eslint-local-rules/index.js
+++ b/eslint-local-rules/index.js
@@ -41,12 +41,11 @@ module.exports = {
           if (
             /^@budibase\/[^/]+\/.*$/.test(importPath) &&
             importPath !== "@budibase/backend-core/tests" &&
-            importPath !== "@budibase/string-templates/test/utils" &&
-            importPath !== "@budibase/client/manifest.json"
+            importPath !== "@budibase/string-templates/test/utils"
           ) {
             context.report({
               node,
-              message: `Importing from @budibase is not allowed, except for @budibase/backend-core/tests, @budibase/string-templates/test/utils and @budibase/client/manifest.json.`,
+              message: `Importing from @budibase is not allowed, except for @budibase/backend-core/tests and @budibase/string-templates/test/utils.`,
             })
           }
         },
diff --git a/lerna.json b/lerna.json
index 8d7460f053..730d145ced 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.3.3",
+  "version": "3.4.4",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {
diff --git a/packages/backend-core/src/docIds/params.ts b/packages/backend-core/src/docIds/params.ts
index 016604b69b..5f1c053bde 100644
--- a/packages/backend-core/src/docIds/params.ts
+++ b/packages/backend-core/src/docIds/params.ts
@@ -83,11 +83,15 @@ export function isViewId(id: string): boolean {
 /**
  * Check if a given ID is that of a datasource or datasource plus.
  */
-export const isDatasourceId = (id: string): boolean => {
+export function isDatasourceId(id: string): boolean {
   // this covers both datasources and datasource plus
   return !!id && id.startsWith(`${DocumentType.DATASOURCE}${SEPARATOR}`)
 }
 
+export function isQueryId(id: string): boolean {
+  return !!id && id.startsWith(`${DocumentType.QUERY}${SEPARATOR}`)
+}
+
 /**
  * Gets parameters for retrieving workspaces.
  */
diff --git a/packages/backend-core/src/queue/inMemoryQueue.ts b/packages/backend-core/src/queue/inMemoryQueue.ts
index dd8d3daa37..6833c9a306 100644
--- a/packages/backend-core/src/queue/inMemoryQueue.ts
+++ b/packages/backend-core/src/queue/inMemoryQueue.ts
@@ -1,45 +1,58 @@
 import events from "events"
 import { newid } from "../utils"
 import { Queue, QueueOptions, JobOptions } from "./queue"
+import { helpers } from "@budibase/shared-core"
+import { Job, JobId, JobInformation } from "bull"
 
-interface JobMessage {
+function jobToJobInformation(job: Job): JobInformation {
+  let cron = ""
+  let every = -1
+  let tz: string | undefined = undefined
+  let endDate: number | undefined = undefined
+
+  const repeat = job.opts?.repeat
+  if (repeat) {
+    endDate = repeat.endDate ? new Date(repeat.endDate).getTime() : Date.now()
+    tz = repeat.tz
+    if ("cron" in repeat) {
+      cron = repeat.cron
+    } else {
+      every = repeat.every
+    }
+  }
+
+  return {
+    id: job.id.toString(),
+    name: "",
+    key: job.id.toString(),
+    tz,
+    endDate,
+    cron,
+    every,
+    next: 0,
+  }
+}
+
+interface JobMessage<T = any> extends Partial<Job<T>> {
   id: string
   timestamp: number
-  queue: string
+  queue: Queue<T>
   data: any
   opts?: JobOptions
 }
 
 /**
- * Bull works with a Job wrapper around all messages that contains a lot more information about
- * the state of the message, this object constructor implements the same schema of Bull jobs
- * for the sake of maintaining API consistency.
- * @param queue The name of the queue which the message will be carried on.
- * @param message The JSON message which will be passed back to the consumer.
- * @returns A new job which can now be put onto the queue, this is mostly an
- * internal structure so that an in memory queue can be easily swapped for a Bull queue.
- */
-function newJob(queue: string, message: any, opts?: JobOptions): JobMessage {
-  return {
-    id: newid(),
-    timestamp: Date.now(),
-    queue: queue,
-    data: message,
-    opts,
-  }
-}
-
-/**
- * This is designed to replicate Bull (https://github.com/OptimalBits/bull) in memory as a sort of mock.
- * It is relatively simple, using an event emitter internally to register when messages are available
- * to the consumers - in can support many inputs and many consumers.
+ * This is designed to replicate Bull (https://github.com/OptimalBits/bull) in
+ * memory as a sort of mock.  It is relatively simple, using an event emitter
+ * internally to register when messages are available to the consumers - in can
+ * support many inputs and many consumers.
  */
 class InMemoryQueue implements Partial<Queue> {
   _name: string
   _opts?: QueueOptions
   _messages: JobMessage[]
   _queuedJobIds: Set<string>
-  _emitter: NodeJS.EventEmitter
+  _emitter: NodeJS.EventEmitter<{ message: [JobMessage]; completed: [Job] }>
   _runCount: number
   _addCount: number
 
@@ -69,34 +82,29 @@ class InMemoryQueue implements Partial<Queue> {
    */
   async process(concurrencyOrFunc: number | any, func?: any) {
     func = typeof concurrencyOrFunc === "number" ? func : concurrencyOrFunc
-    this._emitter.on("message", async () => {
-      if (this._messages.length <= 0) {
-        return
-      }
-      let msg = this._messages.shift()
-
-      let resp = func(msg)
+    this._emitter.on("message", async message => {
+      let resp = func(message)
 
       async function retryFunc(fnc: any) {
         try {
           await fnc
         } catch (e: any) {
-          await new Promise<void>(r => setTimeout(() => r(), 50))
-
-          await retryFunc(func(msg))
+          await helpers.wait(50)
+          await retryFunc(func(message))
         }
       }
 
       if (resp.then != null) {
         try {
           await retryFunc(resp)
+          this._emitter.emit("completed", message as Job)
         } catch (e: any) {
           console.error(e)
         }
       }
       this._runCount++
-      const jobId = msg?.opts?.jobId?.toString()
-      if (jobId && msg?.opts?.removeOnComplete) {
+      const jobId = message.opts?.jobId?.toString()
+      if (jobId && message.opts?.removeOnComplete) {
         this._queuedJobIds.delete(jobId)
       }
     })
@@ -130,9 +138,16 @@ class InMemoryQueue implements Partial<Queue> {
     }
 
     const pushMessage = () => {
-      this._messages.push(newJob(this._name, data, opts))
+      const message: JobMessage = {
+        id: newid(),
+        timestamp: Date.now(),
+        queue: this as unknown as Queue,
+        data,
+        opts,
+      }
+      this._messages.push(message)
       this._addCount++
-      this._emitter.emit("message")
+      this._emitter.emit("message", message)
     }
 
     const delay = opts?.delay
@@ -158,13 +173,6 @@ class InMemoryQueue implements Partial<Queue> {
     console.log(cronJobId)
   }
 
-  /**
-   * Implemented for tests
-   */
-  async getRepeatableJobs() {
-    return []
-  }
-
   async removeJobs(_pattern: string) {
     // no-op
   }
@@ -176,13 +184,31 @@ class InMemoryQueue implements Partial<Queue> {
     return []
   }
 
-  async getJob() {
+  async getJob(id: JobId) {
+    for (const message of this._messages) {
+      if (message.id === id) {
+        return message as Job
+      }
+    }
     return null
   }
 
-  on() {
-    // do nothing
-    return this as any
+  on(event: string, callback: (...args: any[]) => void): Queue {
+    // @ts-expect-error - this callback can be one of many types
+    this._emitter.on(event, callback)
+    return this as unknown as Queue
+  }
+
+  async count() {
+    return this._messages.length
+  }
+
+  async getCompletedCount() {
+    return this._runCount
+  }
+
+  async getRepeatableJobs() {
+    return this._messages.map(job => jobToJobInformation(job as Job))
   }
 }
 
diff --git a/packages/backend-core/src/sql/sql.ts b/packages/backend-core/src/sql/sql.ts
index 334f1efdd4..7791ecb28b 100644
--- a/packages/backend-core/src/sql/sql.ts
+++ b/packages/backend-core/src/sql/sql.ts
@@ -388,7 +388,7 @@ class InternalBuilder {
       }
     }
 
-    if (typeof input === "string") {
+    if (typeof input === "string" && schema.type === FieldType.DATETIME) {
       if (isInvalidISODateString(input)) {
         return null
       }
diff --git a/packages/backend-core/tests/core/utilities/mocks/licenses.ts b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
index 5ba6fb36a1..436e915b81 100644
--- a/packages/backend-core/tests/core/utilities/mocks/licenses.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
@@ -1,5 +1,12 @@
-import { Feature, License, Quotas } from "@budibase/types"
+import {
+  Feature,
+  License,
+  MonthlyQuotaName,
+  QuotaType,
+  QuotaUsageType,
+} from "@budibase/types"
 import cloneDeep from "lodash/cloneDeep"
+import merge from "lodash/merge"
 
 let CLOUD_FREE_LICENSE: License
 let UNLIMITED_LICENSE: License
@@ -27,18 +34,19 @@ export function initInternal(opts: {
 
 export interface UseLicenseOpts {
   features?: Feature[]
-  quotas?: Quotas
+  monthlyQuotas?: [MonthlyQuotaName, number][]
 }
 
 // LICENSES
 
 export const useLicense = (license: License, opts?: UseLicenseOpts) => {
-  if (opts) {
-    if (opts.features) {
-      license.features.push(...opts.features)
-    }
-    if (opts.quotas) {
-      license.quotas = opts.quotas
+  if (opts?.features) {
+    license.features.push(...opts.features)
+  }
+  if (opts?.monthlyQuotas) {
+    for (const [name, value] of opts.monthlyQuotas) {
+      license.quotas[QuotaType.USAGE][QuotaUsageType.MONTHLY][name].value =
+        value
     }
   }
 
@@ -57,12 +65,9 @@ export const useCloudFree = () => {
 
 // FEATURES
 
-const useFeature = (feature: Feature) => {
+const useFeature = (feature: Feature, extra?: Partial<UseLicenseOpts>) => {
   const license = cloneDeep(getCachedLicense() || UNLIMITED_LICENSE)
-  const opts: UseLicenseOpts = {
-    features: [feature],
-  }
-
+  const opts: UseLicenseOpts = merge({ features: [feature] }, extra)
   return useLicense(license, opts)
 }
 
@@ -102,8 +107,12 @@ export const useAppBuilders = () => {
   return useFeature(Feature.APP_BUILDERS)
 }
 
-export const useBudibaseAI = () => {
-  return useFeature(Feature.BUDIBASE_AI)
+export const useBudibaseAI = (opts?: { monthlyQuota?: number }) => {
+  return useFeature(Feature.BUDIBASE_AI, {
+    monthlyQuotas: [
+      [MonthlyQuotaName.BUDIBASE_AI_CREDITS, opts?.monthlyQuota || 1000],
+    ],
+  })
 }
 
 export const useAICustomConfigs = () => {
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 2caad20bf6..6809f1ffa5 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -80,7 +80,7 @@
     "dayjs": "^1.10.8",
     "easymde": "^2.16.1",
     "svelte-dnd-action": "^0.9.8",
-    "svelte-portal": "^1.0.0"
+    "svelte-portal": "^2.2.1"
   },
   "resolutions": {
     "loader-utils": "1.4.1"
diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 2401354fbb..633023a94a 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/actionbutton/dist/index-vars.css"
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
   import { hexToRGBA } from "../helpers"
 
-  export let quiet = false
-  export let selected = false
-  export let disabled = false
-  export let icon = ""
-  export let size = "M"
-  export let active = false
-  export let fullWidth = false
-  export let noPadding = false
-  export let tooltip = ""
-  export let accentColor = null
+  export let quiet: boolean = false
+  export let selected: boolean = false
+  export let disabled: boolean = false
+  export let icon: string = ""
+  export let size: "S" | "M" | "L" = "M"
+  export let active: boolean = false
+  export let fullWidth: boolean = false
+  export let noPadding: boolean = false
+  export let tooltip: string = ""
+  export let accentColor: string | null = null
 
   let showTooltip = false
 
   $: accentStyle = getAccentStyle(accentColor)
 
-  const getAccentStyle = color => {
+  const getAccentStyle = (color: string | null) => {
     if (!color) {
       return ""
     }
diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.ts
similarity index 59%
rename from packages/bbui/src/Actions/click_outside.js
rename to packages/bbui/src/Actions/click_outside.ts
index 526659cb7a..0c2eb036bc 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.ts
@@ -1,3 +1,17 @@
+type ClickOutsideCallback = (event: MouseEvent) => void | undefined
+
+interface ClickOutsideOpts {
+  callback?: ClickOutsideCallback
+  anchor?: HTMLElement
+}
+
+interface Handler {
+  id: number
+  element: HTMLElement
+  anchor: HTMLElement
+  callback?: ClickOutsideCallback
+}
+
 // These class names will never trigger a callback if clicked, no matter what
 const ignoredClasses = [
   ".download-js-link",
@@ -14,18 +28,20 @@ const conditionallyIgnoredClasses = [
   ".drawer-wrapper",
   ".spectrum-Popover",
 ]
-let clickHandlers = []
-let candidateTarget
+let clickHandlers: Handler[] = []
+let candidateTarget: HTMLElement | undefined
 
 // Processes a "click outside" event and invokes callbacks if our source element
 // is valid
-const handleClick = event => {
+const handleClick = (e: MouseEvent) => {
+  const target = (e.target || e.relatedTarget) as HTMLElement
+
   // Ignore click if this is an ignored class
-  if (event.target.closest('[data-ignore-click-outside="true"]')) {
+  if (target.closest('[data-ignore-click-outside="true"]')) {
     return
   }
   for (let className of ignoredClasses) {
-    if (event.target.closest(className)) {
+    if (target.closest(className)) {
       return
     }
   }
@@ -33,41 +49,41 @@ const handleClick = event => {
   // Process handlers
   clickHandlers.forEach(handler => {
     // Check that the click isn't inside the target
-    if (handler.element.contains(event.target)) {
+    if (handler.element.contains(target)) {
       return
     }
 
     // Ignore clicks for certain classes unless we're nested inside them
     for (let className of conditionallyIgnoredClasses) {
       const sourceInside = handler.anchor.closest(className) != null
-      const clickInside = event.target.closest(className) != null
+      const clickInside = target.closest(className) != null
       if (clickInside && !sourceInside) {
         return
       }
     }
 
-    handler.callback?.(event)
+    handler.callback?.(e)
   })
 }
 
 // On mouse up we only trigger a "click outside" callback if we targetted the
 // same element that we did on mouse down. This fixes all sorts of issues where
 // we get annoying callbacks firing when we drag to select text.
-const handleMouseUp = e => {
+const handleMouseUp = (e: MouseEvent) => {
   if (candidateTarget === e.target) {
     handleClick(e)
   }
-  candidateTarget = null
+  candidateTarget = undefined
 }
 
 // On mouse down we store which element was targetted for comparison later
-const handleMouseDown = e => {
+const handleMouseDown = (e: MouseEvent) => {
   // Only handle the primary mouse button here.
   // We handle context menu (right click) events in another handler.
   if (e.button !== 0) {
     return
   }
-  candidateTarget = e.target
+  candidateTarget = e.target as HTMLElement
 
   // Clear any previous listeners in case of multiple down events, and register
   // a single mouse up listener
@@ -75,14 +91,29 @@ const handleMouseDown = e => {
   document.addEventListener("click", handleMouseUp, true)
 }
 
+// Handle iframe clicks by detecting a loss of focus on the main window
+const handleBlur = () => {
+  if (document.activeElement?.tagName === "IFRAME") {
+    handleClick(
+      new MouseEvent("click", { relatedTarget: document.activeElement })
+    )
+  }
+}
+
 // Global singleton listeners for our events
 document.addEventListener("mousedown", handleMouseDown)
 document.addEventListener("contextmenu", handleClick)
+window.addEventListener("blur", handleBlur)
 
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, anchor, callback) => {
+const updateHandler = (
+  id: number,
+  element: HTMLElement,
+  anchor: HTMLElement,
+  callback: ClickOutsideCallback | undefined
+) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
     clickHandlers.push({ id, element, anchor, callback })
@@ -94,27 +125,52 @@ const updateHandler = (id, element, anchor, callback) => {
 /**
  * Removes a click handler
  */
-const removeHandler = id => {
+const removeHandler = (id: number) => {
   clickHandlers = clickHandlers.filter(x => x.id !== id)
 }
 
 /**
- * Svelte action to apply a click outside handler for a certain element
+ * Svelte action to apply a click outside handler for a certain element.
  * opts.anchor is an optional param specifying the real root source of the
  * component being observed. This is required for things like popovers, where
  * the element using the clickoutside action is the popover, but the popover is
  * rendered at the root of the DOM somewhere, whereas the popover anchor is the
  * element we actually want to consider when determining the source component.
  */
-export default (element, opts) => {
+export default (
+  element: HTMLElement,
+  opts?: ClickOutsideOpts | ClickOutsideCallback
+) => {
   const id = Math.random()
-  const update = newOpts => {
-    const callback =
-      newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
-    const anchor = newOpts?.anchor || element
+
+  const isCallback = (
+    opts?: ClickOutsideOpts | ClickOutsideCallback
+  ): opts is ClickOutsideCallback => {
+    return typeof opts === "function"
+  }
+
+  const isOpts = (
+    opts?: ClickOutsideOpts | ClickOutsideCallback
+  ): opts is ClickOutsideOpts => {
+    return opts != null && typeof opts === "object"
+  }
+
+  const update = (newOpts?: ClickOutsideOpts | ClickOutsideCallback) => {
+    let callback: ClickOutsideCallback | undefined
+    let anchor = element
+    if (isCallback(newOpts)) {
+      callback = newOpts
+    } else if (isOpts(newOpts)) {
+      callback = newOpts.callback
+      if (newOpts.anchor) {
+        anchor = newOpts.anchor
+      }
+    }
     updateHandler(id, element, anchor, callback)
   }
+
   update(opts)
+
   return {
     update,
     destroy: () => removeHandler(id),
diff --git a/packages/bbui/src/Actions/position_dropdown.ts b/packages/bbui/src/Actions/position_dropdown.ts
index 303af2b53c..424baf91f3 100644
--- a/packages/bbui/src/Actions/position_dropdown.ts
+++ b/packages/bbui/src/Actions/position_dropdown.ts
@@ -1,13 +1,7 @@
-/**
- * Valid alignment options are
- * - left
- * - right
- * - left-outside
- * - right-outside
- **/
-
 // Strategies are defined as [Popover]To[Anchor].
 // They can apply for both horizontal and vertical alignment.
+import { PopoverAlignment } from "../constants"
+
 type Strategy =
   | "StartToStart"
   | "EndToEnd"
@@ -33,7 +27,7 @@ export type UpdateHandler = (
 
 interface Opts {
   anchor?: HTMLElement
-  align: string
+  align: PopoverAlignment
   maxHeight?: number
   maxWidth?: number
   minWidth?: number
@@ -174,24 +168,33 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
       }
 
       // Determine X strategy
-      if (align === "right") {
+      if (align === PopoverAlignment.Right) {
         applyXStrategy("EndToEnd")
-      } else if (align === "right-outside" || align === "right-context-menu") {
+      } else if (
+        align === PopoverAlignment.RightOutside ||
+        align === PopoverAlignment.RightContextMenu
+      ) {
         applyXStrategy("StartToEnd")
-      } else if (align === "left-outside" || align === "left-context-menu") {
+      } else if (
+        align === PopoverAlignment.LeftOutside ||
+        align === PopoverAlignment.LeftContextMenu
+      ) {
         applyXStrategy("EndToStart")
-      } else if (align === "center") {
+      } else if (align === PopoverAlignment.Center) {
         applyXStrategy("MidPoint")
       } else {
         applyXStrategy("StartToStart")
       }
 
       // Determine Y strategy
-      if (align === "right-outside" || align === "left-outside") {
+      if (
+        align === PopoverAlignment.RightOutside ||
+        align === PopoverAlignment.LeftOutside
+      ) {
         applyYStrategy("MidPoint")
       } else if (
-        align === "right-context-menu" ||
-        align === "left-context-menu"
+        align === PopoverAlignment.RightContextMenu ||
+        align === PopoverAlignment.LeftContextMenu
       ) {
         applyYStrategy("StartToStart")
         if (styles.top) {
@@ -204,11 +207,11 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
       // Handle screen overflow
       if (doesXOverflow()) {
         // Swap left to right
-        if (align === "left") {
+        if (align === PopoverAlignment.Left) {
           applyXStrategy("EndToEnd")
         }
         // Swap right-outside to left-outside
-        else if (align === "right-outside") {
+        else if (align === PopoverAlignment.RightOutside) {
           applyXStrategy("EndToStart")
         }
       }
@@ -225,10 +228,13 @@ export default function positionDropdown(element: HTMLElement, opts: Opts) {
             applyXStrategy("EndToStart")
           }
         }
-        // Othewise invert as normal
+        // Otherwise invert as normal
         else {
           // If using an outside strategy then lock to the bottom of the screen
-          if (align === "left-outside" || align === "right-outside") {
+          if (
+            align === PopoverAlignment.LeftOutside ||
+            align === PopoverAlignment.RightOutside
+          ) {
             applyYStrategy("ScreenEdge")
           }
           // Otherwise flip above
diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
index f6837ca97c..5373b1fa16 100644
--- a/packages/bbui/src/Divider/Divider.svelte
+++ b/packages/bbui/src/Divider/Divider.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/divider/dist/index-vars.css"
 
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
 
   export let vertical = false
   export let noMargin = false
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index e2e2792f54..38cc3ec091 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -11,6 +11,7 @@
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Popover from "../../Popover/Popover.svelte"
+  import { PopoverAlignment } from "../../constants"
 
   export let value: string | undefined = undefined
   export let id: string | undefined = undefined
@@ -97,11 +98,16 @@
 <Popover
   {anchor}
   {open}
-  align="left"
+  align={PopoverAlignment.Left}
   on:close={() => (open = false)}
   useAnchorWidth
 >
-  <div class="popover-content" use:clickOutside={() => (open = false)}>
+  <div
+    class="popover-content"
+    use:clickOutside={() => {
+      open = false
+    }}
+  >
     <ul class="spectrum-Menu" role="listbox">
       {#if options && Array.isArray(options)}
         {#each options as option}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 2bfc7eec5e..cac6f523c6 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -1,4 +1,9 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
@@ -11,44 +16,55 @@
   import Tags from "../../Tags/Tags.svelte"
   import Tag from "../../Tags/Tag.svelte"
   import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
+  import { PopoverAlignment } from "../../constants"
 
-  export let id = null
-  export let disabled = false
-  export let fieldText = ""
-  export let fieldIcon = ""
-  export let fieldColour = ""
-  export let isPlaceholder = false
-  export let placeholderOption = null
-  export let options = []
-  export let isOptionSelected = () => false
-  export let isOptionEnabled = () => true
-  export let onSelectOption = () => {}
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
+  export let id: string | undefined = undefined
+  export let disabled: boolean = false
+  export let fieldText: string = ""
+  export let fieldIcon: string = ""
+  export let fieldColour: string = ""
+  export let isPlaceholder: boolean = false
+  export let placeholderOption: string | undefined | boolean = undefined
+  export let options: O[] = []
+  export let isOptionSelected = (option: O) => option as unknown as boolean
+  export let isOptionEnabled = (option: O, _index?: number) =>
+    option as unknown as boolean
+  export let onSelectOption: (_value: V) => void = () => {}
+  export let getOptionLabel = (option: O, _index?: number) => `${option}`
+  export let getOptionValue = (option: O, _index?: number) =>
+    option as unknown as V
+  export let getOptionIcon = (option: O, _index?: number) =>
+    option?.icon ?? undefined
+  export let getOptionColour = (option: O, _index?: number) =>
+    option?.colour ?? undefined
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option?.subtitle ?? undefined
   export let useOptionIconImage = false
-  export let getOptionColour = () => null
-  export let getOptionSubtitle = () => null
-  export let open = false
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-  export let autocomplete = false
-  export let sort = false
-  export let searchTerm = null
-  export let customPopoverHeight
-  export let align = "left"
-  export let footer = null
-  export let customAnchor = null
-  export let filter = true
-  export let loading
-  export let onOptionMouseenter = () => {}
-  export let onOptionMouseleave = () => {}
+  export let open: boolean = false
+  export let readonly: boolean = false
+  export let quiet: boolean = false
+  export let autoWidth: boolean | undefined = false
+  export let autocomplete: boolean = false
+  export let sort: boolean = false
+  export let searchTerm: string | null = null
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let customAnchor: HTMLElement | undefined = undefined
+  export let loading: boolean = false
+  export let onOptionMouseenter: (
+    _e: MouseEvent,
+    _option: any
+  ) => void = () => {}
+  export let onOptionMouseleave: (
+    _e: MouseEvent,
+    _option: any
+  ) => void = () => {}
 
   const dispatch = createEventDispatcher()
 
-  let button
-  let component
+  let button: any
+  let component: any
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -57,7 +73,7 @@
     getOptionLabel
   )
 
-  const onClick = e => {
+  const onClick = (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
     dispatch("click")
@@ -68,7 +84,11 @@
     open = !open
   }
 
-  const getSortedOptions = (options, getLabel, sort) => {
+  const getSortedOptions = (
+    options: any[],
+    getLabel: (_option: any) => string,
+    sort: boolean
+  ) => {
     if (!options?.length || !Array.isArray(options)) {
       return []
     }
@@ -82,17 +102,21 @@
     })
   }
 
-  const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term && filter) {
+  const getFilteredOptions = (
+    options: any[],
+    term: string | null,
+    getLabel: (_option: any) => string
+  ) => {
+    if (autocomplete && term) {
       const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option => {
+      return options.filter((option: any) => {
         return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
       })
     }
     return options
   }
 
-  const onScroll = e => {
+  const onScroll = (e: any) => {
     const scrollPxThreshold = 100
     const scrollPositionFromBottom =
       e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
@@ -152,18 +176,20 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover
   anchor={customAnchor ? customAnchor : button}
-  align={align || "left"}
+  align={align || PopoverAlignment.Left}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
-  maxWidth={autoWidth ? 400 : null}
+  maxWidth={autoWidth ? 400 : undefined}
   customHeight={customPopoverHeight}
   maxHeight={360}
 >
   <div
     class="popover-content"
     class:auto-width={autoWidth}
-    use:clickOutside={() => (open = false)}
+    use:clickOutside={() => {
+      open = false
+    }}
   >
     {#if autocomplete}
       <Search
diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index f19c2a7f4c..bc3b38d8ed 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@@ -1,19 +1,19 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/search/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let placeholder = null
+  export let value: any = null
+  export let placeholder: string | undefined = undefined
   export let disabled = false
   export let id = null
   export let updateOnChange = true
   export let quiet = false
-  export let inputRef
+  export let inputRef: HTMLElement | undefined = undefined
 
   const dispatch = createEventDispatcher()
   let focus = false
 
-  const updateValue = value => {
+  const updateValue = (value: any) => {
     dispatch("change", value)
   }
 
@@ -21,19 +21,19 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     focus = false
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (!updateOnChange) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: any) => {
     if (event.key === "Enter") {
       updateValue(event.target.value)
     }
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index d1ca654e6d..4a921f163c 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -1,34 +1,44 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
   import { createEventDispatcher } from "svelte"
   import Picker from "./Picker.svelte"
+  import { PopoverAlignment } from "../../constants"
 
-  export let value = null
-  export let id = null
-  export let placeholder = "Choose an option"
-  export let disabled = false
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
-  export let getOptionColour = () => null
-  export let getOptionSubtitle = () => null
-  export let compare = null
+  export let value: V | null = null
+  export let id: string | undefined = undefined
+  export let placeholder: string | boolean = "Choose an option"
+  export let disabled: boolean = false
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) => `${option}`
+  export let getOptionValue = (option: O, _index?: number) =>
+    option as unknown as V
+  export let getOptionIcon = (option: O, _index?: number) =>
+    option?.icon ?? undefined
+  export let getOptionColour = (option: O, _index?: number) =>
+    option?.colour ?? undefined
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option?.subtitle ?? undefined
+  export let compare = (option: O, value: V) => option === value
   export let useOptionIconImage = false
-  export let isOptionEnabled
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-  export let autocomplete = false
-  export let sort = false
-  export let align
-  export let footer = null
-  export let open = false
-  export let tag = null
-  export let searchTerm = null
-  export let filter = true
-  export let loading
+  export let isOptionEnabled = (option: O, _index?: number) =>
+    option as unknown as boolean
+  export let readonly: boolean = false
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let autocomplete: boolean = false
+  export let sort: boolean = false
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let open: boolean = false
+  export let searchTerm: string | undefined = undefined
+  export let loading: boolean | undefined = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
+  export let customPopoverHeight: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -36,24 +46,28 @@
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
-  function compareOptionAndValue(option, value) {
+  function compareOptionAndValue(option: O, value: V) {
     return typeof compare === "function"
       ? compare(option, value)
       : option === value
   }
 
-  const getFieldAttribute = (getAttribute, value, options) => {
+  const getFieldAttribute = (getAttribute: any, value: V[], options: O[]) => {
     // Wait for options to load if there is a value but no options
     if (!options?.length) {
       return ""
     }
-    const index = options.findIndex((option, idx) =>
+    const index = options.findIndex((option: any, idx: number) =>
       compareOptionAndValue(getOptionValue(option, idx), value)
     )
     return index !== -1 ? getAttribute(options[index], index) : null
   }
 
-  const getFieldText = (value, options, placeholder) => {
+  const getFieldText = (
+    value: any,
+    options: any,
+    placeholder: boolean | string
+  ) => {
     if (value == null || value === "") {
       // Explicit false means use no placeholder and allow an empty fields
       if (placeholder === false) {
@@ -68,7 +82,7 @@
     )
   }
 
-  const selectOption = value => {
+  const selectOption = (value: V) => {
     dispatch("change", value)
     open = false
   }
@@ -98,16 +112,15 @@
   {useOptionIconImage}
   {isOptionEnabled}
   {autocomplete}
-  {filter}
   {sort}
-  {tag}
   {onOptionMouseenter}
   {onOptionMouseleave}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder === false
-    ? null
+    ? undefined
     : placeholder || "Choose an option"}
   isOptionSelected={option => compareOptionAndValue(option, value)}
   onSelectOption={selectOption}
   {loading}
+  {customPopoverHeight}
 />
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 917bb2a452..0d5f9b9ef1 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -1,30 +1,31 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount, tick } from "svelte"
+  import type { UIEvent } from "@budibase/types"
 
-  export let value = null
-  export let placeholder = null
+  export let value: string | null = null
+  export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
   export let id = null
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
-  export let align
-  export let autofocus = false
-  export let autocomplete = null
+  export let align: "left" | "right" | "center" | undefined = undefined
+  export let autofocus: boolean | null = false
+  export let autocomplete: boolean | undefined
 
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: any
   let focus = false
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly || disabled) {
       return
     }
     if (type === "number") {
-      const float = parseFloat(newValue)
+      const float = parseFloat(newValue as string)
       newValue = isNaN(float) ? null : float
     }
     dispatch("change", newValue)
@@ -37,40 +38,47 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: UIEvent) => {
     if (readonly || disabled) {
       return
     }
     focus = false
-    updateValue(event.target.value)
+    updateValue(event?.target?.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: UIEvent) => {
     if (readonly || !updateOnChange || disabled) {
       return
     }
-    updateValue(event.target.value)
+    updateValue(event.target?.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: UIEvent) => {
     if (readonly || disabled) {
       return
     }
     if (event.key === "Enter") {
-      updateValue(event.target.value)
+      updateValue(event.target?.value)
     }
   }
 
-  const getInputMode = type => {
+  const getInputMode = (type: string) => {
     if (type === "bigint") {
       return "numeric"
     }
     return type === "number" ? "decimal" : "text"
   }
 
+  $: autocompleteValue =
+    typeof autocomplete === "boolean"
+      ? autocomplete
+        ? "on"
+        : "off"
+      : undefined
+
   onMount(async () => {
     if (disabled) return
-    focus = autofocus
+    focus = autofocus || false
     if (focus) {
       await tick()
       field.focus()
@@ -104,7 +112,7 @@
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align};` : ""}
     inputmode={getInputMode(type)}
-    {autocomplete}
+    autocomplete={autocompleteValue}
   />
 </div>
 
diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte
index 1770438c3c..5624956c8c 100644
--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import FieldLabel from "./FieldLabel.svelte"
   import Icon from "../Icon/Icon.svelte"
 
-  export let id = null
-  export let label = null
-  export let labelPosition = "above"
-  export let error = null
-  export let helpText = null
-  export let tooltip = ""
+  export let id: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let tooltip: string | undefined = undefined
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index 47962720af..b1a8669135 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -1,24 +1,24 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import TextField from "./Core/TextField.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
+  export let value: any = undefined
+  export let label: string | undefined = undefined
   export let labelPosition = "above"
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
   export let quiet = false
-  export let autofocus
-  export let autocomplete
-  export let helpText = null
+  export let autofocus: boolean | undefined = undefined
+  export let autocomplete: boolean | undefined = undefined
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -27,7 +27,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <TextField
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 0e67a1f532..be79da36aa 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -1,44 +1,54 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
+  import { PopoverAlignment } from "../constants"
 
-  export let value = null
-  export let label = undefined
-  export let disabled = false
-  export let readonly = false
-  export let labelPosition = "above"
-  export let error = null
-  export let placeholder = "Choose an option"
-  export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
-  export let getOptionSubtitle = option => option?.subtitle
-  export let getOptionIcon = option => option?.icon
-  export let getOptionColour = option => option?.colour
+  export let value: V | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let placeholder: string | boolean = "Choose an option"
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) =>
+    extractProperty(option, "label")
+  export let getOptionValue = (option: O, _index?: number) =>
+    extractProperty(option, "value")
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option?.subtitle
+  export let getOptionIcon = (option: O, _index?: number) => option?.icon
+  export let getOptionColour = (option: O, _index?: number) => option?.colour
   export let useOptionIconImage = false
-  export let isOptionEnabled = undefined
-  export let quiet = false
-  export let autoWidth = false
-  export let sort = false
-  export let tooltip = ""
-  export let autocomplete = false
-  export let customPopoverHeight = undefined
-  export let align = undefined
-  export let footer = null
-  export let tag = null
-  export let helpText = null
-  export let compare = undefined
+  export let isOptionEnabled:
+    | ((_option: O, _index?: number) => boolean)
+    | undefined = undefined
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let sort: boolean = false
+  export let tooltip: string | undefined = undefined
+  export let autocomplete: boolean = false
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let compare: any = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<any>) => {
     value = e.detail
     dispatch("change", e.detail)
   }
 
-  const extractProperty = (value, property) => {
+  const extractProperty = (value: any, property: any) => {
     if (value && typeof value === "object") {
       return value[property]
     }
@@ -49,7 +59,6 @@
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
-    {error}
     {disabled}
     {readonly}
     {value}
@@ -68,7 +77,6 @@
     {isOptionEnabled}
     {autocomplete}
     {customPopoverHeight}
-    {tag}
     {compare}
     {onOptionMouseenter}
     {onOptionMouseleave}
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 7438fab5fd..2f12935f53 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import {
-    default as AbsTooltip,
-    TooltipPosition,
-    TooltipType,
-  } from "../Tooltip/AbsTooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { TooltipPosition, TooltipType } from "../constants"
 
   export let name: string = "Add"
+  export let size: "XS" | "S" | "M" | "L" | "XL" = "M"
   export let hidden: boolean = false
-  export let size = "M"
   export let hoverable: boolean = false
   export let disabled: boolean = false
   export let color: string | undefined = undefined
@@ -81,17 +78,6 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
-
-  .tooltip {
-    position: absolute;
-    pointer-events: none;
-    left: 50%;
-    bottom: calc(100% + 4px);
-    transform: translateX(-50%);
-    text-align: center;
-    z-index: 1;
-  }
-
   .spectrum-Icon--sizeXS {
     width: var(--spectrum-global-dimension-size-150);
     height: var(--spectrum-global-dimension-size-150);
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
index 58f999473a..6f8aba1f4e 100644
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/link/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import Tooltip from "../Tooltip/Tooltip.svelte"
 
-  export let href = "#"
-  export let size = "M"
-  export let quiet = false
-  export let primary = false
-  export let secondary = false
-  export let overBackground = false
-  export let target
-  export let download
-  export let disabled = false
-  export let tooltip = null
+  export let href: string | null = "#"
+  export let size: "S" | "M" | "L" = "M"
+  export let quiet: boolean = false
+  export let primary: boolean = false
+  export let secondary: boolean = false
+  export let overBackground: boolean = false
+  export let target: string | undefined = undefined
+  export let download: boolean | undefined = undefined
+  export let disabled: boolean = false
+  export let tooltip: string | null = null
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte
index e979b2b684..3cd04bb987 100644
--- a/packages/bbui/src/List/ListItem.svelte
+++ b/packages/bbui/src/List/ListItem.svelte
@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
   import Icon from "../Icon/Icon.svelte"
   import StatusLight from "../StatusLight/StatusLight.svelte"
 
-  export let icon = null
-  export let iconColor = null
-  export let title = null
-  export let subtitle = null
-  export let url = null
-  export let hoverable = false
-  export let showArrow = false
-  export let selected = false
+  export let icon: string | undefined = undefined
+  export let iconColor: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let subtitle: string | undefined = undefined
+  export let url: string | undefined = undefined
+  export let hoverable: boolean = false
+  export let showArrow: boolean = false
+  export let selected: boolean = false
 </script>
 
 <a
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 5b7c6ab854..0d16aa4f77 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,6 +1,12 @@
+<script context="module" lang="ts">
+  export interface PopoverAPI {
+    show: () => void
+    hide: () => void
+  }
+</script>
+
 <script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
-  // @ts-expect-error no types for the version of svelte-portal we're on.
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
   import positionDropdown, {
@@ -10,12 +16,10 @@
   import { fly } from "svelte/transition"
   import Context from "../context"
   import type { KeyboardEventHandler } from "svelte/elements"
-
-  const dispatch = createEventDispatcher<{ open: void; close: void }>()
+  import { PopoverAlignment } from "../constants"
 
   export let anchor: HTMLElement
-  export let align: "left" | "right" | "left-outside" | "right-outside" =
-    "right"
+  export let align: PopoverAlignment = PopoverAlignment.Right
   export let portalTarget: string | undefined = undefined
   export let minWidth: number | undefined = undefined
   export let maxWidth: number | undefined = undefined
@@ -26,19 +30,24 @@
   export let offset = 4
   export let customHeight: string | undefined = undefined
   export let animate = true
-  export let customZindex: string | undefined = undefined
-  export let handlePostionUpdate: UpdateHandler | undefined = undefined
+  export let customZIndex: number | undefined = undefined
+  export let handlePositionUpdate: UpdateHandler | undefined = undefined
   export let showPopover = true
   export let clickOutsideOverride = false
   export let resizable = true
   export let wrap = false
 
+  const dispatch = createEventDispatcher<{ open: void; close: void }>()
   const animationDuration = 260
 
   let timeout: ReturnType<typeof setTimeout>
   let blockPointerEvents = false
 
-  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
+  // Portal library lacks types, so we have to type this as any even though it's
+  // actually a string
+  $: target = (portalTarget ||
+    getContext(Context.PopoverRoot) ||
+    ".spectrum") as any
   $: {
     // Disable pointer events for the initial part of the animation, because we
     // fly from top to bottom and initially can be positioned under the cursor,
@@ -118,7 +127,7 @@
         minWidth,
         useAnchorWidth,
         offset,
-        customUpdate: handlePostionUpdate,
+        customUpdate: handlePositionUpdate,
         resizable,
         wrap,
       }}
@@ -128,11 +137,11 @@
       }}
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
-      class:customZindex
+      class:customZIndex
       class:hidden={!showPopover}
       class:blockPointerEvents
       role="presentation"
-      style="height: {customHeight}; --customZindex: {customZindex};"
+      style="height: {customHeight}; --customZIndex: {customZIndex};"
       transition:fly|local={{
         y: -20,
         duration: animate ? animationDuration : 0,
@@ -162,7 +171,7 @@
     opacity: 0;
     pointer-events: none;
   }
-  .customZindex {
-    z-index: var(--customZindex) !important;
+  .customZIndex {
+    z-index: var(--customZIndex) !important;
   }
 </style>
diff --git a/packages/bbui/src/Popover/Popover.svench b/packages/bbui/src/Popover/Popover.svench
deleted file mode 100644
index 21ca0c66e8..0000000000
--- a/packages/bbui/src/Popover/Popover.svench
+++ /dev/null
@@ -1,120 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Popover from "./Popover.svelte";
-  import Button from "../Button/Button.svelte";
-  import TextButton from "../Button/TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-  import Input from "../Form/Input.svelte";
-  import Select from "../Form/Select.svelte";
-
-  let anchorRight;
-  let anchorLeft;
-  let dropdownRight;
-  let dropdownLeft;
-
-  const options = ["Column 1", "Column 2", "Super cool column"];
-  const option1s = ["Is", "Is not", "Contains" , "Does not contain"];
-
-</script>
-
-<style>
-  .button-group {
-    margin-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-s);
-  }
-
-  h6 {
-    font-size: var(--font-size-m);
-    margin: 0 0 var(--spacing-l) 0;
-    font-weight: 600;
-  }
-
-  .input-group-column {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-  }
-
-  .input-group-row {
-    display: grid;
-    grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];
-    gap: var(--spacing-s);
-    margin-bottom: var(--spacing-l);
-    align-items: center;
-  }
-
-  p {
-    margin:0;
-    font-size: var(--font-size-xs);
-  }
-</style>
-
-<View name="Simple popover">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      <Icon name="view" />
-      Add View
-    </Button>
-  </div>
-  <Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <h6>Add New View</h6>
-    <Input thin placeholder="Enter your name" />
-    <div class="button-group">
-      <Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
-      <Button primary on:click={() => alert('Clicked!')}>Add New View</Button>
-    </div>
-  </Popover>
-</View>
-
-<View name="Stacked columns">
-  <div bind:this={anchorRight}>
-    <Button text on:click={dropdownRight.show}>
-      <Icon name="addrow" />
-      Add Row
-    </Button>
-  </div>
-  <Popover bind:this={dropdownRight} anchor={anchorRight}>
-    <h6>Add New Row</h6>
-    <div class="input-group-column">
-      <Input thin placeholder="Enter your string" />
-      <Input thin placeholder="Enter your string" />
-      <Input thin placeholder="Enter your string" />
-    </div>
-    <div class="button-group">
-      <Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
-      <Button primary on:click={() => alert('Clicked!')}>Add New Row</Button>
-    </div>
-  </Popover>
-</View>
-
-<View name="Multiple inputs in a row">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      <Icon name="filter" />
-      Add Filter
-    </Button>
-  </div>
-  <Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <h6>Add New Filter</h6>
-    <div class="input-group-row">
-      <p>Where</p>
-      <Select secondary thin name="Test">
-        {#each options as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </Select>
-      <Select secondary thin name="Test">
-        {#each option1s as option1}
-          <option value={option1}>{option1}</option>
-        {/each}
-      </Select>
-      <Input thin placeholder="Enter your name" />
-      <Button text on:click={() => alert('Clicked!')}>
-         <Icon name="close" />
-      </Button>
-    </div>
-    <Button text on:click={() => alert('Clicked!')}>Add Filter</Button>
-  </Popover>
-</View>
diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte
index f3ef1f62de..e15bed42dd 100644
--- a/packages/bbui/src/StatusLight/StatusLight.svelte
+++ b/packages/bbui/src/StatusLight/StatusLight.svelte
@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/statuslight"
 
-  export let size = "M"
-  export let celery = false
-  export let yellow = false
-  export let fuchsia = false
-  export let indigo = false
-  export let seafoam = false
-  export let chartreuse = false
-  export let magenta = false
-  export let purple = false
-  export let neutral = false
-  export let info = false
-  export let positive = false
-  export let notice = false
-  export let negative = false
-  export let disabled = false
-  export let active = false
-  export let color = null
-  export let square = false
-  export let hoverable = false
+  export let size: string = "M"
+  export let celery: boolean = false
+  export let yellow: boolean = false
+  export let fuchsia: boolean = false
+  export let indigo: boolean = false
+  export let seafoam: boolean = false
+  export let chartreuse: boolean = false
+  export let magenta: boolean = false
+  export let purple: boolean = false
+  export let neutral: boolean = false
+  export let info: boolean = false
+  export let positive: boolean = false
+  export let notice: boolean = false
+  export let negative: boolean = false
+  export let disabled: boolean = false
+  export let active: boolean = false
+  export let color: string | undefined = undefined
+  export let square: boolean = false
+  export let hoverable: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index a887db4102..528ea84efd 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -1,38 +1,24 @@
-<script context="module">
-  export const TooltipPosition = {
-    Top: "top",
-    Right: "right",
-    Bottom: "bottom",
-    Left: "left",
-  }
-  export const TooltipType = {
-    Default: "default",
-    Info: "info",
-    Positive: "positive",
-    Negative: "negative",
-  }
-</script>
-
-<script>
+<script lang="ts">
   import Portal from "svelte-portal"
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
   import { onDestroy } from "svelte"
+  import { TooltipPosition, TooltipType } from "../constants"
 
-  export let position = TooltipPosition.Top
-  export let type = TooltipType.Default
-  export let text = ""
-  export let fixed = false
-  export let color = ""
-  export let noWrap = false
+  export let position: TooltipPosition = TooltipPosition.Top
+  export let type: TooltipType = TooltipType.Default
+  export let text: string = ""
+  export let fixed: boolean = false
+  export let color: string | undefined = undefined
+  export let noWrap: boolean = false
 
-  let wrapper
+  let wrapper: HTMLElement | undefined
   let hovered = false
-  let left
-  let top
+  let left: number | undefined
+  let top: number | undefined
   let visible = false
-  let timeout
-  let interval
+  let timeout: ReturnType<typeof setTimeout> | undefined
+  let interval: ReturnType<typeof setInterval> | undefined
 
   $: {
     if (hovered || fixed) {
@@ -49,8 +35,8 @@
   const updateTooltipPosition = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
-      left = null
-      top = null
+      left = undefined
+      top = undefined
       return
     }
     const bounds = node.getBoundingClientRect()
diff --git a/packages/bbui/src/constants.ts b/packages/bbui/src/constants.ts
new file mode 100644
index 0000000000..5685e6e489
--- /dev/null
+++ b/packages/bbui/src/constants.ts
@@ -0,0 +1,23 @@
+export enum PopoverAlignment {
+  Left = "left",
+  Right = "right",
+  LeftOutside = "left-outside",
+  RightOutside = "right-outside",
+  Center = "center",
+  RightContextMenu = "right-context-menu",
+  LeftContextMenu = "left-context-menu",
+}
+
+export enum TooltipPosition {
+  Top = "top",
+  Right = "right",
+  Bottom = "bottom",
+  Left = "left",
+}
+
+export enum TooltipType {
+  Default = "default",
+  Info = "info",
+  Positive = "positive",
+  Negative = "negative",
+}
diff --git a/packages/bbui/src/index.ts b/packages/bbui/src/index.ts
index 3efafed156..2809cbf99f 100644
--- a/packages/bbui/src/index.ts
+++ b/packages/bbui/src/index.ts
@@ -1,8 +1,9 @@
 import "./bbui.css"
-
-// Spectrum icons
 import "@spectrum-css/icon/dist/index-vars.css"
 
+// Constants
+export * from "./constants"
+
 // Form components
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
@@ -45,7 +46,7 @@ export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
-export { default as Popover } from "./Popover/Popover.svelte"
+export { default as Popover, type PopoverAPI } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
@@ -92,7 +93,6 @@ export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
-export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
diff --git a/packages/bbui/tsconfig.json b/packages/bbui/tsconfig.json
index 2fe17da42e..af898e27a1 100644
--- a/packages/bbui/tsconfig.json
+++ b/packages/bbui/tsconfig.json
@@ -16,4 +16,4 @@
   },
   "include": ["./src/**/*"],
   "exclude": ["node_modules", "**/*.json", "**/*.spec.ts", "**/*.spec.js"]
-}
\ No newline at end of file
+}
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 6fcf72c5fb..0fa4687242 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -81,7 +81,7 @@
     "shortid": "2.2.15",
     "svelte-dnd-action": "^0.9.8",
     "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "1.0.0",
+    "svelte-portal": "^2.2.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
index b2edb52725..f3a119b456 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
@@ -1,20 +1,29 @@
-<script>
-  import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+<script lang="ts">
+  import { Button } from "@budibase/bbui"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import { screenStore } from "@/stores/builder"
   import { getContext, createEventDispatcher } from "svelte"
-
-  const { datasource } = getContext("grid")
+  import type { Screen, ScreenUsage } from "@budibase/types"
   const dispatch = createEventDispatcher()
 
-  let popover
+  const { datasource }: { datasource: any } = getContext("grid")
+
+  let popover: any
 
   $: ds = $datasource
   $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
   $: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
-  $: screenCount = connectedScreens.length
+  $: screenUsage = connectedScreens.map(
+    (screen: Screen): ScreenUsage => ({
+      url: screen.routing?.route,
+      _id: screen._id!,
+    })
+  )
 
-  const findConnectedScreens = (screens, resourceId) => {
+  const findConnectedScreens = (
+    screens: Screen[],
+    resourceId: string
+  ): Screen[] => {
     return screens.filter(screen => {
       return JSON.stringify(screen).includes(`"${resourceId}"`)
     })
@@ -26,34 +35,16 @@
   }
 </script>
 
-<DetailPopover title="Screens" bind:this={popover}>
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton
-      icon="WebPage"
-      selected={open || screenCount}
-      quiet
-      accentColor="#364800"
-    >
-      Screens{screenCount ? `: ${screenCount}` : ""}
-    </ActionButton>
-  </svelte:fragment>
-  {#if !connectedScreens.length}
-    There aren't any screens connected to this data.
-  {:else}
-    The following screens are connected to this data.
-    <List>
-      {#each connectedScreens as screen}
-        <ListItem
-          title={screen.routing.route}
-          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
-          showArrow
-        />
-      {/each}
-    </List>
-  {/if}
-  <div>
+<ScreensPopover
+  bind:this={popover}
+  screens={screenUsage}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+>
+  <svelte:fragment slot="footer">
     <Button secondary icon="WebPage" on:click={generateScreen}>
       Generate app screen
     </Button>
-  </div>
-</DetailPopover>
+  </svelte:fragment>
+</ScreensPopover>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte
index d538a9b1b7..16423335a6 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte
@@ -7,7 +7,7 @@
   import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import { Icon } from "@budibase/bbui"
   import UpdateDatasourceModal from "@/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte"
-  import DeleteConfirmationModal from "./DeleteConfirmationModal.svelte"
+  import DeleteDataConfirmModal from "@/components/backend/modals/DeleteDataConfirmationModal.svelte"
 
   export let datasource
 
@@ -71,7 +71,10 @@
   {/if}
 </NavItem>
 <UpdateDatasourceModal {datasource} bind:this={editModal} />
-<DeleteConfirmationModal {datasource} bind:this={deleteConfirmationModal} />
+<DeleteDataConfirmModal
+  source={datasource}
+  bind:this={deleteConfirmationModal}
+/>
 
 <style>
   .datasource-icon {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte
deleted file mode 100644
index 6982f87dc7..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import { datasources } from "@/stores/builder"
-  import { notifications } from "@budibase/bbui"
-  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
-
-  export let datasource
-
-  let confirmDeleteDialog
-
-  export const show = () => {
-    confirmDeleteDialog.show()
-  }
-
-  async function deleteDatasource() {
-    try {
-      const isSelected = datasource.selected || datasource.containsSelected
-      await datasources.delete(datasource)
-      notifications.success("Datasource deleted")
-      if (isSelected) {
-        $goto("./datasource")
-      }
-    } catch (error) {
-      notifications.error("Error deleting datasource")
-    }
-  }
-</script>
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  okText="Delete Datasource"
-  onOk={deleteDatasource}
-  title="Confirm Deletion"
->
-  Are you sure you wish to delete the datasource
-  <i>{datasource.name}</i>? This action cannot be undone.
-</ConfirmDialog>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte b/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte
index 5b611cc4df..227963f602 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte
@@ -6,19 +6,18 @@
   } from "@/helpers/data/utils"
   import { goto as gotoStore, isActive } from "@roxi/routify"
   import {
-    datasources,
     queries,
     userSelectedResourceMap,
     contextMenuStore,
   } from "@/stores/builder"
   import NavItem from "@/components/common/NavItem.svelte"
-  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import DeleteDataConfirmModal from "@/components/backend/modals/DeleteDataConfirmationModal.svelte"
   import { notifications, Icon } from "@budibase/bbui"
 
   export let datasource
   export let query
 
-  let confirmDeleteDialog
+  let confirmDeleteModal
 
   // goto won't work in the context menu callback if the store is called directly
   $: goto = $gotoStore
@@ -31,7 +30,7 @@
         keyBind: null,
         visible: true,
         disabled: false,
-        callback: confirmDeleteDialog.show,
+        callback: confirmDeleteModal.show,
       },
       {
         icon: "Duplicate",
@@ -51,20 +50,6 @@
     ]
   }
 
-  async function deleteQuery() {
-    try {
-      // Go back to the datasource if we are deleting the active query
-      if ($queries.selectedQueryId === query._id) {
-        goto(`./datasource/${query.datasourceId}`)
-      }
-      await queries.delete(query)
-      await datasources.fetch()
-      notifications.success("Query deleted")
-    } catch (error) {
-      notifications.error("Error deleting query")
-    }
-  }
-
   const openContextMenu = e => {
     e.preventDefault()
     e.stopPropagation()
@@ -90,14 +75,7 @@
   <Icon size="S" hoverable name="MoreSmallList" on:click={openContextMenu} />
 </NavItem>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  okText="Delete Query"
-  onOk={deleteQuery}
-  title="Confirm Deletion"
->
-  Are you sure you wish to delete this query? This action cannot be undone.
-</ConfirmDialog>
+<DeleteDataConfirmModal source={query} bind:this={confirmDeleteModal} />
 
 <style>
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte
deleted file mode 100644
index 183a803902..0000000000
--- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-  import { goto, params } from "@roxi/routify"
-  import { appStore, tables, datasources, screenStore } from "@/stores/builder"
-  import { InlineAlert, Link, Input, notifications } from "@budibase/bbui"
-  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
-  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
-
-  export let table
-
-  let confirmDeleteDialog
-
-  let screensPossiblyAffected = []
-  let viewsMessage = ""
-  let deleteTableName
-
-  const getViewsMessage = () => {
-    const views = Object.values(table?.views ?? [])
-    if (views.length < 1) {
-      return ""
-    }
-    if (views.length === 1) {
-      return ", including 1 view"
-    }
-
-    return `, including ${views.length} views`
-  }
-
-  export const show = () => {
-    viewsMessage = getViewsMessage()
-    screensPossiblyAffected = $screenStore.screens
-      .filter(
-        screen => screen.autoTableId === table._id && screen.routing?.route
-      )
-      .map(screen => ({
-        text: screen.routing.route,
-        url: `/builder/app/${$appStore.appId}/design/${screen._id}`,
-      }))
-
-    confirmDeleteDialog.show()
-  }
-
-  async function deleteTable() {
-    const isSelected = $params.tableId === table._id
-    try {
-      await tables.delete(table)
-
-      if (table.sourceType === DB_TYPE_EXTERNAL) {
-        await datasources.fetch()
-      }
-      notifications.success("Table deleted")
-      if (isSelected) {
-        $goto(`./datasource/${table.datasourceId}`)
-      }
-    } catch (error) {
-      notifications.error(`Error deleting table - ${error.message}`)
-    }
-  }
-
-  function hideDeleteDialog() {
-    deleteTableName = ""
-  }
-
-  const autofillTableName = () => {
-    deleteTableName = table.name
-  }
-</script>
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  okText="Delete Table"
-  onOk={deleteTable}
-  onCancel={hideDeleteDialog}
-  title="Confirm Deletion"
-  disabled={deleteTableName !== table.name}
->
-  <div class="content">
-    <p class="firstWarning">
-      Are you sure you wish to delete the table
-      <span class="tableNameLine">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <b on:click={autofillTableName} class="tableName">{table.name}</b>
-        <span>?</span>
-      </span>
-    </p>
-
-    <p class="secondWarning">All table data will be deleted{viewsMessage}.</p>
-    <p class="thirdWarning">This action <b>cannot be undone</b>.</p>
-
-    {#if screensPossiblyAffected.length > 0}
-      <div class="affectedScreens">
-        <InlineAlert
-          header="The following screens were originally generated from this table and may no longer function as expected"
-        >
-          <ul class="affectedScreensList">
-            {#each screensPossiblyAffected as item}
-              <li>
-                <Link quiet overBackground target="_blank" href={item.url}
-                  >{item.text}</Link
-                >
-              </li>
-            {/each}
-          </ul>
-        </InlineAlert>
-      </div>
-    {/if}
-    <p class="fourthWarning">Please enter the table name below to confirm.</p>
-    <Input bind:value={deleteTableName} placeholder={table.name} />
-  </div>
-</ConfirmDialog>
-
-<style>
-  .content {
-    margin-top: 0;
-    max-width: 320px;
-  }
-
-  .firstWarning {
-    margin: 0 0 12px;
-    max-width: 100%;
-  }
-
-  .tableNameLine {
-    display: inline-flex;
-    max-width: 100%;
-    vertical-align: bottom;
-  }
-
-  .tableName {
-    flex-grow: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: pointer;
-  }
-
-  .secondWarning {
-    margin: 0;
-    max-width: 100%;
-  }
-
-  .thirdWarning {
-    margin: 0 0 12px;
-    max-width: 100%;
-  }
-
-  .affectedScreens {
-    margin: 18px 0;
-    max-width: 100%;
-    margin-bottom: 24px;
-  }
-
-  .affectedScreens :global(.spectrum-InLineAlert) {
-    max-width: 100%;
-  }
-
-  .affectedScreensList {
-    padding: 0;
-    margin-bottom: 0;
-  }
-
-  .affectedScreensList li {
-    display: block;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-top: 4px;
-  }
-
-  .fourthWarning {
-    margin: 12px 0 6px;
-    max-width: 100%;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte
index f3deccb3c9..fe9d02af40 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte
@@ -8,7 +8,7 @@
   import NavItem from "@/components/common/NavItem.svelte"
   import { isActive } from "@roxi/routify"
   import EditModal from "./EditModal.svelte"
-  import DeleteConfirmationModal from "./DeleteConfirmationModal.svelte"
+  import DeleteConfirmationModal from "../../modals/DeleteDataConfirmationModal.svelte"
   import { Icon } from "@budibase/bbui"
   import { DB_TYPE_EXTERNAL } from "@/constants/backend"
 
@@ -65,4 +65,4 @@
   {/if}
 </NavItem>
 <EditModal {table} bind:this={editModal} />
-<DeleteConfirmationModal {table} bind:this={deleteConfirmationModal} />
+<DeleteConfirmationModal source={table} bind:this={deleteConfirmationModal} />
diff --git a/packages/builder/src/components/backend/modals/DeleteDataConfirmationModal.svelte b/packages/builder/src/components/backend/modals/DeleteDataConfirmationModal.svelte
new file mode 100644
index 0000000000..82271bd066
--- /dev/null
+++ b/packages/builder/src/components/backend/modals/DeleteDataConfirmationModal.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { Link, notifications } from "@budibase/bbui"
+  import {
+    appStore,
+    datasources,
+    queries,
+    screenStore,
+    tables,
+    views,
+    viewsV2,
+  } from "@/stores/builder"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import { helpers, utils } from "@budibase/shared-core"
+  import { SourceType } from "@budibase/types"
+  import { goto, params } from "@roxi/routify"
+  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
+  import { get } from "svelte/store"
+  import type { Table, ViewV2, View, Datasource, Query } from "@budibase/types"
+
+  export let source: Table | ViewV2 | Datasource | Query | undefined
+
+  let confirmDeleteDialog: any
+  let affectedScreens: { text: string; url: string }[] = []
+  let sourceType: SourceType | undefined = undefined
+
+  const getDatasourceQueries = () => {
+    if (sourceType !== SourceType.DATASOURCE) {
+      return ""
+    }
+    const sourceId = getSourceID()
+    const queryList = get(queries).list.filter(
+      query => query.datasourceId === sourceId
+    )
+    return queryList
+  }
+
+  function getSourceID(): string {
+    if (!source) {
+      throw new Error("No data source provided.")
+    }
+    if ("id" in source) {
+      return source.id
+    }
+    return source._id!
+  }
+
+  export const show = async () => {
+    const usage = await screenStore.usageInScreens(getSourceID())
+    affectedScreens = processScreens(usage.screens)
+    sourceType = usage.sourceType
+    confirmDeleteDialog.show()
+  }
+
+  function processScreens(
+    screens: { url: string; _id: string }[]
+  ): { text: string; url: string }[] {
+    return screens.map(({ url, _id }) => ({
+      text: url,
+      url: `/builder/app/${$appStore.appId}/design/${_id}`,
+    }))
+  }
+
+  function hideDeleteDialog() {
+    sourceType = undefined
+  }
+
+  async function deleteTable(table: Table & { datasourceId?: string }) {
+    const isSelected = $params.tableId === table._id
+    try {
+      await tables.delete({
+        _id: table._id!,
+        _rev: table._rev!,
+      })
+
+      if (table.sourceType === DB_TYPE_EXTERNAL) {
+        await datasources.fetch()
+      }
+      notifications.success("Table deleted")
+      if (isSelected) {
+        $goto(`./datasource/${table.datasourceId}`)
+      }
+    } catch (error: any) {
+      notifications.error(`Error deleting table - ${error.message}`)
+    }
+  }
+
+  async function deleteView(view: ViewV2 | View) {
+    try {
+      if (helpers.views.isV2(view)) {
+        await viewsV2.delete(view as ViewV2)
+      } else {
+        await views.delete(view as View)
+      }
+      notifications.success("View deleted")
+    } catch (error) {
+      notifications.error("Error deleting view")
+    }
+  }
+
+  async function deleteDatasource(datasource: Datasource) {
+    try {
+      await datasources.delete(datasource)
+      notifications.success("Datasource deleted")
+      const isSelected =
+        get(datasources).selectedDatasourceId === datasource._id
+      if (isSelected) {
+        $goto("./datasource")
+      }
+    } catch (error) {
+      notifications.error("Error deleting datasource")
+    }
+  }
+
+  async function deleteQuery(query: Query) {
+    try {
+      // Go back to the datasource if we are deleting the active query
+      if ($queries.selectedQueryId === query._id) {
+        $goto(`./datasource/${query.datasourceId}`)
+      }
+      await queries.delete(query)
+      await datasources.fetch()
+      notifications.success("Query deleted")
+    } catch (error) {
+      notifications.error("Error deleting query")
+    }
+  }
+
+  async function deleteSource() {
+    if (!source || !sourceType) {
+      throw new Error("Unable to delete - no data source found.")
+    }
+
+    switch (sourceType) {
+      case SourceType.TABLE:
+        return await deleteTable(source as Table)
+      case SourceType.VIEW:
+        return await deleteView(source as ViewV2)
+      case SourceType.QUERY:
+        return await deleteQuery(source as Query)
+      case SourceType.DATASOURCE:
+        return await deleteDatasource(source as Datasource)
+      default:
+        utils.unreachable(sourceType)
+    }
+  }
+
+  function buildMessage(sourceType: string) {
+    if (!source) {
+      return ""
+    }
+    const screenCount = affectedScreens.length
+    let message = `Removing ${source?.name} `
+    let initialLength = message.length
+    if (sourceType === SourceType.TABLE) {
+      const views = "views" in source ? Object.values(source?.views ?? []) : []
+      message += `will delete its data${
+        views.length
+          ? `${screenCount ? "," : " and"} views (${views.length})`
+          : ""
+      }`
+    } else if (sourceType === SourceType.DATASOURCE) {
+      const queryList = getDatasourceQueries()
+      if (queryList.length) {
+        message += `will delete its queries (${queryList.length})`
+      }
+    }
+    if (screenCount) {
+      message +=
+        initialLength !== message.length
+          ? ", and break connected screens:"
+          : "will break connected screens:"
+    } else {
+      message += "."
+    }
+    return message.length !== initialLength ? message : ""
+  }
+</script>
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete"
+  onOk={deleteSource}
+  onCancel={hideDeleteDialog}
+  title={`Are you sure you want to delete this ${sourceType}?`}
+>
+  <div class="content">
+    {#if sourceType}
+      <p class="warning">
+        {buildMessage(sourceType)}
+        {#if affectedScreens.length > 0}
+          <span class="screens">
+            {#each affectedScreens as item, idx}
+              <Link overBackground target="_blank" href={item.url}
+                >{item.text}{idx !== affectedScreens.length - 1
+                  ? ","
+                  : ""}</Link
+              >
+            {/each}
+          </span>
+        {/if}
+      </p>
+    {/if}
+    <p class="warning">
+      <b>This action cannot be undone.</b>
+    </p>
+  </div>
+</ConfirmDialog>
+
+<style>
+  .content {
+    margin-top: 0;
+    max-width: 320px;
+  }
+
+  .warning {
+    margin: 0;
+    max-width: 100%;
+  }
+
+  .screens {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: var(--spacing-l);
+    gap: var(--spacing-xs);
+  }
+</style>
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index ece20fe102..f864b60fc6 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -8,7 +8,7 @@
   export let onOk = undefined
   export let onCancel = undefined
   export let warning = true
-  export let disabled
+  export let disabled = false
 
   let modal
 
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
index f1e81a6340..eca2afaab1 100644
--- a/packages/builder/src/components/common/DetailPopover.svelte
+++ b/packages/builder/src/components/common/DetailPopover.svelte
@@ -1,14 +1,20 @@
-<script>
-  import { Popover, Icon } from "@budibase/bbui"
+<script lang="ts">
+  import {
+    Popover,
+    Icon,
+    PopoverAlignment,
+    type PopoverAPI,
+  } from "@budibase/bbui"
 
-  export let title
-  export let align = "left"
-  export let showPopover
-  export let width
+  export let title: string = ""
+  export let subtitle: string | undefined = undefined
+  export let align: PopoverAlignment = PopoverAlignment.Left
+  export let showPopover: boolean = true
+  export let width: number | undefined = undefined
 
-  let popover
-  let anchor
-  let open
+  let popover: PopoverAPI | undefined
+  let anchor: HTMLElement | undefined
+  let open: boolean = false
 
   export const show = () => popover?.show()
   export const hide = () => popover?.hide()
@@ -30,20 +36,24 @@
   {showPopover}
   on:open
   on:close
-  customZindex={100}
+  customZIndex={100}
 >
   <div class="detail-popover">
     <div class="detail-popover__header">
       <div class="detail-popover__title">
         {title}
+        <Icon
+          name="Close"
+          hoverable
+          color="var(--spectrum-global-color-gray-600)"
+          hoverColor="var(--spectrum-global-color-gray-900)"
+          on:click={hide}
+          size="S"
+        />
       </div>
-      <Icon
-        name="Close"
-        hoverable
-        color="var(--spectrum-global-color-gray-600)"
-        hoverColor="var(--spectum-global-color-gray-900)"
-        on:click={hide}
-      />
+      {#if subtitle}
+        <div class="detail-popover__subtitle">{subtitle}</div>
+      {/if}
     </div>
     <div class="detail-popover__body">
       <slot />
@@ -56,14 +66,18 @@
     background-color: var(--spectrum-alias-background-color-primary);
   }
   .detail-popover__header {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    padding: var(--spacing-l) var(--spacing-xl);
+    gap: var(--spacing-s);
+  }
+  .detail-popover__title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    padding: var(--spacing-l) var(--spacing-xl);
-  }
-  .detail-popover__title {
     font-size: 16px;
     font-weight: 600;
   }
diff --git a/packages/builder/src/components/common/Icons/CircleIndicator.svelte b/packages/builder/src/components/common/Icons/CircleIndicator.svelte
index 35938fb7e9..d322425db7 100644
--- a/packages/builder/src/components/common/Icons/CircleIndicator.svelte
+++ b/packages/builder/src/components/common/Icons/CircleIndicator.svelte
@@ -1,3 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8">
-  <circle cx="4" cy="4" r="4" stroke-width="0" fill="currentColor" />
+<script lang="ts">
+  export let color = "currentColor"
+  export let size: "S" | "M" = "M"
+
+  const sizes = {
+    S: 6,
+    M: 8,
+  }
+
+  $: sizePx = sizes[size]
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox={`0 0 ${sizePx} ${sizePx}`}
+  width={`${sizePx}`}
+  height={`${sizePx}`}
+>
+  <circle
+    cx={sizePx / 2}
+    cy={sizePx / 2}
+    r={sizePx / 2}
+    stroke-width="0"
+    fill={color}
+  />
 </svg>
diff --git a/packages/builder/src/components/common/JSONViewer.svelte b/packages/builder/src/components/common/JSONViewer.svelte
new file mode 100644
index 0000000000..55f6252117
--- /dev/null
+++ b/packages/builder/src/components/common/JSONViewer.svelte
@@ -0,0 +1,281 @@
+<script context="module" lang="ts">
+  interface JSONViewerClickContext {
+    label: string | undefined
+    value: any
+    path: (string | number)[]
+  }
+  export interface JSONViewerClickEvent {
+    detail: JSONViewerClickContext
+  }
+</script>
+
+<script lang="ts">
+  import { Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  export let label: string | undefined = undefined
+  export let value: any = undefined
+  export let root: boolean = true
+  export let path: (string | number)[] = []
+  export let showCopyIcon: boolean = false
+
+  const dispatch = createEventDispatcher()
+  const Colors = {
+    Array: "var(--spectrum-global-color-gray-600)",
+    Object: "var(--spectrum-global-color-gray-600)",
+    Other: "var(--spectrum-global-color-blue-700)",
+    Undefined: "var(--spectrum-global-color-gray-600)",
+    Null: "var(--spectrum-global-color-yellow-700)",
+    String: "var(--spectrum-global-color-orange-700)",
+    Number: "var(--spectrum-global-color-purple-700)",
+    True: "var(--spectrum-global-color-celery-700)",
+    False: "var(--spectrum-global-color-red-700)",
+    Date: "var(--spectrum-global-color-green-700)",
+  }
+
+  let expanded = false
+  let valueExpanded = false
+  let clickContext: JSONViewerClickContext
+
+  $: isArray = Array.isArray(value)
+  $: isObject = value?.toString?.() === "[object Object]"
+  $: primitive = !(isArray || isObject)
+  $: keys = getKeys(isArray, isObject, value)
+  $: expandable = keys.length > 0
+  $: displayValue = getDisplayValue(isArray, isObject, keys, value)
+  $: style = getStyle(isArray, isObject, value)
+  $: clickContext = { value, label, path }
+
+  const getKeys = (isArray: boolean, isObject: boolean, value: any) => {
+    if (isArray) {
+      return [...value.keys()]
+    }
+    if (isObject) {
+      return Object.keys(value).sort()
+    }
+    return []
+  }
+
+  const pluralise = (text: string, number: number) => {
+    return number === 1 ? text : text + "s"
+  }
+
+  const getDisplayValue = (
+    isArray: boolean,
+    isObject: boolean,
+    keys: any[],
+    value: any
+  ) => {
+    if (isArray) {
+      return `[] ${keys.length} ${pluralise("item", keys.length)}`
+    }
+    if (isObject) {
+      return `{} ${keys.length} ${pluralise("key", keys.length)}`
+    }
+    if (typeof value === "object" && typeof value?.toString === "function") {
+      return value.toString()
+    } else {
+      return JSON.stringify(value, null, 2)
+    }
+  }
+
+  const getStyle = (isArray: boolean, isObject: boolean, value: any) => {
+    return `color:${getColor(isArray, isObject, value)};`
+  }
+
+  const getColor = (isArray: boolean, isObject: boolean, value: any) => {
+    if (isArray) {
+      return Colors.Array
+    }
+    if (isObject) {
+      return Colors.Object
+    }
+    if (value instanceof Date) {
+      return Colors.Date
+    }
+    switch (value) {
+      case undefined:
+        return Colors.Undefined
+      case null:
+        return Colors.Null
+      case true:
+        return Colors.True
+      case false:
+        return Colors.False
+    }
+    switch (typeof value) {
+      case "string":
+        return Colors.String
+      case "number":
+        return Colors.Number
+    }
+    return Colors.Other
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="binding-node">
+  {#if label != null}
+    <div class="binding-text">
+      <div class="binding-arrow" class:expanded>
+        {#if expandable}
+          <Icon
+            name="Play"
+            hoverable
+            color="var(--spectrum-global-color-gray-600)"
+            hoverColor="var(--spectrum-global-color-gray-900)"
+            on:click={() => (expanded = !expanded)}
+          />
+        {/if}
+      </div>
+      <div
+        class="binding-label"
+        class:primitive
+        class:expandable
+        on:click={() => (expanded = !expanded)}
+        on:click={() => dispatch("click-label", clickContext)}
+      >
+        {label}
+      </div>
+      <div
+        class="binding-value"
+        class:primitive
+        class:expanded={valueExpanded}
+        {style}
+        on:click={() => (valueExpanded = !valueExpanded)}
+        on:click={() => dispatch("click-value", clickContext)}
+      >
+        {displayValue}
+      </div>
+      {#if showCopyIcon}
+        <div class="copy-value-icon">
+          <Icon
+            name="Copy"
+            size="XS"
+            hoverable
+            color="var(--spectrum-global-color-gray-600)"
+            hoverColor="var(--spectrum-global-color-gray-900)"
+            on:click={() => dispatch("click-copy", clickContext)}
+          />
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if expandable && (expanded || label == null)}
+    <div class="binding-children" class:root>
+      {#each keys as key}
+        <svelte:self
+          label={key}
+          value={value[key]}
+          root={false}
+          path={[...path, key]}
+          {showCopyIcon}
+          on:click-label
+          on:click-value
+          on:click-copy
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .binding-node {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  /* Expand arrow */
+  .binding-arrow {
+    margin: -3px 6px -2px 4px;
+    flex: 0 0 9px;
+    transition: transform 130ms ease-out;
+  }
+  .binding-arrow :global(svg) {
+    width: 9px;
+  }
+  .binding-arrow.expanded {
+    transform: rotate(90deg);
+  }
+
+  /* Main text wrapper */
+  .binding-text {
+    display: flex;
+    flex-direction: row;
+    font-family: monospace;
+    font-size: 12px;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  /* Size label and value according to type */
+  .binding-label {
+    flex: 0 1 auto;
+    margin-right: 8px;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .binding-label.expandable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .binding-value {
+    flex: 0 0 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    transition: filter 130ms ease-out;
+  }
+  .binding-value.primitive:hover {
+    filter: brightness(1.25);
+    cursor: pointer;
+  }
+  .binding-value.expanded {
+    word-break: break-all;
+    white-space: wrap;
+  }
+  .binding-label.primitive {
+    flex: 0 0 auto;
+    max-width: 75%;
+  }
+  .binding-value.primitive {
+    flex: 0 1 auto;
+  }
+
+  /* Trim spans in the highlighted HTML */
+  .binding-value :global(span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  /* Copy icon for value */
+  .copy-value-icon {
+    display: none;
+    margin-left: 8px;
+  }
+  .binding-text:hover .copy-value-icon {
+    display: block;
+  }
+
+  /* Children wrapper */
+  .binding-children {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-left: 1px solid var(--spectrum-global-color-gray-400);
+    margin-left: 20px;
+    padding-left: 3px;
+  }
+  .binding-children.root {
+    border-left: none;
+    margin-left: 0;
+    padding-left: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/common/ScreensPopover.svelte b/packages/builder/src/components/common/ScreensPopover.svelte
new file mode 100644
index 0000000000..2fcb86f991
--- /dev/null
+++ b/packages/builder/src/components/common/ScreensPopover.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import {
+    List,
+    ListItem,
+    ActionButton,
+    PopoverAlignment,
+  } from "@budibase/bbui"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { appStore } from "@/stores/builder"
+  import type { ScreenUsage } from "@budibase/types"
+
+  export let screens: ScreenUsage[] = []
+  export let icon = "DeviceDesktop"
+  export let accentColor: string | null | undefined = null
+  export let showCount = false
+  export let align = PopoverAlignment.Left
+
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+</script>
+
+<DetailPopover title="Screens" bind:this={popover} {align}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      {icon}
+      quiet
+      selected={open || !!(showCount && screens.length)}
+      {accentColor}
+      on:click={show}
+    >
+      Screens{showCount && screens.length ? `: ${screens.length}` : ""}
+    </ActionButton>
+  </svelte:fragment>
+
+  {#if !screens.length}
+    There aren't any screens connected to this data.
+  {:else}
+    The following screens are connected to this data.
+    <List>
+      {#each screens as screen}
+        <ListItem
+          title={screen.url}
+          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
+          showArrow
+        />
+      {/each}
+    </List>
+  {/if}
+
+  <slot name="footer" />
+</DetailPopover>
diff --git a/packages/builder/src/components/common/UpdateAppTopNav.svelte b/packages/builder/src/components/common/UpdateAppTopNav.svelte
index f4a76c4576..967bf1dfdf 100644
--- a/packages/builder/src/components/common/UpdateAppTopNav.svelte
+++ b/packages/builder/src/components/common/UpdateAppTopNav.svelte
@@ -25,7 +25,7 @@
 </div>
 
 <Popover
-  customZindex={998}
+  customZIndex={998}
   bind:this={formPopover}
   align="center"
   anchor={formPopoverAnchor}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index aec23f6ccc..8957fa9a77 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { Icon, Input, Drawer, Button } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
@@ -10,25 +10,25 @@
   import { builderStore } from "@/stores/builder"
 
   export let panel = ClientBindingPanel
-  export let value = ""
-  export let bindings = []
-  export let title
-  export let placeholder
-  export let label
-  export let disabled = false
-  export let allowHBS = true
-  export let allowJS = true
-  export let allowHelpers = true
-  export let updateOnChange = true
-  export let key
-  export let disableBindings = false
-  export let forceModal = false
+  export let value: any = ""
+  export let bindings: any[] = []
+  export let title: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let allowHBS: boolean = true
+  export let allowJS: boolean = true
+  export let allowHelpers: boolean = true
+  export let updateOnChange: boolean = true
+  export let key: string | null = null
+  export let disableBindings: boolean = false
+  export let forceModal: boolean = false
   export let context = null
-  export let autocomplete
+  export let autocomplete: boolean | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
-  let bindingDrawer
+  let bindingDrawer: any
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -38,7 +38,7 @@
   const saveBinding = () => {
     onChange(tempValue)
     onBlur()
-    builderStore.propertyFocus()
+    builderStore.propertyFocus(null)
     bindingDrawer.hide()
   }
 
@@ -46,7 +46,7 @@
     save: saveBinding,
   })
 
-  const onChange = value => {
+  const onChange = (value: any) => {
     currentVal = readableToRuntimeBinding(bindings, value)
     dispatch("change", currentVal)
   }
@@ -55,8 +55,8 @@
     dispatch("blur", currentVal)
   }
 
-  const onDrawerHide = e => {
-    builderStore.propertyFocus()
+  const onDrawerHide = (e: any) => {
+    builderStore.propertyFocus(null)
     dispatch("drawerHide", e.detail)
   }
 </script>
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index c47840ea83..1e951b00cb 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -19,7 +19,7 @@
   $: success = !error && !empty
   $: highlightedResult = highlight(expressionResult)
   $: highlightedLogs = expressionLogs.map(l => ({
-    log: highlight(l.log.join(", ")),
+    log: l.log.map(part => highlight(part)).join(", "),
     line: l.line,
     type: l.type,
   }))
@@ -95,7 +95,9 @@
     {#if empty}
       Your expression will be evaluated here
     {:else if error}
-      {formatError(expressionError)}
+      <div class="error-msg">
+        {formatError(expressionError)}
+      </div>
     {:else}
       <div class="output-lines">
         {#each highlightedLogs as logLine}
@@ -118,13 +120,17 @@
               <span>{@html logLine.log}</span>
             </div>
             {#if logLine.line}
-              <span style="color: var(--blue)">:{logLine.line}</span>
+              <span style="color: var(--blue); overflow-wrap: normal;"
+                >:{logLine.line}</span
+              >
             {/if}
           </div>
         {/each}
         <div class="line">
-          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-          {@html highlightedResult}
+          <div>
+            <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+            {@html highlightedResult}
+          </div>
         </div>
       </div>
     {/if}
@@ -169,29 +175,33 @@
   .header.error::before {
     background: var(--error-bg);
   }
+  .error-msg {
+    padding-top: var(--spacing-m);
+  }
   .body {
     flex: 1 1 auto;
-    padding: var(--spacing-m) var(--spacing-l);
     font-family: var(--font-mono);
+    margin: 0 var(--spacing-m);
     font-size: 12px;
     overflow-y: auto;
     overflow-x: hidden;
-    white-space: pre-line;
-    word-wrap: break-word;
+    word-wrap: anywhere;
     height: 0;
   }
   .output-lines {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
   }
   .line {
-    border-bottom: var(--border-light);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: end;
-    padding: var(--spacing-s);
+    padding: var(--spacing-m) 0;
+    word-wrap: anywhere;
+  }
+  .line:not(:first-of-type) {
+    border-top: var(--border-light);
   }
   .icon-log {
     display: flex;
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
index 46aea2a6c4..fb3856d517 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
@@ -61,6 +61,7 @@
           anchor={primaryDisplayColumnAnchor}
           item={columns.primary}
           on:change={e => columns.update(e.detail)}
+          {bindings}
         />
       </div>
     </div>
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
index c4c2b3eafb..b9f7ab976b 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
@@ -8,6 +8,7 @@
 
   export let item
   export let anchor
+  export let bindings
 
   let draggableStore = writable({
     selected: null,
@@ -48,6 +49,7 @@
       componentInstance={item}
       {parseSettings}
       on:change
+      {bindings}
     >
       <div slot="header" class="type-icon">
         <Icon name={icon} />
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index d3f081756d..638c41e0ec 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -69,6 +69,7 @@ const toGridFormat = draggableListColumns => {
     active: entry.active,
     width: entry.width,
     conditions: entry.conditions,
+    format: entry.format,
   }))
 }
 
@@ -85,6 +86,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         columnType: column.columnType || schema[column.field].type,
         width: column.width,
         conditions: column.conditions,
+        format: column.format,
       },
       {}
     )
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 65b3ed9395..8ba32c47cf 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -5,7 +5,6 @@
     runtimeToReadableBinding,
   } from "@/dataBinding"
   import { builderStore } from "@/stores/builder"
-  import { onDestroy } from "svelte"
 
   export let label = ""
   export let labelHidden = false
@@ -26,16 +25,16 @@
   export let wide
 
   let highlightType
+  let domElement
 
   $: highlightedProp = $builderStore.highlightedSetting
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
-  $: if (!Array.isArray(value)) {
-    highlightType =
-      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
-  }
+  $: isHighlighted = highlightedProp?.key === key
+
+  $: highlightType = isHighlighted ? `highlighted-${highlightedProp?.type}` : ""
 
   const getAllBindings = (bindings, componentBindings, nested) => {
     if (!nested) {
@@ -76,14 +75,18 @@
       : enriched
   }
 
-  onDestroy(() => {
-    if (highlightedProp) {
-      builderStore.highlightSetting(null)
-    }
-  })
+  function scrollToElement(element) {
+    element?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    })
+  }
+
+  $: highlightedProp && isHighlighted && scrollToElement(domElement)
 </script>
 
 <div
+  bind:this={domElement}
   id={`${key}-prop-control-wrap`}
   class={`property-control ${highlightType}`}
   class:wide={!label || labelHidden || wide === true}
@@ -150,10 +153,10 @@
   .property-control.highlighted {
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-static-red-600);
-    margin-top: -3.5px;
-    margin-bottom: -3.5px;
-    padding-bottom: 3.5px;
-    padding-top: 3.5px;
+    margin-top: -4px;
+    margin-bottom: -4px;
+    padding-bottom: 4px;
+    padding-top: 4px;
   }
 
   .property-control.property-focus :global(input) {
@@ -172,7 +175,7 @@
   }
   .text {
     font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-700);
     grid-column: 2 / 2;
   }
 
diff --git a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
new file mode 100644
index 0000000000..e7f3412964
--- /dev/null
+++ b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  import { screenStore } from "@/stores/builder"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import type { ScreenUsage } from "@budibase/types"
+
+  export let sourceId: string
+
+  let screens: ScreenUsage[] = []
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+
+  onMount(async () => {
+    let response = await screenStore.usageInScreens(sourceId)
+    screens = response?.screens
+  })
+</script>
+
+<ScreensPopover
+  bind:this={popover}
+  {screens}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+/>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 0f2ed24177..7a1410e53e 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -23,6 +23,7 @@
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
   import QueryViewerSavePromptModal from "./QueryViewerSavePromptModal.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let query
   let queryHash
@@ -170,6 +171,7 @@
         </Body>
       </div>
       <div class="controls">
+        <ConnectedQueryScreens sourceId={query._id} />
         <Button disabled={loading} on:click={runQuery} overBackground>
           <Icon size="S" name="Play" />
           Run query</Button
@@ -384,6 +386,8 @@
   }
 
   .controls {
+    display: flex;
+    align-items: center;
     flex-shrink: 0;
   }
 
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index 8468bf7017..7bb5022f3c 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -49,6 +49,7 @@
     runtimeToReadableMap,
     toBindingsArray,
   } from "@/dataBinding"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let queryId
 
@@ -502,9 +503,12 @@
             on:change={() => (query.flags.urlName = false)}
             on:save={saveQuery}
           />
-          <div class="access">
-            <Label>Access</Label>
-            <AccessLevelSelect {query} {saveId} />
+          <div class="controls">
+            <ConnectedQueryScreens sourceId={query._id} />
+            <div class="access">
+              <Label>Access</Label>
+              <AccessLevelSelect {query} {saveId} />
+            </div>
           </div>
         </div>
         <div class="url-block">
@@ -825,6 +829,12 @@
     justify-content: space-between;
   }
 
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
   .access {
     display: flex;
     gap: var(--spacing-m);
diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index dabbde098b..e39d6bc853 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -96,8 +96,8 @@
       maxWidth={300}
       dismissible={false}
       offset={12}
-      handlePostionUpdate={tourStep?.positionHandler}
-      customZindex={3}
+      handlePositionUpdate={tourStep?.positionHandler}
+      customZIndex={3}
     >
       <div class="tour-content">
         <Layout noPadding gap="M">
diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index 1272c9eb6d..739ecc9494 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -1159,10 +1159,17 @@ export const buildFormSchema = (component, asset) => {
  * Returns an array of the keys of any state variables which are set anywhere
  * in the app.
  */
-export const getAllStateVariables = () => {
-  // Find all button action settings in all components
+export const getAllStateVariables = screen => {
+  let assets = []
+  if (screen) {
+    // only include state variables from a specific screen
+    assets.push(screen)
+  } else {
+    // otherwise include state variables from all screens
+    assets = getAllAssets()
+  }
   let eventSettings = []
-  getAllAssets().forEach(asset => {
+  assets.forEach(asset => {
     findAllMatchingComponents(asset.props, component => {
       const settings = componentStore.getComponentSettings(component._component)
       const nestedTypes = [
@@ -1214,11 +1221,17 @@ export const getAllStateVariables = () => {
   })
 
   // Add on load settings from screens
-  get(screenStore).screens.forEach(screen => {
+  if (screen) {
     if (screen.onLoad) {
       eventSettings.push(screen.onLoad)
     }
-  })
+  } else {
+    get(screenStore).screens.forEach(screen => {
+      if (screen.onLoad) {
+        eventSettings.push(screen.onLoad)
+      }
+    })
+  }
 
   // Extract all state keys from any "update state" actions in each setting
   let bindingSet = new Set()
diff --git a/packages/builder/src/helpers/duplicate.ts b/packages/builder/src/helpers/duplicate.ts
index b4740b3e52..eb705c6525 100644
--- a/packages/builder/src/helpers/duplicate.ts
+++ b/packages/builder/src/helpers/duplicate.ts
@@ -76,13 +76,15 @@ export const getSequentialName = <T extends any>(
   {
     getName,
     numberFirstItem,
+    separator = "",
   }: {
     getName?: (item: T) => string
     numberFirstItem?: boolean
+    separator?: string
   } = {}
 ) => {
   if (!prefix?.length) {
-    return null
+    return ""
   }
   const trimmedPrefix = prefix.trim()
   const firstName = numberFirstItem ? `${prefix}1` : trimmedPrefix
@@ -107,5 +109,5 @@ export const getSequentialName = <T extends any>(
       max = num
     }
   })
-  return max === 0 ? firstName : `${prefix}${max + 1}`
+  return max === 0 ? firstName : `${prefix}${separator}${max + 1}`
 }
diff --git a/packages/builder/src/helpers/screen.ts b/packages/builder/src/helpers/screen.ts
deleted file mode 100644
index 296a597adb..0000000000
--- a/packages/builder/src/helpers/screen.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component, Screen, ScreenProps } from "@budibase/types"
-import clientManifest from "@budibase/client/manifest.json"
-
-export function findComponentsBySettingsType(
-  screen: Screen,
-  type: string | string[]
-) {
-  const typesArray = Array.isArray(type) ? type : [type]
-
-  const result: {
-    component: Component
-    setting: {
-      type: string
-      key: string
-    }
-  }[] = []
-  function recurseFieldComponentsInChildren(component: ScreenProps) {
-    if (!component) {
-      return
-    }
-
-    const definition = getManifestDefinition(component)
-    const setting =
-      "settings" in definition &&
-      definition.settings.find((s: any) => typesArray.includes(s.type))
-    if (setting && "type" in setting) {
-      result.push({
-        component,
-        setting: { type: setting.type!, key: setting.key! },
-      })
-    }
-    component._children?.forEach(child => {
-      recurseFieldComponentsInChildren(child)
-    })
-  }
-
-  recurseFieldComponentsInChildren(screen?.props)
-  return result
-}
-
-function getManifestDefinition(component: Component) {
-  const componentType = component._component.split("/").slice(-1)[0]
-  const definition =
-    clientManifest[componentType as keyof typeof clientManifest]
-  return definition
-}
diff --git a/packages/builder/src/helpers/tests/duplicate.test.ts b/packages/builder/src/helpers/tests/duplicate.test.ts
index 131e76a6c2..5e956d7b1c 100644
--- a/packages/builder/src/helpers/tests/duplicate.test.ts
+++ b/packages/builder/src/helpers/tests/duplicate.test.ts
@@ -49,7 +49,7 @@ describe("getSequentialName", () => {
 
   it("handles nullish prefix", async () => {
     const name = getSequentialName([], null)
-    expect(name).toBe(null)
+    expect(name).toBe("")
   })
 
   it("handles just the prefix", async () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte
deleted file mode 100644
index 5a23c976f8..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { views, viewsV2 } from "@/stores/builder"
-  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
-  import { notifications } from "@budibase/bbui"
-
-  export let view
-
-  let confirmDeleteDialog
-
-  export const show = () => {
-    confirmDeleteDialog.show()
-  }
-
-  async function deleteView() {
-    try {
-      if (view.version === 2) {
-        await viewsV2.delete(view)
-      } else {
-        await views.delete(view)
-      }
-      notifications.success("View deleted")
-    } catch (error) {
-      console.error(error)
-      notifications.error("Error deleting view")
-    }
-  }
-</script>
-
-<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 Deletion"
-/>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
index e9c5745cc6..f32767451a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
@@ -10,9 +10,8 @@
   import { Icon, ActionButton, ActionMenu, MenuItem } from "@budibase/bbui"
   import { params, url } from "@roxi/routify"
   import EditViewModal from "./EditViewModal.svelte"
-  import DeleteViewModal from "./DeleteViewModal.svelte"
   import EditTableModal from "@/components/backend/TableNavigator/TableNavItem/EditModal.svelte"
-  import DeleteTableModal from "@/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte"
+  import DeleteConfirmationModal from "@/components/backend/modals/DeleteDataConfirmationModal.svelte"
   import { UserAvatars } from "@budibase/frontend-core"
   import { DB_TYPE_EXTERNAL } from "@/constants/backend"
   import { TableNames } from "@/constants"
@@ -314,12 +313,12 @@
 
 {#if table && tableEditable}
   <EditTableModal {table} bind:this={editTableModal} />
-  <DeleteTableModal {table} bind:this={deleteTableModal} />
+  <DeleteConfirmationModal source={table} bind:this={deleteTableModal} />
 {/if}
 
 {#if editableView}
   <EditViewModal view={editableView} bind:this={editViewModal} />
-  <DeleteViewModal view={editableView} bind:this={deleteViewModal} />
+  <DeleteConfirmationModal source={editableView} bind:this={deleteViewModal} />
 {/if}
 
 <style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 30f11e6cab..de6993c661 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -16,6 +16,7 @@
   } from "@/dataBinding"
   import { ActionButton, notifications } from "@budibase/bbui"
   import { capitalise } from "@/helpers"
+  import { builderStore } from "@/stores/builder"
   import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "@/components/portal/onboarding/tours.js"
 
@@ -55,6 +56,17 @@
   $: id = $selectedComponent?._id
   $: id, (section = tabs[0])
   $: componentName = getComponentName(componentInstance)
+
+  $: highlightedSetting = $builderStore.highlightedSetting
+  $: if (highlightedSetting) {
+    if (highlightedSetting.key === "_conditions") {
+      section = "conditions"
+    } else if (highlightedSetting.key === "_styles") {
+      section = "styles"
+    } else {
+      section = "settings"
+    }
+  }
 </script>
 
 {#if $selectedComponent}
@@ -98,7 +110,7 @@
           {/each}
         </div>
       </span>
-      {#if section == "settings"}
+      {#if section === "settings"}
         <TourWrap
           stepKeys={[
             BUILDER_FORM_CREATE_STEPS,
@@ -115,7 +127,7 @@
           />
         </TourWrap>
       {/if}
-      {#if section == "styles"}
+      {#if section === "styles"}
         <DesignSection
           {componentInstance}
           {componentBindings}
@@ -130,7 +142,7 @@
           componentTitle={title}
         />
       {/if}
-      {#if section == "conditions"}
+      {#if section === "conditions"}
         <ConditionalUISection
           {componentInstance}
           {componentDefinition}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
index 2309737cb8..863333e91d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@@ -190,7 +190,7 @@
                 <Icon name="DragHandle" size="XL" />
               </div>
               <Select
-                placeholder={null}
+                placeholder={false}
                 options={actionOptions}
                 bind:value={condition.action}
               />
@@ -227,7 +227,7 @@
                 on:change={e => (condition.newValue = e.detail)}
               />
               <Select
-                placeholder={null}
+                placeholder={false}
                 options={getOperatorOptions(condition)}
                 bind:value={condition.operator}
                 on:change={e => onOperatorChange(condition, e.detail)}
@@ -236,7 +236,7 @@
                 disabled={condition.noValue || condition.operator === "oneOf"}
                 options={valueTypeOptions}
                 bind:value={condition.valueType}
-                placeholder={null}
+                placeholder={false}
                 on:change={e => onValueTypeChange(condition, e.detail)}
               />
               {#if ["string", "number"].includes(condition.valueType)}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index b40a6af3c6..07b9d35a64 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -9,6 +9,7 @@
   import { componentStore } from "@/stores/builder"
   import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import { builderStore } from "@/stores/builder"
 
   export let componentInstance
   export let componentDefinition
@@ -18,6 +19,8 @@
   let tempValue
   let drawer
 
+  $: highlighted = $builderStore.highlightedSetting?.key === "_conditions"
+
   const openDrawer = () => {
     tempValue = JSON.parse(JSON.stringify(componentInstance?._conditions ?? []))
     drawer.show()
@@ -52,7 +55,9 @@
 />
 
 <DetailSummary name={"Conditions"} collapsible={false}>
-  <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
+  <div class:highlighted>
+    <ActionButton fullWidth on:click={openDrawer}>{conditionText}</ActionButton>
+  </div>
 </DetailSummary>
 <Drawer bind:this={drawer} title="Conditions">
   <svelte:fragment slot="description">
@@ -61,3 +66,13 @@
   <Button cta slot="buttons" on:click={() => save()}>Save</Button>
   <ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
 </Drawer>
+
+<style>
+  .highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-left: 4px solid var(--spectrum-semantic-informative-color-background);
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    margin: -4px calc(-1 * var(--spacing-xl));
+    padding: 4px var(--spacing-xl) 4px calc(var(--spacing-xl) - 4px);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index 30e448774b..230f6ebc60 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -16,6 +16,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "@/dataBinding"
+  import { builderStore } from "@/stores/builder"
 
   export let componentInstance
   export let componentDefinition
@@ -32,6 +33,8 @@
 
   $: icon = componentDefinition?.icon
 
+  $: highlighted = $builderStore.highlightedSetting?.key === "_styles"
+
   const openDrawer = () => {
     tempValue = runtimeToReadableBinding(
       bindings,
@@ -55,7 +58,7 @@
   name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
   collapsible={false}
 >
-  <div>
+  <div class:highlighted>
     <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
   </div>
 </DetailSummary>
@@ -97,4 +100,12 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+
+  .highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-left: 4px solid var(--spectrum-semantic-informative-color-background);
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    margin: -4px calc(-1 * var(--spacing-xl));
+    padding: 4px var(--spacing-xl) 4px calc(var(--spacing-xl) - 4px);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
index d2fed41655..be7d48f88f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
@@ -33,7 +33,7 @@
         {/each}
       </div>
     </div>
-    <Layout gap="XS" paddingX="L" paddingY="XL">
+    <Layout gap="XS" paddingX="XL" paddingY="XL">
       {#if activeTab === "theme"}
         <ThemePanel />
       {:else}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 16fe7d9c2f..f5dec6371f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -30,7 +30,7 @@
     if (id === `${$screenStore.selectedScreenId}-screen`) return true
     if (id === `${$screenStore.selectedScreenId}-navigation`) return true
 
-    return !!findComponent($selectedScreen.props, id)
+    return !!findComponent($selectedScreen?.props, id)
   }
 
   // Keep URL and state in sync for selected component ID
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 29e2ce03ff..9dd7aab640 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -3,6 +3,8 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
+  import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
+  import { Divider } from "@budibase/bbui"
 </script>
 
 <div class="app-panel">
@@ -15,6 +17,8 @@
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
+      <Divider vertical />
+      <ScreenErrorsButton />
     </div>
   </div>
   <div class="content">
@@ -50,6 +54,9 @@
     margin-bottom: 9px;
   }
 
+  .header-left {
+    display: flex;
+  }
   .header-left :global(div) {
     border-right: none;
   }
@@ -59,7 +66,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-l);
   }
   .content {
     flex: 1 1 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 3951c0e902..ba600c8eef 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -183,16 +183,6 @@
       toggleAddComponent()
     } else if (type === "highlight-setting") {
       builderStore.highlightSetting(data.setting, "error")
-
-      // Also scroll setting into view
-      const selector = `#${data.setting}-prop-control`
-      const element = document.querySelector(selector)?.parentElement
-      if (element) {
-        element.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        })
-      }
     } else if (type === "eject-block") {
       const { id, definition } = data
       await componentStore.handleEjectBlock(id, definition)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
new file mode 100644
index 0000000000..fb222905bf
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+  import { Helpers, notifications } from "@budibase/bbui"
+  import { processObjectSync } from "@budibase/string-templates"
+  import {
+    previewStore,
+    selectedScreen,
+    componentStore,
+    snippets,
+  } from "@/stores/builder"
+  import { getBindableProperties } from "@/dataBinding"
+  import JSONViewer, {
+    type JSONViewerClickEvent,
+  } from "@/components/common/JSONViewer.svelte"
+
+  // Minimal typing for the real data binding structure, as none exists
+  type DataBinding = {
+    category: string
+    runtimeBinding: string
+    readableBinding: string
+  }
+
+  $: previewContext = $previewStore.selectedComponentContext || {}
+  $: selectedComponentId = $componentStore.selectedComponentId
+  $: context = makeContext(previewContext, bindings)
+  $: bindings = getBindableProperties($selectedScreen, selectedComponentId)
+
+  const makeContext = (
+    previewContext: Record<string, any>,
+    bindings: DataBinding[]
+  ) => {
+    // Create a single big array to enrich in one go
+    const bindingStrings = bindings.map(binding => {
+      if (binding.runtimeBinding.startsWith('trim "')) {
+        // Account for nasty hardcoded HBS bindings for roles, for legacy
+        // compatibility
+        return `{{ ${binding.runtimeBinding} }}`
+      } else {
+        return `{{ literal ${binding.runtimeBinding} }}`
+      }
+    })
+    const bindingEvaluations = processObjectSync(bindingStrings, {
+      ...previewContext,
+      snippets: $snippets,
+    }) as any[]
+
+    // Deeply set values for all readable bindings
+    const enrichedBindings: any[] = bindings.map((binding, idx) => {
+      return {
+        ...binding,
+        value: bindingEvaluations[idx],
+      }
+    })
+    let context = {}
+    for (let binding of enrichedBindings) {
+      Helpers.deepSet(context, binding.readableBinding, binding.value)
+    }
+    return context
+  }
+
+  const copyBinding = (e: JSONViewerClickEvent) => {
+    const readableBinding = `{{ ${e.detail.path.join(".")} }}`
+    Helpers.copyToClipboard(readableBinding)
+    notifications.success("Binding copied to clipboard")
+  }
+
+  onMount(previewStore.requestComponentContext)
+</script>
+
+<div class="bindings-panel">
+  <JSONViewer value={context} showCopyIcon on:click-copy={copyBinding} />
+</div>
+
+<style>
+  .bindings-panel {
+    flex: 1 1 auto;
+    height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--spacing-xl) var(--spacing-l) var(--spacing-l)
+      var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentKeyHandler.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentKeyHandler.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index eb5a57ec9c..7636d923de 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { notifications, Icon, Body } from "@budibase/bbui"
-  import { isActive, goto } from "@roxi/routify"
+  import { notifications, Icon } from "@budibase/bbui"
   import {
     selectedScreen,
     screenStore,
@@ -13,23 +12,12 @@
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore, DropPosition } from "./dndStore.js"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
   import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
   import getScreenContextMenuItems from "./getScreenContextMenuItems"
 
-  let scrolling = false
-
   $: screenComponentId = `${$screenStore.selectedScreenId}-screen`
   $: navComponentId = `${$screenStore.selectedScreenId}-navigation`
 
-  const toNewComponentRoute = () => {
-    if ($isActive(`./:componentId/new`)) {
-      $goto(`./:componentId`)
-    } else {
-      $goto(`./:componentId/new`)
-    }
-  }
-
   const onDrop = async () => {
     try {
       await dndStore.actions.drop()
@@ -39,10 +27,6 @@
     }
   }
 
-  const handleScroll = e => {
-    scrolling = e.target.scrollTop !== 0
-  }
-
   const hover = hoverStore.hover
 
   // showCopy is used to hide the copy button when the user right-clicks the empty
@@ -72,17 +56,9 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="components">
-  <div class="header" class:scrolling>
-    <Body size="S">Components</Body>
-    <div on:click={toNewComponentRoute} class="addButton">
-      <Icon name="Add" />
-    </div>
-  </div>
   <div class="list-panel">
-    <ComponentScrollWrapper on:scroll={handleScroll}>
+    <ComponentScrollWrapper>
       <ul
         class="componentTree"
         on:contextmenu={e => openScreenContextMenu(e, false)}
@@ -159,7 +135,6 @@
       </ul>
     </ComponentScrollWrapper>
   </div>
-  <ComponentKeyHandler />
 </div>
 
 <style>
@@ -168,35 +143,13 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-  }
-
-  .header {
-    height: 50px;
-    box-sizing: border-box;
-    padding: var(--spacing-l);
-    display: flex;
-    align-items: center;
-    border-bottom: 2px solid transparent;
-    transition: border-bottom 130ms ease-out;
-  }
-  .header.scrolling {
-    border-bottom: var(--border-light);
+    padding-top: var(--spacing-l);
   }
 
   .components :global(.nav-item) {
     padding-right: 8px !important;
   }
 
-  .addButton {
-    margin-left: auto;
-    color: var(--grey-7);
-    cursor: pointer;
-  }
-
-  .addButton:hover {
-    color: var(--ink);
-  }
-
   .list-panel {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index fa3ad5f6be..574cc7f707 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -1,25 +1,60 @@
-<script>
+<script lang="ts">
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
   import { getHorizontalResizeActions } from "@/components/common/resizable"
+  import { ActionButton } from "@budibase/bbui"
+  import StatePanel from "./StatePanel.svelte"
+  import BindingsPanel from "./BindingsPanel.svelte"
+  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
+
+  const Tabs = {
+    Components: "Components",
+    Bindings: "Bindings",
+    State: "State",
+  }
+
+  let activeTab = Tabs.Components
 </script>
 
 <div class="panel" use:resizable>
   <div class="content">
     <ScreenList />
-    <ComponentList />
+    <div class="tabs">
+      {#each Object.values(Tabs) as tab}
+        <ActionButton
+          quiet
+          selected={activeTab === tab}
+          on:click={() => (activeTab = tab)}
+        >
+          <div class="tab-label">
+            {tab}
+            {#if tab !== Tabs.Components}
+              <div class="new">NEW</div>
+            {/if}
+          </div>
+        </ActionButton>
+      {/each}
+    </div>
+    {#if activeTab === Tabs.Components}
+      <ComponentList />
+    {:else if activeTab === Tabs.Bindings}
+      <BindingsPanel />
+    {:else if activeTab === Tabs.State}
+      <div class="tab-content"><StatePanel /></div>
+    {/if}
   </div>
   <div class="divider">
     <div class="dividerClickExtender" role="separator" use:resizableHandle />
   </div>
 </div>
+<ComponentKeyHandler />
 
 <style>
   .panel {
     display: flex;
-    min-width: 270px;
+    min-width: 310px;
     width: 310px;
     height: 100%;
   }
@@ -34,6 +69,34 @@
     position: relative;
   }
 
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    padding: var(--spacing-m) var(--spacing-l);
+    border-bottom: var(--border-light);
+  }
+  .tab-content {
+    flex: 1 1 auto;
+    height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--spacing-l);
+  }
+  .tab-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .new {
+    font-size: 8px;
+    background: var(--bb-indigo);
+    border-radius: 2px;
+    padding: 1px 3px;
+    color: white;
+    font-weight: bold;
+  }
+
   .divider {
     position: relative;
     height: 100%;
@@ -45,7 +108,6 @@
     background: var(--spectrum-global-color-gray-300);
     cursor: row-resize;
   }
-
   .dividerClickExtender {
     position: absolute;
     cursor: col-resize;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
new file mode 100644
index 0000000000..1ec86a3c22
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { UIComponentError } from "@budibase/types"
+  import {
+    builderStore,
+    componentStore,
+    screenComponentErrorList,
+    screenComponentsList,
+  } from "@/stores/builder"
+  import {
+    AbsTooltip,
+    ActionButton,
+    Icon,
+    Link,
+    Popover,
+    PopoverAlignment,
+    TooltipPosition,
+  } from "@budibase/bbui"
+  import CircleIndicator from "@/components/common/Icons/CircleIndicator.svelte"
+
+  let button: any
+  let popover: any
+
+  $: hasErrors = !!$screenComponentErrorList.length
+
+  function getErrorTitle(error: UIComponentError) {
+    const titleParts = [
+      $screenComponentsList.find(c => c._id === error.componentId)!
+        ._instanceName,
+    ]
+    if (error.errorType === "setting" && error.cause === "invalid") {
+      titleParts.push(error.label)
+    }
+    return titleParts.join(" - ")
+  }
+
+  async function onErrorClick(error: UIComponentError) {
+    componentStore.select(error.componentId)
+    if (error.errorType === "setting") {
+      builderStore.highlightSetting(error.key, "error")
+    }
+  }
+</script>
+
+<div bind:this={button} class="error-button">
+  <AbsTooltip
+    text={!hasErrors ? "No errors found!" : ""}
+    position={TooltipPosition.Top}
+  >
+    <ActionButton
+      quiet
+      disabled={!hasErrors}
+      on:click={() => popover.show()}
+      size="M"
+      icon="Alert"
+    />
+    {#if hasErrors}
+      <div class="error-indicator">
+        <CircleIndicator
+          size="S"
+          color="var(--spectrum-global-color-static-red-600)"
+        />
+      </div>
+    {/if}
+  </AbsTooltip>
+</div>
+<Popover
+  bind:this={popover}
+  anchor={button}
+  align={PopoverAlignment.Right}
+  maxWidth={400}
+  showPopover={hasErrors}
+>
+  <div class="error-popover">
+    {#each $screenComponentErrorList as error}
+      <div class="error">
+        <Icon
+          name="Alert"
+          color="var(--spectrum-global-color-static-red-600)"
+          size="S"
+        />
+        <div>
+          <Link overBackground on:click={() => onErrorClick(error)}>
+            {getErrorTitle(error)}
+          </Link>:
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html error.message}
+        </div>
+      </div>
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .error-button {
+    position: relative;
+  }
+  .error-indicator {
+    position: absolute;
+    top: 0;
+    right: 8px;
+  }
+  .error-popover {
+    display: flex;
+    flex-direction: column;
+  }
+  .error-popover .error {
+    display: inline-flex;
+    flex-direction: row;
+    padding: var(--spacing-m);
+    gap: var(--spacing-s);
+    align-items: start;
+  }
+  .error-popover .error:not(:last-child) {
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+  }
+
+  .error-popover .error :global(mark) {
+    background: unset;
+    color: unset;
+  }
+  .error-popover .error :global(.spectrum-Link) {
+    display: inline-block;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
new file mode 100644
index 0000000000..522ab9adc3
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -0,0 +1,336 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+  import { Select } from "@budibase/bbui"
+  import type {
+    Component,
+    ComponentCondition,
+    ComponentSetting,
+    EventHandler,
+    Screen,
+  } from "@budibase/types"
+  import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
+  import {
+    componentStore,
+    selectedScreen,
+    builderStore,
+    previewStore,
+  } from "@/stores/builder"
+  import {
+    decodeJSBinding,
+    findHBSBlocks,
+    isJSBinding,
+    processStringSync,
+  } from "@budibase/string-templates"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+
+  interface ComponentUsingState {
+    id: string
+    name: string
+    setting: string
+  }
+
+  let selectedKey: string | undefined = undefined
+  let componentsUsingState: ComponentUsingState[] = []
+  let componentsUpdatingState: ComponentUsingState[] = []
+  let editorValue: string = ""
+
+  $: selectStateKey($selectedScreen, selectedKey)
+  $: keyOptions = getAllStateVariables($selectedScreen)
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $componentStore.selectedComponentId
+  )
+
+  // Auto-select first valid state key
+  $: {
+    if (keyOptions.length && !keyOptions.includes(selectedKey)) {
+      selectedKey = keyOptions[0]
+    } else if (!keyOptions.length) {
+      selectedKey = undefined
+    }
+  }
+
+  const selectStateKey = (
+    screen: Screen | undefined,
+    key: string | undefined
+  ) => {
+    if (screen && key) {
+      searchComponents(screen, key)
+      editorValue = $previewStore.selectedComponentContext?.state?.[key] ?? ""
+    } else {
+      editorValue = ""
+      componentsUsingState = []
+      componentsUpdatingState = []
+    }
+  }
+
+  const searchComponents = (screen: Screen, stateKey: string) => {
+    const { props, onLoad, _id } = screen
+    componentsUsingState = findComponentsUsingState(props, stateKey)
+    componentsUpdatingState = findComponentsUpdatingState(props, stateKey)
+
+    // Check screen load actions which are outside the component hierarchy
+    if (eventUpdatesState(onLoad, stateKey)) {
+      componentsUpdatingState.push({
+        id: _id!,
+        name: "Screen - On load",
+        setting: "onLoad",
+      })
+    }
+  }
+
+  // Checks if an event setting updates a certain state key
+  const eventUpdatesState = (
+    handlers: EventHandler[] | undefined,
+    stateKey: string
+  ) => {
+    return handlers?.some(handler => {
+      return (
+        handler["##eventHandlerType"] === "Update State" &&
+        handler.parameters?.key === stateKey
+      )
+    })
+  }
+
+  // Checks if a setting for the given component updates a certain state key
+  const settingUpdatesState = (
+    component: Record<string, any>,
+    setting: ComponentSetting,
+    stateKey: string
+  ) => {
+    if (setting.type === "event") {
+      return eventUpdatesState(component[setting.key], stateKey)
+    } else if (setting.type === "buttonConfiguration") {
+      const buttons = component[setting.key]
+      if (Array.isArray(buttons)) {
+        for (let button of buttons) {
+          if (eventUpdatesState(button.onClick, stateKey)) {
+            return true
+          }
+        }
+      }
+    }
+    return false
+  }
+
+  // Checks if a condition updates a certain state key
+  const conditionUpdatesState = (
+    condition: ComponentCondition,
+    settings: ComponentSetting[],
+    stateKey: string
+  ) => {
+    const setting = settings.find(s => s.key === condition.setting)
+    if (!setting) {
+      return false
+    }
+    const component = { [setting.key]: condition.settingValue }
+    return settingUpdatesState(component, setting, stateKey)
+  }
+
+  const findComponentsUpdatingState = (
+    component: Component,
+    stateKey: string,
+    foundComponents: ComponentUsingState[] = []
+  ): ComponentUsingState[] => {
+    const { _children, _conditions, _component, _instanceName, _id } = component
+    const settings = componentStore
+      .getComponentSettings(_component)
+      .filter(s => s.type === "event" || s.type === "buttonConfiguration")
+
+    // Check all settings of this component
+    settings.forEach(setting => {
+      if (settingUpdatesState(component, setting, stateKey)) {
+        const label = setting.label || setting.key
+        foundComponents.push({
+          id: _id!,
+          name: `${_instanceName} - ${label}`,
+          setting: setting.key,
+        })
+      }
+    })
+
+    // Check if conditions update these settings to update this state key
+    if (_conditions?.some(c => conditionUpdatesState(c, settings, stateKey))) {
+      foundComponents.push({
+        id: _id!,
+        name: `${_instanceName} - Conditions`,
+        setting: "_conditions",
+      })
+    }
+
+    // Check children
+    _children?.forEach(child => {
+      findComponentsUpdatingState(child, stateKey, foundComponents)
+    })
+    return foundComponents
+  }
+
+  const findComponentsUsingState = (
+    component: Component,
+    stateKey: string,
+    componentsUsingState: ComponentUsingState[] = []
+  ): ComponentUsingState[] => {
+    const settings = componentStore.getComponentSettings(component._component)
+
+    // Check all settings of this component
+    const settingsWithState = getSettingsUsingState(component, stateKey)
+    settingsWithState.forEach(setting => {
+      // Get readable label for this setting
+      let label = settings.find(s => s.key === setting)?.label || setting
+      if (setting === "_conditions") {
+        label = "Conditions"
+      } else if (setting === "_styles") {
+        label = "Styles"
+      }
+      componentsUsingState.push({
+        id: component._id!,
+        name: `${component._instanceName} - ${label}`,
+        setting,
+      })
+    })
+
+    // Check children
+    component._children?.forEach(child => {
+      findComponentsUsingState(child, stateKey, componentsUsingState)
+    })
+    return componentsUsingState
+  }
+
+  const getSettingsUsingState = (
+    component: Component,
+    stateKey: string
+  ): string[] => {
+    return Object.entries(component)
+      .filter(([key]) => key !== "_children")
+      .filter(([_, value]) => hasStateBinding(JSON.stringify(value), stateKey))
+      .map(([key]) => key)
+  }
+
+  const hasStateBinding = (value: string, stateKey: string): boolean => {
+    const bindings = findHBSBlocks(value).map(binding => {
+      const sanitizedBinding = binding.replace(/\\"/g, '"')
+      return isJSBinding(sanitizedBinding)
+        ? decodeJSBinding(sanitizedBinding)
+        : sanitizedBinding
+    })
+    return bindings.join(" ").includes(stateKey)
+  }
+
+  const onClickComponentLink = (component: ComponentUsingState) => {
+    componentStore.select(component.id)
+    builderStore.highlightSetting(component.setting)
+  }
+
+  const handleStateInspectorChange = (e: CustomEvent) => {
+    if (!selectedKey || !$previewStore.selectedComponentContext) {
+      return
+    }
+    const stateUpdate = {
+      [selectedKey]: processStringSync(
+        e.detail,
+        $previewStore.selectedComponentContext
+      ),
+    }
+    previewStore.updateState(stateUpdate)
+    editorValue = e.detail
+  }
+
+  onMount(() => {
+    previewStore.requestComponentContext()
+  })
+</script>
+
+<div class="state-panel">
+  <Select
+    label="State variable"
+    bind:value={selectedKey}
+    placeholder={keyOptions.length > 0 ? false : "No state variables found"}
+    options={keyOptions}
+  />
+  {#if selectedKey && keyOptions.length > 0}
+    <DrawerBindableInput
+      value={editorValue}
+      title={`Set value for "${selectedKey}"`}
+      placeholder="Enter a value"
+      label="Set temporary value for design preview"
+      on:change={e => handleStateInspectorChange(e)}
+      {bindings}
+    />
+  {/if}
+  {#if componentsUsingState.length > 0}
+    <div class="section">
+      <span class="text">Updates</span>
+      <div class="updates-section">
+        {#each componentsUsingState as component}
+          <button
+            class="component-link updates-colour"
+            on:click={() => onClickComponentLink(component)}
+          >
+            {component.name}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+  {#if componentsUpdatingState.length > 0}
+    <div class="section">
+      <span class="text">Controlled by</span>
+      <div class="updates-section">
+        {#each componentsUpdatingState as component}
+          <button
+            class="component-link controlled-by-colour"
+            on:click={() => onClickComponentLink(component)}
+          >
+            {component.name}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .state-panel {
+    background-color: var(--spectrum-alias-background-color-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-s);
+  }
+  .text {
+    color: var(--spectrum-global-color-gray-700);
+    font-size: 12px;
+  }
+  .updates-colour {
+    color: var(--bb-indigo-light);
+  }
+  .controlled-by-colour {
+    color: var(--spectrum-global-color-orange-700);
+  }
+  .component-link {
+    display: inline-block;
+    border: none;
+    background: none;
+    text-decoration: underline;
+    cursor: pointer;
+    padding: 0;
+    white-space: nowrap;
+    font-size: 12px;
+    transition: filter 130ms ease-out;
+  }
+  .component-link:hover {
+    text-decoration: underline;
+    filter: brightness(1.2);
+  }
+  .updates-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-s);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js b/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
index bfd4311aa0..35f8859cd5 100644
--- a/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
+++ b/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
@@ -40,26 +40,33 @@ function setupEnv(hosting, features = {}, flags = {}) {
 describe("AISettings", () => {
   let instance = null
 
+  const setupDOM = () => {
+    instance = render(AISettings, {})
+    const modalContainer = document.createElement("div")
+    modalContainer.classList.add("modal-container")
+    instance.baseElement.appendChild(modalContainer)
+  }
+
   afterEach(() => {
     vi.restoreAllMocks()
   })
 
   it("that the AISettings is rendered", () => {
-    instance = render(AISettings, {})
+    setupDOM()
     expect(instance).toBeDefined()
   })
 
   describe("Licensing", () => {
     it("should show the premium label on self host for custom configs", async () => {
       setupEnv(Hosting.Self)
-      instance = render(AISettings, {})
+      setupDOM()
       const premiumTag = instance.queryByText("Premium")
       expect(premiumTag).toBeInTheDocument()
     })
 
     it("should show the enterprise label on cloud for custom configs", async () => {
       setupEnv(Hosting.Cloud)
-      instance = render(AISettings, {})
+      setupDOM()
       const enterpriseTag = instance.queryByText("Enterprise")
       expect(enterpriseTag).toBeInTheDocument()
     })
@@ -69,7 +76,7 @@ describe("AISettings", () => {
       let configModal
 
       setupEnv(Hosting.Cloud)
-      instance = render(AISettings)
+      setupDOM()
       addConfigurationButton = instance.queryByText("Add configuration")
       expect(addConfigurationButton).toBeInTheDocument()
       await fireEvent.click(addConfigurationButton)
@@ -86,7 +93,7 @@ describe("AISettings", () => {
         { customAIConfigsEnabled: true },
         { AI_CUSTOM_CONFIGS: true }
       )
-      instance = render(AISettings)
+      setupDOM()
       addConfigurationButton = instance.queryByText("Add configuration")
       expect(addConfigurationButton).toBeInTheDocument()
       await fireEvent.click(addConfigurationButton)
@@ -103,7 +110,7 @@ describe("AISettings", () => {
         { customAIConfigsEnabled: true },
         { AI_CUSTOM_CONFIGS: true }
       )
-      instance = render(AISettings)
+      setupDOM()
       addConfigurationButton = instance.queryByText("Add configuration")
       expect(addConfigurationButton).toBeInTheDocument()
       await fireEvent.click(addConfigurationButton)
diff --git a/packages/builder/src/stores/builder/automations.ts b/packages/builder/src/stores/builder/automations.ts
index 9b20b4cd03..ddb8706482 100644
--- a/packages/builder/src/stores/builder/automations.ts
+++ b/packages/builder/src/stores/builder/automations.ts
@@ -2,7 +2,7 @@ import { derived, get } from "svelte/store"
 import { API } from "@/api"
 import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
-import { createHistoryStore } from "@/stores/builder/history"
+import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { licensing } from "@/stores/portal"
 import { tables, appStore } from "@/stores/builder"
 import { notifications } from "@budibase/bbui"
@@ -1428,7 +1428,7 @@ const automationActions = (store: AutomationStore) => ({
 })
 
 class AutomationStore extends BudiStore<AutomationState> {
-  history: any
+  history: HistoryStore<Automation>
   actions: ReturnType<typeof automationActions>
 
   constructor() {
@@ -1437,8 +1437,6 @@ class AutomationStore extends BudiStore<AutomationState> {
     this.history = createHistoryStore({
       getDoc: this.actions.getDefinition.bind(this),
       selectDoc: this.actions.select.bind(this),
-      beforeAction: () => {},
-      afterAction: () => {},
     })
 
     // Then wrap save and delete with history
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts
index cec4e3a4a0..b88563de6a 100644
--- a/packages/builder/src/stores/builder/componentTreeNodes.ts
+++ b/packages/builder/src/stores/builder/componentTreeNodes.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { selectedScreen as selectedScreenStore } from "./screens"
 import { findComponentPath } from "@/helpers/components"
-import { Screen, Component } from "@budibase/types"
+import { Component, Screen } from "@budibase/types"
 import { BudiStore, PersistenceType } from "@/stores/BudiStore"
 
 interface OpenNodesState {
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index 46d3e07eae..b1198ca7b4 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -20,6 +20,8 @@ import {
   previewStore,
   tables,
   componentTreeNodesStore,
+  builderStore,
+  screenComponentsList,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -30,8 +32,21 @@ import {
 } from "@/constants/backend"
 import { BudiStore } from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
-import { Component, FieldType, Screen, Table } from "@budibase/types"
+import {
+  ComponentDefinition,
+  ComponentSetting,
+  Component as ComponentType,
+  ComponentCondition,
+  FieldType,
+  Screen,
+  Table,
+} from "@budibase/types"
 import { utils } from "@budibase/shared-core"
+import { getSequentialName } from "@/helpers/duplicate"
+
+interface Component extends ComponentType {
+  _id: string
+}
 
 export interface ComponentState {
   components: Record<string, ComponentDefinition>
@@ -42,29 +57,6 @@ export interface ComponentState {
   selectedScreenId?: string | null
 }
 
-export interface ComponentDefinition {
-  component: string
-  name: string
-  friendlyName?: string
-  hasChildren?: boolean
-  settings?: ComponentSetting[]
-  features?: Record<string, boolean>
-  typeSupportPresets?: Record<string, any>
-  legalDirectChildren: string[]
-  illegalChildren: string[]
-}
-
-export interface ComponentSetting {
-  key: string
-  type: string
-  section?: string
-  name?: string
-  defaultValue?: any
-  selectAllFields?: boolean
-  resetOn?: string | string[]
-  settings?: ComponentSetting[]
-}
-
 export const INITIAL_COMPONENTS_STATE: ComponentState = {
   components: {},
   customComponents: [],
@@ -254,7 +246,10 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @param {object} opts
    * @returns
    */
-  enrichEmptySettings(component: Component, opts: any) {
+  enrichEmptySettings(
+    component: Component,
+    opts: { screen?: Screen; parent?: Component; useDefaultValues?: boolean }
+  ) {
     if (!component?._component) {
       return
     }
@@ -364,7 +359,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
             getSchemaForDatasource(screen, dataSource, {})
 
           // Finds fields by types from the schema of the configured datasource
-          const findFieldTypes = (fieldTypes: any) => {
+          const findFieldTypes = (fieldTypes: FieldType | FieldType[]) => {
             if (!Array.isArray(fieldTypes)) {
               fieldTypes = [fieldTypes]
             }
@@ -439,19 +434,32 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @param {object} parent
    * @returns
    */
-  createInstance(componentName: string, presetProps: any, parent: any) {
+  createInstance(
+    componentType: string,
+    presetProps: any,
+    parent: any
+  ): Component | null {
     const screen = get(selectedScreen)
     if (!screen) {
       throw "A valid screen must be selected"
     }
 
-    const definition = this.getDefinition(componentName)
+    const definition = this.getDefinition(componentType)
     if (!definition) {
       return null
     }
 
+    const componentName = getSequentialName(
+      get(screenComponentsList),
+      `New ${definition.friendlyName || definition.name}`,
+      {
+        getName: c => c._instanceName,
+        separator: " ",
+      }
+    )
+
     // Generate basic component structure
-    let instance = {
+    let instance: Component = {
       _id: Helpers.uuid(),
       _component: definition.component,
       _styles: {
@@ -459,7 +467,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
         hover: {},
         active: {},
       },
-      _instanceName: `New ${definition.friendlyName || definition.name}`,
+      _instanceName: componentName,
       ...presetProps,
     }
 
@@ -478,16 +486,16 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     // Custom post processing for creation only
-    let extras: any = {}
+    let extras: Partial<Component> = {}
     if (definition.hasChildren) {
       extras._children = []
     }
 
     // Add step name to form steps
-    if (componentName.endsWith("/formstep")) {
+    if (componentType.endsWith("/formstep")) {
       const parentForm = findClosestMatchingComponent(
         screen.props,
-        get(selectedComponent)._id,
+        get(selectedComponent)?._id,
         (component: Component) => component._component.endsWith("/form")
       )
       const formSteps = findAllMatchingComponents(
@@ -513,14 +521,14 @@ export class ComponentStore extends BudiStore<ComponentState> {
    * @returns
    */
   async create(
-    componentName: string,
+    componentType: string,
     presetProps: any,
-    parent: any,
+    parent: Component,
     index: number
   ) {
     const state = get(this.store)
     const componentInstance = this.createInstance(
-      componentName,
+      componentType,
       presetProps,
       parent
     )
@@ -716,14 +724,16 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
   }
 
-  /**
-   *
-   * @param {string} componentId
-   */
-  select(componentId: string) {
+  select(id: string) {
     this.update(state => {
-      state.selectedComponentId = componentId
-      return state
+      // Only clear highlights if selecting a different component
+      if (!id.includes(state.selectedComponentId!)) {
+        builderStore.highlightSetting()
+      }
+      return {
+        ...state,
+        selectedComponentId: id,
+      }
     })
   }
 
@@ -772,7 +782,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
       if (!cut) {
         componentToPaste = makeComponentUnique(componentToPaste)
       }
-      newComponentId = componentToPaste._id!
+      newComponentId = componentToPaste._id
 
       // Strip grid position metadata if pasting into a new screen, but keep
       // alignment metadata
@@ -915,7 +925,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
 
     // If we have children, select first child, and the node is not collapsed
     if (
-      component._children?.length &&
+      component?._children?.length &&
       (state.selectedComponentId === navComponentId ||
         componentTreeNodesStore.isNodeExpanded(component._id))
     ) {
@@ -1105,7 +1115,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     })
   }
 
-  async updateConditions(conditions: Record<string, any>) {
+  async updateConditions(conditions: ComponentCondition[]) {
     await this.patch((component: Component) => {
       component._conditions = conditions
     })
@@ -1339,12 +1349,15 @@ export const componentStore = new ComponentStore()
 
 export const selectedComponent = derived(
   [componentStore, selectedScreen],
-  ([$store, $selectedScreen]) => {
+  ([$store, $selectedScreen]): Component | null => {
     if (
       $selectedScreen &&
       $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
     ) {
-      return $selectedScreen?.props
+      return {
+        ...$selectedScreen.props,
+        _id: $selectedScreen.props._id!,
+      }
     }
     if (!$selectedScreen || !$store.selectedComponentId) {
       return null
diff --git a/packages/builder/src/stores/builder/history.js b/packages/builder/src/stores/builder/history.ts
similarity index 79%
rename from packages/builder/src/stores/builder/history.js
rename to packages/builder/src/stores/builder/history.ts
index 62a8ed2f97..6568c5abca 100644
--- a/packages/builder/src/stores/builder/history.js
+++ b/packages/builder/src/stores/builder/history.ts
@@ -1,10 +1,25 @@
-import * as jsonpatch from "fast-json-patch/index.mjs"
-import { writable, derived, get } from "svelte/store"
+import { Document } from "@budibase/types"
+import * as jsonpatch from "fast-json-patch"
+import { writable, derived, get, Readable } from "svelte/store"
 
-export const Operations = {
-  Add: "Add",
-  Delete: "Delete",
-  Change: "Change",
+export const enum Operations {
+  Add = "Add",
+  Delete = "Delete",
+  Change = "Change",
+}
+
+interface Operator<T extends Document> {
+  id?: number
+  type: Operations
+  doc: T
+  forwardPatch?: jsonpatch.Operation[]
+  backwardsPatch?: jsonpatch.Operation[]
+}
+
+interface HistoryState<T extends Document> {
+  history: Operator<T>[]
+  position: number
+  loading?: boolean
 }
 
 export const initialState = {
@@ -13,14 +28,38 @@ export const initialState = {
   loading: false,
 }
 
-export const createHistoryStore = ({
+export interface HistoryStore<T extends Document>
+  extends Readable<
+    HistoryState<T> & {
+      canUndo: boolean
+      canRedo: boolean
+    }
+  > {
+  wrapSaveDoc: (
+    fn: (doc: T) => Promise<T>
+  ) => (doc: T, operationId?: number) => Promise<T>
+  wrapDeleteDoc: (
+    fn: (doc: T) => Promise<void>
+  ) => (doc: T, operationId?: number) => Promise<void>
+
+  reset: () => void
+  undo: () => Promise<void>
+  redo: () => Promise<void>
+}
+
+export const createHistoryStore = <T extends Document>({
   getDoc,
   selectDoc,
   beforeAction,
   afterAction,
-}) => {
+}: {
+  getDoc: (id: string) => T | undefined
+  selectDoc: (id: string) => void
+  beforeAction?: (operation?: Operator<T>) => void
+  afterAction?: (operation?: Operator<T>) => void
+}): HistoryStore<T> => {
   // Use a derived store to check if we are able to undo or redo any operations
-  const store = writable(initialState)
+  const store = writable<HistoryState<T>>(initialState)
   const derivedStore = derived(store, $store => {
     return {
       ...$store,
@@ -31,8 +70,8 @@ export const createHistoryStore = ({
 
   // Wrapped versions of essential functions which we call ourselves when using
   // undo and redo
-  let saveFn
-  let deleteFn
+  let saveFn: (doc: T, operationId?: number) => Promise<T>
+  let deleteFn: (doc: T, operationId?: number) => Promise<void>
 
   /**
    * Internal util to set the loading flag
@@ -66,7 +105,7 @@ export const createHistoryStore = ({
    * For internal use only.
    * @param operation the operation to save
    */
-  const saveOperation = operation => {
+  const saveOperation = (operation: Operator<T>) => {
     store.update(state => {
       // Update history
       let history = state.history
@@ -93,15 +132,15 @@ export const createHistoryStore = ({
    * @param fn the save function
    * @returns {function} a wrapped version of the save function
    */
-  const wrapSaveDoc = fn => {
-    saveFn = async (doc, operationId) => {
+  const wrapSaveDoc = (fn: (doc: T) => Promise<T>) => {
+    saveFn = async (doc: T, operationId?: number) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return
       }
       startLoading()
       try {
-        const oldDoc = getDoc(doc._id)
+        const oldDoc = getDoc(doc._id!)
         const newDoc = jsonpatch.deepClone(await fn(doc))
 
         // Store the change
@@ -141,8 +180,8 @@ export const createHistoryStore = ({
    * @param fn the delete function
    * @returns {function} a wrapped version of the delete function
    */
-  const wrapDeleteDoc = fn => {
-    deleteFn = async (doc, operationId) => {
+  const wrapDeleteDoc = (fn: (doc: T) => Promise<void>) => {
+    deleteFn = async (doc: T, operationId?: number) => {
       // Only works on a single doc at a time
       if (!doc || Array.isArray(doc)) {
         return
@@ -201,7 +240,7 @@ export const createHistoryStore = ({
       // Undo ADD
       if (operation.type === Operations.Add) {
         // Try to get the latest doc version to delete
-        const latestDoc = getDoc(operation.doc._id)
+        const latestDoc = getDoc(operation.doc._id!)
         const doc = latestDoc || operation.doc
         await deleteFn(doc, operation.id)
       }
@@ -219,7 +258,7 @@ export const createHistoryStore = ({
       // Undo CHANGE
       else {
         // Get the current doc and apply the backwards patch on top of it
-        let doc = jsonpatch.deepClone(getDoc(operation.doc._id))
+        let doc = jsonpatch.deepClone(getDoc(operation.doc._id!))
         if (doc) {
           jsonpatch.applyPatch(
             doc,
@@ -283,7 +322,7 @@ export const createHistoryStore = ({
       // Redo DELETE
       else if (operation.type === Operations.Delete) {
         // Try to get the latest doc version to delete
-        const latestDoc = getDoc(operation.doc._id)
+        const latestDoc = getDoc(operation.doc._id!)
         const doc = latestDoc || operation.doc
         await deleteFn(doc, operation.id)
       }
@@ -291,7 +330,7 @@ export const createHistoryStore = ({
       // Redo CHANGE
       else {
         // Get the current doc and apply the forwards patch on top of it
-        let doc = jsonpatch.deepClone(getDoc(operation.doc._id))
+        let doc = jsonpatch.deepClone(getDoc(operation.doc._id!))
         if (doc) {
           jsonpatch.applyPatch(doc, jsonpatch.deepClone(operation.forwardPatch))
           await saveFn(doc, operation.id)
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 54c1aa39a2..76679d8088 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -16,7 +16,11 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
-import { screenComponentErrors } from "./screenComponent"
+import {
+  screenComponentsList,
+  screenComponentErrors,
+  screenComponentErrorList,
+} from "./screenComponent"
 
 // Backend
 import { tables } from "./tables"
@@ -68,7 +72,9 @@ export {
   snippets,
   rowActions,
   appPublished,
+  screenComponentsList,
   screenComponentErrors,
+  screenComponentErrorList,
 }
 
 export const reset = () => {
diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts
index fe14c02535..87b2b9355e 100644
--- a/packages/builder/src/stores/builder/preview.ts
+++ b/packages/builder/src/stores/builder/preview.ts
@@ -82,6 +82,10 @@ export class PreviewStore extends BudiStore<PreviewState> {
     }))
   }
 
+  updateState(data: Record<string, any>) {
+    this.sendEvent("builder-state", data)
+  }
+
   requestComponentContext() {
     this.sendEvent("request-context")
   }
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 226d233090..bb10bb2307 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -2,24 +2,29 @@ import { derived } from "svelte/store"
 import { tables } from "./tables"
 import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
-import { findComponentsBySettingsType } from "@/helpers/screen"
-import { UIDatasourceType, Screen } from "@budibase/types"
+import {
+  UIDatasourceType,
+  Component,
+  UIComponentError,
+  ComponentDefinition,
+  DependsOnComponentSetting,
+} from "@budibase/types"
 import { queries } from "./queries"
 import { views } from "./views"
-import { bindings, featureFlag } from "@/helpers"
+import { findAllComponents } from "@/helpers/components"
+import { bindings } from "@/helpers"
 import { getBindableProperties } from "@/dataBinding"
+import { componentStore } from "./components"
+import { getSettingsDefinition } from "@budibase/frontend-core"
 
 function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
   list: TItem[]
-): Record<string, any> {
-  return list.reduce(
-    (result, item) => ({
-      ...result,
-      [item[key] as string]: item,
-    }),
-    {}
-  )
+): Record<string, TItem> {
+  return list.reduce<Record<string, TItem>>((result, item) => {
+    result[item[key] as string] = item
+    return result
+  }, {})
 }
 
 const friendlyNameByType: Partial<Record<UIDatasourceType, string>> = {
@@ -37,63 +42,29 @@ const validationKeyByType: Record<UIDatasourceType, string | null> = {
   jsonarray: "value",
 }
 
-export const screenComponentErrors = derived(
-  [selectedScreen, tables, views, viewsV2, queries],
-  ([$selectedScreen, $tables, $views, $viewsV2, $queries]): Record<
-    string,
-    string[]
-  > => {
-    if (!featureFlag.isEnabled("CHECK_SCREEN_COMPONENT_SETTINGS_ERRORS")) {
-      return {}
+export const screenComponentsList = derived(
+  [selectedScreen],
+  ([$selectedScreen]): Component[] => {
+    if (!$selectedScreen) {
+      return []
     }
-    function getInvalidDatasources(
-      screen: Screen,
-      datasources: Record<string, any>
-    ) {
-      const result: Record<string, string[]> = {}
-      for (const { component, setting } of findComponentsBySettingsType(
-        screen,
-        ["table", "dataSource"]
-      )) {
-        const componentSettings = component[setting.key]
-        if (!componentSettings) {
-          continue
-        }
-        const { label } = componentSettings
-        const type = componentSettings.type as UIDatasourceType
 
-        const validationKey = validationKeyByType[type]
-        if (!validationKey) {
-          continue
-        }
+    return findAllComponents($selectedScreen.props)
+  }
+)
 
-        const componentBindings = getBindableProperties(
-          $selectedScreen,
-          component._id
-        )
-
-        const componentDatasources = {
-          ...reduceBy(
-            "rowId",
-            bindings.extractRelationships(componentBindings)
-          ),
-          ...reduceBy("value", bindings.extractFields(componentBindings)),
-          ...reduceBy(
-            "value",
-            bindings.extractJSONArrayFields(componentBindings)
-          ),
-        }
-
-        const resourceId = componentSettings[validationKey]
-        if (!{ ...datasources, ...componentDatasources }[resourceId]) {
-          const friendlyTypeName = friendlyNameByType[type] ?? type
-          result[component._id!] = [
-            `The ${friendlyTypeName} named "${label}" could not be found`,
-          ]
-        }
-      }
-
-      return result
+export const screenComponentErrorList = derived(
+  [selectedScreen, tables, views, viewsV2, queries, componentStore],
+  ([
+    $selectedScreen,
+    $tables,
+    $views,
+    $viewsV2,
+    $queries,
+    $componentStore,
+  ]): UIComponentError[] => {
+    if (!$selectedScreen) {
+      return []
     }
 
     const datasources = {
@@ -103,11 +74,208 @@ export const screenComponentErrors = derived(
       ...reduceBy("_id", $queries.list),
     }
 
-    if (!$selectedScreen) {
-      // Skip validation if a screen is not selected.
-      return {}
+    const { components: definitions } = $componentStore
+
+    const errors: UIComponentError[] = []
+
+    function checkComponentErrors(component: Component, ancestors: string[]) {
+      errors.push(...getInvalidDatasources(component, datasources, definitions))
+      errors.push(...getMissingRequiredSettings(component, definitions))
+      errors.push(...getMissingAncestors(component, definitions, ancestors))
+
+      for (const child of component._children || []) {
+        checkComponentErrors(child, [...ancestors, component._component])
+      }
     }
 
-    return getInvalidDatasources($selectedScreen, datasources)
+    checkComponentErrors($selectedScreen?.props, [])
+
+    return errors
+  }
+)
+
+function getInvalidDatasources(
+  component: Component,
+  datasources: Record<string, any>,
+  definitions: Record<string, ComponentDefinition>
+) {
+  const result: UIComponentError[] = []
+
+  const datasourceTypes = ["table", "dataSource"]
+
+  const possibleSettings = definitions[component._component]?.settings?.filter(
+    s => datasourceTypes.includes(s.type)
+  )
+  if (possibleSettings) {
+    for (const setting of possibleSettings) {
+      const componentSettings = component[setting.key]
+      if (!componentSettings) {
+        continue
+      }
+
+      const { label } = componentSettings
+      const type = componentSettings.type as UIDatasourceType
+
+      const validationKey = validationKeyByType[type]
+      if (!validationKey) {
+        continue
+      }
+
+      const componentBindings = getBindableProperties(screen, component._id)
+
+      const componentDatasources = {
+        ...reduceBy("rowId", bindings.extractRelationships(componentBindings)),
+        ...reduceBy("value", bindings.extractFields(componentBindings)),
+        ...reduceBy(
+          "value",
+          bindings.extractJSONArrayFields(componentBindings)
+        ),
+      }
+
+      const resourceId = componentSettings[validationKey]
+      if (!{ ...datasources, ...componentDatasources }[resourceId]) {
+        const friendlyTypeName = friendlyNameByType[type] ?? type
+        result.push({
+          componentId: component._id!,
+          key: setting.key,
+          label: setting.label || setting.key,
+          message: `The ${friendlyTypeName} named "${label}" could not be found`,
+
+          errorType: "setting",
+          cause: "invalid",
+        })
+      }
+    }
+  }
+
+  return result
+}
+
+function parseDependsOn(dependsOn: DependsOnComponentSetting | undefined): {
+  key?: string
+  value?: string
+} {
+  if (dependsOn === undefined) {
+    return {}
+  }
+
+  if (typeof dependsOn === "string") {
+    return { key: dependsOn }
+  }
+
+  return { key: dependsOn.setting, value: dependsOn.value }
+}
+
+function getMissingRequiredSettings(
+  component: Component,
+  definitions: Record<string, ComponentDefinition>
+) {
+  const result: UIComponentError[] = []
+
+  const definition = definitions[component._component]
+
+  const settings = getSettingsDefinition(definition)
+
+  const missingRequiredSettings = settings.filter(setting => {
+    let empty = component[setting.key] == null || component[setting.key] === ""
+    let missing = setting.required && empty
+
+    // Check if this setting depends on another, as it may not be required
+    if (setting.dependsOn) {
+      const { key: dependsOnKey, value: dependsOnValue } = parseDependsOn(
+        setting.dependsOn
+      )
+      const realDependentValue =
+        component[dependsOnKey as keyof typeof component]
+
+      const { key: sectionDependsOnKey, value: sectionDependsOnValue } =
+        parseDependsOn(setting.sectionDependsOn)
+      const sectionRealDependentValue =
+        component[sectionDependsOnKey as keyof typeof component]
+
+      if (dependsOnValue == null && realDependentValue == null) {
+        return false
+      }
+      if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
+        return false
+      }
+
+      if (
+        sectionDependsOnValue != null &&
+        sectionDependsOnValue !== sectionRealDependentValue
+      ) {
+        return false
+      }
+    }
+
+    return missing
+  })
+
+  if (missingRequiredSettings?.length) {
+    result.push(
+      ...missingRequiredSettings.map<UIComponentError>(s => ({
+        componentId: component._id!,
+        key: s.key,
+        label: s.label || s.key,
+        message: `Add the <mark>${s.label}</mark> setting to start using your component`,
+        errorType: "setting",
+        cause: "missing",
+      }))
+    )
+  }
+
+  return result
+}
+
+const BudibasePrefix = "@budibase/standard-components/"
+function getMissingAncestors(
+  component: Component,
+  definitions: Record<string, ComponentDefinition>,
+  ancestors: string[]
+): UIComponentError[] {
+  const definition = definitions[component._component]
+
+  if (!definition?.requiredAncestors?.length) {
+    return []
+  }
+
+  const result: UIComponentError[] = []
+  const missingAncestors = definition.requiredAncestors.filter(
+    ancestor => !ancestors.includes(`${BudibasePrefix}${ancestor}`)
+  )
+
+  if (missingAncestors.length) {
+    const pluralise = (name: string) => {
+      return name.endsWith("s") ? `${name}'` : `${name}s`
+    }
+
+    result.push(
+      ...missingAncestors.map<UIComponentError>(ancestor => {
+        const ancestorDefinition = definitions[`${BudibasePrefix}${ancestor}`]
+        return {
+          componentId: component._id!,
+          message: `${pluralise(definition.name)} need to be inside a
+<mark>${ancestorDefinition.name}</mark>`,
+          errorType: "ancestor-setting",
+          ancestor: {
+            name: ancestorDefinition.name,
+            fullType: `${BudibasePrefix}${ancestor}`,
+          },
+        }
+      })
+    )
+  }
+
+  return result
+}
+
+export const screenComponentErrors = derived(
+  [screenComponentErrorList],
+  ([$list]): Record<string, UIComponentError[]> => {
+    return $list.reduce<Record<string, UIComponentError[]>>((obj, error) => {
+      obj[error.componentId] ??= []
+      obj[error.componentId].push(error)
+      return obj
+    }, {})
   }
 )
diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index 5163c6a3ea..b7d9a8be30 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -10,7 +10,7 @@ import {
   navigationStore,
   selectedComponent,
 } from "@/stores/builder"
-import { createHistoryStore } from "@/stores/builder/history"
+import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
 import {
@@ -19,8 +19,8 @@ import {
   Screen,
   Component,
   SaveScreenResponse,
+  ComponentDefinition,
 } from "@budibase/types"
-import { ComponentDefinition } from "./components"
 
 interface ScreenState {
   screens: Screen[]
@@ -33,9 +33,9 @@ export const initialScreenState: ScreenState = {
 
 // Review the nulls
 export class ScreenStore extends BudiStore<ScreenState> {
-  history: any
-  delete: any
-  save: any
+  history: HistoryStore<Screen>
+  delete: (screens: Screen) => Promise<void>
+  save: (screen: Screen) => Promise<Screen>
 
   constructor() {
     super(initialScreenState)
@@ -58,13 +58,12 @@ export class ScreenStore extends BudiStore<ScreenState> {
       getDoc: (id: string) =>
         get(this.store).screens?.find(screen => screen._id === id),
       selectDoc: this.select,
-      beforeAction: () => {},
       afterAction: () => {
         // Ensure a valid component is selected
         if (!get(selectedComponent)) {
-          this.update(state => ({
+          componentStore.update(state => ({
             ...state,
-            selectedComponentId: get(selectedScreen)?.props._id,
+            selectedComponentId: get(selectedScreen)?._id,
           }))
         }
       },
@@ -281,7 +280,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * supports deeply mutating the current doc rather than just appending data.
    */
   sequentialScreenPatch = Utils.sequential(
-    async (patchFn: (screen: Screen) => any, screenId: string) => {
+    async (
+      patchFn: (screen: Screen) => boolean,
+      screenId: string
+    ): Promise<Screen | void> => {
       const state = get(this.store)
       const screen = state.screens.find(screen => screen._id === screenId)
       if (!screen) {
@@ -362,10 +364,10 @@ export class ScreenStore extends BudiStore<ScreenState> {
    * Any deleted screens will then have their routes/links purged
    *
    * Wrapped by {@link delete}
-   * @param {Screen | Screen[]} screens
+   * @param {Screen } screens
    */
-  async deleteScreen(screens: Screen | Screen[]) {
-    const screensToDelete = Array.isArray(screens) ? screens : [screens]
+  async deleteScreen(screen: Screen) {
+    const screensToDelete = [screen]
     // Build array of promises to speed up bulk deletions
     let promises: Promise<DeleteScreenResponse>[] = []
     let deleteUrls: string[] = []
@@ -498,6 +500,13 @@ export class ScreenStore extends BudiStore<ScreenState> {
       })
     })
   }
+
+  /**
+   * Provides a list of screens that are used by a given source ID (table, view, datasource, query)
+   */
+  async usageInScreens(sourceId: string) {
+    return API.usageInScreens(sourceId)
+  }
 }
 
 export const screenStore = new ScreenStore()
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 236bcb7c7e..3e22ffada1 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -11,11 +11,8 @@
 <script>
   import { getContext, setContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
-  import {
-    enrichProps,
-    propsAreSame,
-    getSettingsDefinition,
-  } from "utils/componentProps"
+  import { enrichProps, propsAreSame } from "utils/componentProps"
+  import { getSettingsDefinition } from "@budibase/frontend-core"
   import {
     builderStore,
     devToolsStore,
@@ -29,7 +26,6 @@
   import EmptyPlaceholder from "components/app/EmptyPlaceholder.svelte"
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentErrorState from "components/error-states/ComponentErrorState.svelte"
-  import { BudibasePrefix } from "../stores/components.js"
   import {
     decodeJSBinding,
     findHBSBlocks,
@@ -102,8 +98,6 @@
   let definition
   let settingsDefinition
   let settingsDefinitionMap
-  let missingRequiredSettings = false
-  let componentErrors = false
 
   // Temporary styles which can be added in the app preview for things like
   // DND. We clear these whenever a new instance is received.
@@ -141,18 +135,11 @@
   $: componentErrors = instance?._meta?.errors
   $: hasChildren = !!definition?.hasChildren
   $: showEmptyState = definition?.showEmptyState !== false
-  $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
+  $: hasMissingRequiredSettings = !!componentErrors?.find(
+    e => e.errorType === "setting"
+  )
   $: editable = !!definition?.editable && !hasMissingRequiredSettings
   $: hasComponentErrors = componentErrors?.length > 0
-  $: requiredAncestors = definition?.requiredAncestors || []
-  $: missingRequiredAncestors = requiredAncestors.filter(
-    ancestor => !$component.ancestors.includes(`${BudibasePrefix}${ancestor}`)
-  )
-  $: hasMissingRequiredAncestors = missingRequiredAncestors?.length > 0
-  $: errorState =
-    hasMissingRequiredSettings ||
-    hasMissingRequiredAncestors ||
-    hasComponentErrors
 
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
@@ -218,7 +205,7 @@
     styles: normalStyles,
     draggable,
     definition,
-    errored: errorState,
+    errored: hasComponentErrors,
   }
 
   // When dragging and dropping, pad components to allow dropping between
@@ -251,9 +238,8 @@
     name,
     editing,
     type: instance._component,
-    errorState,
+    errorState: hasComponentErrors,
     parent: id,
-    ancestors: [...($component?.ancestors ?? []), instance._component],
     path: [...($component?.path ?? []), id],
     darkMode,
   })
@@ -310,40 +296,6 @@
     staticSettings = instanceSettings.staticSettings
     dynamicSettings = instanceSettings.dynamicSettings
 
-    // Check if we have any missing required settings
-    missingRequiredSettings = settingsDefinition.filter(setting => {
-      let empty = instance[setting.key] == null || instance[setting.key] === ""
-      let missing = setting.required && empty
-
-      // Check if this setting depends on another, as it may not be required
-      if (setting.dependsOn) {
-        const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
-        const dependsOnValue = setting.dependsOn.value
-        const realDependentValue = instance[dependsOnKey]
-
-        const sectionDependsOnKey =
-          setting.sectionDependsOn?.setting || setting.sectionDependsOn
-        const sectionDependsOnValue = setting.sectionDependsOn?.value
-        const sectionRealDependentValue = instance[sectionDependsOnKey]
-
-        if (dependsOnValue == null && realDependentValue == null) {
-          return false
-        }
-        if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
-          return false
-        }
-
-        if (
-          sectionDependsOnValue != null &&
-          sectionDependsOnValue !== sectionRealDependentValue
-        ) {
-          return false
-        }
-      }
-
-      return missing
-    })
-
     // When considering bindings we can ignore children, so we remove that
     // before storing the reference stringified version
     const noChildren = JSON.stringify({ ...instance, _children: null })
@@ -686,7 +638,7 @@
     class:pad
     class:parent={hasChildren}
     class:block={isBlock}
-    class:error={errorState}
+    class:error={hasComponentErrors}
     class:root={isRoot}
     data-id={id}
     data-name={name}
@@ -694,12 +646,8 @@
     data-parent={$component.id}
     use:gridLayout={gridMetadata}
   >
-    {#if errorState}
-      <ComponentErrorState
-        {missingRequiredSettings}
-        {missingRequiredAncestors}
-        {componentErrors}
-      />
+    {#if hasComponentErrors}
+      <ComponentErrorState {componentErrors} />
     {:else}
       <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
         {#if children.length}
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 4a8dfb4fcb..b75ca46223 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -5,6 +5,7 @@
   import { get, derived, readable } from "svelte/store"
   import { featuresStore } from "stores"
   import { Grid } from "@budibase/frontend-core"
+  // import { processStringSync } from "@budibase/string-templates"
 
   // table is actually any datasource, but called table for legacy compatibility
   export let table
@@ -42,6 +43,7 @@
   let gridContext
   let minHeight = 0
 
+  $: id = $component.id
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
   $: parsedColumns = getParsedColumns(columns)
@@ -65,7 +67,6 @@
     const clean = gridContext?.rows.actions.cleanRow || (x => x)
     const cleaned = rows.map(clean)
     const goldenRow = generateGoldenSample(cleaned)
-    const id = get(component).id
     return {
       // Not sure what this one is for...
       [id]: goldenRow,
@@ -104,6 +105,7 @@
         order: idx,
         conditions: column.conditions,
         visible: !!column.active,
+        // format: createFormatter(column),
       }
       if (column.width) {
         overrides[column.field].width = column.width
@@ -112,6 +114,13 @@
     return overrides
   }
 
+  // const createFormatter = column => {
+  //   if (typeof column.format !== "string" || !column.format.trim().length) {
+  //     return null
+  //   }
+  //   return row => processStringSync(column.format, { [id]: row })
+  // }
+
   const enrichButtons = buttons => {
     if (!buttons?.length) {
       return null
diff --git a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte b/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
index 63cecab7ef..809f64ab48 100644
--- a/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Layout, Toggle } from "@budibase/bbui"
+  import { getSettingsDefinition } from "@budibase/frontend-core"
   import DevToolsStat from "./DevToolsStat.svelte"
   import { componentStore } from "stores/index.js"
-  import { getSettingsDefinition } from "utils/componentProps.js"
 
   let showEnrichedSettings = true
 
diff --git a/packages/client/src/components/error-states/ComponentErrorState.svelte b/packages/client/src/components/error-states/ComponentErrorState.svelte
index 7069b7a431..b2e7c92eae 100644
--- a/packages/client/src/components/error-states/ComponentErrorState.svelte
+++ b/packages/client/src/components/error-states/ComponentErrorState.svelte
@@ -1,21 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { Icon } from "@budibase/bbui"
-  import MissingRequiredSetting from "./MissingRequiredSetting.svelte"
-  import MissingRequiredAncestor from "./MissingRequiredAncestor.svelte"
+  import { UIComponentError } from "@budibase/types"
+  import ComponentErrorStateCta from "./ComponentErrorStateCTA.svelte"
 
-  export let missingRequiredSettings:
-    | { key: string; label: string }[]
-    | undefined
-  export let missingRequiredAncestors: string[] | undefined
-  export let componentErrors: string[] | undefined
+  export let componentErrors: UIComponentError[] | undefined
 
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
 
   $: styles = { ...$component.styles, normal: {}, custom: null, empty: true }
-  $: requiredSetting = missingRequiredSettings?.[0]
-  $: requiredAncestor = missingRequiredAncestors?.[0]
   $: errorMessage = componentErrors?.[0]
 </script>
 
@@ -23,12 +17,10 @@
   {#if $component.errorState}
     <div class="component-placeholder" use:styleable={styles}>
       <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
-      {#if requiredAncestor}
-        <MissingRequiredAncestor {requiredAncestor} />
-      {:else if errorMessage}
-        {errorMessage}
-      {:else if requiredSetting}
-        <MissingRequiredSetting {requiredSetting} />
+      {#if errorMessage}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+        {@html errorMessage.message}
+        <ComponentErrorStateCta error={errorMessage} />
       {/if}
     </div>
   {/if}
diff --git a/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte b/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
new file mode 100644
index 0000000000..ef22f307f7
--- /dev/null
+++ b/packages/client/src/components/error-states/ComponentErrorStateCTA.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getContext } from "svelte"
+  import { UIComponentError } from "@budibase/types"
+
+  export let error: UIComponentError | undefined
+
+  const component = getContext("component")
+  const { builderStore } = getContext("sdk")
+</script>
+
+{#if error}
+  {#if error.errorType === "setting"}
+    <span>-</span>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.highlightSetting(error.key)
+      }}
+    >
+      Show me
+    </span>
+  {:else if error.errorType === "ancestor-setting"}
+    <span>-</span>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.addParentComponent(
+          $component.id,
+          error.ancestor.fullType
+        )
+      }}
+    >
+      Add {error.ancestor.name}
+    </span>
+  {/if}
+{/if}
diff --git a/packages/client/src/components/error-states/MissingRequiredAncestor.svelte b/packages/client/src/components/error-states/MissingRequiredAncestor.svelte
deleted file mode 100644
index c251b1be4e..0000000000
--- a/packages/client/src/components/error-states/MissingRequiredAncestor.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { BudibasePrefix } from "stores/components"
-
-  export let requiredAncestor
-
-  const component = getContext("component")
-  const { builderStore, componentStore } = getContext("sdk")
-
-  $: definition = componentStore.actions.getComponentDefinition($component.type)
-  $: fullAncestorType = `${BudibasePrefix}${requiredAncestor}`
-  $: ancestorDefinition =
-    componentStore.actions.getComponentDefinition(fullAncestorType)
-  $: pluralName = getPluralName(definition?.name, $component.type)
-  $: ancestorName = getAncestorName(ancestorDefinition?.name, requiredAncestor)
-
-  const getPluralName = (name, type) => {
-    if (!name) {
-      name = type.replace(BudibasePrefix, "")
-    }
-    return name.endsWith("s") ? `${name}'` : `${name}s`
-  }
-
-  const getAncestorName = name => {
-    return name || requiredAncestor
-  }
-</script>
-
-<span>
-  {pluralName} need to be inside a
-  <mark>{ancestorName}</mark>
-</span>
-<span>-</span>
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<span
-  class="spectrum-Link"
-  on:click={() => {
-    builderStore.actions.addParentComponent($component.id, fullAncestorType)
-  }}
->
-  Add {ancestorName}
-</span>
diff --git a/packages/client/src/components/error-states/MissingRequiredSetting.svelte b/packages/client/src/components/error-states/MissingRequiredSetting.svelte
deleted file mode 100644
index 37e99a3cd1..0000000000
--- a/packages/client/src/components/error-states/MissingRequiredSetting.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  export let requiredSetting
-
-  const { builderStore } = getContext("sdk")
-</script>
-
-<span>
-  Add the <mark>{requiredSetting.label}</mark> setting to start using your component
-</span>
-<span>-</span>
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<span
-  class="spectrum-Link"
-  on:click={() => {
-    builderStore.actions.highlightSetting(requiredSetting.key)
-  }}
->
-  Show me
-</span>
diff --git a/packages/client/src/constants.ts b/packages/client/src/constants.ts
index f7e3e86d40..a3d06fd48f 100644
--- a/packages/client/src/constants.ts
+++ b/packages/client/src/constants.ts
@@ -15,6 +15,7 @@ export const ActionTypes = {
 
 export const DNDPlaceholderID = "dnd-placeholder"
 export const ScreenslotType = "screenslot"
+export const ScreenslotID = "screenslot"
 export const GridRowHeight = 24
 export const GridColumns = 12
 export const GridSpacing = 4
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 7cb9ed4430..8a48aa08e5 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -9,6 +9,7 @@ import {
   dndStore,
   eventStore,
   hoverStore,
+  stateStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 import { get } from "svelte/store"
@@ -87,8 +88,10 @@ const loadBudibase = async () => {
         dndStore.actions.reset()
       }
     } else if (type === "request-context") {
-      const { selectedComponentInstance } = get(componentStore)
-      const context = selectedComponentInstance?.getDataContext()
+      const { selectedComponentInstance, screenslotInstance } =
+        get(componentStore)
+      const instance = selectedComponentInstance || screenslotInstance
+      const context = instance?.getDataContext()
       let stringifiedContext = null
       try {
         stringifiedContext = JSON.stringify(context)
@@ -102,6 +105,9 @@ const loadBudibase = async () => {
       hoverStore.actions.hoverComponent(data, false)
     } else if (type === "builder-meta") {
       builderStore.actions.setMetadata(data)
+    } else if (type === "builder-state") {
+      const [[key, value]] = Object.entries(data)
+      stateStore.actions.setValue(key, value)
     }
   }
 
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
index 2a435c2f8c..08330a60fa 100644
--- a/packages/client/src/index.ts
+++ b/packages/client/src/index.ts
@@ -11,7 +11,15 @@ export interface SDK {
   generateGoldenSample: any
   builderStore: Readable<{
     inBuilder: boolean
-  }>
+  }> & {
+    actions: {
+      highlightSetting: (key: string) => void
+      addParentComponent: (
+        componentId: string,
+        fullAncestorType: string
+      ) => void
+    }
+  }
 }
 
 export type Component = Readable<{
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 48ade99321..024e7b4edc 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -6,7 +6,7 @@ import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
 import * as AppComponents from "../components/app/index.js"
-import { ScreenslotType } from "../constants"
+import { ScreenslotID, ScreenslotType } from "../constants"
 
 export const BudibasePrefix = "@budibase/standard-components/"
 
@@ -43,6 +43,7 @@ const createComponentStore = () => {
         selectedComponentDefinition: definition,
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
+        screenslotInstance: $store.mountedComponents[ScreenslotID],
       }
     }
   )
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 491d8d4236..a7277ca2b5 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -7,7 +7,7 @@ import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
-import { DNDPlaceholderID } from "constants"
+import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
@@ -171,8 +171,8 @@ const createScreenStore = () => {
             _component: "@budibase/standard-components/layout",
             _children: [
               {
-                _component: "screenslot",
-                _id: "screenslot",
+                _component: ScreenslotType,
+                _id: ScreenslotID,
                 _styles: {
                   normal: {
                     flex: "1 1 auto",
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index bdf74c8014..eec284e3d8 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -97,26 +97,3 @@ export const propsUseBinding = (props, bindingKey) => {
   }
   return false
 }
-
-/**
- * Gets the definition of this component's settings from the manifest
- */
-export const getSettingsDefinition = definition => {
-  if (!definition) {
-    return []
-  }
-  let settings = []
-  definition.settings?.forEach(setting => {
-    if (setting.section) {
-      settings = settings.concat(
-        (setting.settings || [])?.map(childSetting => ({
-          ...childSetting,
-          sectionDependsOn: setting.dependsOn,
-        }))
-      )
-    } else {
-      settings.push(setting)
-    }
-  })
-  return settings
-}
diff --git a/packages/frontend-core/src/api/screens.ts b/packages/frontend-core/src/api/screens.ts
index bdb01e1427..0bcca9cfd3 100644
--- a/packages/frontend-core/src/api/screens.ts
+++ b/packages/frontend-core/src/api/screens.ts
@@ -2,12 +2,14 @@ import {
   DeleteScreenResponse,
   SaveScreenRequest,
   SaveScreenResponse,
+  UsageInScreensResponse,
 } from "@budibase/types"
 import { BaseAPIClient } from "./types"
 
 export interface ScreenEndpoints {
   saveScreen: (screen: SaveScreenRequest) => Promise<SaveScreenResponse>
   deleteScreen: (id: string, rev: string) => Promise<DeleteScreenResponse>
+  usageInScreens: (sourceId: string) => Promise<UsageInScreensResponse>
 }
 
 export const buildScreenEndpoints = (API: BaseAPIClient): ScreenEndpoints => ({
@@ -32,4 +34,10 @@ export const buildScreenEndpoints = (API: BaseAPIClient): ScreenEndpoints => ({
       url: `/api/screens/${id}/${rev}`,
     })
   },
+
+  usageInScreens: async sourceId => {
+    return await API.post({
+      url: `/api/screens/usage/${sourceId}`,
+    })
+  },
 })
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index cd6b61af80..486d9e1952 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -3,6 +3,7 @@
   import GridCell from "./GridCell.svelte"
   import { getCellRenderer } from "../lib/renderers"
   import { derived, writable } from "svelte/store"
+  import TextCell from "./TextCell.svelte"
 
   const {
     rows,
@@ -36,11 +37,17 @@
 
   let api
 
+  // Get the appropriate cell renderer and value
+  $: hasCustomFormat = column.format && !row._isNewRow
+  $: renderer = hasCustomFormat ? TextCell : getCellRenderer(column)
+  $: value = hasCustomFormat ? row.__formatted?.[column.name] : row[column.name]
+
   // Get the error for this cell if the cell is focused or selected
   $: error = getErrorStore(rowFocused, cellId)
 
   // Determine if the cell is editable
   $: readonly =
+    hasCustomFormat ||
     columns.actions.isReadonly(column) ||
     (!$config.canEditRows && !row._isNewRow)
 
@@ -69,7 +76,7 @@
     onKeyDown: (...params) => api?.onKeyDown?.(...params),
     isReadonly: () => readonly,
     getType: () => column.schema.type,
-    getValue: () => row[column.name],
+    getValue: () => value,
     setValue: (value, options = { apply: true }) => {
       validation.actions.setError(cellId, null)
       updateValue({
@@ -136,9 +143,9 @@
   }}
 >
   <svelte:component
-    this={getCellRenderer(column)}
+    this={renderer}
     bind:api
-    value={row[column.name]}
+    {value}
     schema={column.schema}
     onChange={cellAPI.setValue}
     {focused}
diff --git a/packages/frontend-core/src/components/grid/lib/renderers.ts b/packages/frontend-core/src/components/grid/lib/renderers.ts
index b009806cc4..dc43bab703 100644
--- a/packages/frontend-core/src/components/grid/lib/renderers.ts
+++ b/packages/frontend-core/src/components/grid/lib/renderers.ts
@@ -53,7 +53,6 @@ export const getCellRenderer = (column: UIColumn) => {
   if (column.calculationType) {
     return NumberCell
   }
-
   return (
     getCellRendererByType(column.schema?.cellRenderType) ||
     getCellRendererByType(column.schema?.type) ||
diff --git a/packages/frontend-core/src/components/grid/stores/columns.ts b/packages/frontend-core/src/components/grid/stores/columns.ts
index 1b3f6624e1..8ea9544ed6 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.ts
+++ b/packages/frontend-core/src/components/grid/stores/columns.ts
@@ -188,6 +188,7 @@ export const initialise = (context: StoreContext) => {
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
             calculationType: fieldSchema.calculationType,
+            format: fieldSchema.format,
             __left: undefined as any, // TODO
             __idx: undefined as any, // TODO
           }
diff --git a/packages/frontend-core/src/components/grid/stores/rows.ts b/packages/frontend-core/src/components/grid/stores/rows.ts
index 7e58808327..22357f66a7 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.ts
+++ b/packages/frontend-core/src/components/grid/stores/rows.ts
@@ -16,6 +16,7 @@ import { Store as StoreContext } from "."
 
 interface IndexedUIRow extends UIRow {
   __idx: number
+  __formatted: Record<string, any>
 }
 
 interface RowStore {
@@ -114,26 +115,44 @@ export const createStores = (): RowStore => {
 export const deriveStores = (context: StoreContext): RowDerivedStore => {
   const { rows, enrichedSchema } = context
 
-  // Enrich rows with an index property and any pending changes
+  // Enrich rows with an index property and additional values
   const enrichedRows = derived(
     [rows, enrichedSchema],
     ([$rows, $enrichedSchema]) => {
-      const customColumns = Object.values($enrichedSchema || {}).filter(
-        f => f.related
-      )
-      return $rows.map<IndexedUIRow>((row, idx) => ({
-        ...row,
-        __idx: idx,
-        ...customColumns.reduce<Record<string, string>>((map, column) => {
-          const fromField = $enrichedSchema![column.related!.field]
-          map[column.name] = getRelatedTableValues(
-            row,
-            { ...column, related: column.related! },
-            fromField
-          )
-          return map
-        }, {}),
-      }))
+      // Find columns which require additional processing
+      const cols = Object.values($enrichedSchema || {})
+      const relatedColumns = cols.filter(col => col.related)
+      const formattedColumns = cols.filter(col => col.format)
+
+      return $rows.map<IndexedUIRow>((row, idx) => {
+        // Derive any values that need enriched from related rows
+        const relatedValues = relatedColumns.reduce<Record<string, string>>(
+          (map, column) => {
+            const fromField = $enrichedSchema![column.related!.field]
+            map[column.name] = getRelatedTableValues(
+              row,
+              { ...column, related: column.related! },
+              fromField
+            )
+            return map
+          },
+          {}
+        )
+        // Derive any display-only formatted values for this row
+        const formattedValues = formattedColumns.reduce<Record<string, any>>(
+          (map, column) => {
+            map[column.name] = column.format!(row)
+            return map
+          },
+          {}
+        )
+        return {
+          ...row,
+          ...relatedValues,
+          __formatted: formattedValues,
+          __idx: idx,
+        }
+      })
     }
   )
 
@@ -791,6 +810,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
     let clone: Row = { ...row }
     delete clone.__idx
     delete clone.__metadata
+    delete clone.__formatted
     if (!get(hasBudibaseIdentifiers) && isGeneratedRowID(clone._id!)) {
       delete clone._id
     }
diff --git a/packages/frontend-core/src/utils/components.ts b/packages/frontend-core/src/utils/components.ts
new file mode 100644
index 0000000000..60eb520258
--- /dev/null
+++ b/packages/frontend-core/src/utils/components.ts
@@ -0,0 +1,26 @@
+import { ComponentDefinition, ComponentSetting } from "@budibase/types"
+
+/**
+ * Gets the definition of this component's settings from the manifest
+ */
+export const getSettingsDefinition = (
+  definition: ComponentDefinition
+): ComponentSetting[] => {
+  if (!definition) {
+    return []
+  }
+  let settings: ComponentSetting[] = []
+  definition.settings?.forEach(setting => {
+    if (setting.section) {
+      settings = settings.concat(
+        (setting.settings || [])?.map(childSetting => ({
+          ...childSetting,
+          sectionDependsOn: setting.dependsOn,
+        }))
+      )
+    } else {
+      settings.push(setting)
+    }
+  })
+  return settings
+}
diff --git a/packages/frontend-core/src/utils/index.ts b/packages/frontend-core/src/utils/index.ts
index efc694d268..3fa9f66b22 100644
--- a/packages/frontend-core/src/utils/index.ts
+++ b/packages/frontend-core/src/utils/index.ts
@@ -13,3 +13,4 @@ export * from "./download"
 export * from "./settings"
 export * from "./relatedColumns"
 export * from "./table"
+export * from "./components"
diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.ts
similarity index 81%
rename from packages/frontend-core/src/utils/utils.js
rename to packages/frontend-core/src/utils/utils.ts
index 3dbaa23d3c..85cc5de54b 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.ts
@@ -1,8 +1,10 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Helpers } from "@budibase/bbui"
 import { cloneDeep } from "lodash"
+import { SearchFilterGroup, UISearchFilter } from "@budibase/types"
 
-export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+export const sleep = (ms: number) =>
+  new Promise(resolve => setTimeout(resolve, ms))
 
 /**
  * Utility to wrap an async function and ensure all invocations happen
@@ -10,12 +12,18 @@ export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
  * @param fn the async function to run
  * @return {Function} a sequential version of the function
  */
-export const sequential = fn => {
-  let queue = []
-  return (...params) => {
-    return new Promise((resolve, reject) => {
+export const sequential = <
+  TReturn,
+  TFunction extends (...args: any[]) => Promise<TReturn>
+>(
+  fn: TFunction
+): TFunction => {
+  let queue: (() => Promise<void>)[] = []
+  const result = (...params: Parameters<TFunction>) => {
+    return new Promise<TReturn>((resolve, reject) => {
       queue.push(async () => {
-        let data, error
+        let data: TReturn | undefined
+        let error: unknown
         try {
           data = await fn(...params)
         } catch (err) {
@@ -28,7 +36,7 @@ export const sequential = fn => {
         if (error) {
           reject(error)
         } else {
-          resolve(data)
+          resolve(data!)
         }
       })
       if (queue.length === 1) {
@@ -36,6 +44,7 @@ export const sequential = fn => {
       }
     })
   }
+  return result as TFunction
 }
 
 /**
@@ -45,9 +54,9 @@ export const sequential = fn => {
  * @param minDelay the minimum delay between invocations
  * @returns a debounced version of the callback
  */
-export const debounce = (callback, minDelay = 1000) => {
-  let timeout
-  return async (...params) => {
+export const debounce = (callback: Function, minDelay = 1000) => {
+  let timeout: ReturnType<typeof setTimeout>
+  return async (...params: any[]) => {
     return new Promise(resolve => {
       if (timeout) {
         clearTimeout(timeout)
@@ -70,11 +79,11 @@ export const debounce = (callback, minDelay = 1000) => {
  * @param minDelay
  * @returns {Function} a throttled version function
  */
-export const throttle = (callback, minDelay = 1000) => {
-  let lastParams
+export const throttle = (callback: Function, minDelay = 1000) => {
+  let lastParams: any[]
   let stalled = false
   let pending = false
-  const invoke = (...params) => {
+  const invoke = (...params: any[]) => {
     lastParams = params
     if (stalled) {
       pending = true
@@ -98,10 +107,10 @@ export const throttle = (callback, minDelay = 1000) => {
  * @param callback the function to run
  * @returns {Function}
  */
-export const domDebounce = callback => {
+export const domDebounce = (callback: Function) => {
   let active = false
-  let lastParams
-  return (...params) => {
+  let lastParams: any[]
+  return (...params: any[]) => {
     lastParams = params
     if (!active) {
       active = true
@@ -119,7 +128,17 @@ export const domDebounce = callback => {
  *
  * @param {any} props
  * */
-export const buildFormBlockButtonConfig = props => {
+export const buildFormBlockButtonConfig = (props?: {
+  _id?: string
+  actionType?: string
+  dataSource?: { resourceId: string }
+  notificationOverride?: boolean
+  actionUrl?: string
+  showDeleteButton?: boolean
+  deleteButtonLabel?: string
+  showSaveButton?: boolean
+  saveButtonLabel?: string
+}) => {
   const {
     _id,
     actionType,
@@ -227,7 +246,11 @@ export const buildFormBlockButtonConfig = props => {
 
   const defaultButtons = []
 
-  if (["Update", "Create"].includes(actionType) && showSaveButton !== false) {
+  if (
+    actionType &&
+    ["Update", "Create"].includes(actionType) &&
+    showSaveButton !== false
+  ) {
     defaultButtons.push({
       text: saveText || "Save",
       _id: Helpers.uuid(),
@@ -251,7 +274,13 @@ export const buildFormBlockButtonConfig = props => {
   return defaultButtons
 }
 
-export const buildMultiStepFormBlockDefaultProps = props => {
+export const buildMultiStepFormBlockDefaultProps = (props?: {
+  _id: string
+  stepCount: number
+  currentStep: number
+  actionType: string
+  dataSource: { resourceId: string }
+}) => {
   const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
 
   // Sanity check
@@ -361,7 +390,7 @@ export const buildMultiStepFormBlockDefaultProps = props => {
  * @param {Object} filter UI filter
  * @returns {Object} parsed filter
  */
-export function parseFilter(filter) {
+export function parseFilter(filter: UISearchFilter) {
   if (!filter?.groups) {
     return filter
   }
@@ -369,13 +398,13 @@ export function parseFilter(filter) {
   const update = cloneDeep(filter)
 
   update.groups = update.groups
-    .map(group => {
-      group.filters = group.filters.filter(filter => {
+    ?.map(group => {
+      group.filters = group.filters?.filter((filter: any) => {
         return filter.field && filter.operator
       })
-      return group.filters.length ? group : null
+      return group.filters?.length ? group : null
     })
-    .filter(group => group)
+    .filter((group): group is SearchFilterGroup => !!group)
 
   return update
 }
diff --git a/packages/server/src/api/controllers/screen.ts b/packages/server/src/api/controllers/screen.ts
index ad000871fe..038d87d548 100644
--- a/packages/server/src/api/controllers/screen.ts
+++ b/packages/server/src/api/controllers/screen.ts
@@ -1,34 +1,30 @@
-import { getScreenParams, generateScreenID, DocumentType } from "../../db/utils"
+import { DocumentType, generateScreenID } from "../../db/utils"
 import {
-  events,
   context,
-  tenancy,
   db as dbCore,
+  events,
   roles,
+  tenancy,
 } from "@budibase/backend-core"
 import { updateAppPackage } from "./application"
 import {
-  Plugin,
-  ScreenProps,
-  Screen,
-  UserCtx,
+  DeleteScreenResponse,
   FetchScreenResponse,
+  Plugin,
   SaveScreenRequest,
   SaveScreenResponse,
-  DeleteScreenResponse,
+  Screen,
+  ScreenProps,
+  ScreenUsage,
+  UsageInScreensResponse,
+  UserCtx,
 } from "@budibase/types"
 import { builderSocket } from "../../websockets"
+import sdk from "../../sdk"
+import { sdk as sharedSdk } from "@budibase/shared-core"
 
 export async function fetch(ctx: UserCtx<void, FetchScreenResponse>) {
-  const db = context.getAppDB()
-
-  const screens = (
-    await db.allDocs(
-      getScreenParams(null, {
-        include_docs: true,
-      })
-    )
-  ).rows.map((el: any) => el.doc)
+  const screens = await sdk.screens.fetch()
 
   const roleId = ctx.user?.role?._id as string
   if (!roleId) {
@@ -140,3 +136,23 @@ function findPlugins(component: ScreenProps, foundPlugins: string[]) {
   }
   component._children.forEach(child => findPlugins(child, foundPlugins))
 }
+
+export async function usage(ctx: UserCtx<void, UsageInScreensResponse>) {
+  const sourceId = ctx.params.sourceId
+  const sourceType = sdk.common.getSourceType(sourceId)
+  const allScreens = await sdk.screens.fetch()
+  const response: ScreenUsage[] = []
+  for (let screen of allScreens) {
+    const found = sharedSdk.screens.findInSettings(screen, sourceId)
+    if (found.length !== 0) {
+      response.push({
+        url: screen.routing.route,
+        _id: screen._id!,
+      })
+    }
+  }
+  ctx.body = {
+    sourceType,
+    screens: response,
+  }
+}
diff --git a/packages/server/src/api/routes/screen.ts b/packages/server/src/api/routes/screen.ts
index 7caa37bbfc..6329175fb6 100644
--- a/packages/server/src/api/routes/screen.ts
+++ b/packages/server/src/api/routes/screen.ts
@@ -19,5 +19,10 @@ router
     authorized(permissions.BUILDER),
     controller.destroy
   )
+  .post(
+    "/api/screens/usage/:sourceId",
+    authorized(permissions.BUILDER),
+    controller.usage
+  )
 
 export default router
diff --git a/packages/server/src/api/routes/tests/automation.spec.ts b/packages/server/src/api/routes/tests/automation.spec.ts
index 5c0b86d9a0..1d7b9cd6ed 100644
--- a/packages/server/src/api/routes/tests/automation.spec.ts
+++ b/packages/server/src/api/routes/tests/automation.spec.ts
@@ -1,7 +1,6 @@
 import {
   checkBuilderEndpoint,
   getAllTableRows,
-  clearAllAutomations,
   testAutomation,
 } from "./utilities/TestFunctions"
 import * as setup from "./utilities"
@@ -12,9 +11,9 @@ import {
 import { configs, context, events } from "@budibase/backend-core"
 import sdk from "../../../sdk"
 import {
-  Automation,
   ConfigType,
   FieldType,
+  isDidNotTriggerResponse,
   SettingsConfig,
   Table,
 } from "@budibase/types"
@@ -22,11 +21,13 @@ import { mocks } from "@budibase/backend-core/tests"
 import { removeDeprecated } from "../../../automations/utils"
 import { createAutomationBuilder } from "../../../automations/tests/utilities/AutomationTestBuilder"
 import { automations } from "@budibase/shared-core"
+import { basicTable } from "../../../tests/utilities/structures"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 
 const FilterConditions = automations.steps.filter.FilterConditions
 
 const MAX_RETRIES = 4
-let {
+const {
   basicAutomation,
   newAutomation,
   automationTrigger,
@@ -37,10 +38,11 @@ let {
 } = setup.structures
 
 describe("/automations", () => {
-  let request = setup.getRequest()
-  let config = setup.getConfig()
+  const config = new TestConfiguration()
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   beforeAll(async () => {
     await config.init()
@@ -52,40 +54,26 @@ describe("/automations", () => {
 
   describe("get definitions", () => {
     it("returns a list of definitions for actions", async () => {
-      const res = await request
-        .get(`/api/automations/action/list`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-
-      expect(Object.keys(res.body).length).not.toEqual(0)
+      const res = await config.api.automation.getActions()
+      expect(Object.keys(res).length).not.toEqual(0)
     })
 
     it("returns a list of definitions for triggerInfo", async () => {
-      const res = await request
-        .get(`/api/automations/trigger/list`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-
-      expect(Object.keys(res.body).length).not.toEqual(0)
+      const res = await config.api.automation.getTriggers()
+      expect(Object.keys(res).length).not.toEqual(0)
     })
 
     it("returns all of the definitions in one", async () => {
-      const res = await request
-        .get(`/api/automations/definitions/list`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
+      const { action, trigger } = await config.api.automation.getDefinitions()
 
       let definitionsLength = Object.keys(
         removeDeprecated(BUILTIN_ACTION_DEFINITIONS)
       ).length
 
-      expect(Object.keys(res.body.action).length).toBeGreaterThanOrEqual(
+      expect(Object.keys(action).length).toBeGreaterThanOrEqual(
         definitionsLength
       )
-      expect(Object.keys(res.body.trigger).length).toEqual(
+      expect(Object.keys(trigger).length).toEqual(
         Object.keys(removeDeprecated(TRIGGER_DEFINITIONS)).length
       )
     })
@@ -93,48 +81,34 @@ describe("/automations", () => {
 
   describe("create", () => {
     it("creates an automation with no steps", async () => {
-      const automation = newAutomation()
-      automation.definition.steps = []
+      const { message, automation } = await config.api.automation.post(
+        newAutomation({ steps: [] })
+      )
 
-      const res = await request
-        .post(`/api/automations`)
-        .set(config.defaultHeaders())
-        .send(automation)
-        .expect("Content-Type", /json/)
-        .expect(200)
-
-      expect(res.body.message).toEqual("Automation created successfully")
-      expect(res.body.automation.name).toEqual("My Automation")
-      expect(res.body.automation._id).not.toEqual(null)
+      expect(message).toEqual("Automation created successfully")
+      expect(automation.name).toEqual("My Automation")
+      expect(automation._id).not.toEqual(null)
       expect(events.automation.created).toHaveBeenCalledTimes(1)
       expect(events.automation.stepCreated).not.toHaveBeenCalled()
     })
 
     it("creates an automation with steps", async () => {
-      const automation = newAutomation()
-      automation.definition.steps.push(automationStep())
       jest.clearAllMocks()
 
-      const res = await request
-        .post(`/api/automations`)
-        .set(config.defaultHeaders())
-        .send(automation)
-        .expect("Content-Type", /json/)
-        .expect(200)
+      const { message, automation } = await config.api.automation.post(
+        newAutomation({ steps: [automationStep(), automationStep()] })
+      )
 
-      expect(res.body.message).toEqual("Automation created successfully")
-      expect(res.body.automation.name).toEqual("My Automation")
-      expect(res.body.automation._id).not.toEqual(null)
+      expect(message).toEqual("Automation created successfully")
+      expect(automation.name).toEqual("My Automation")
+      expect(automation._id).not.toEqual(null)
       expect(events.automation.created).toHaveBeenCalledTimes(1)
       expect(events.automation.stepCreated).toHaveBeenCalledTimes(2)
     })
 
     it("Should ensure you can't have a branch as not a last step", async () => {
-      const automation = createAutomationBuilder({
-        name: "String Equality Branching",
-        appId: config.getAppId(),
-      })
-        .appAction({ fields: { status: "active" } })
+      const automation = createAutomationBuilder(config)
+        .onAppAction()
         .branch({
           activeBranch: {
             steps: stepBuilder =>
@@ -157,11 +131,8 @@ describe("/automations", () => {
     })
 
     it("Should check validation on an automation that has a branch step with no children", async () => {
-      const automation = createAutomationBuilder({
-        name: "String Equality Branching",
-        appId: config.getAppId(),
-      })
-        .appAction({ fields: { status: "active" } })
+      const automation = createAutomationBuilder(config)
+        .onAppAction()
         .branch({})
         .serverLog({ text: "Inactive user" })
         .build()
@@ -176,11 +147,8 @@ describe("/automations", () => {
     })
 
     it("Should check validation on a branch step with empty conditions", async () => {
-      const automation = createAutomationBuilder({
-        name: "String Equality Branching",
-        appId: config.getAppId(),
-      })
-        .appAction({ fields: { status: "active" } })
+      const automation = createAutomationBuilder(config)
+        .onAppAction()
         .branch({
           activeBranch: {
             steps: stepBuilder =>
@@ -200,11 +168,8 @@ describe("/automations", () => {
     })
 
     it("Should check validation on an branch that has a condition that is not valid", async () => {
-      const automation = createAutomationBuilder({
-        name: "String Equality Branching",
-        appId: config.getAppId(),
-      })
-        .appAction({ fields: { status: "active" } })
+      const automation = createAutomationBuilder(config)
+        .onAppAction()
         .branch({
           activeBranch: {
             steps: stepBuilder =>
@@ -241,13 +206,9 @@ describe("/automations", () => {
   describe("find", () => {
     it("should be able to find the automation", async () => {
       const automation = await config.createAutomation()
-      const res = await request
-        .get(`/api/automations/${automation._id}`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body._id).toEqual(automation._id)
-      expect(res.body._rev).toEqual(automation._rev)
+      const { _id, _rev } = await config.api.automation.get(automation._id!)
+      expect(_id).toEqual(automation._id)
+      expect(_rev).toEqual(automation._rev)
     })
   })
 
@@ -279,12 +240,8 @@ describe("/automations", () => {
     })
 
     it("should be able to access platformUrl, logoUrl and company in the automation", async () => {
-      const result = await createAutomationBuilder({
-        name: "Test Automation",
-        appId: config.getAppId(),
-        config,
-      })
-        .appAction({ fields: {} })
+      const result = await createAutomationBuilder(config)
+        .onAppAction()
         .serverLog({
           text: "{{ settings.url }}",
         })
@@ -294,7 +251,7 @@ describe("/automations", () => {
         .serverLog({
           text: "{{ settings.company }}",
         })
-        .run()
+        .test({ fields: {} })
 
       expect(result.steps[0].outputs.message).toEndWith("https://example.com")
       expect(result.steps[1].outputs.message).toEndWith(
@@ -348,106 +305,104 @@ describe("/automations", () => {
 
   describe("trigger", () => {
     it("does not trigger an automation when not synchronous and in dev", async () => {
-      let automation = newAutomation()
-      automation = await config.createAutomation(automation)
-      const res = await request
-        .post(`/api/automations/${automation._id}/trigger`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(400)
-
-      expect(res.body.message).toEqual(
-        "Only apps in production support this endpoint"
+      const { automation } = await config.api.automation.post(newAutomation())
+      await config.api.automation.trigger(
+        automation._id!,
+        {
+          fields: {},
+          timeout: 1000,
+        },
+        {
+          status: 400,
+          body: {
+            message: "Only apps in production support this endpoint",
+          },
+        }
       )
     })
 
     it("triggers a synchronous automation", async () => {
       mocks.licenses.useSyncAutomations()
-      let automation = collectAutomation()
-      automation = await config.createAutomation(automation)
-      const res = await request
-        .post(`/api/automations/${automation._id}/trigger`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-
-      expect(res.body.success).toEqual(true)
-      expect(res.body.value).toEqual([1, 2, 3])
+      const { automation } = await config.api.automation.post(
+        collectAutomation()
+      )
+      await config.api.automation.trigger(
+        automation._id!,
+        {
+          fields: {},
+          timeout: 1000,
+        },
+        {
+          status: 200,
+          body: {
+            success: true,
+            value: [1, 2, 3],
+          },
+        }
+      )
     })
 
     it("should throw an error when attempting to trigger a disabled automation", async () => {
       mocks.licenses.useSyncAutomations()
-      let automation = collectAutomation()
-      automation = await config.createAutomation({
-        ...automation,
-        disabled: true,
-      })
+      const { automation } = await config.api.automation.post(
+        collectAutomation({ disabled: true })
+      )
 
-      const res = await request
-        .post(`/api/automations/${automation._id}/trigger`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(400)
-
-      expect(res.body.message).toEqual("Automation is disabled")
+      await config.api.automation.trigger(
+        automation._id!,
+        {
+          fields: {},
+          timeout: 1000,
+        },
+        {
+          status: 400,
+          body: {
+            message: "Automation is disabled",
+          },
+        }
+      )
     })
 
     it("triggers an asynchronous automation", async () => {
-      let automation = newAutomation()
-      automation = await config.createAutomation(automation)
+      const { automation } = await config.api.automation.post(newAutomation())
       await config.publish()
 
-      const res = await request
-        .post(`/api/automations/${automation._id}/trigger`)
-        .set(config.defaultHeaders({}, true))
-        .expect("Content-Type", /json/)
-        .expect(200)
-
-      expect(res.body.message).toEqual(
-        `Automation ${automation._id} has been triggered.`
+      await config.withProdApp(() =>
+        config.api.automation.trigger(
+          automation._id!,
+          {
+            fields: {},
+            timeout: 1000,
+          },
+          {
+            status: 200,
+            body: {
+              message: `Automation ${automation._id} has been triggered.`,
+            },
+          }
+        )
       )
     })
   })
 
   describe("update", () => {
-    const update = async (automation: Automation) => {
-      return request
-        .put(`/api/automations`)
-        .set(config.defaultHeaders())
-        .send(automation)
-        .expect("Content-Type", /json/)
-        .expect(200)
-    }
-
-    const updateWithPost = async (automation: Automation) => {
-      return request
-        .post(`/api/automations`)
-        .set(config.defaultHeaders())
-        .send(automation)
-        .expect("Content-Type", /json/)
-        .expect(200)
-    }
-
     it("updates a automations name", async () => {
-      const automation = await config.createAutomation(newAutomation())
+      const { automation } = await config.api.automation.post(basicAutomation())
       automation.name = "Updated Name"
       jest.clearAllMocks()
 
-      const res = await update(automation)
+      const { automation: updatedAutomation, message } =
+        await config.api.automation.update(automation)
 
-      const automationRes = res.body.automation
-      const message = res.body.message
+      expect(updatedAutomation._id).toEqual(automation._id)
+      expect(updatedAutomation._rev).toBeDefined()
+      expect(updatedAutomation._rev).not.toEqual(automation._rev)
 
-      // doc attributes
-      expect(automationRes._id).toEqual(automation._id)
-      expect(automationRes._rev).toBeDefined()
-      expect(automationRes._rev).not.toEqual(automation._rev)
-      // content updates
-      expect(automationRes.name).toEqual("Updated Name")
+      expect(updatedAutomation.name).toEqual("Updated Name")
       expect(message).toEqual(
         `Automation ${automation._id} updated successfully.`
       )
-      // events
+
       expect(events.automation.created).not.toHaveBeenCalled()
       expect(events.automation.stepCreated).not.toHaveBeenCalled()
       expect(events.automation.stepDeleted).not.toHaveBeenCalled()
@@ -455,26 +410,23 @@ describe("/automations", () => {
     })
 
     it("updates a automations name using POST request", async () => {
-      const automation = await config.createAutomation(newAutomation())
+      const { automation } = await config.api.automation.post(basicAutomation())
       automation.name = "Updated Name"
       jest.clearAllMocks()
 
-      // the POST request will defer to the update
-      // when an id has been supplied.
-      const res = await updateWithPost(automation)
+      // the POST request will defer to the update when an id has been supplied.
+      const { automation: updatedAutomation, message } =
+        await config.api.automation.post(automation)
 
-      const automationRes = res.body.automation
-      const message = res.body.message
-      // doc attributes
-      expect(automationRes._id).toEqual(automation._id)
-      expect(automationRes._rev).toBeDefined()
-      expect(automationRes._rev).not.toEqual(automation._rev)
-      // content updates
-      expect(automationRes.name).toEqual("Updated Name")
+      expect(updatedAutomation._id).toEqual(automation._id)
+      expect(updatedAutomation._rev).toBeDefined()
+      expect(updatedAutomation._rev).not.toEqual(automation._rev)
+
+      expect(updatedAutomation.name).toEqual("Updated Name")
       expect(message).toEqual(
         `Automation ${automation._id} updated successfully.`
       )
-      // events
+
       expect(events.automation.created).not.toHaveBeenCalled()
       expect(events.automation.stepCreated).not.toHaveBeenCalled()
       expect(events.automation.stepDeleted).not.toHaveBeenCalled()
@@ -482,16 +434,14 @@ describe("/automations", () => {
     })
 
     it("updates an automation trigger", async () => {
-      let automation = newAutomation()
-      automation = await config.createAutomation(automation)
+      const { automation } = await config.api.automation.post(newAutomation())
       automation.definition.trigger = automationTrigger(
         TRIGGER_DEFINITIONS.WEBHOOK
       )
       jest.clearAllMocks()
 
-      await update(automation)
+      await config.api.automation.update(automation)
 
-      // events
       expect(events.automation.created).not.toHaveBeenCalled()
       expect(events.automation.stepCreated).not.toHaveBeenCalled()
       expect(events.automation.stepDeleted).not.toHaveBeenCalled()
@@ -499,16 +449,13 @@ describe("/automations", () => {
     })
 
     it("adds automation steps", async () => {
-      let automation = newAutomation()
-      automation = await config.createAutomation(automation)
+      const { automation } = await config.api.automation.post(newAutomation())
       automation.definition.steps.push(automationStep())
       automation.definition.steps.push(automationStep())
       jest.clearAllMocks()
 
-      // check the post request honours updates with same id
-      await update(automation)
+      await config.api.automation.update(automation)
 
-      // events
       expect(events.automation.stepCreated).toHaveBeenCalledTimes(2)
       expect(events.automation.created).not.toHaveBeenCalled()
       expect(events.automation.stepDeleted).not.toHaveBeenCalled()
@@ -516,32 +463,25 @@ describe("/automations", () => {
     })
 
     it("removes automation steps", async () => {
-      let automation = newAutomation()
-      automation.definition.steps.push(automationStep())
-      automation = await config.createAutomation(automation)
+      const { automation } = await config.api.automation.post(newAutomation())
       automation.definition.steps = []
       jest.clearAllMocks()
 
-      // check the post request honours updates with same id
-      await update(automation)
+      await config.api.automation.update(automation)
 
-      // events
-      expect(events.automation.stepDeleted).toHaveBeenCalledTimes(2)
+      expect(events.automation.stepDeleted).toHaveBeenCalledTimes(1)
       expect(events.automation.stepCreated).not.toHaveBeenCalled()
       expect(events.automation.created).not.toHaveBeenCalled()
       expect(events.automation.triggerUpdated).not.toHaveBeenCalled()
     })
 
     it("adds and removes automation steps", async () => {
-      let automation = newAutomation()
-      automation = await config.createAutomation(automation)
+      const { automation } = await config.api.automation.post(newAutomation())
       automation.definition.steps = [automationStep(), automationStep()]
       jest.clearAllMocks()
 
-      // check the post request honours updates with same id
-      await update(automation)
+      await config.api.automation.update(automation)
 
-      // events
       expect(events.automation.stepCreated).toHaveBeenCalledTimes(2)
       expect(events.automation.stepDeleted).toHaveBeenCalledTimes(1)
       expect(events.automation.created).not.toHaveBeenCalled()
@@ -551,16 +491,24 @@ describe("/automations", () => {
 
   describe("fetch", () => {
     it("return all the automations for an instance", async () => {
-      await clearAllAutomations(config)
-      const autoConfig = await config.createAutomation(basicAutomation())
-      const res = await request
-        .get(`/api/automations`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
+      const fetchResponse = await config.api.automation.fetch()
+      for (const auto of fetchResponse.automations) {
+        await config.api.automation.delete(auto)
+      }
 
-      expect(res.body.automations[0]).toEqual(
-        expect.objectContaining(autoConfig)
+      const { automation: automation1 } = await config.api.automation.post(
+        newAutomation()
+      )
+      const { automation: automation2 } = await config.api.automation.post(
+        newAutomation()
+      )
+      const { automation: automation3 } = await config.api.automation.post(
+        newAutomation()
+      )
+
+      const { automations } = await config.api.automation.fetch()
+      expect(automations).toEqual(
+        expect.arrayContaining([automation1, automation2, automation3])
       )
     })
 
@@ -575,29 +523,25 @@ describe("/automations", () => {
 
   describe("destroy", () => {
     it("deletes a automation by its ID", async () => {
-      const automation = await config.createAutomation()
-      const res = await request
-        .delete(`/api/automations/${automation._id}/${automation._rev}`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
+      const { automation } = await config.api.automation.post(newAutomation())
+      const { id } = await config.api.automation.delete(automation)
 
-      expect(res.body.id).toEqual(automation._id)
+      expect(id).toEqual(automation._id)
       expect(events.automation.deleted).toHaveBeenCalledTimes(1)
     })
 
     it("cannot delete a row action automation", async () => {
-      const automation = await config.createAutomation(
+      const { automation } = await config.api.automation.post(
         setup.structures.rowActionAutomation()
       )
-      await request
-        .delete(`/api/automations/${automation._id}/${automation._rev}`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(422, {
+
+      await config.api.automation.delete(automation, {
+        status: 422,
+        body: {
           message: "Row actions automations cannot be deleted",
           status: 422,
-        })
+        },
+      })
 
       expect(events.automation.deleted).not.toHaveBeenCalled()
     })
@@ -614,10 +558,19 @@ describe("/automations", () => {
 
   describe("checkForCollectStep", () => {
     it("should return true if a collect step exists in an automation", async () => {
-      let automation = collectAutomation()
-      await config.createAutomation(automation)
-      let res = await sdk.automations.utils.checkForCollectStep(automation)
-      expect(res).toEqual(true)
+      const { automation } = await config.api.automation.post(
+        collectAutomation()
+      )
+      expect(sdk.automations.utils.checkForCollectStep(automation)).toEqual(
+        true
+      )
+    })
+
+    it("should return false if a collect step does not exist in an automation", async () => {
+      const { automation } = await config.api.automation.post(newAutomation())
+      expect(sdk.automations.utils.checkForCollectStep(automation)).toEqual(
+        false
+      )
     })
   })
 
@@ -628,28 +581,45 @@ describe("/automations", () => {
     ])(
       "triggers an update row automation and compares new to old rows with old city '%s' and new city '%s'",
       async ({ oldCity, newCity }) => {
-        const expectedResult = oldCity === newCity
+        let table = await config.api.table.save(basicTable())
 
-        let table = await config.createTable()
+        const { automation } = await config.api.automation.post(
+          filterAutomation({
+            definition: {
+              trigger: {
+                inputs: {
+                  tableId: table._id,
+                },
+              },
+              steps: [
+                {
+                  inputs: {
+                    condition: FilterConditions.EQUAL,
+                    field: "{{ trigger.row.City }}",
+                    value: "{{ trigger.oldRow.City }}",
+                  },
+                },
+              ],
+            },
+          })
+        )
 
-        let automation = await filterAutomation(config.getAppId())
-        automation.definition.trigger.inputs.tableId = table._id
-        automation.definition.steps[0].inputs = {
-          condition: FilterConditions.EQUAL,
-          field: "{{ trigger.row.City }}",
-          value: "{{ trigger.oldRow.City }}",
-        }
-        automation = await config.createAutomation(automation)
-        let triggerInputs = {
+        const res = await config.api.automation.test(automation._id!, {
+          fields: {},
           oldRow: {
             City: oldCity,
           },
           row: {
             City: newCity,
           },
+        })
+
+        if (isDidNotTriggerResponse(res)) {
+          throw new Error("Automation did not trigger")
         }
-        const res = await testAutomation(config, automation, triggerInputs)
-        expect(res.body.steps[1].outputs.result).toEqual(expectedResult)
+
+        const expectedResult = oldCity === newCity
+        expect(res.steps[1].outputs.result).toEqual(expectedResult)
       }
     )
   })
@@ -657,16 +627,18 @@ describe("/automations", () => {
     let table: Table
 
     beforeAll(async () => {
-      table = await config.createTable({
-        name: "table",
-        type: "table",
-        schema: {
-          Approved: {
-            name: "Approved",
-            type: FieldType.BOOLEAN,
+      table = await config.api.table.save(
+        basicTable(undefined, {
+          name: "table",
+          type: "table",
+          schema: {
+            Approved: {
+              name: "Approved",
+              type: FieldType.BOOLEAN,
+            },
           },
-        },
-      })
+        })
+      )
     })
 
     const testCases = [
@@ -712,33 +684,29 @@ describe("/automations", () => {
     it.each(testCases)(
       "$description",
       async ({ filters, row, oldRow, expectToRun }) => {
-        let automation = await updateRowAutomationWithFilters(
-          config.getAppId(),
-          table._id!
-        )
-        automation.definition.trigger.inputs = {
+        let req = updateRowAutomationWithFilters(config.getAppId(), table._id!)
+        req.definition.trigger.inputs = {
           tableId: table._id,
           filters,
         }
-        automation = await config.createAutomation(automation)
 
-        const inputs = {
-          row: {
-            tableId: table._id,
-            ...row,
-          },
+        const { automation } = await config.api.automation.post(req)
+        const res = await config.api.automation.test(automation._id!, {
+          fields: {},
           oldRow: {
             tableId: table._id,
             ...oldRow,
           },
-        }
+          row: {
+            tableId: table._id,
+            ...row,
+          },
+        })
 
-        const res = await testAutomation(config, automation, inputs)
-
-        if (expectToRun) {
-          expect(res.body.steps[1].outputs.success).toEqual(true)
+        if (isDidNotTriggerResponse(res)) {
+          expect(expectToRun).toEqual(false)
         } else {
-          expect(res.body.outputs.success).toEqual(false)
+          expect(res.steps[1].outputs.success).toEqual(expectToRun)
         }
       }
     )
diff --git a/packages/server/src/api/routes/tests/queries/mongodb.spec.ts b/packages/server/src/api/routes/tests/queries/mongodb.spec.ts
index a37957fe7e..37af4e74e1 100644
--- a/packages/server/src/api/routes/tests/queries/mongodb.spec.ts
+++ b/packages/server/src/api/routes/tests/queries/mongodb.spec.ts
@@ -634,6 +634,130 @@ if (descriptions.length) {
             }
           })
         })
+
+        it("should be able to select a ObjectId in a transformer", async () => {
+          const query = await createQuery({
+            fields: {
+              json: {},
+              extra: {
+                actionType: "find",
+              },
+            },
+            transformer: "return data.map(x => ({ id: x._id }))",
+          })
+
+          const result = await config.api.query.execute(query._id!)
+
+          expect(result.data).toEqual([
+            { id: expectValidId },
+            { id: expectValidId },
+            { id: expectValidId },
+            { id: expectValidId },
+            { id: expectValidId },
+          ])
+        })
+
+        it("can handle all bson field types with transformers", async () => {
+          collection = generator.guid()
+          await withCollection(async collection => {
+            await collection.insertOne({
+              _id: new BSON.ObjectId("65b0123456789abcdef01234"),
+              stringField: "This is a string",
+              numberField: 42,
+              doubleField: new BSON.Double(42.42),
+              integerField: new BSON.Int32(123),
+              longField: new BSON.Long("9223372036854775807"),
+              booleanField: true,
+              nullField: null,
+              arrayField: [1, 2, 3, "four", { nested: true }],
+              objectField: {
+                nestedString: "nested",
+                nestedNumber: 99,
+              },
+              dateField: new Date(Date.UTC(2025, 0, 30, 12, 30, 20)),
+              timestampField: new BSON.Timestamp({ t: 1706616000, i: 1 }),
+              binaryField: new BSON.Binary(
+                new TextEncoder().encode("bufferValue")
+              ),
+              objectIdField: new BSON.ObjectId("65b0123456789abcdef01235"),
+              regexField: new BSON.BSONRegExp("^Hello.*", "i"),
+              minKeyField: new BSON.MinKey(),
+              maxKeyField: new BSON.MaxKey(),
+              decimalField: new BSON.Decimal128("12345.6789"),
+              codeField: new BSON.Code(
+                "function() { return 'Hello, World!'; }"
+              ),
+              codeWithScopeField: new BSON.Code(
+                "function(x) { return x * 2; }",
+                { x: 10 }
+              ),
+            })
+          })
+
+          const query = await createQuery({
+            fields: {
+              json: {},
+              extra: {
+                actionType: "find",
+                collection,
+              },
+            },
+            transformer: `return data.map(x => ({ 
+                  ...x,
+                  binaryField: x.binaryField?.toString('utf8'),
+                  decimalField: x.decimalField.toString(),
+                  longField: x.longField.toString(),
+                  regexField: x.regexField.toString(),
+                  // TODO: currenlty not supported, it looks like there is bug in the library. Getting: Timestamp constructed from { t, i } must provide t as a number
+                  timestampField: null
+              }))`,
+          })
+
+          const result = await config.api.query.execute(query._id!)
+
+          expect(result.data).toEqual([
+            {
+              _id: "65b0123456789abcdef01234",
+              arrayField: [
+                1,
+                2,
+                3,
+                "four",
+                {
+                  nested: true,
+                },
+              ],
+              binaryField: "bufferValue",
+              booleanField: true,
+              codeField: {
+                code: "function() { return 'Hello, World!'; }",
+              },
+              codeWithScopeField: {
+                code: "function(x) { return x * 2; }",
+                scope: {
+                  x: 10,
+                },
+              },
+              dateField: "2025-01-30T12:30:20.000Z",
+              decimalField: "12345.6789",
+              doubleField: 42.42,
+              integerField: 123,
+              longField: "9223372036854775807",
+              maxKeyField: {},
+              minKeyField: {},
+              nullField: null,
+              numberField: 42,
+              objectField: {
+                nestedNumber: 99,
+                nestedString: "nested",
+              },
+              objectIdField: "65b0123456789abcdef01235",
+              regexField: "/^Hello.*/i",
+              stringField: "This is a string",
+              timestampField: null,
+            },
+          ])
+        })
       })
 
       it("should throw an error if the incorrect actionType is specified", async () => {
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index 576f0bb663..87002670b7 100644
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@@ -169,6 +169,18 @@ if (descriptions.length) {
         )
       }
 
+      const resetRowUsage = async () => {
+        await config.doInContext(
+          undefined,
+          async () =>
+            await quotas.setUsage(
+              0,
+              StaticQuotaName.ROWS,
+              QuotaUsageType.STATIC
+            )
+        )
+      }
+
       const getRowUsage = async () => {
         const { total } = await config.doInContext(undefined, () =>
           quotas.getCurrentUsageValues(
@@ -206,6 +218,10 @@ if (descriptions.length) {
         table = await config.api.table.save(defaultTable())
       })
 
+      beforeEach(async () => {
+        await resetRowUsage()
+      })
+
       describe("create", () => {
         it("creates a new row successfully", async () => {
           const rowUsage = await getRowUsage()
@@ -3317,6 +3333,7 @@ if (descriptions.length) {
           beforeAll(async () => {
             mocks.licenses.useBudibaseAI()
             mocks.licenses.useAICustomConfigs()
+
             envCleanup = setEnv({
               OPENAI_API_KEY: "sk-abcdefghijklmnopqrstuvwxyz1234567890abcd",
             })
diff --git a/packages/server/src/api/routes/tests/screen.spec.ts b/packages/server/src/api/routes/tests/screen.spec.ts
index 82a550f2fd..32f4e4b361 100644
--- a/packages/server/src/api/routes/tests/screen.spec.ts
+++ b/packages/server/src/api/routes/tests/screen.spec.ts
@@ -1,9 +1,24 @@
 import { checkBuilderEndpoint } from "./utilities/TestFunctions"
 import * as setup from "./utilities"
 import { events, roles } from "@budibase/backend-core"
-import { Screen, Role, BuiltinPermissionID } from "@budibase/types"
+import {
+  Screen,
+  Role,
+  BuiltinPermissionID,
+  SourceType,
+  UsageInScreensResponse,
+} from "@budibase/types"
 
-const { basicScreen } = setup.structures
+const {
+  basicScreen,
+  createTableScreen,
+  createViewScreen,
+  createQueryScreen,
+  basicTable,
+  viewV2,
+  basicQuery,
+  basicDatasource,
+} = setup.structures
 
 describe("/screens", () => {
   let config = setup.getConfig()
@@ -18,7 +33,7 @@ describe("/screens", () => {
 
   describe("fetch", () => {
     it("should be able to create a layout", async () => {
-      const screens = await config.api.screen.list({ status: 200 })
+      const screens = await config.api.screen.list()
       expect(screens.length).toEqual(1)
       expect(screens.some(s => s._id === screen._id)).toEqual(true)
     })
@@ -52,28 +67,22 @@ describe("/screens", () => {
         inherits: [role1._id!, role2._id!],
         permissionId: BuiltinPermissionID.WRITE,
       })
-      screen1 = await config.api.screen.save(
-        {
-          ...basicScreen(),
-          routing: {
-            roleId: role1._id!,
-            route: "/foo",
-            homeScreen: false,
-          },
+      screen1 = await config.api.screen.save({
+        ...basicScreen(),
+        routing: {
+          roleId: role1._id!,
+          route: "/foo",
+          homeScreen: false,
         },
-        { status: 200 }
-      )
-      screen2 = await config.api.screen.save(
-        {
-          ...basicScreen(),
-          routing: {
-            roleId: role2._id!,
-            route: "/bar",
-            homeScreen: false,
-          },
+      })
+      screen2 = await config.api.screen.save({
+        ...basicScreen(),
+        routing: {
+          roleId: role2._id!,
+          route: "/bar",
+          homeScreen: false,
         },
-        { status: 200 }
-      )
+      })
       // get into prod app
       await config.publish()
     })
@@ -81,10 +90,7 @@ describe("/screens", () => {
     async function checkScreens(roleId: string, screenIds: string[]) {
       await config.loginAsRole(roleId, async () => {
         const res = await config.api.application.getDefinition(
-          config.prodAppId!,
-          {
-            status: 200,
-          }
+          config.getProdAppId()
         )
         expect(res.screens.length).toEqual(screenIds.length)
         expect(res.screens.map(s => s._id).sort()).toEqual(screenIds.sort())
@@ -114,10 +120,7 @@ describe("/screens", () => {
         },
         async () => {
           const res = await config.api.application.getDefinition(
-            config.prodAppId!,
-            {
-              status: 200,
-            }
+            config.prodAppId!
           )
           const screenIds = [screen._id!, screen1._id!]
           expect(res.screens.length).toEqual(screenIds.length)
@@ -134,9 +137,7 @@ describe("/screens", () => {
 
     it("should be able to create a screen", async () => {
       const screen = basicScreen()
-      const responseScreen = await config.api.screen.save(screen, {
-        status: 200,
-      })
+      const responseScreen = await config.api.screen.save(screen)
 
       expect(responseScreen._rev).toBeDefined()
       expect(responseScreen.name).toEqual(screen.name)
@@ -145,13 +146,13 @@ describe("/screens", () => {
 
     it("should be able to update a screen", async () => {
       const screen = basicScreen()
-      let responseScreen = await config.api.screen.save(screen, { status: 200 })
+      let responseScreen = await config.api.screen.save(screen)
       screen._id = responseScreen._id
       screen._rev = responseScreen._rev
       screen.name = "edit"
       jest.clearAllMocks()
 
-      responseScreen = await config.api.screen.save(screen, { status: 200 })
+      responseScreen = await config.api.screen.save(screen)
 
       expect(responseScreen._rev).toBeDefined()
       expect(responseScreen.name).toEqual(screen.name)
@@ -171,8 +172,7 @@ describe("/screens", () => {
     it("should be able to delete the screen", async () => {
       const response = await config.api.screen.destroy(
         screen._id!,
-        screen._rev!,
-        { status: 200 }
+        screen._rev!
       )
       expect(response.message).toBeDefined()
       expect(events.screen.deleted).toHaveBeenCalledTimes(1)
@@ -186,4 +186,57 @@ describe("/screens", () => {
       })
     })
   })
+
+  describe("usage", () => {
+    beforeEach(async () => {
+      await config.init()
+      await config.api.screen.save(basicScreen())
+    })
+
+    function confirmScreen(usage: UsageInScreensResponse, screen: Screen) {
+      expect(usage.screens.length).toEqual(1)
+      expect(usage.screens[0].url).toEqual(screen.routing.route)
+      expect(usage.screens[0]._id).toEqual(screen._id!)
+    }
+
+    it("should find table usage", async () => {
+      const table = await config.api.table.save(basicTable())
+      const screen = await config.api.screen.save(
+        createTableScreen("BudibaseDB", table)
+      )
+      const usage = await config.api.screen.usage(table._id!)
+      expect(usage.sourceType).toEqual(SourceType.TABLE)
+      confirmScreen(usage, screen)
+    })
+
+    it("should find view usage", async () => {
+      const table = await config.api.table.save(basicTable())
+      const view = await config.api.viewV2.create(
+        viewV2.createRequest(table._id!),
+        { status: 201 }
+      )
+      const screen = await config.api.screen.save(
+        createViewScreen("BudibaseDB", view)
+      )
+      const usage = await config.api.screen.usage(view.id)
+      expect(usage.sourceType).toEqual(SourceType.VIEW)
+      confirmScreen(usage, screen)
+    })
+
+    it("should find datasource/query usage", async () => {
+      const datasource = await config.api.datasource.create(
+        basicDatasource().datasource
+      )
+      const query = await config.api.query.save(basicQuery(datasource._id!))
+      const screen = await config.api.screen.save(
+        createQueryScreen(datasource._id!, query)
+      )
+      const dsUsage = await config.api.screen.usage(datasource._id!)
+      expect(dsUsage.sourceType).toEqual(SourceType.DATASOURCE)
+      confirmScreen(dsUsage, screen)
+      const queryUsage = await config.api.screen.usage(query._id!)
+      expect(queryUsage.sourceType).toEqual(SourceType.QUERY)
+      confirmScreen(queryUsage, screen)
+    })
+  })
 })
diff --git a/packages/server/src/api/routes/tests/search.spec.ts b/packages/server/src/api/routes/tests/search.spec.ts
index c3b274d5f4..ee372914d7 100644
--- a/packages/server/src/api/routes/tests/search.spec.ts
+++ b/packages/server/src/api/routes/tests/search.spec.ts
@@ -1040,6 +1040,12 @@ if (descriptions.length) {
                     string: { name: "FO" },
                   }).toContainExactly([{ name: "foo" }])
                 })
+
+                it("should not coerce string to date for string columns", async () => {
+                  await expectQuery({
+                    string: { name: "2020-01-01" },
+                  }).toFindNothing()
+                })
               })
 
               describe("range", () => {
diff --git a/packages/server/src/api/routes/tests/utilities/TestFunctions.ts b/packages/server/src/api/routes/tests/utilities/TestFunctions.ts
index 9d5417d041..a232fec859 100644
--- a/packages/server/src/api/routes/tests/utilities/TestFunctions.ts
+++ b/packages/server/src/api/routes/tests/utilities/TestFunctions.ts
@@ -53,15 +53,6 @@ export const clearAllApps = async (
   })
 }
 
-export const clearAllAutomations = async (config: TestConfiguration) => {
-  const { automations } = await config.getAllAutomations()
-  for (let auto of automations) {
-    await context.doInAppContext(config.getAppId(), async () => {
-      await config.deleteAutomation(auto)
-    })
-  }
-}
-
 export const wipeDb = async () => {
   const couchInfo = db.getCouchInfo()
   const nano = Nano({
diff --git a/packages/server/src/automations/bullboard.ts b/packages/server/src/automations/bullboard.ts
index aa4287b2d0..349282e863 100644
--- a/packages/server/src/automations/bullboard.ts
+++ b/packages/server/src/automations/bullboard.ts
@@ -5,9 +5,9 @@ import * as automation from "../threads/automation"
 import { backups } from "@budibase/pro"
 import { getAppMigrationQueue } from "../appMigrations/queue"
 import { createBullBoard } from "@bull-board/api"
-import BullQueue from "bull"
+import { AutomationData } from "@budibase/types"
 
-export const automationQueue: BullQueue.Queue = queue.createQueue(
+export const automationQueue = queue.createQueue<AutomationData>(
   queue.JobQueue.AUTOMATION,
   { removeStalledCb: automation.removeStalled }
 )
@@ -16,24 +16,20 @@ const PATH_PREFIX = "/bulladmin"
 
 export async function init() {
   // Set up queues for bull board admin
+  const queues = [new BullAdapter(automationQueue)]
+
   const backupQueue = backups.getBackupQueue()
-  const appMigrationQueue = getAppMigrationQueue()
-  const queues = [automationQueue]
   if (backupQueue) {
-    queues.push(backupQueue)
+    queues.push(new BullAdapter(backupQueue))
   }
+
+  const appMigrationQueue = getAppMigrationQueue()
   if (appMigrationQueue) {
-    queues.push(appMigrationQueue)
+    queues.push(new BullAdapter(appMigrationQueue))
   }
-  const adapters = []
-  const serverAdapter: any = new KoaAdapter()
-  for (let queue of queues) {
-    adapters.push(new BullAdapter(queue))
-  }
-  createBullBoard({
-    queues: adapters,
-    serverAdapter,
-  })
+
+  const serverAdapter = new KoaAdapter()
+  createBullBoard({ queues, serverAdapter })
   serverAdapter.setBasePath(PATH_PREFIX)
   return serverAdapter.registerPlugin()
 }
diff --git a/packages/server/src/automations/index.ts b/packages/server/src/automations/index.ts
index 4ef3210932..5f9ca1aa60 100644
--- a/packages/server/src/automations/index.ts
+++ b/packages/server/src/automations/index.ts
@@ -1,7 +1,6 @@
 import { processEvent } from "./utils"
 import { automationQueue } from "./bullboard"
 import { rebootTrigger } from "./triggers"
-import BullQueue from "bull"
 import { automationsEnabled } from "../features"
 
 export { automationQueue } from "./bullboard"
@@ -25,6 +24,6 @@ export async function init() {
   return promise
 }
 
-export function getQueues(): BullQueue.Queue[] {
-  return [automationQueue]
+export function getQueue() {
+  return automationQueue
 }
diff --git a/packages/server/src/automations/tests/automation.spec.ts b/packages/server/src/automations/tests/automation.spec.ts
index c37c9cc7ce..7cd49f664f 100644
--- a/packages/server/src/automations/tests/automation.spec.ts
+++ b/packages/server/src/automations/tests/automation.spec.ts
@@ -17,11 +17,11 @@ import { basicAutomation } from "../../tests/utilities/structures"
 import { wait } from "../../utilities"
 import { makePartial } from "../../tests/utilities"
 import { cleanInputValues } from "../automationUtils"
-import * as setup from "./utilities"
 import { Automation } from "@budibase/types"
+import TestConfiguration from "../../tests/utilities/TestConfiguration"
 
 describe("Run through some parts of the automations system", () => {
-  let config = setup.getConfig()
+  const config = new TestConfiguration()
 
   beforeAll(async () => {
     await automation.init()
@@ -30,7 +30,7 @@ describe("Run through some parts of the automations system", () => {
 
   afterAll(async () => {
     await automation.shutdown()
-    setup.afterAll()
+    config.end()
   })
 
   it("should be able to init in builder", async () => {
diff --git a/packages/server/src/automations/tests/scenarios/branching.spec.ts b/packages/server/src/automations/tests/branching.spec.ts
similarity index 82%
rename from packages/server/src/automations/tests/scenarios/branching.spec.ts
rename to packages/server/src/automations/tests/branching.spec.ts
index c05ec2f663..bf9b9ce3f8 100644
--- a/packages/server/src/automations/tests/scenarios/branching.spec.ts
+++ b/packages/server/src/automations/tests/branching.spec.ts
@@ -1,11 +1,11 @@
-import * as automation from "../../index"
-import * as setup from "../utilities"
+import * as automation from "../index"
 import { Table, AutomationStatus } from "@budibase/types"
-import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
+import TestConfiguration from "../../tests/utilities/TestConfiguration"
 
 describe("Branching automations", () => {
-  let config = setup.getConfig(),
-    table: Table
+  const config = new TestConfiguration()
+  let table: Table
 
   beforeEach(async () => {
     await automation.init()
@@ -14,7 +14,9 @@ describe("Branching automations", () => {
     await config.createRow()
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should run a multiple nested branching automation", async () => {
     const firstLogId = "11111111-1111-1111-1111-111111111111"
@@ -22,12 +24,8 @@ describe("Branching automations", () => {
     const branch2LogId = "33333333-3333-3333-3333-333333333333"
     const branch2Id = "44444444-4444-4444-4444-444444444444"
 
-    const builder = createAutomationBuilder({
-      name: "Test Trigger with Loop and Create Row",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog(
         { text: "Starting automation" },
         { stepName: "FirstLog", stepId: firstLogId }
@@ -78,19 +76,15 @@ describe("Branching automations", () => {
           },
         },
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[3].outputs.status).toContain("branch1 branch taken")
     expect(results.steps[4].outputs.message).toContain("Branch 1.1")
   })
 
   it("should execute correct branch based on string equality", async () => {
-    const builder = createAutomationBuilder({
-      name: "String Equality Branching",
-    })
-
-    const results = await builder
-      .appAction({ fields: { status: "active" } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .branch({
         activeBranch: {
           steps: stepBuilder => stepBuilder.serverLog({ text: "Active user" }),
@@ -106,7 +100,7 @@ describe("Branching automations", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { status: "active" } })
     expect(results.steps[0].outputs.status).toContain(
       "activeBranch branch taken"
     )
@@ -114,12 +108,8 @@ describe("Branching automations", () => {
   })
 
   it("should handle multiple conditions with AND operator", async () => {
-    const builder = createAutomationBuilder({
-      name: "Multiple AND Conditions Branching",
-    })
-
-    const results = await builder
-      .appAction({ fields: { status: "active", role: "admin" } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .branch({
         activeAdminBranch: {
           steps: stepBuilder =>
@@ -140,18 +130,14 @@ describe("Branching automations", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { status: "active", role: "admin" } })
 
     expect(results.steps[1].outputs.message).toContain("Active admin user")
   })
 
   it("should handle multiple conditions with OR operator", async () => {
-    const builder = createAutomationBuilder({
-      name: "Multiple OR Conditions Branching",
-    })
-
-    const results = await builder
-      .appAction({ fields: { status: "test", role: "user" } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .branch({
         specialBranch: {
           steps: stepBuilder => stepBuilder.serverLog({ text: "Special user" }),
@@ -176,18 +162,14 @@ describe("Branching automations", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { status: "test", role: "user" } })
 
     expect(results.steps[1].outputs.message).toContain("Special user")
   })
 
   it("should stop the branch automation when no conditions are met", async () => {
-    const builder = createAutomationBuilder({
-      name: "Multiple OR Conditions Branching",
-    })
-
-    const results = await builder
-      .appAction({ fields: { status: "test", role: "user" } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .createRow({ row: { name: "Test", tableId: table._id } })
       .branch({
         specialBranch: {
@@ -213,8 +195,7 @@ describe("Branching automations", () => {
           },
         },
       })
-      .serverLog({ text: "Test" })
-      .run()
+      .test({ fields: { status: "test", role: "user" } })
 
     expect(results.steps[1].outputs.status).toEqual(
       AutomationStatus.NO_CONDITION_MET
@@ -223,12 +204,8 @@ describe("Branching automations", () => {
   })
 
   it("evaluate multiple conditions", async () => {
-    const builder = createAutomationBuilder({
-      name: "evaluate multiple conditions",
-    })
-
-    const results = await builder
-      .appAction({ fields: { test_trigger: true } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog({ text: "Starting automation" }, { stepId: "aN6znRYHG" })
       .branch({
         specialBranch: {
@@ -262,18 +239,14 @@ describe("Branching automations", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { test_trigger: true } })
 
     expect(results.steps[2].outputs.message).toContain("Special user")
   })
 
   it("evaluate multiple conditions with interpolated text", async () => {
-    const builder = createAutomationBuilder({
-      name: "evaluate multiple conditions",
-    })
-
-    const results = await builder
-      .appAction({ fields: { test_trigger: true } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog({ text: "Starting automation" }, { stepId: "aN6znRYHG" })
       .branch({
         specialBranch: {
@@ -303,7 +276,7 @@ describe("Branching automations", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { test_trigger: true } })
 
     expect(results.steps[2].outputs.message).toContain("Special user")
   })
diff --git a/packages/server/src/automations/tests/delay.spec.ts b/packages/server/src/automations/tests/delay.spec.ts
deleted file mode 100644
index 7ed5fe7482..0000000000
--- a/packages/server/src/automations/tests/delay.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { runStep, actions, getConfig } from "./utilities"
-import { reset } from "timekeeper"
-
-// need real Date for this test
-reset()
-
-describe("test the delay logic", () => {
-  const config = getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  it("should be able to run the delay", async () => {
-    const time = 100
-    const before = Date.now()
-    await runStep(config, actions.DELAY.stepId, { time: time })
-    const now = Date.now()
-    // divide by two just so that test will always pass as long as there was some sort of delay
-    expect(now - before).toBeGreaterThanOrEqual(time / 2)
-  })
-})
diff --git a/packages/server/src/automations/tests/deleteRow.spec.ts b/packages/server/src/automations/tests/deleteRow.spec.ts
deleted file mode 100644
index cabf590421..0000000000
--- a/packages/server/src/automations/tests/deleteRow.spec.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
-import * as setup from "./utilities"
-
-describe("test the delete row action", () => {
-  let table: any,
-    row: any,
-    config = setup.getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-    table = await config.createTable()
-    row = await config.createRow()
-  })
-
-  afterAll(setup.afterAll)
-
-  it("should be able to run the delete row action", async () => {
-    const builder = createAutomationBuilder({
-      name: "Delete Row Automation",
-    })
-
-    await builder
-      .appAction({ fields: {} })
-      .deleteRow({
-        tableId: table._id,
-        id: row._id,
-        revision: row._rev,
-      })
-      .run()
-
-    await config.api.row.get(table._id, row._id, {
-      status: 404,
-    })
-  })
-
-  it("should check invalid inputs return an error", async () => {
-    const builder = createAutomationBuilder({
-      name: "Invalid Inputs Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
-      .deleteRow({ tableId: "", id: "", revision: "" })
-      .run()
-
-    expect(results.steps[0].outputs.success).toEqual(false)
-  })
-
-  it("should return an error when table doesn't exist", async () => {
-    const builder = createAutomationBuilder({
-      name: "Nonexistent Table Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
-      .deleteRow({
-        tableId: "invalid",
-        id: "invalid",
-        revision: "invalid",
-      })
-      .run()
-
-    expect(results.steps[0].outputs.success).toEqual(false)
-  })
-})
diff --git a/packages/server/src/automations/tests/discord.spec.ts b/packages/server/src/automations/tests/discord.spec.ts
deleted file mode 100644
index 491fe0fb25..0000000000
--- a/packages/server/src/automations/tests/discord.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { getConfig, afterAll as _afterAll, runStep, actions } from "./utilities"
-import nock from "nock"
-
-describe("test the outgoing webhook action", () => {
-  let config = getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  afterAll(_afterAll)
-
-  beforeEach(() => {
-    nock.cleanAll()
-  })
-
-  it("should be able to run the action", async () => {
-    nock("http://www.example.com/").post("/").reply(200, { foo: "bar" })
-    const res = await runStep(config, actions.discord.stepId, {
-      url: "http://www.example.com",
-      username: "joe_bloggs",
-    })
-    expect(res.response.foo).toEqual("bar")
-    expect(res.success).toEqual(true)
-  })
-})
diff --git a/packages/server/src/automations/tests/filter.spec.ts b/packages/server/src/automations/tests/filter.spec.ts
deleted file mode 100644
index 674516517a..0000000000
--- a/packages/server/src/automations/tests/filter.spec.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as setup from "./utilities"
-import { automations } from "@budibase/shared-core"
-
-const FilterConditions = automations.steps.filter.FilterConditions
-
-describe("test the filter logic", () => {
-  const config = setup.getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  async function checkFilter(
-    field: any,
-    condition: string,
-    value: any,
-    pass = true
-  ) {
-    let res = await setup.runStep(config, setup.actions.FILTER.stepId, {
-      field,
-      condition,
-      value,
-    })
-    expect(res.result).toEqual(pass)
-    expect(res.success).toEqual(true)
-  }
-
-  it("should be able test equality", async () => {
-    await checkFilter("hello", FilterConditions.EQUAL, "hello", true)
-    await checkFilter("hello", FilterConditions.EQUAL, "no", false)
-  })
-
-  it("should be able to test greater than", async () => {
-    await checkFilter(10, FilterConditions.GREATER_THAN, 5, true)
-    await checkFilter(10, FilterConditions.GREATER_THAN, 15, false)
-  })
-
-  it("should be able to test less than", async () => {
-    await checkFilter(5, FilterConditions.LESS_THAN, 10, true)
-    await checkFilter(15, FilterConditions.LESS_THAN, 10, false)
-  })
-
-  it("should be able to in-equality", async () => {
-    await checkFilter("hello", FilterConditions.NOT_EQUAL, "no", true)
-    await checkFilter(10, FilterConditions.NOT_EQUAL, 10, false)
-  })
-
-  it("check number coercion", async () => {
-    await checkFilter("10", FilterConditions.GREATER_THAN, "5", true)
-  })
-
-  it("check date coercion", async () => {
-    await checkFilter(
-      new Date().toISOString(),
-      FilterConditions.GREATER_THAN,
-      new Date(-10000).toISOString(),
-      true
-    )
-  })
-
-  it("check objects always false", async () => {
-    await checkFilter({}, FilterConditions.EQUAL, {}, false)
-  })
-})
diff --git a/packages/server/src/automations/tests/loop.spec.ts b/packages/server/src/automations/tests/loop.spec.ts
deleted file mode 100644
index 2199a2a3a0..0000000000
--- a/packages/server/src/automations/tests/loop.spec.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as automation from "../index"
-import * as triggers from "../triggers"
-import { loopAutomation } from "../../tests/utilities/structures"
-import { context } from "@budibase/backend-core"
-import * as setup from "./utilities"
-import { Table, LoopStepType, AutomationResults } from "@budibase/types"
-import * as loopUtils from "../loopUtils"
-import { LoopInput } from "../../definitions/automations"
-
-describe("Attempt to run a basic loop automation", () => {
-  let config = setup.getConfig(),
-    table: Table
-
-  beforeEach(async () => {
-    await automation.init()
-    await config.init()
-    table = await config.createTable()
-    await config.createRow()
-  })
-
-  afterAll(setup.afterAll)
-
-  async function runLoop(loopOpts?: LoopInput): Promise<AutomationResults> {
-    const appId = config.getAppId()
-    return await context.doInAppContext(appId, async () => {
-      const params = { fields: { appId } }
-      const result = await triggers.externalTrigger(
-        loopAutomation(table._id!, loopOpts),
-        params,
-        { getResponses: true }
-      )
-      if ("outputs" in result && !result.outputs.success) {
-        throw new Error("Unable to proceed - failed to return anything.")
-      }
-      return result as AutomationResults
-    })
-  }
-
-  it("attempt to run a basic loop", async () => {
-    const resp = await runLoop()
-    expect(resp.steps[2].outputs.iterations).toBe(1)
-  })
-
-  it("test a loop with a string", async () => {
-    const resp = await runLoop({
-      option: LoopStepType.STRING,
-      binding: "a,b,c",
-    })
-    expect(resp.steps[2].outputs.iterations).toBe(3)
-  })
-
-  it("test a loop with a binding that returns an integer", async () => {
-    const resp = await runLoop({
-      option: LoopStepType.ARRAY,
-      binding: "{{ 1 }}",
-    })
-    expect(resp.steps[2].outputs.iterations).toBe(1)
-  })
-
-  describe("replaceFakeBindings", () => {
-    it("should replace loop bindings in nested objects", () => {
-      const originalStepInput = {
-        schema: {
-          name: {
-            type: "string",
-            constraints: {
-              type: "string",
-              length: { maximum: null },
-              presence: false,
-            },
-            name: "name",
-            display: { type: "Text" },
-          },
-        },
-        row: {
-          tableId: "ta_aaad4296e9f74b12b1b90ef7a84afcad",
-          name: "{{ loop.currentItem.pokemon }}",
-        },
-      }
-
-      const loopStepNumber = 3
-
-      const result = loopUtils.replaceFakeBindings(
-        originalStepInput,
-        loopStepNumber
-      )
-
-      expect(result).toEqual({
-        schema: {
-          name: {
-            type: "string",
-            constraints: {
-              type: "string",
-              length: { maximum: null },
-              presence: false,
-            },
-            name: "name",
-            display: { type: "Text" },
-          },
-        },
-        row: {
-          tableId: "ta_aaad4296e9f74b12b1b90ef7a84afcad",
-          name: "{{ steps.3.currentItem.pokemon }}",
-        },
-      })
-    })
-
-    it("should handle null values in nested objects", () => {
-      const originalStepInput = {
-        nullValue: null,
-        nestedNull: {
-          someKey: null,
-        },
-        validValue: "{{ loop.someValue }}",
-      }
-
-      const loopStepNumber = 2
-
-      const result = loopUtils.replaceFakeBindings(
-        originalStepInput,
-        loopStepNumber
-      )
-
-      expect(result).toEqual({
-        nullValue: null,
-        nestedNull: {
-          someKey: null,
-        },
-        validValue: "{{ steps.2.someValue }}",
-      })
-    })
-
-    it("should handle empty objects and arrays", () => {
-      const originalStepInput = {
-        emptyObject: {},
-        emptyArray: [],
-        nestedEmpty: {
-          emptyObj: {},
-          emptyArr: [],
-        },
-      }
-
-      const loopStepNumber = 1
-
-      const result = loopUtils.replaceFakeBindings(
-        originalStepInput,
-        loopStepNumber
-      )
-
-      expect(result).toEqual(originalStepInput)
-    })
-  })
-})
diff --git a/packages/server/src/automations/tests/make.spec.ts b/packages/server/src/automations/tests/make.spec.ts
deleted file mode 100644
index 414ac676d5..0000000000
--- a/packages/server/src/automations/tests/make.spec.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { getConfig, afterAll, runStep, actions } from "./utilities"
-import nock from "nock"
-
-describe("test the outgoing webhook action", () => {
-  let config = getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  afterAll()
-
-  beforeEach(() => {
-    nock.cleanAll()
-  })
-
-  it("should be able to run the action", async () => {
-    nock("http://www.example.com/").post("/").reply(200, { foo: "bar" })
-    const res = await runStep(config, actions.integromat.stepId, {
-      url: "http://www.example.com",
-    })
-    expect(res.response.foo).toEqual("bar")
-    expect(res.success).toEqual(true)
-  })
-
-  it("should add the payload props when a JSON string is provided", async () => {
-    const payload = {
-      value1: 1,
-      value2: 2,
-      value3: 3,
-      value4: 4,
-      value5: 5,
-      name: "Adam",
-      age: 9,
-    }
-
-    nock("http://www.example.com/")
-      .post("/", payload)
-      .reply(200, { foo: "bar" })
-
-    const res = await runStep(config, actions.integromat.stepId, {
-      body: { value: JSON.stringify(payload) },
-      url: "http://www.example.com",
-    })
-    expect(res.response.foo).toEqual("bar")
-    expect(res.success).toEqual(true)
-  })
-
-  it("should return a 400 if the JSON payload string is malformed", async () => {
-    const res = await runStep(config, actions.integromat.stepId, {
-      body: { value: "{ invalid json }" },
-      url: "http://www.example.com",
-    })
-    expect(res.httpStatus).toEqual(400)
-    expect(res.response).toEqual("Invalid payload JSON")
-    expect(res.success).toEqual(false)
-  })
-})
diff --git a/packages/server/src/automations/tests/n8n.spec.ts b/packages/server/src/automations/tests/n8n.spec.ts
deleted file mode 100644
index 5f27e4323a..0000000000
--- a/packages/server/src/automations/tests/n8n.spec.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { getConfig, afterAll, runStep, actions } from "./utilities"
-import nock from "nock"
-
-describe("test the outgoing webhook action", () => {
-  let config = getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  afterAll()
-
-  beforeEach(() => {
-    nock.cleanAll()
-  })
-
-  it("should be able to run the action and default to 'get'", async () => {
-    nock("http://www.example.com/").get("/").reply(200, { foo: "bar" })
-    const res = await runStep(config, actions.n8n.stepId, {
-      url: "http://www.example.com",
-      body: {
-        test: "IGNORE_ME",
-      },
-    })
-    expect(res.response.foo).toEqual("bar")
-    expect(res.success).toEqual(true)
-  })
-
-  it("should add the payload props when a JSON string is provided", async () => {
-    nock("http://www.example.com/")
-      .post("/", { name: "Adam", age: 9 })
-      .reply(200)
-    const res = await runStep(config, actions.n8n.stepId, {
-      body: {
-        value: JSON.stringify({ name: "Adam", age: 9 }),
-      },
-      method: "POST",
-      url: "http://www.example.com",
-    })
-    expect(res.success).toEqual(true)
-  })
-
-  it("should return a 400 if the JSON payload string is malformed", async () => {
-    const payload = `{ value1 1 }`
-    const res = await runStep(config, actions.n8n.stepId, {
-      value1: "ONE",
-      body: {
-        value: payload,
-      },
-      method: "POST",
-      url: "http://www.example.com",
-    })
-    expect(res.httpStatus).toEqual(400)
-    expect(res.response).toEqual("Invalid payload JSON")
-    expect(res.success).toEqual(false)
-  })
-
-  it("should not append the body if the method is HEAD", async () => {
-    nock("http://www.example.com/")
-      .head("/", body => body === "")
-      .reply(200)
-    const res = await runStep(config, actions.n8n.stepId, {
-      url: "http://www.example.com",
-      method: "HEAD",
-      body: {
-        test: "IGNORE_ME",
-      },
-    })
-    expect(res.success).toEqual(true)
-  })
-})
diff --git a/packages/server/src/automations/tests/openai.spec.ts b/packages/server/src/automations/tests/openai.spec.ts
deleted file mode 100644
index 1985465fc0..0000000000
--- a/packages/server/src/automations/tests/openai.spec.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { getConfig, afterAll as _afterAll } from "./utilities"
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
-import { OpenAI } from "openai"
-import { setEnv as setCoreEnv } from "@budibase/backend-core"
-import * as pro from "@budibase/pro"
-import { Model } from "@budibase/types"
-
-jest.mock("openai", () => ({
-  OpenAI: jest.fn().mockImplementation(() => ({
-    chat: {
-      completions: {
-        create: jest.fn(() => ({
-          choices: [
-            {
-              message: {
-                content: "This is a test",
-              },
-            },
-          ],
-        })),
-      },
-    },
-  })),
-}))
-jest.mock("@budibase/pro", () => ({
-  ...jest.requireActual("@budibase/pro"),
-  ai: {
-    LargeLanguageModel: {
-      forCurrentTenant: jest.fn().mockImplementation(() => ({
-        llm: {},
-        init: jest.fn(),
-        run: jest.fn(),
-      })),
-    },
-  },
-  features: {
-    isAICustomConfigsEnabled: jest.fn(),
-    isBudibaseAIEnabled: jest.fn(),
-  },
-}))
-
-const mockedPro = jest.mocked(pro)
-const mockedOpenAI = OpenAI as jest.MockedClass<typeof OpenAI>
-
-const OPENAI_PROMPT = "What is the meaning of life?"
-
-describe("test the openai action", () => {
-  let config = getConfig()
-  let resetEnv: () => void | undefined
-
-  beforeAll(async () => {
-    setCoreEnv({ SELF_HOSTED: true })
-    await config.init()
-  })
-
-  beforeEach(() => {
-    resetEnv = setCoreEnv({ OPENAI_API_KEY: "abc123" })
-  })
-
-  afterEach(() => {
-    resetEnv()
-    jest.clearAllMocks()
-  })
-
-  afterAll(_afterAll)
-
-  it("should be able to receive a response from ChatGPT given a prompt", async () => {
-    setCoreEnv({ SELF_HOSTED: true })
-
-    const result = await createAutomationBuilder({
-      name: "Test OpenAI Response",
-      config,
-    })
-      .appAction({ fields: {} })
-      .openai(
-        { prompt: OPENAI_PROMPT, model: Model.GPT_4O_MINI },
-        { stepName: "Basic OpenAI Query" }
-      )
-      .run()
-
-    expect(result.steps[0].outputs.response).toEqual("This is a test")
-    expect(result.steps[0].outputs.success).toBeTruthy()
-  })
-
-  it("should present the correct error message when a prompt is not provided", async () => {
-    const result = await createAutomationBuilder({
-      name: "Test OpenAI No Prompt",
-      config,
-    })
-      .appAction({ fields: {} })
-      .openai(
-        { prompt: "", model: Model.GPT_4O_MINI },
-        { stepName: "Empty Prompt Query" }
-      )
-      .run()
-
-    expect(result.steps[0].outputs.response).toEqual(
-      "Budibase OpenAI Automation Failed: No prompt supplied"
-    )
-    expect(result.steps[0].outputs.success).toBeFalsy()
-  })
-
-  it("should present the correct error message when an error is thrown from the createChatCompletion call", async () => {
-    mockedOpenAI.mockImplementation(
-      () =>
-        ({
-          chat: {
-            completions: {
-              create: jest.fn(() => {
-                throw new Error(
-                  "An error occurred while calling createChatCompletion"
-                )
-              }),
-            },
-          },
-        } as any)
-    )
-
-    const result = await createAutomationBuilder({
-      name: "Test OpenAI Error",
-      config,
-    })
-      .appAction({ fields: {} })
-      .openai(
-        { prompt: OPENAI_PROMPT, model: Model.GPT_4O_MINI },
-        { stepName: "Error Producing Query" }
-      )
-      .run()
-
-    expect(result.steps[0].outputs.response).toEqual(
-      "Error: An error occurred while calling createChatCompletion"
-    )
-    expect(result.steps[0].outputs.success).toBeFalsy()
-  })
-
-  it("should ensure that the pro AI module is called when the budibase AI features are enabled", async () => {
-    jest.spyOn(pro.features, "isBudibaseAIEnabled").mockResolvedValue(true)
-    jest.spyOn(pro.features, "isAICustomConfigsEnabled").mockResolvedValue(true)
-
-    const prompt = "What is the meaning of life?"
-    await createAutomationBuilder({
-      name: "Test OpenAI Pro Features",
-      config,
-    })
-      .appAction({ fields: {} })
-      .openai(
-        {
-          model: Model.GPT_4O_MINI,
-          prompt,
-        },
-        { stepName: "Pro Features Query" }
-      )
-      .run()
-
-    expect(pro.ai.LargeLanguageModel.forCurrentTenant).toHaveBeenCalledWith(
-      "gpt-4o-mini"
-    )
-
-    const llmInstance =
-      mockedPro.ai.LargeLanguageModel.forCurrentTenant.mock.results[0].value
-    // init does not appear to be called currently
-    // expect(llmInstance.init).toHaveBeenCalled()
-    expect(llmInstance.run).toHaveBeenCalledWith(prompt)
-  })
-})
diff --git a/packages/server/src/automations/tests/outgoingWebhook.spec.ts b/packages/server/src/automations/tests/outgoingWebhook.spec.ts
deleted file mode 100644
index 995ab24bac..0000000000
--- a/packages/server/src/automations/tests/outgoingWebhook.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { getConfig, afterAll as _afterAll, runStep, actions } from "./utilities"
-import nock from "nock"
-
-describe("test the outgoing webhook action", () => {
-  const config = getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  afterAll(_afterAll)
-
-  beforeEach(() => {
-    nock.cleanAll()
-  })
-
-  it("should be able to run the action", async () => {
-    nock("http://www.example.com")
-      .post("/", { a: 1 })
-      .reply(200, { foo: "bar" })
-    const res = await runStep(config, actions.OUTGOING_WEBHOOK.stepId, {
-      requestMethod: "POST",
-      url: "www.example.com",
-      requestBody: JSON.stringify({ a: 1 }),
-    })
-    expect(res.success).toEqual(true)
-    expect(res.response.foo).toEqual("bar")
-  })
-
-  it("should return an error if something goes wrong in fetch", async () => {
-    const res = await runStep(config, actions.OUTGOING_WEBHOOK.stepId, {
-      requestMethod: "GET",
-      url: "www.invalid.com",
-    })
-    expect(res.success).toEqual(false)
-  })
-})
diff --git a/packages/server/src/automations/tests/scenarios/scenarios.spec.ts b/packages/server/src/automations/tests/scenarios.spec.ts
similarity index 75%
rename from packages/server/src/automations/tests/scenarios/scenarios.spec.ts
rename to packages/server/src/automations/tests/scenarios.spec.ts
index 3e203b7959..3015e75018 100644
--- a/packages/server/src/automations/tests/scenarios/scenarios.spec.ts
+++ b/packages/server/src/automations/tests/scenarios.spec.ts
@@ -1,43 +1,36 @@
-import * as automation from "../../index"
-import * as setup from "../utilities"
+import * as automation from "../index"
 import { LoopStepType, FieldType, Table, Datasource } from "@budibase/types"
-import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
 import {
   DatabaseName,
   datasourceDescribe,
-} from "../../../integrations/tests/utils"
+} from "../../integrations/tests/utils"
 import { Knex } from "knex"
 import { generator } from "@budibase/backend-core/tests"
 import { automations } from "@budibase/shared-core"
+import TestConfiguration from "../../tests/utilities/TestConfiguration"
+import { basicTable } from "../../tests/utilities/structures"
 
 const FilterConditions = automations.steps.filter.FilterConditions
 
 describe("Automation Scenarios", () => {
-  let config = setup.getConfig()
+  const config = new TestConfiguration()
 
   beforeEach(async () => {
     await automation.init()
     await config.init()
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   describe("Row Automations", () => {
     it("should trigger an automation which then creates a row", async () => {
-      const table = await config.createTable()
+      const table = await config.api.table.save(basicTable())
 
-      const builder = createAutomationBuilder({
-        name: "Test Row Save and Create",
-      })
-
-      const results = await builder
-        .rowUpdated(
-          { tableId: table._id! },
-          {
-            row: { name: "Test", description: "TEST" },
-            id: "1234",
-          }
-        )
+      const results = await createAutomationBuilder(config)
+        .onRowUpdated({ tableId: table._id! })
         .createRow({
           row: {
             name: "{{trigger.row.name}}",
@@ -45,7 +38,10 @@ describe("Automation Scenarios", () => {
             tableId: table._id,
           },
         })
-        .run()
+        .test({
+          row: { name: "Test", description: "TEST" },
+          id: "1234",
+        })
 
       expect(results.steps).toHaveLength(1)
 
@@ -58,45 +54,35 @@ describe("Automation Scenarios", () => {
       })
     })
 
-    it("should trigger an automation which querys the database", async () => {
-      const table = await config.createTable()
+    it("should trigger an automation which queries the database", async () => {
+      const table = await config.api.table.save(basicTable())
       const row = {
         name: "Test Row",
         description: "original description",
-        tableId: table._id,
       }
-      await config.createRow(row)
-      await config.createRow(row)
-      const builder = createAutomationBuilder({
-        name: "Test Row Save and Create",
-      })
-
-      const results = await builder
-        .appAction({ fields: {} })
+      await config.api.row.save(table._id!, row)
+      await config.api.row.save(table._id!, row)
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .queryRows({
           tableId: table._id!,
         })
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps).toHaveLength(1)
       expect(results.steps[0].outputs.rows).toHaveLength(2)
     })
 
-    it("should trigger an automation which querys the database then deletes a row", async () => {
-      const table = await config.createTable()
+    it("should trigger an automation which queries the database then deletes a row", async () => {
+      const table = await config.api.table.save(basicTable())
       const row = {
         name: "DFN",
         description: "original description",
-        tableId: table._id,
       }
-      await config.createRow(row)
-      await config.createRow(row)
-      const builder = createAutomationBuilder({
-        name: "Test Row Save and Create",
-      })
-
-      const results = await builder
-        .appAction({ fields: {} })
+      await config.api.row.save(table._id!, row)
+      await config.api.row.save(table._id!, row)
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .queryRows({
           tableId: table._id!,
         })
@@ -107,7 +93,7 @@ describe("Automation Scenarios", () => {
         .queryRows({
           tableId: table._id!,
         })
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps).toHaveLength(3)
       expect(results.steps[1].outputs.success).toBeTruthy()
@@ -115,7 +101,8 @@ describe("Automation Scenarios", () => {
     })
 
     it("should trigger an automation which creates and then updates a row", async () => {
-      const table = await config.createTable({
+      const table = await config.api.table.save({
+        ...basicTable(),
         name: "TestTable",
         type: "table",
         schema: {
@@ -136,12 +123,8 @@ describe("Automation Scenarios", () => {
         },
       })
 
-      const builder = createAutomationBuilder({
-        name: "Test Create and Update Row",
-      })
-
-      const results = await builder
-        .appAction({ fields: {} })
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .createRow(
           {
             row: {
@@ -170,7 +153,7 @@ describe("Automation Scenarios", () => {
           },
           { stepName: "QueryRowsStep" }
         )
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps).toHaveLength(3)
 
@@ -202,20 +185,15 @@ describe("Automation Scenarios", () => {
 
   describe("Name Based Automations", () => {
     it("should fetch and delete a rpw using automation naming", async () => {
-      const table = await config.createTable()
+      const table = await config.api.table.save(basicTable())
       const row = {
         name: "DFN",
         description: "original description",
-        tableId: table._id,
       }
-      await config.createRow(row)
-      await config.createRow(row)
-      const builder = createAutomationBuilder({
-        name: "Test Query and Delete Row",
-      })
-
-      const results = await builder
-        .appAction({ fields: {} })
+      await config.api.row.save(table._id!, row)
+      await config.api.row.save(table._id!, row)
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .queryRows(
           {
             tableId: table._id!,
@@ -229,7 +207,7 @@ describe("Automation Scenarios", () => {
         .queryRows({
           tableId: table._id!,
         })
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps).toHaveLength(3)
       expect(results.steps[1].outputs.success).toBeTruthy()
@@ -240,7 +218,8 @@ describe("Automation Scenarios", () => {
     let table: Table
 
     beforeEach(async () => {
-      table = await config.createTable({
+      table = await config.api.table.save({
+        ...basicTable(),
         name: "TestTable",
         type: "table",
         schema: {
@@ -263,12 +242,8 @@ describe("Automation Scenarios", () => {
     })
 
     it("should stop an automation if the condition is not met", async () => {
-      const builder = createAutomationBuilder({
-        name: "Test Equal",
-      })
-
-      const results = await builder
-        .appAction({ fields: {} })
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .createRow({
           row: {
             name: "Equal Test",
@@ -285,7 +260,7 @@ describe("Automation Scenarios", () => {
           value: 20,
         })
         .serverLog({ text: "Equal condition met" })
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps[2].outputs.success).toBeTrue()
       expect(results.steps[2].outputs.result).toBeFalse()
@@ -293,12 +268,8 @@ describe("Automation Scenarios", () => {
     })
 
     it("should continue the automation if the condition is met", async () => {
-      const builder = createAutomationBuilder({
-        name: "Test Not Equal",
-      })
-
-      const results = await builder
-        .appAction({ fields: {} })
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .createRow({
           row: {
             name: "Not Equal Test",
@@ -315,7 +286,7 @@ describe("Automation Scenarios", () => {
           value: 20,
         })
         .serverLog({ text: "Not Equal condition met" })
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps[2].outputs.success).toBeTrue()
       expect(results.steps[2].outputs.result).toBeTrue()
@@ -364,12 +335,8 @@ describe("Automation Scenarios", () => {
     it.each(testCases)(
       "should pass the filter when condition is $condition",
       async ({ condition, value, rowValue, expectPass }) => {
-        const builder = createAutomationBuilder({
-          name: `Test ${condition}`,
-        })
-
-        const results = await builder
-          .appAction({ fields: {} })
+        const results = await createAutomationBuilder(config)
+          .onAppAction()
           .createRow({
             row: {
               name: `${condition} Test`,
@@ -388,7 +355,7 @@ describe("Automation Scenarios", () => {
           .serverLog({
             text: `${condition} condition ${expectPass ? "passed" : "failed"}`,
           })
-          .run()
+          .test({ fields: {} })
 
         expect(results.steps[2].outputs.result).toBe(expectPass)
         if (expectPass) {
@@ -401,35 +368,24 @@ describe("Automation Scenarios", () => {
   })
 
   it("Check user is passed through from row trigger", async () => {
-    const table = await config.createTable()
+    const table = await config.api.table.save(basicTable())
 
-    const builder = createAutomationBuilder({
-      name: "Test a user is successfully passed from the trigger",
-    })
-
-    const results = await builder
-      .rowUpdated(
-        { tableId: table._id! },
-        {
-          row: { name: "Test", description: "TEST" },
-          id: "1234",
-        }
-      )
+    const results = await createAutomationBuilder(config)
+      .onRowUpdated({ tableId: table._id! })
       .serverLog({ text: "{{ [user].[email] }}" })
-      .run()
+      .test({
+        row: { name: "Test", description: "TEST" },
+        id: "1234",
+      })
 
     expect(results.steps[0].outputs.message).toContain("example.com")
   })
 
   it("Check user is passed through from app trigger", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test a user is successfully passed from the trigger",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog({ text: "{{ [user].[email] }}" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.message).toContain("example.com")
   })
@@ -449,7 +405,8 @@ if (descriptions.length) {
     })
 
     it("should query an external database for some data then insert than into an internal table", async () => {
-      const newTable = await config.createTable({
+      const newTable = await config.api.table.save({
+        ...basicTable(),
         name: "table",
         type: "table",
         schema: {
@@ -484,22 +441,21 @@ if (descriptions.length) {
 
       await client(tableName).insert(rows)
 
-      const query = await setup.saveTestQuery(
-        config,
-        client,
-        tableName,
-        datasource
-      )
-
-      const builder = createAutomationBuilder({
-        name: "Test external query and save",
-        config,
+      const query = await config.api.query.save({
+        name: "test query",
+        datasourceId: datasource._id!,
+        parameters: [],
+        fields: {
+          sql: client(tableName).select("*").toSQL().toNative().sql,
+        },
+        transformer: "",
+        schema: {},
+        readable: true,
+        queryVerb: "read",
       })
 
-      const results = await builder
-        .appAction({
-          fields: {},
-        })
+      const results = await createAutomationBuilder(config)
+        .onAppAction()
         .executeQuery({
           query: {
             queryId: query._id!,
@@ -519,7 +475,7 @@ if (descriptions.length) {
         .queryRows({
           tableId: newTable._id!,
         })
-        .run()
+        .test({ fields: {} })
 
       expect(results.steps).toHaveLength(3)
 
diff --git a/packages/server/src/automations/tests/serverLog.spec.ts b/packages/server/src/automations/tests/serverLog.spec.ts
deleted file mode 100644
index c2c1c385b6..0000000000
--- a/packages/server/src/automations/tests/serverLog.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getConfig, afterAll as _afterAll, runStep, actions } from "./utilities"
-
-describe("test the server log action", () => {
-  let config = getConfig()
-  let inputs: any
-
-  beforeAll(async () => {
-    await config.init()
-    inputs = {
-      text: "log message",
-    }
-  })
-  afterAll(_afterAll)
-
-  it("should be able to log the text", async () => {
-    let res = await runStep(config, actions.SERVER_LOG.stepId, inputs)
-    expect(res.message).toEqual(`App ${config.getAppId()} - ${inputs.text}`)
-    expect(res.success).toEqual(true)
-  })
-})
diff --git a/packages/server/src/automations/tests/bash.spec.ts b/packages/server/src/automations/tests/steps/bash.spec.ts
similarity index 72%
rename from packages/server/src/automations/tests/bash.spec.ts
rename to packages/server/src/automations/tests/steps/bash.spec.ts
index 12ed784268..a2172c3578 100644
--- a/packages/server/src/automations/tests/bash.spec.ts
+++ b/packages/server/src/automations/tests/steps/bash.spec.ts
@@ -1,31 +1,31 @@
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
-import * as automation from "../index"
-import * as setup from "./utilities"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import * as automation from "../../index"
 import { Table } from "@budibase/types"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { basicTable } from "../../../tests/utilities/structures"
 
 describe("Execute Bash Automations", () => {
-  let config = setup.getConfig(),
-    table: Table
+  const config = new TestConfiguration()
+  let table: Table
 
   beforeAll(async () => {
     await automation.init()
     await config.init()
-    table = await config.createTable()
-    await config.createRow({
+    table = await config.api.table.save(basicTable())
+    await config.api.row.save(table._id!, {
       name: "test row",
       description: "test description",
-      tableId: table._id!,
     })
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    automation.shutdown()
+    config.end()
+  })
 
   it("should use trigger data in bash command and pass output to subsequent steps", async () => {
-    const result = await createAutomationBuilder({
-      name: "Bash with Trigger Data",
-      config,
-    })
-      .appAction({ fields: { command: "hello world" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .bash(
         { code: "echo '{{ trigger.fields.command }}'" },
         { stepName: "Echo Command" }
@@ -34,7 +34,7 @@ describe("Execute Bash Automations", () => {
         { text: "Bash output was: {{ steps.[Echo Command].stdout }}" },
         { stepName: "Log Output" }
       )
-      .run()
+      .test({ fields: { command: "hello world" } })
 
     expect(result.steps[0].outputs.stdout).toEqual("hello world\n")
     expect(result.steps[1].outputs.message).toContain(
@@ -43,11 +43,8 @@ describe("Execute Bash Automations", () => {
   })
 
   it("should chain multiple bash commands using previous outputs", async () => {
-    const result = await createAutomationBuilder({
-      name: "Chained Bash Commands",
-      config,
-    })
-      .appAction({ fields: { filename: "testfile.txt" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .bash(
         { code: "echo 'initial content' > {{ trigger.fields.filename }}" },
         { stepName: "Create File" }
@@ -60,18 +57,15 @@ describe("Execute Bash Automations", () => {
         { code: "rm {{ trigger.fields.filename }}" },
         { stepName: "Cleanup" }
       )
-      .run()
+      .test({ fields: { filename: "testfile.txt" } })
 
     expect(result.steps[1].outputs.stdout).toEqual("INITIAL CONTENT\n")
     expect(result.steps[1].outputs.success).toEqual(true)
   })
 
   it("should integrate bash output with row operations", async () => {
-    const result = await createAutomationBuilder({
-      name: "Bash with Row Operations",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -89,7 +83,7 @@ describe("Execute Bash Automations", () => {
         { text: "{{ steps.[Process Row Data].stdout }}" },
         { stepName: "Log Result" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[1].outputs.stdout).toContain(
       "Row data: test row - test description"
@@ -100,11 +94,8 @@ describe("Execute Bash Automations", () => {
   })
 
   it("should handle bash output in conditional logic", async () => {
-    const result = await createAutomationBuilder({
-      name: "Bash with Conditional",
-      config,
-    })
-      .appAction({ fields: { threshold: "5" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .bash(
         { code: "echo $(( {{ trigger.fields.threshold }} + 5 ))" },
         { stepName: "Calculate Value" }
@@ -122,7 +113,7 @@ describe("Execute Bash Automations", () => {
         { text: "Value was {{ steps.[Check Value].value }}" },
         { stepName: "Log Result" }
       )
-      .run()
+      .test({ fields: { threshold: "5" } })
 
     expect(result.steps[0].outputs.stdout).toEqual("10\n")
     expect(result.steps[1].outputs.value).toEqual("high")
@@ -130,17 +121,14 @@ describe("Execute Bash Automations", () => {
   })
 
   it("should handle null values gracefully", async () => {
-    const result = await createAutomationBuilder({
-      name: "Null Bash Input",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .bash(
-        //@ts-ignore
+        // @ts-expect-error - testing null input
         { code: null },
         { stepName: "Null Command" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[0].outputs.stdout).toBe(
       "Budibase bash automation failed: Invalid inputs"
diff --git a/packages/server/src/automations/tests/createRow.spec.ts b/packages/server/src/automations/tests/steps/createRow.spec.ts
similarity index 78%
rename from packages/server/src/automations/tests/createRow.spec.ts
rename to packages/server/src/automations/tests/steps/createRow.spec.ts
index bd78de2217..ec644c2b5e 100644
--- a/packages/server/src/automations/tests/createRow.spec.ts
+++ b/packages/server/src/automations/tests/steps/createRow.spec.ts
@@ -1,7 +1,11 @@
-import * as setup from "./utilities"
-import { basicTableWithAttachmentField } from "../../tests/utilities/structures"
+import {
+  basicTable,
+  basicTableWithAttachmentField,
+} from "../../../tests/utilities/structures"
 import { objectStore } from "@budibase/backend-core"
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { Row, Table } from "@budibase/types"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 
 async function uploadTestFile(filename: string) {
   let bucket = "testbucket"
@@ -10,19 +14,20 @@ async function uploadTestFile(filename: string) {
     filename,
     body: Buffer.from("test data"),
   })
-  let presignedUrl = await objectStore.getPresignedUrl(bucket, filename, 60000)
+  let presignedUrl = objectStore.getPresignedUrl(bucket, filename, 60000)
 
   return presignedUrl
 }
 
 describe("test the create row action", () => {
-  let table: any
-  let row: any
-  let config = setup.getConfig()
+  const config = new TestConfiguration()
+
+  let table: Table
+  let row: Row
 
   beforeEach(async () => {
     await config.init()
-    table = await config.createTable()
+    table = await config.api.table.save(basicTable())
     row = {
       tableId: table._id,
       name: "test",
@@ -30,28 +35,27 @@ describe("test the create row action", () => {
     }
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should be able to run the action", async () => {
-    const result = await createAutomationBuilder({
-      name: "Test Create Row Flow",
-      appId: config.getAppId(),
-      config,
-    })
-      .appAction({ fields: { status: "new" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog({ text: "Starting create row flow" }, { stepName: "StartLog" })
       .createRow({ row }, { stepName: "CreateRow" })
       .serverLog(
         { text: "Row created with ID: {{ stepsByName.CreateRow.row._id }}" },
         { stepName: "CreationLog" }
       )
-      .run()
+      .test({ fields: { status: "new" } })
 
     expect(result.steps[1].outputs.success).toBeDefined()
     expect(result.steps[1].outputs.id).toBeDefined()
     expect(result.steps[1].outputs.revision).toBeDefined()
+
     const gottenRow = await config.api.row.get(
-      table._id,
+      table._id!,
       result.steps[1].outputs.id
     )
     expect(gottenRow.name).toEqual("test")
@@ -62,12 +66,8 @@ describe("test the create row action", () => {
   })
 
   it("should return an error (not throw) when bad info provided", async () => {
-    const result = await createAutomationBuilder({
-      name: "Test Create Row Error Flow",
-      appId: config.getAppId(),
-      config,
-    })
-      .appAction({ fields: { status: "error" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog({ text: "Starting error test flow" }, { stepName: "StartLog" })
       .createRow(
         {
@@ -78,18 +78,14 @@ describe("test the create row action", () => {
         },
         { stepName: "CreateRow" }
       )
-      .run()
+      .test({ fields: { status: "error" } })
 
     expect(result.steps[1].outputs.success).toEqual(false)
   })
 
   it("should check invalid inputs return an error", async () => {
-    const result = await createAutomationBuilder({
-      name: "Test Create Row Invalid Flow",
-      appId: config.getAppId(),
-      config,
-    })
-      .appAction({ fields: { status: "invalid" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog({ text: "Testing invalid input" }, { stepName: "StartLog" })
       .createRow({ row: {} }, { stepName: "CreateRow" })
       .filter({
@@ -101,18 +97,18 @@ describe("test the create row action", () => {
         { text: "This log should not appear" },
         { stepName: "SkippedLog" }
       )
-      .run()
+      .test({ fields: { status: "invalid" } })
 
     expect(result.steps[1].outputs.success).toEqual(false)
     expect(result.steps.length).toBeLessThan(4)
   })
 
   it("should check that an attachment field is sent to storage and parsed", async () => {
-    let attachmentTable = await config.createTable(
+    let attachmentTable = await config.api.table.save(
       basicTableWithAttachmentField()
     )
 
-    let attachmentRow: any = {
+    let attachmentRow: Row = {
       tableId: attachmentTable._id,
     }
 
@@ -126,12 +122,8 @@ describe("test the create row action", () => {
     ]
 
     attachmentRow.file_attachment = attachmentObject
-    const result = await createAutomationBuilder({
-      name: "Test Create Row Attachment Flow",
-      appId: config.getAppId(),
-      config,
-    })
-      .appAction({ fields: { type: "attachment" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog(
         { text: "Processing attachment upload" },
         { stepName: "StartLog" }
@@ -148,7 +140,7 @@ describe("test the create row action", () => {
         },
         { stepName: "UploadLog" }
       )
-      .run()
+      .test({ fields: { type: "attachment" } })
 
     expect(result.steps[1].outputs.success).toEqual(true)
     expect(result.steps[1].outputs.row.file_attachment[0]).toHaveProperty("key")
@@ -165,11 +157,11 @@ describe("test the create row action", () => {
   })
 
   it("should check that an single attachment field is sent to storage and parsed", async () => {
-    let attachmentTable = await config.createTable(
+    let attachmentTable = await config.api.table.save(
       basicTableWithAttachmentField()
     )
 
-    let attachmentRow: any = {
+    let attachmentRow: Row = {
       tableId: attachmentTable._id,
     }
 
@@ -181,12 +173,8 @@ describe("test the create row action", () => {
     }
 
     attachmentRow.single_file_attachment = attachmentObject
-    const result = await createAutomationBuilder({
-      name: "Test Create Row Single Attachment Flow",
-      appId: config.getAppId(),
-      config,
-    })
-      .appAction({ fields: { type: "single-attachment" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog(
         { text: "Processing single attachment" },
         { stepName: "StartLog" }
@@ -221,7 +209,7 @@ describe("test the create row action", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { type: "single-attachment" } })
 
     expect(result.steps[1].outputs.success).toEqual(true)
     expect(result.steps[1].outputs.row.single_file_attachment).toHaveProperty(
@@ -240,11 +228,11 @@ describe("test the create row action", () => {
   })
 
   it("should check that attachment without the correct keys throws an error", async () => {
-    let attachmentTable = await config.createTable(
+    let attachmentTable = await config.api.table.save(
       basicTableWithAttachmentField()
     )
 
-    let attachmentRow: any = {
+    let attachmentRow: Row = {
       tableId: attachmentTable._id,
     }
 
@@ -256,12 +244,8 @@ describe("test the create row action", () => {
     }
 
     attachmentRow.single_file_attachment = attachmentObject
-    const result = await createAutomationBuilder({
-      name: "Test Create Row Invalid Attachment Flow",
-      appId: config.getAppId(),
-      config,
-    })
-      .appAction({ fields: { type: "invalid-attachment" } })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog(
         { text: "Testing invalid attachment keys" },
         { stepName: "StartLog" }
@@ -294,7 +278,7 @@ describe("test the create row action", () => {
           },
         },
       })
-      .run()
+      .test({ fields: { type: "invalid-attachment" } })
 
     expect(result.steps[1].outputs.success).toEqual(false)
     expect(result.steps[1].outputs.response).toEqual(
diff --git a/packages/server/src/automations/tests/cron-automations.spec.ts b/packages/server/src/automations/tests/steps/cron-automations.spec.ts
similarity index 50%
rename from packages/server/src/automations/tests/cron-automations.spec.ts
rename to packages/server/src/automations/tests/steps/cron-automations.spec.ts
index 62c8ccd612..41de957c52 100644
--- a/packages/server/src/automations/tests/cron-automations.spec.ts
+++ b/packages/server/src/automations/tests/steps/cron-automations.spec.ts
@@ -1,8 +1,8 @@
 import tk from "timekeeper"
-import "../../environment"
-import * as automations from "../index"
-import * as setup from "./utilities"
-import { basicCronAutomation } from "../../tests/utilities/structures"
+import "../../../environment"
+import * as automations from "../../index"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 
 const initialTime = Date.now()
 tk.freeze(initialTime)
@@ -10,7 +10,7 @@ tk.freeze(initialTime)
 const oneMinuteInMs = 60 * 1000
 
 describe("cron automations", () => {
-  let config = setup.getConfig()
+  const config = new TestConfiguration()
 
   beforeAll(async () => {
     await automations.init()
@@ -19,26 +19,22 @@ describe("cron automations", () => {
 
   afterAll(async () => {
     await automations.shutdown()
-    setup.afterAll()
+    config.end()
   })
 
   beforeEach(() => {
     tk.freeze(initialTime)
   })
 
-  async function travel(ms: number) {
-    tk.travel(Date.now() + ms)
-  }
-
   it("should initialise the automation timestamp", async () => {
-    const automation = basicCronAutomation(config.appId!, "* * * * *")
-    await config.api.automation.post(automation)
-    await travel(oneMinuteInMs)
+    await createAutomationBuilder(config).onCron({ cron: "* * * * *" }).save()
+
+    tk.travel(Date.now() + oneMinuteInMs)
     await config.publish()
 
-    const automationLogs = await config.getAutomationLogs()
-    expect(automationLogs.data).toHaveLength(1)
-    expect(automationLogs.data).toEqual([
+    const { data } = await config.getAutomationLogs()
+    expect(data).toHaveLength(1)
+    expect(data).toEqual([
       expect.objectContaining({
         trigger: expect.objectContaining({
           outputs: { timestamp: initialTime + oneMinuteInMs },
diff --git a/packages/server/src/automations/tests/steps/delay.spec.ts b/packages/server/src/automations/tests/steps/delay.spec.ts
new file mode 100644
index 0000000000..173beccbda
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/delay.spec.ts
@@ -0,0 +1,29 @@
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+
+describe("test the delay logic", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  it("should be able to run the delay", async () => {
+    const time = 100
+    const before = performance.now()
+
+    await createAutomationBuilder(config)
+      .onAppAction()
+      .delay({ time })
+      .test({ fields: {} })
+
+    const now = performance.now()
+
+    // divide by two just so that test will always pass as long as there was some sort of delay
+    expect(now - before).toBeGreaterThanOrEqual(time / 2)
+  })
+})
diff --git a/packages/server/src/automations/tests/steps/deleteRow.spec.ts b/packages/server/src/automations/tests/steps/deleteRow.spec.ts
new file mode 100644
index 0000000000..8c141f82da
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/deleteRow.spec.ts
@@ -0,0 +1,58 @@
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { Row, Table } from "@budibase/types"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { basicTable } from "../../../tests/utilities/structures"
+
+describe("test the delete row action", () => {
+  const config = new TestConfiguration()
+
+  let table: Table
+  let row: Row
+
+  beforeAll(async () => {
+    await config.init()
+    table = await config.api.table.save(basicTable())
+    row = await config.api.row.save(table._id!, {})
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  it("should be able to run the delete row action", async () => {
+    await createAutomationBuilder(config)
+      .onAppAction()
+      .deleteRow({
+        tableId: table._id!,
+        id: row._id!,
+        revision: row._rev,
+      })
+      .test({ fields: {} })
+
+    await config.api.row.get(table._id!, row._id!, {
+      status: 404,
+    })
+  })
+
+  it("should check invalid inputs return an error", async () => {
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
+      .deleteRow({ tableId: "", id: "", revision: "" })
+      .test({ fields: {} })
+
+    expect(results.steps[0].outputs.success).toEqual(false)
+  })
+
+  it("should return an error when table doesn't exist", async () => {
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
+      .deleteRow({
+        tableId: "invalid",
+        id: "invalid",
+        revision: "invalid",
+      })
+      .test({ fields: {} })
+
+    expect(results.steps[0].outputs.success).toEqual(false)
+  })
+})
diff --git a/packages/server/src/automations/tests/steps/discord.spec.ts b/packages/server/src/automations/tests/steps/discord.spec.ts
new file mode 100644
index 0000000000..9618a0c994
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/discord.spec.ts
@@ -0,0 +1,33 @@
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import nock from "nock"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+
+describe("test the outgoing webhook action", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  beforeEach(() => {
+    nock.cleanAll()
+  })
+
+  it("should be able to run the action", async () => {
+    nock("http://www.example.com/").post("/").reply(200, { foo: "bar" })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .discord({
+        url: "http://www.example.com",
+        username: "joe_bloggs",
+        content: "Hello, world",
+      })
+      .test({ fields: {} })
+    expect(result.steps[0].outputs.response.foo).toEqual("bar")
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+})
diff --git a/packages/server/src/automations/tests/executeQuery.spec.ts b/packages/server/src/automations/tests/steps/executeQuery.spec.ts
similarity index 96%
rename from packages/server/src/automations/tests/executeQuery.spec.ts
rename to packages/server/src/automations/tests/steps/executeQuery.spec.ts
index 2d65be6e58..64dd808b85 100644
--- a/packages/server/src/automations/tests/executeQuery.spec.ts
+++ b/packages/server/src/automations/tests/steps/executeQuery.spec.ts
@@ -1,9 +1,9 @@
 import { Datasource, Query } from "@budibase/types"
-import * as setup from "./utilities"
+import * as setup from "../utilities"
 import {
   DatabaseName,
   datasourceDescribe,
-} from "../../integrations/tests/utils"
+} from "../../../integrations/tests/utils"
 import { Knex } from "knex"
 import { generator } from "@budibase/backend-core/tests"
 
diff --git a/packages/server/src/automations/tests/executeScript.spec.ts b/packages/server/src/automations/tests/steps/executeScript.spec.ts
similarity index 65%
rename from packages/server/src/automations/tests/executeScript.spec.ts
rename to packages/server/src/automations/tests/steps/executeScript.spec.ts
index f5845093bc..117c2341ba 100644
--- a/packages/server/src/automations/tests/executeScript.spec.ts
+++ b/packages/server/src/automations/tests/steps/executeScript.spec.ts
@@ -1,61 +1,52 @@
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
-import * as automation from "../index"
-import * as setup from "./utilities"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import * as automation from "../../index"
 import { Table } from "@budibase/types"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { basicTable } from "../../../tests/utilities/structures"
 
 describe("Execute Script Automations", () => {
-  let config = setup.getConfig(),
-    table: Table
+  const config = new TestConfiguration()
+  let table: Table
 
-  beforeEach(async () => {
+  beforeAll(async () => {
     await automation.init()
     await config.init()
-    table = await config.createTable()
-    await config.createRow()
+    table = await config.api.table.save(basicTable())
+    await config.api.row.save(table._id!, {})
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should execute a basic script and return the result", async () => {
-    const builder = createAutomationBuilder({
-      name: "Basic Script Execution",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .executeScript({ code: "return 2 + 2" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.value).toEqual(4)
   })
 
   it("should access bindings from previous steps", async () => {
-    const builder = createAutomationBuilder({
-      name: "Access Bindings",
-    })
-
-    const results = await builder
-      .appAction({ fields: { data: [1, 2, 3] } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .executeScript(
         {
           code: "return trigger.fields.data.map(x => x * 2)",
         },
         { stepId: "binding-script-step" }
       )
-      .run()
+      .test({ fields: { data: [1, 2, 3] } })
 
     expect(results.steps[0].outputs.value).toEqual([2, 4, 6])
   })
 
   it("should handle script execution errors gracefully", async () => {
-    const builder = createAutomationBuilder({
-      name: "Handle Script Errors",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .executeScript({ code: "return nonexistentVariable.map(x => x)" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.response).toContain(
       "ReferenceError: nonexistentVariable is not defined"
@@ -64,12 +55,8 @@ describe("Execute Script Automations", () => {
   })
 
   it("should handle conditional logic in scripts", async () => {
-    const builder = createAutomationBuilder({
-      name: "Conditional Script Logic",
-    })
-
-    const results = await builder
-      .appAction({ fields: { value: 10 } })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .executeScript({
         code: `
             if (trigger.fields.value > 5) {
@@ -79,18 +66,14 @@ describe("Execute Script Automations", () => {
             }
           `,
       })
-      .run()
+      .test({ fields: { value: 10 } })
 
     expect(results.steps[0].outputs.value).toEqual("Value is greater than 5")
   })
 
   it("should use multiple steps and validate script execution", async () => {
-    const builder = createAutomationBuilder({
-      name: "Multi-Step Script Execution",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .serverLog(
         { text: "Starting multi-step automation" },
         { stepId: "start-log-step" }
@@ -111,7 +94,7 @@ describe("Execute Script Automations", () => {
       .serverLog({
         text: `Final result is {{ steps.ScriptingStep1.value }}`,
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.message).toContain(
       "Starting multi-step automation"
diff --git a/packages/server/src/automations/tests/steps/filter.spec.ts b/packages/server/src/automations/tests/steps/filter.spec.ts
new file mode 100644
index 0000000000..23c191b38d
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/filter.spec.ts
@@ -0,0 +1,71 @@
+import { automations } from "@budibase/shared-core"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+
+const FilterConditions = automations.steps.filter.FilterConditions
+
+function stringToFilterCondition(condition: "==" | "!=" | ">" | "<"): string {
+  switch (condition) {
+    case "==":
+      return FilterConditions.EQUAL
+    case "!=":
+      return FilterConditions.NOT_EQUAL
+    case ">":
+      return FilterConditions.GREATER_THAN
+    case "<":
+      return FilterConditions.LESS_THAN
+  }
+}
+
+type TestCase = [any, "==" | "!=" | ">" | "<", any]
+
+describe("test the filter logic", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  const pass: TestCase[] = [
+    [10, ">", 5],
+    ["10", ">", 5],
+    [10, ">", "5"],
+    ["10", ">", "5"],
+    [10, "==", 10],
+    [10, "<", 15],
+    ["hello", "==", "hello"],
+    ["hello", "!=", "no"],
+    [new Date().toISOString(), ">", new Date(-10000).toISOString()],
+  ]
+  it.each(pass)("should pass %p %p %p", async (field, condition, value) => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .filter({ field, condition: stringToFilterCondition(condition), value })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.result).toEqual(true)
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  const fail: TestCase[] = [
+    [10, ">", 15],
+    [10, "<", 5],
+    [10, "==", 5],
+    ["hello", "==", "no"],
+    ["hello", "!=", "hello"],
+    [{}, "==", {}],
+  ]
+  it.each(fail)("should fail %p %p %p", async (field, condition, value) => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .filter({ field, condition: stringToFilterCondition(condition), value })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.result).toEqual(false)
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+})
diff --git a/packages/server/src/automations/tests/scenarios/looping.spec.ts b/packages/server/src/automations/tests/steps/loop.spec.ts
similarity index 66%
rename from packages/server/src/automations/tests/scenarios/looping.spec.ts
rename to packages/server/src/automations/tests/steps/loop.spec.ts
index 0baa69b3bc..1f985bd504 100644
--- a/packages/server/src/automations/tests/scenarios/looping.spec.ts
+++ b/packages/server/src/automations/tests/steps/loop.spec.ts
@@ -1,44 +1,79 @@
 import * as automation from "../../index"
-import * as setup from "../utilities"
+import * as triggers from "../../triggers"
+import { basicTable, loopAutomation } from "../../../tests/utilities/structures"
+import { context } from "@budibase/backend-core"
 import {
   Table,
   LoopStepType,
-  CreateRowStepOutputs,
+  AutomationResults,
   ServerLogStepOutputs,
+  CreateRowStepOutputs,
   FieldType,
 } from "@budibase/types"
+import * as loopUtils from "../../loopUtils"
+import { LoopInput } from "../../../definitions/automations"
 import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 
-describe("Loop automations", () => {
-  let config = setup.getConfig(),
-    table: Table
+describe("Attempt to run a basic loop automation", () => {
+  const config = new TestConfiguration()
+  let table: Table
 
-  beforeEach(async () => {
-    await automation.init()
+  beforeAll(async () => {
     await config.init()
-    table = await config.createTable()
-    await config.createRow()
+    await automation.init()
   })
 
-  afterAll(setup.afterAll)
+  beforeEach(async () => {
+    table = await config.api.table.save(basicTable())
+    await config.api.row.save(table._id!, {})
+  })
+
+  afterAll(() => {
+    automation.shutdown()
+    config.end()
+  })
+
+  async function runLoop(loopOpts?: LoopInput): Promise<AutomationResults> {
+    const appId = config.getAppId()
+    return await context.doInAppContext(appId, async () => {
+      const params = { fields: { appId } }
+      const result = await triggers.externalTrigger(
+        loopAutomation(table._id!, loopOpts),
+        params,
+        { getResponses: true }
+      )
+      if ("outputs" in result && !result.outputs.success) {
+        throw new Error("Unable to proceed - failed to return anything.")
+      }
+      return result as AutomationResults
+    })
+  }
+
+  it("attempt to run a basic loop", async () => {
+    const resp = await runLoop()
+    expect(resp.steps[2].outputs.iterations).toBe(1)
+  })
+
+  it("test a loop with a string", async () => {
+    const resp = await runLoop({
+      option: LoopStepType.STRING,
+      binding: "a,b,c",
+    })
+    expect(resp.steps[2].outputs.iterations).toBe(3)
+  })
+
+  it("test a loop with a binding that returns an integer", async () => {
+    const resp = await runLoop({
+      option: LoopStepType.ARRAY,
+      binding: "{{ 1 }}",
+    })
+    expect(resp.steps[2].outputs.iterations).toBe(1)
+  })
 
   it("should run an automation with a trigger, loop, and create row step", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Trigger with Loop and Create Row",
-    })
-
-    const results = await builder
-      .rowSaved(
-        { tableId: table._id! },
-        {
-          row: {
-            name: "Trigger Row",
-            description: "This row triggers the automation",
-          },
-          id: "1234",
-          revision: "1",
-        }
-      )
+    const results = await createAutomationBuilder(config)
+      .onRowSaved({ tableId: table._id! })
       .loop({
         option: LoopStepType.ARRAY,
         binding: [1, 2, 3],
@@ -50,7 +85,14 @@ describe("Loop automations", () => {
           tableId: table._id,
         },
       })
-      .run()
+      .test({
+        row: {
+          name: "Trigger Row",
+          description: "This row triggers the automation",
+        },
+        id: "1234",
+        revision: "1",
+      })
 
     expect(results.trigger).toBeDefined()
     expect(results.steps).toHaveLength(1)
@@ -70,22 +112,8 @@ describe("Loop automations", () => {
   })
 
   it("should run an automation where a loop step is between two normal steps to ensure context correctness", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Trigger with Loop and Create Row",
-    })
-
-    const results = await builder
-      .rowSaved(
-        { tableId: table._id! },
-        {
-          row: {
-            name: "Trigger Row",
-            description: "This row triggers the automation",
-          },
-          id: "1234",
-          revision: "1",
-        }
-      )
+    const results = await createAutomationBuilder(config)
+      .onRowSaved({ tableId: table._id! })
       .queryRows({
         tableId: table._id!,
       })
@@ -95,7 +123,14 @@ describe("Loop automations", () => {
       })
       .serverLog({ text: "Message {{loop.currentItem}}" })
       .serverLog({ text: "{{steps.1.rows.0._id}}" })
-      .run()
+      .test({
+        row: {
+          name: "Trigger Row",
+          description: "This row triggers the automation",
+        },
+        id: "1234",
+        revision: "1",
+      })
 
     results.steps[1].outputs.items.forEach(
       (output: ServerLogStepOutputs, index: number) => {
@@ -110,18 +145,14 @@ describe("Loop automations", () => {
   })
 
   it("if an incorrect type is passed to the loop it should return an error", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Loop error",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .loop({
         option: LoopStepType.ARRAY,
         binding: "1, 2, 3",
       })
       .serverLog({ text: "Message {{loop.currentItem}}" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs).toEqual({
       success: false,
@@ -130,19 +161,15 @@ describe("Loop automations", () => {
   })
 
   it("ensure the loop stops if the failure condition is reached", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Loop error",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .loop({
         option: LoopStepType.ARRAY,
         binding: ["test", "test2", "test3"],
         failure: "test2",
       })
       .serverLog({ text: "Message {{loop.currentItem}}" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs).toEqual(
       expect.objectContaining({
@@ -153,12 +180,8 @@ describe("Loop automations", () => {
   })
 
   it("ensure the loop stops if the max iterations are reached", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Loop max iterations",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .loop({
         option: LoopStepType.ARRAY,
         binding: ["test", "test2", "test3"],
@@ -166,18 +189,14 @@ describe("Loop automations", () => {
       })
       .serverLog({ text: "{{loop.currentItem}}" })
       .serverLog({ text: "{{steps.1.iterations}}" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.iterations).toBe(2)
   })
 
   it("should run an automation with loop and max iterations to ensure context correctness further down the tree", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test context down tree with Loop and max iterations",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .loop({
         option: LoopStepType.ARRAY,
         binding: ["test", "test2", "test3"],
@@ -185,28 +204,14 @@ describe("Loop automations", () => {
       })
       .serverLog({ text: "{{loop.currentItem}}" })
       .serverLog({ text: "{{steps.1.iterations}}" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[1].outputs.message).toContain("- 2")
   })
 
   it("should run an automation where a loop is successfully run twice", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Trigger with Loop and Create Row",
-    })
-
-    const results = await builder
-      .rowSaved(
-        { tableId: table._id! },
-        {
-          row: {
-            name: "Trigger Row",
-            description: "This row triggers the automation",
-          },
-          id: "1234",
-          revision: "1",
-        }
-      )
+    const results = await createAutomationBuilder(config)
+      .onRowSaved({ tableId: table._id! })
       .loop({
         option: LoopStepType.ARRAY,
         binding: [1, 2, 3],
@@ -223,7 +228,14 @@ describe("Loop automations", () => {
         binding: "Message 1,Message 2,Message 3",
       })
       .serverLog({ text: "{{loop.currentItem}}" })
-      .run()
+      .test({
+        row: {
+          name: "Trigger Row",
+          description: "This row triggers the automation",
+        },
+        id: "1234",
+        revision: "1",
+      })
 
     expect(results.trigger).toBeDefined()
     expect(results.steps).toHaveLength(2)
@@ -257,12 +269,8 @@ describe("Loop automations", () => {
   })
 
   it("should run an automation where a loop is used twice to ensure context correctness further down the tree", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Trigger with Loop and Create Row",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .loop({
         option: LoopStepType.ARRAY,
         binding: [1, 2, 3],
@@ -275,7 +283,7 @@ describe("Loop automations", () => {
       })
       .serverLog({ text: "{{loop.currentItem}}" })
       .serverLog({ text: "{{steps.3.iterations}}" })
-      .run()
+      .test({ fields: {} })
 
     // We want to ensure that bindings are corr
     expect(results.steps[1].outputs.message).toContain("- 3")
@@ -283,12 +291,8 @@ describe("Loop automations", () => {
   })
 
   it("should use automation names to loop with", async () => {
-    const builder = createAutomationBuilder({
-      name: "Test Trigger with Loop and Create Row",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .loop(
         {
           option: LoopStepType.ARRAY,
@@ -304,7 +308,7 @@ describe("Loop automations", () => {
         { text: "{{steps.FirstLoopLog.iterations}}" },
         { stepName: "FirstLoopIterationLog" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[1].outputs.message).toContain("- 3")
   })
@@ -339,12 +343,8 @@ describe("Loop automations", () => {
 
     await config.api.row.bulkImport(table._id!, { rows })
 
-    const builder = createAutomationBuilder({
-      name: "Test Loop and Update Row",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows({
         tableId: table._id!,
       })
@@ -364,7 +364,7 @@ describe("Loop automations", () => {
       .queryRows({
         tableId: table._id!,
       })
-      .run()
+      .test({ fields: {} })
 
     const expectedRows = [
       { name: "Updated Row 1", value: 1 },
@@ -423,12 +423,8 @@ describe("Loop automations", () => {
 
     await config.api.row.bulkImport(table._id!, { rows })
 
-    const builder = createAutomationBuilder({
-      name: "Test Loop and Update Row",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -451,7 +447,7 @@ describe("Loop automations", () => {
       .queryRows({
         tableId: table._id!,
       })
-      .run()
+      .test({ fields: {} })
 
     const expectedRows = [
       { name: "Updated Row 1", value: 1 },
@@ -510,12 +506,8 @@ describe("Loop automations", () => {
 
     await config.api.row.bulkImport(table._id!, { rows })
 
-    const builder = createAutomationBuilder({
-      name: "Test Loop and Delete Row",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows({
         tableId: table._id!,
       })
@@ -530,10 +522,104 @@ describe("Loop automations", () => {
       .queryRows({
         tableId: table._id!,
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps).toHaveLength(3)
 
     expect(results.steps[2].outputs.rows).toHaveLength(0)
   })
+
+  describe("replaceFakeBindings", () => {
+    it("should replace loop bindings in nested objects", () => {
+      const originalStepInput = {
+        schema: {
+          name: {
+            type: "string",
+            constraints: {
+              type: "string",
+              length: { maximum: null },
+              presence: false,
+            },
+            name: "name",
+            display: { type: "Text" },
+          },
+        },
+        row: {
+          tableId: "ta_aaad4296e9f74b12b1b90ef7a84afcad",
+          name: "{{ loop.currentItem.pokemon }}",
+        },
+      }
+
+      const loopStepNumber = 3
+
+      const result = loopUtils.replaceFakeBindings(
+        originalStepInput,
+        loopStepNumber
+      )
+
+      expect(result).toEqual({
+        schema: {
+          name: {
+            type: "string",
+            constraints: {
+              type: "string",
+              length: { maximum: null },
+              presence: false,
+            },
+            name: "name",
+            display: { type: "Text" },
+          },
+        },
+        row: {
+          tableId: "ta_aaad4296e9f74b12b1b90ef7a84afcad",
+          name: "{{ steps.3.currentItem.pokemon }}",
+        },
+      })
+    })
+
+    it("should handle null values in nested objects", () => {
+      const originalStepInput = {
+        nullValue: null,
+        nestedNull: {
+          someKey: null,
+        },
+        validValue: "{{ loop.someValue }}",
+      }
+
+      const loopStepNumber = 2
+
+      const result = loopUtils.replaceFakeBindings(
+        originalStepInput,
+        loopStepNumber
+      )
+
+      expect(result).toEqual({
+        nullValue: null,
+        nestedNull: {
+          someKey: null,
+        },
+        validValue: "{{ steps.2.someValue }}",
+      })
+    })
+
+    it("should handle empty objects and arrays", () => {
+      const originalStepInput = {
+        emptyObject: {},
+        emptyArray: [],
+        nestedEmpty: {
+          emptyObj: {},
+          emptyArr: [],
+        },
+      }
+
+      const loopStepNumber = 1
+
+      const result = loopUtils.replaceFakeBindings(
+        originalStepInput,
+        loopStepNumber
+      )
+
+      expect(result).toEqual(originalStepInput)
+    })
+  })
 })
diff --git a/packages/server/src/automations/tests/steps/make.spec.ts b/packages/server/src/automations/tests/steps/make.spec.ts
new file mode 100644
index 0000000000..bbc0c3791a
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/make.spec.ts
@@ -0,0 +1,74 @@
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import nock from "nock"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+
+describe("test the outgoing webhook action", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  beforeEach(() => {
+    nock.cleanAll()
+  })
+
+  it("should be able to run the action", async () => {
+    nock("http://www.example.com/").post("/").reply(200, { foo: "bar" })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .make({
+        url: "http://www.example.com",
+        body: null,
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.response.foo).toEqual("bar")
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  it("should add the payload props when a JSON string is provided", async () => {
+    const payload = {
+      value1: 1,
+      value2: 2,
+      value3: 3,
+      value4: 4,
+      value5: 5,
+      name: "Adam",
+      age: 9,
+    }
+
+    nock("http://www.example.com/")
+      .post("/", payload)
+      .reply(200, { foo: "bar" })
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .make({
+        body: { value: JSON.stringify(payload) },
+        url: "http://www.example.com",
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.response.foo).toEqual("bar")
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  it("should return a 400 if the JSON payload string is malformed", async () => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .make({
+        body: { value: "{ invalid json }" },
+        url: "http://www.example.com",
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.httpStatus).toEqual(400)
+    expect(result.steps[0].outputs.response).toEqual("Invalid payload JSON")
+    expect(result.steps[0].outputs.success).toEqual(false)
+  })
+})
diff --git a/packages/server/src/automations/tests/steps/n8n.spec.ts b/packages/server/src/automations/tests/steps/n8n.spec.ts
new file mode 100644
index 0000000000..4ee3123d98
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/n8n.spec.ts
@@ -0,0 +1,88 @@
+import TestConfiguration from "../../..//tests/utilities/TestConfiguration"
+import nock from "nock"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { HttpMethod } from "@budibase/types"
+
+describe("test the outgoing webhook action", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  beforeEach(() => {
+    nock.cleanAll()
+  })
+
+  it("should be able to run the action and default to 'get'", async () => {
+    nock("http://www.example.com/").get("/").reply(200, { foo: "bar" })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .n8n({
+        url: "http://www.example.com",
+        body: { test: "IGNORE_ME" },
+        authorization: "",
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.response).toEqual({ foo: "bar" })
+    expect(result.steps[0].outputs.httpStatus).toEqual(200)
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  it("should add the payload props when a JSON string is provided", async () => {
+    nock("http://www.example.com/")
+      .post("/", { name: "Adam", age: 9 })
+      .reply(200)
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .n8n({
+        url: "http://www.example.com",
+        body: { value: JSON.stringify({ name: "Adam", age: 9 }) },
+        method: HttpMethod.POST,
+        authorization: "",
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  it("should return a 400 if the JSON payload string is malformed", async () => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .n8n({
+        url: "http://www.example.com",
+        body: { value: "{ value1 1 }" },
+        method: HttpMethod.POST,
+        authorization: "",
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.httpStatus).toEqual(400)
+    expect(result.steps[0].outputs.response).toEqual("Invalid payload JSON")
+    expect(result.steps[0].outputs.success).toEqual(false)
+  })
+
+  it("should not append the body if the method is HEAD", async () => {
+    nock("http://www.example.com/")
+      .head("/", body => body === "")
+      .reply(200)
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .n8n({
+        url: "http://www.example.com",
+        method: HttpMethod.HEAD,
+        body: { test: "IGNORE_ME" },
+        authorization: "",
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+})
diff --git a/packages/server/src/automations/tests/steps/openai.spec.ts b/packages/server/src/automations/tests/steps/openai.spec.ts
new file mode 100644
index 0000000000..d5f002571d
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/openai.spec.ts
@@ -0,0 +1,119 @@
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { setEnv as setCoreEnv } from "@budibase/backend-core"
+import { Model, MonthlyQuotaName, QuotaUsageType } from "@budibase/types"
+import TestConfiguration from "../../..//tests/utilities/TestConfiguration"
+import {
+  mockChatGPTError,
+  mockChatGPTResponse,
+} from "../../../tests/utilities/mocks/openai"
+import nock from "nock"
+import { mocks } from "@budibase/backend-core/tests"
+import { quotas } from "@budibase/pro"
+
+describe("test the openai action", () => {
+  const config = new TestConfiguration()
+  let resetEnv: () => void | undefined
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  beforeEach(() => {
+    resetEnv = setCoreEnv({ SELF_HOSTED: true, OPENAI_API_KEY: "abc123" })
+  })
+
+  afterEach(() => {
+    resetEnv()
+    jest.clearAllMocks()
+    nock.cleanAll()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  const getAIUsage = async () => {
+    const { total } = await config.doInContext(config.getProdAppId(), () =>
+      quotas.getCurrentUsageValues(
+        QuotaUsageType.MONTHLY,
+        MonthlyQuotaName.BUDIBASE_AI_CREDITS
+      )
+    )
+    return total
+  }
+
+  const expectAIUsage = async <T>(expected: number, f: () => Promise<T>) => {
+    const before = await getAIUsage()
+    const result = await f()
+    const after = await getAIUsage()
+    expect(after - before).toEqual(expected)
+    return result
+  }
+
+  it("should be able to receive a response from ChatGPT given a prompt", async () => {
+    mockChatGPTResponse("This is a test")
+
+    // The AI usage is 0 because the AI feature is disabled by default, which
+    // means it goes through the "legacy" path which requires you to set your
+    // own API key. We don't count this against your quota.
+    const result = await expectAIUsage(0, () =>
+      createAutomationBuilder(config)
+        .onAppAction()
+        .openai({ prompt: "Hello, world", model: Model.GPT_4O_MINI })
+        .test({ fields: {} })
+    )
+
+    expect(result.steps[0].outputs.response).toEqual("This is a test")
+    expect(result.steps[0].outputs.success).toBeTruthy()
+  })
+
+  it("should present the correct error message when a prompt is not provided", async () => {
+    const result = await expectAIUsage(0, () =>
+      createAutomationBuilder(config)
+        .onAppAction()
+        .openai({ prompt: "", model: Model.GPT_4O_MINI })
+        .test({ fields: {} })
+    )
+
+    expect(result.steps[0].outputs.response).toEqual(
+      "Budibase OpenAI Automation Failed: No prompt supplied"
+    )
+    expect(result.steps[0].outputs.success).toBeFalsy()
+  })
+
+  it("should present the correct error message when an error is thrown from the createChatCompletion call", async () => {
+    mockChatGPTError()
+
+    const result = await expectAIUsage(0, () =>
+      createAutomationBuilder(config)
+        .onAppAction()
+        .openai({ prompt: "Hello, world", model: Model.GPT_4O_MINI })
+        .test({ fields: {} })
+    )
+
+    expect(result.steps[0].outputs.response).toEqual(
+      "Error: 500 Internal Server Error"
+    )
+    expect(result.steps[0].outputs.success).toBeFalsy()
+  })
+
+  it("should ensure that the pro AI module is called when the budibase AI features are enabled", async () => {
+    mocks.licenses.useBudibaseAI()
+    mocks.licenses.useAICustomConfigs()
+
+    mockChatGPTResponse("This is a test")
+
+    // We expect a non-0 AI usage here because it goes through the @budibase/pro
+    // path, because we've enabled Budibase AI. The exact value depends on a
+    // calculation we use to approximate cost. This uses Budibase's OpenAI API
+    // key, so we charge users for it.
+    const result = await expectAIUsage(14, () =>
+      createAutomationBuilder(config)
+        .onAppAction()
+        .openai({ model: Model.GPT_4O_MINI, prompt: "Hello, world" })
+        .test({ fields: {} })
+    )
+
+    expect(result.steps[0].outputs.response).toEqual("This is a test")
+  })
+})
diff --git a/packages/server/src/automations/tests/steps/outgoingWebhook.spec.ts b/packages/server/src/automations/tests/steps/outgoingWebhook.spec.ts
new file mode 100644
index 0000000000..85ccfb8eac
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/outgoingWebhook.spec.ts
@@ -0,0 +1,53 @@
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import nock from "nock"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { RequestType } from "@budibase/types"
+
+describe("test the outgoing webhook action", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  beforeEach(() => {
+    nock.cleanAll()
+  })
+
+  it("should be able to run the action", async () => {
+    nock("http://www.example.com")
+      .post("/", { a: 1 })
+      .reply(200, { foo: "bar" })
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .outgoingWebhook({
+        requestMethod: RequestType.POST,
+        url: "http://www.example.com",
+        requestBody: JSON.stringify({ a: 1 }),
+        headers: {},
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.success).toEqual(true)
+    expect(result.steps[0].outputs.httpStatus).toEqual(200)
+    expect(result.steps[0].outputs.response.foo).toEqual("bar")
+  })
+
+  it("should return an error if something goes wrong in fetch", async () => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .outgoingWebhook({
+        requestMethod: RequestType.GET,
+        url: "www.invalid.com",
+        requestBody: "",
+        headers: {},
+      })
+      .test({ fields: {} })
+    expect(result.steps[0].outputs.success).toEqual(false)
+  })
+})
diff --git a/packages/server/src/automations/tests/queryRows.spec.ts b/packages/server/src/automations/tests/steps/queryRows.spec.ts
similarity index 73%
rename from packages/server/src/automations/tests/queryRows.spec.ts
rename to packages/server/src/automations/tests/steps/queryRows.spec.ts
index 6ec7b7abfb..f6d756e770 100644
--- a/packages/server/src/automations/tests/queryRows.spec.ts
+++ b/packages/server/src/automations/tests/steps/queryRows.spec.ts
@@ -1,37 +1,35 @@
 import { EmptyFilterOption, SortOrder, Table } from "@budibase/types"
-import * as setup from "./utilities"
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
-import * as automation from "../index"
-import { basicTable } from "../../tests/utilities/structures"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import * as automation from "../../index"
+import { basicTable } from "../../../tests/utilities/structures"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 
 const NAME = "Test"
 
 describe("Test a query step automation", () => {
+  const config = new TestConfiguration()
   let table: Table
-  let config = setup.getConfig()
 
   beforeAll(async () => {
     await automation.init()
     await config.init()
-    table = await config.createTable()
+    table = await config.api.table.save(basicTable())
 
     const row = {
       name: NAME,
       description: "original description",
-      tableId: table._id,
     }
-    await config.createRow(row)
-    await config.createRow(row)
+    await config.api.row.save(table._id!, row)
+    await config.api.row.save(table._id!, row)
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should be able to run the query step", async () => {
-    const result = await createAutomationBuilder({
-      name: "Basic Query Test",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -46,7 +44,7 @@ describe("Test a query step automation", () => {
         },
         { stepName: "Query All Rows" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
@@ -55,11 +53,8 @@ describe("Test a query step automation", () => {
   })
 
   it("Returns all rows when onEmptyFilter has no value and no filters are passed", async () => {
-    const result = await createAutomationBuilder({
-      name: "Empty Filter Test",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -70,7 +65,7 @@ describe("Test a query step automation", () => {
         },
         { stepName: "Query With Empty Filter" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
@@ -79,11 +74,8 @@ describe("Test a query step automation", () => {
   })
 
   it("Returns no rows when onEmptyFilter is RETURN_NONE and theres no filters", async () => {
-    const result = await createAutomationBuilder({
-      name: "Return None Test",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -96,7 +88,7 @@ describe("Test a query step automation", () => {
         },
         { stepName: "Query With Return None" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
@@ -104,11 +96,8 @@ describe("Test a query step automation", () => {
   })
 
   it("Returns no rows when onEmptyFilters RETURN_NONE and a filter is passed with a null value", async () => {
-    const result = await createAutomationBuilder({
-      name: "Null Filter Test",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -125,7 +114,7 @@ describe("Test a query step automation", () => {
         },
         { stepName: "Query With Null Filter" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
@@ -133,11 +122,8 @@ describe("Test a query step automation", () => {
   })
 
   it("Returns rows when onEmptyFilter is RETURN_ALL and no filter is passed", async () => {
-    const result = await createAutomationBuilder({
-      name: "Return All Test",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: table._id!,
@@ -149,7 +135,7 @@ describe("Test a query step automation", () => {
         },
         { stepName: "Query With Return All" }
       )
-      .run()
+      .test({ fields: {} })
 
     expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
@@ -157,19 +143,15 @@ describe("Test a query step automation", () => {
   })
 
   it("return rows when querying a table with a space in the name", async () => {
-    const tableWithSpaces = await config.createTable({
+    const tableWithSpaces = await config.api.table.save({
       ...basicTable(),
       name: "table with spaces",
     })
-    await config.createRow({
+    await config.api.row.save(tableWithSpaces._id!, {
       name: NAME,
-      tableId: tableWithSpaces._id,
     })
-    const result = await createAutomationBuilder({
-      name: "Return All Test",
-      config,
-    })
-      .appAction({ fields: {} })
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
       .queryRows(
         {
           tableId: tableWithSpaces._id!,
@@ -178,7 +160,7 @@ describe("Test a query step automation", () => {
         },
         { stepName: "Query table with spaces" }
       )
-      .run()
+      .test({ fields: {} })
     expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
     expect(result.steps[0].outputs.rows.length).toBe(1)
diff --git a/packages/server/src/automations/tests/sendSmtpEmail.spec.ts b/packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts
similarity index 84%
rename from packages/server/src/automations/tests/sendSmtpEmail.spec.ts
rename to packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts
index 2977e8d64f..6ab0f32b65 100644
--- a/packages/server/src/automations/tests/sendSmtpEmail.spec.ts
+++ b/packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts
@@ -1,6 +1,7 @@
-import * as workerRequests from "../../utilities/workerRequests"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import * as workerRequests from "../../../utilities/workerRequests"
 
-jest.mock("../../utilities/workerRequests", () => ({
+jest.mock("../../../utilities/workerRequests", () => ({
   sendSmtpEmail: jest.fn(),
 }))
 
@@ -18,16 +19,18 @@ function generateResponse(to: string, from: string) {
   }
 }
 
-import * as setup from "./utilities"
+import * as setup from "../utilities"
 
 describe("test the outgoing webhook action", () => {
-  let inputs
-  let config = setup.getConfig()
+  const config = new TestConfiguration()
+
   beforeAll(async () => {
     await config.init()
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should be able to run the action", async () => {
     jest
@@ -42,7 +45,7 @@ describe("test the outgoing webhook action", () => {
       location: "location",
       url: "url",
     }
-    inputs = {
+    const inputs = {
       to: "user1@example.com",
       from: "admin@example.com",
       subject: "hello",
diff --git a/packages/server/src/automations/tests/steps/serverLog.spec.ts b/packages/server/src/automations/tests/steps/serverLog.spec.ts
new file mode 100644
index 0000000000..82f097d0da
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/serverLog.spec.ts
@@ -0,0 +1,25 @@
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+
+describe("test the server log action", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  it("should be able to log the text", async () => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .serverLog({ text: "Hello World" })
+      .test({ fields: {} })
+    expect(result.steps[0].outputs.message).toEqual(
+      `App ${config.getAppId()} - Hello World`
+    )
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+})
diff --git a/packages/server/src/automations/tests/steps/triggerAutomationRun.spec.ts b/packages/server/src/automations/tests/steps/triggerAutomationRun.spec.ts
new file mode 100644
index 0000000000..8d4a29c2b6
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/triggerAutomationRun.spec.ts
@@ -0,0 +1,52 @@
+import * as automation from "../../index"
+import env from "../../../environment"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+
+describe("Test triggering an automation from another automation", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await automation.init()
+    await config.init()
+  })
+
+  afterAll(async () => {
+    await automation.shutdown()
+    config.end()
+  })
+
+  it("should trigger an other server log automation", async () => {
+    const { automation } = await createAutomationBuilder(config)
+      .onAppAction()
+      .serverLog({ text: "Hello World" })
+      .save()
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .triggerAutomationRun({
+        automation: {
+          automationId: automation._id!,
+        },
+        timeout: env.getDefaults().AUTOMATION_THREAD_TIMEOUT,
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.success).toBe(true)
+  })
+
+  it("should fail gracefully if the automation id is incorrect", async () => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .triggerAutomationRun({
+        automation: {
+          // @ts-expect-error - incorrect on purpose
+          automationId: null,
+        },
+        timeout: env.getDefaults().AUTOMATION_THREAD_TIMEOUT,
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.success).toBe(false)
+  })
+})
diff --git a/packages/server/src/automations/tests/updateRow.spec.ts b/packages/server/src/automations/tests/steps/updateRow.spec.ts
similarity index 79%
rename from packages/server/src/automations/tests/updateRow.spec.ts
rename to packages/server/src/automations/tests/steps/updateRow.spec.ts
index 45f78826f6..a2f1825099 100644
--- a/packages/server/src/automations/tests/updateRow.spec.ts
+++ b/packages/server/src/automations/tests/steps/updateRow.spec.ts
@@ -8,15 +8,16 @@ import {
   Table,
   TableSourceType,
 } from "@budibase/types"
-import { createAutomationBuilder } from "./utilities/AutomationTestBuilder"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 
-import * as setup from "./utilities"
 import * as uuid from "uuid"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 
 describe("test the update row action", () => {
-  let table: Table,
-    row: Row,
-    config = setup.getConfig()
+  const config = new TestConfiguration()
+
+  let table: Table
+  let row: Row
 
   beforeAll(async () => {
     await config.init()
@@ -24,15 +25,13 @@ describe("test the update row action", () => {
     row = await config.createRow()
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should be able to run the update row action", async () => {
-    const builder = createAutomationBuilder({
-      name: "Update Row Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .updateRow({
         rowId: row._id!,
         row: {
@@ -42,7 +41,7 @@ describe("test the update row action", () => {
         },
         meta: {},
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.success).toEqual(true)
     const updatedRow = await config.api.row.get(
@@ -54,31 +53,23 @@ describe("test the update row action", () => {
   })
 
   it("should check invalid inputs return an error", async () => {
-    const builder = createAutomationBuilder({
-      name: "Invalid Inputs Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .updateRow({ meta: {}, row: {}, rowId: "" })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.success).toEqual(false)
   })
 
   it("should return an error when table doesn't exist", async () => {
-    const builder = createAutomationBuilder({
-      name: "Nonexistent Table Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .updateRow({
         row: { _id: "invalid" },
         rowId: "invalid",
         meta: {},
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.success).toEqual(false)
   })
@@ -115,12 +106,8 @@ describe("test the update row action", () => {
       user2: [{ _id: user2._id }],
     })
 
-    const builder = createAutomationBuilder({
-      name: "Link Preservation Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .updateRow({
         rowId: row._id!,
         row: {
@@ -132,7 +119,7 @@ describe("test the update row action", () => {
         },
         meta: {},
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.success).toEqual(true)
 
@@ -173,12 +160,8 @@ describe("test the update row action", () => {
       user2: [{ _id: user2._id }],
     })
 
-    const builder = createAutomationBuilder({
-      name: "Link Overwrite Automation",
-    })
-
-    const results = await builder
-      .appAction({ fields: {} })
+    const results = await createAutomationBuilder(config)
+      .onAppAction()
       .updateRow({
         rowId: row._id!,
         row: {
@@ -196,7 +179,7 @@ describe("test the update row action", () => {
           },
         },
       })
-      .run()
+      .test({ fields: {} })
 
     expect(results.steps[0].outputs.success).toEqual(true)
 
diff --git a/packages/server/src/automations/tests/steps/zapier.spec.ts b/packages/server/src/automations/tests/steps/zapier.spec.ts
new file mode 100644
index 0000000000..e6b5417563
--- /dev/null
+++ b/packages/server/src/automations/tests/steps/zapier.spec.ts
@@ -0,0 +1,72 @@
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import nock from "nock"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+
+describe("test the outgoing webhook action", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  beforeEach(() => {
+    nock.cleanAll()
+  })
+
+  it("should be able to run the action", async () => {
+    nock("http://www.example.com/").post("/").reply(200, { foo: "bar" })
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .zapier({ url: "http://www.example.com", body: null })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.response.foo).toEqual("bar")
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  it("should add the payload props when a JSON string is provided", async () => {
+    const payload = {
+      value1: 1,
+      value2: 2,
+      value3: 3,
+      value4: 4,
+      value5: 5,
+      name: "Adam",
+      age: 9,
+    }
+
+    nock("http://www.example.com/")
+      .post("/", { ...payload, platform: "budibase" })
+      .reply(200, { foo: "bar" })
+
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .zapier({
+        url: "http://www.example.com",
+        body: { value: JSON.stringify(payload) },
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.response.foo).toEqual("bar")
+    expect(result.steps[0].outputs.success).toEqual(true)
+  })
+
+  it("should return a 400 if the JSON payload string is malformed", async () => {
+    const result = await createAutomationBuilder(config)
+      .onAppAction()
+      .zapier({
+        url: "http://www.example.com",
+        body: { value: "{ invalid json }" },
+      })
+      .test({ fields: {} })
+
+    expect(result.steps[0].outputs.success).toEqual(false)
+    expect(result.steps[0].outputs.response).toEqual("Invalid payload JSON")
+    expect(result.steps[0].outputs.httpStatus).toEqual(400)
+  })
+})
diff --git a/packages/server/src/automations/tests/triggerAutomationRun.spec.ts b/packages/server/src/automations/tests/triggerAutomationRun.spec.ts
deleted file mode 100644
index e4d93d200f..0000000000
--- a/packages/server/src/automations/tests/triggerAutomationRun.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-jest.spyOn(global.console, "error")
-
-import * as setup from "./utilities"
-import * as automation from "../index"
-import { serverLogAutomation } from "../../tests/utilities/structures"
-import env from "../../environment"
-
-describe("Test triggering an automation from another automation", () => {
-  let config = setup.getConfig()
-
-  beforeAll(async () => {
-    await automation.init()
-    await config.init()
-  })
-
-  afterAll(async () => {
-    await automation.shutdown()
-    setup.afterAll()
-  })
-
-  it("should trigger an other server log automation", async () => {
-    let automation = serverLogAutomation()
-    let newAutomation = await config.createAutomation(automation)
-
-    const inputs: any = {
-      automation: {
-        automationId: newAutomation._id,
-        timeout: env.getDefaults().AUTOMATION_THREAD_TIMEOUT,
-      },
-    }
-    const res = await setup.runStep(
-      config,
-      setup.actions.TRIGGER_AUTOMATION_RUN.stepId,
-      inputs
-    )
-    // Check if the SERVER_LOG step was successful
-    expect(res.value[1].outputs.success).toBe(true)
-  })
-
-  it("should fail gracefully if the automation id is incorrect", async () => {
-    const inputs: any = {
-      automation: {
-        automationId: null,
-        timeout: env.getDefaults().AUTOMATION_THREAD_TIMEOUT,
-      },
-    }
-    const res = await setup.runStep(
-      config,
-      setup.actions.TRIGGER_AUTOMATION_RUN.stepId,
-      inputs
-    )
-    expect(res.success).toBe(false)
-  })
-})
diff --git a/packages/server/src/automations/tests/triggers/cron.spec.ts b/packages/server/src/automations/tests/triggers/cron.spec.ts
new file mode 100644
index 0000000000..28ef49e5f5
--- /dev/null
+++ b/packages/server/src/automations/tests/triggers/cron.spec.ts
@@ -0,0 +1,62 @@
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { getQueue } from "../.."
+import { Job } from "bull"
+
+describe("cron trigger", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  it("should queue a Bull cron job", async () => {
+    const queue = getQueue()
+    expect(await queue.getCompletedCount()).toEqual(0)
+
+    const jobPromise = new Promise<Job>(resolve => {
+      queue.on("completed", async job => {
+        resolve(job)
+      })
+    })
+
+    await createAutomationBuilder(config)
+      .onCron({ cron: "* * * * *" })
+      .serverLog({
+        text: "Hello, world!",
+      })
+      .save()
+
+    await config.api.application.publish(config.getAppId())
+
+    expect(await queue.getCompletedCount()).toEqual(1)
+
+    const job = await jobPromise
+    const repeat = job.opts?.repeat
+    if (!repeat || !("cron" in repeat)) {
+      throw new Error("Expected cron repeat")
+    }
+    expect(repeat.cron).toEqual("* * * * *")
+  })
+
+  it("should fail if the cron expression is invalid", async () => {
+    await createAutomationBuilder(config)
+      .onCron({ cron: "* * * * * *" })
+      .serverLog({
+        text: "Hello, world!",
+      })
+      .save()
+
+    await config.api.application.publish(config.getAppId(), {
+      status: 500,
+      body: {
+        message:
+          'Deployment Failed: Invalid automation CRON "* * * * * *" - Expected 5 values, but got 6.',
+      },
+    })
+  })
+})
diff --git a/packages/server/src/automations/tests/scenarios/webhook.spec.ts b/packages/server/src/automations/tests/triggers/webhook.spec.ts
similarity index 70%
rename from packages/server/src/automations/tests/scenarios/webhook.spec.ts
rename to packages/server/src/automations/tests/triggers/webhook.spec.ts
index cb15a96824..664812f860 100644
--- a/packages/server/src/automations/tests/scenarios/webhook.spec.ts
+++ b/packages/server/src/automations/tests/triggers/webhook.spec.ts
@@ -1,22 +1,18 @@
-import * as automation from "../../index"
-import * as setup from "../utilities"
 import { Table, Webhook, WebhookActionType } from "@budibase/types"
 import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 import { mocks } from "@budibase/backend-core/tests"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 
 mocks.licenses.useSyncAutomations()
 
 describe("Branching automations", () => {
-  let config = setup.getConfig(),
-    table: Table,
-    webhook: Webhook
+  const config = new TestConfiguration()
+  let table: Table
+  let webhook: Webhook
 
-  async function createWebhookAutomation(testName: string) {
-    const builder = createAutomationBuilder({
-      name: testName,
-    })
-    const automation = await builder
-      .webhook({ fields: { parameter: "string" } })
+  async function createWebhookAutomation() {
+    const { automation } = await createAutomationBuilder(config)
+      .onWebhook({ fields: { parameter: "string" } })
       .createRow({
         row: { tableId: table._id!, name: "{{ trigger.parameter }}" },
       })
@@ -40,17 +36,16 @@ describe("Branching automations", () => {
   }
 
   beforeEach(async () => {
-    await automation.init()
     await config.init()
     table = await config.createTable()
   })
 
-  afterAll(setup.afterAll)
+  afterAll(() => {
+    config.end()
+  })
 
   it("should run the webhook automation - checking for parameters", async () => {
-    const { webhook } = await createWebhookAutomation(
-      "Check a basic webhook works as expected"
-    )
+    const { webhook } = await createWebhookAutomation()
     const res = await config.api.webhook.trigger(
       config.getProdAppId(),
       webhook._id!,
diff --git a/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts b/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
index 50527d97af..835a177ea8 100644
--- a/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
+++ b/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
@@ -2,8 +2,6 @@ import { v4 as uuidv4 } from "uuid"
 import { BUILTIN_ACTION_DEFINITIONS } from "../../actions"
 import { TRIGGER_DEFINITIONS } from "../../triggers"
 import {
-  AppActionTriggerInputs,
-  AppActionTriggerOutputs,
   Automation,
   AutomationActionStepId,
   AutomationStep,
@@ -11,49 +9,19 @@ import {
   AutomationTrigger,
   AutomationTriggerDefinition,
   AutomationTriggerInputs,
+  AutomationTriggerOutputs,
   AutomationTriggerStepId,
-  BashStepInputs,
-  Branch,
   BranchStepInputs,
-  CollectStepInputs,
-  CreateRowStepInputs,
-  CronTriggerOutputs,
-  DeleteRowStepInputs,
-  ExecuteQueryStepInputs,
-  ExecuteScriptStepInputs,
-  FilterStepInputs,
   isDidNotTriggerResponse,
-  LoopStepInputs,
-  OpenAIStepInputs,
-  QueryRowsStepInputs,
-  RowCreatedTriggerInputs,
-  RowCreatedTriggerOutputs,
-  RowDeletedTriggerInputs,
-  RowDeletedTriggerOutputs,
-  RowUpdatedTriggerInputs,
-  RowUpdatedTriggerOutputs,
   SearchFilters,
-  ServerLogStepInputs,
-  SmtpEmailStepInputs,
   TestAutomationRequest,
-  UpdateRowStepInputs,
-  WebhookTriggerInputs,
-  WebhookTriggerOutputs,
 } from "@budibase/types"
 import TestConfiguration from "../../../tests/utilities/TestConfiguration"
-import * as setup from "../utilities"
 import { automations } from "@budibase/shared-core"
 
-type TriggerOutputs =
-  | RowCreatedTriggerOutputs
-  | RowUpdatedTriggerOutputs
-  | RowDeletedTriggerOutputs
-  | AppActionTriggerOutputs
-  | WebhookTriggerOutputs
-  | CronTriggerOutputs
-  | undefined
-
-type StepBuilderFunction = (stepBuilder: StepBuilder) => void
+type StepBuilderFunction = <TStep extends AutomationTriggerStepId>(
+  stepBuilder: BranchStepBuilder<TStep>
+) => void
 
 type BranchConfig = {
   [key: string]: {
@@ -62,212 +30,107 @@ type BranchConfig = {
   }
 }
 
-class BaseStepBuilder {
-  protected steps: AutomationStep[] = []
-  protected stepNames: { [key: string]: string } = {}
+class TriggerBuilder {
+  private readonly config: TestConfiguration
 
-  protected step<TStep extends AutomationActionStepId>(
-    stepId: TStep,
-    stepSchema: Omit<AutomationStep, "id" | "stepId" | "inputs">,
-    inputs: AutomationStepInputs<TStep>,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    const id = opts?.stepId || uuidv4()
-    this.steps.push({
-      ...stepSchema,
-      inputs: inputs as any,
-      id,
-      stepId,
-      name: opts?.stepName || stepSchema.name,
-    })
-    if (opts?.stepName) {
-      this.stepNames[id] = opts.stepName
-    }
-    return this
+  constructor(config: TestConfiguration) {
+    this.config = config
   }
+
+  protected trigger<
+    TStep extends AutomationTriggerStepId,
+    TInput = AutomationTriggerInputs<TStep>
+  >(stepId: TStep) {
+    return (inputs: TInput) => {
+      const definition: AutomationTriggerDefinition =
+        TRIGGER_DEFINITIONS[stepId]
+      const trigger: AutomationTrigger = {
+        ...definition,
+        stepId,
+        inputs: (inputs || {}) as any,
+        id: uuidv4(),
+      }
+      return new StepBuilder<TStep>(this.config, trigger)
+    }
+  }
+
+  onAppAction = this.trigger(AutomationTriggerStepId.APP)
+
+  onRowSaved = this.trigger(AutomationTriggerStepId.ROW_SAVED)
+  onRowUpdated = this.trigger(AutomationTriggerStepId.ROW_UPDATED)
+  onRowDeleted = this.trigger(AutomationTriggerStepId.ROW_DELETED)
+  onWebhook = this.trigger(AutomationTriggerStepId.WEBHOOK)
+  onCron = this.trigger(AutomationTriggerStepId.CRON)
+}
+
+class BranchStepBuilder<TStep extends AutomationTriggerStepId> {
+  protected readonly steps: AutomationStep[] = []
+  protected readonly stepNames: { [key: string]: string } = {}
+
+  protected step<TStep extends AutomationActionStepId>(stepId: TStep) {
+    return (
+      inputs: AutomationStepInputs<TStep>,
+      opts?: { stepName?: string; stepId?: string }
+    ) => {
+      const schema = BUILTIN_ACTION_DEFINITIONS[stepId]
+      const id = opts?.stepId || uuidv4()
+      this.steps.push({
+        ...schema,
+        inputs: inputs as any,
+        id,
+        stepId,
+        name: opts?.stepName || schema.name,
+      })
+      if (opts?.stepName) {
+        this.stepNames[id] = opts.stepName
+      }
+      return this
+    }
+  }
+
+  createRow = this.step(AutomationActionStepId.CREATE_ROW)
+  updateRow = this.step(AutomationActionStepId.UPDATE_ROW)
+  deleteRow = this.step(AutomationActionStepId.DELETE_ROW)
+  sendSmtpEmail = this.step(AutomationActionStepId.SEND_EMAIL_SMTP)
+  executeQuery = this.step(AutomationActionStepId.EXECUTE_QUERY)
+  queryRows = this.step(AutomationActionStepId.QUERY_ROWS)
+  loop = this.step(AutomationActionStepId.LOOP)
+  serverLog = this.step(AutomationActionStepId.SERVER_LOG)
+  executeScript = this.step(AutomationActionStepId.EXECUTE_SCRIPT)
+  filter = this.step(AutomationActionStepId.FILTER)
+  bash = this.step(AutomationActionStepId.EXECUTE_BASH)
+  openai = this.step(AutomationActionStepId.OPENAI)
+  collect = this.step(AutomationActionStepId.COLLECT)
+  zapier = this.step(AutomationActionStepId.zapier)
+  triggerAutomationRun = this.step(
+    AutomationActionStepId.TRIGGER_AUTOMATION_RUN
+  )
+  outgoingWebhook = this.step(AutomationActionStepId.OUTGOING_WEBHOOK)
+  n8n = this.step(AutomationActionStepId.n8n)
+  make = this.step(AutomationActionStepId.integromat)
+  discord = this.step(AutomationActionStepId.discord)
+  delay = this.step(AutomationActionStepId.DELAY)
+
   protected addBranchStep(branchConfig: BranchConfig): void {
-    const branchStepInputs: BranchStepInputs = {
-      branches: [] as Branch[],
+    const inputs: BranchStepInputs = {
+      branches: [],
       children: {},
     }
 
-    Object.entries(branchConfig).forEach(([key, branch]) => {
-      const stepBuilder = new StepBuilder()
-      branch.steps(stepBuilder)
-      let branchId = uuidv4()
-      branchStepInputs.branches.push({
-        name: key,
-        condition: branch.condition,
-        id: branchId,
-      })
-      branchStepInputs.children![branchId] = stepBuilder.build()
-    })
-    const branchStep: AutomationStep = {
+    for (const [name, branch] of Object.entries(branchConfig)) {
+      const builder = new BranchStepBuilder<TStep>()
+      branch.steps(builder)
+      let id = uuidv4()
+      inputs.branches.push({ name, condition: branch.condition, id })
+      inputs.children![id] = builder.steps
+    }
+
+    this.steps.push({
       ...automations.steps.branch.definition,
       id: uuidv4(),
       stepId: AutomationActionStepId.BRANCH,
-      inputs: branchStepInputs,
-    }
-    this.steps.push(branchStep)
-  }
-
-  // STEPS
-  createRow(
-    inputs: CreateRowStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.CREATE_ROW,
-      BUILTIN_ACTION_DEFINITIONS.CREATE_ROW,
       inputs,
-      opts
-    )
-  }
-
-  updateRow(
-    inputs: UpdateRowStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.UPDATE_ROW,
-      BUILTIN_ACTION_DEFINITIONS.UPDATE_ROW,
-      inputs,
-      opts
-    )
-  }
-
-  deleteRow(
-    inputs: DeleteRowStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.DELETE_ROW,
-      BUILTIN_ACTION_DEFINITIONS.DELETE_ROW,
-      inputs,
-      opts
-    )
-  }
-
-  sendSmtpEmail(
-    inputs: SmtpEmailStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.SEND_EMAIL_SMTP,
-      BUILTIN_ACTION_DEFINITIONS.SEND_EMAIL_SMTP,
-      inputs,
-      opts
-    )
-  }
-
-  executeQuery(
-    inputs: ExecuteQueryStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.EXECUTE_QUERY,
-      BUILTIN_ACTION_DEFINITIONS.EXECUTE_QUERY,
-      inputs,
-      opts
-    )
-  }
-
-  queryRows(
-    inputs: QueryRowsStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.QUERY_ROWS,
-      BUILTIN_ACTION_DEFINITIONS.QUERY_ROWS,
-      inputs,
-      opts
-    )
-  }
-
-  loop(
-    inputs: LoopStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.LOOP,
-      BUILTIN_ACTION_DEFINITIONS.LOOP,
-      inputs,
-      opts
-    )
-  }
-
-  serverLog(
-    input: ServerLogStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.SERVER_LOG,
-      BUILTIN_ACTION_DEFINITIONS.SERVER_LOG,
-      input,
-      opts
-    )
-  }
-
-  executeScript(
-    input: ExecuteScriptStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.EXECUTE_SCRIPT,
-      BUILTIN_ACTION_DEFINITIONS.EXECUTE_SCRIPT,
-      input,
-      opts
-    )
-  }
-
-  filter(input: FilterStepInputs): this {
-    return this.step(
-      AutomationActionStepId.FILTER,
-      BUILTIN_ACTION_DEFINITIONS.FILTER,
-      input
-    )
-  }
-
-  bash(
-    input: BashStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.EXECUTE_BASH,
-      BUILTIN_ACTION_DEFINITIONS.EXECUTE_BASH,
-      input,
-      opts
-    )
-  }
-
-  openai(
-    input: OpenAIStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.OPENAI,
-      BUILTIN_ACTION_DEFINITIONS.OPENAI,
-      input,
-      opts
-    )
-  }
-
-  collect(
-    input: CollectStepInputs,
-    opts?: { stepName?: string; stepId?: string }
-  ): this {
-    return this.step(
-      AutomationActionStepId.COLLECT,
-      BUILTIN_ACTION_DEFINITIONS.COLLECT,
-      input,
-      opts
-    )
-  }
-}
-
-class StepBuilder extends BaseStepBuilder {
-  build(): AutomationStep[] {
-    return this.steps
+    })
   }
 
   branch(branchConfig: BranchConfig): this {
@@ -276,149 +139,76 @@ class StepBuilder extends BaseStepBuilder {
   }
 }
 
-class AutomationBuilder extends BaseStepBuilder {
-  private automationConfig: Automation
-  private config: TestConfiguration
-  private triggerOutputs: TriggerOutputs
-  private triggerSet = false
+class StepBuilder<
+  TStep extends AutomationTriggerStepId
+> extends BranchStepBuilder<TStep> {
+  private readonly config: TestConfiguration
+  private readonly trigger: AutomationTrigger
+  private _name: string | undefined = undefined
 
-  constructor(
-    options: { name?: string; appId?: string; config?: TestConfiguration } = {}
-  ) {
+  constructor(config: TestConfiguration, trigger: AutomationTrigger) {
     super()
-    this.automationConfig = {
-      name: options.name || `Test Automation ${uuidv4()}`,
-      definition: {
-        steps: [],
-        trigger: {} as AutomationTrigger,
-        stepNames: {},
-      },
-      type: "automation",
-      appId: options.appId ?? setup.getConfig().getAppId(),
-    }
-    this.config = options.config || setup.getConfig()
+    this.config = config
+    this.trigger = trigger
   }
 
-  // TRIGGERS
-  rowSaved(inputs: RowCreatedTriggerInputs, outputs: RowCreatedTriggerOutputs) {
-    this.triggerOutputs = outputs
-    return this.trigger(
-      TRIGGER_DEFINITIONS.ROW_SAVED,
-      AutomationTriggerStepId.ROW_SAVED,
-      inputs,
-      outputs
-    )
-  }
-
-  rowUpdated(
-    inputs: RowUpdatedTriggerInputs,
-    outputs: RowUpdatedTriggerOutputs
-  ) {
-    this.triggerOutputs = outputs
-    return this.trigger(
-      TRIGGER_DEFINITIONS.ROW_UPDATED,
-      AutomationTriggerStepId.ROW_UPDATED,
-      inputs,
-      outputs
-    )
-  }
-
-  rowDeleted(
-    inputs: RowDeletedTriggerInputs,
-    outputs: RowDeletedTriggerOutputs
-  ) {
-    this.triggerOutputs = outputs
-    return this.trigger(
-      TRIGGER_DEFINITIONS.ROW_DELETED,
-      AutomationTriggerStepId.ROW_DELETED,
-      inputs,
-      outputs
-    )
-  }
-
-  appAction(outputs: AppActionTriggerOutputs, inputs?: AppActionTriggerInputs) {
-    this.triggerOutputs = outputs
-    return this.trigger(
-      TRIGGER_DEFINITIONS.APP,
-      AutomationTriggerStepId.APP,
-      inputs,
-      outputs
-    )
-  }
-
-  webhook(outputs: WebhookTriggerOutputs, inputs?: WebhookTriggerInputs) {
-    this.triggerOutputs = outputs
-    return this.trigger(
-      TRIGGER_DEFINITIONS.WEBHOOK,
-      AutomationTriggerStepId.WEBHOOK,
-      inputs,
-      outputs
-    )
-  }
-
-  private trigger<TStep extends AutomationTriggerStepId>(
-    triggerSchema: AutomationTriggerDefinition,
-    stepId: TStep,
-    inputs?: AutomationTriggerInputs<TStep>,
-    outputs?: TriggerOutputs
-  ): this {
-    if (this.triggerSet) {
-      throw new Error("Only one trigger can be set for an automation.")
-    }
-    this.automationConfig.definition.trigger = {
-      ...triggerSchema,
-      stepId,
-      inputs: inputs || ({} as any),
-      id: uuidv4(),
-    }
-    this.triggerOutputs = outputs
-    this.triggerSet = true
-
-    return this
-  }
-
-  branch(branchConfig: BranchConfig): this {
-    this.addBranchStep(branchConfig)
+  name(n: string): this {
+    this._name = n
     return this
   }
 
   build(): Automation {
-    this.automationConfig.definition.steps = this.steps
-    this.automationConfig.definition.stepNames = this.stepNames
-    return this.automationConfig
+    const name = this._name || `Test Automation ${uuidv4()}`
+    return {
+      name,
+      definition: {
+        steps: this.steps,
+        trigger: this.trigger,
+        stepNames: this.stepNames,
+      },
+      type: "automation",
+      appId: this.config.getAppId(),
+    }
   }
 
   async save() {
-    if (!Object.keys(this.automationConfig.definition.trigger).length) {
-      throw new Error("Please add a trigger to this automation test")
-    }
-    this.automationConfig.definition.steps = this.steps
-    return await this.config.createAutomation(this.build())
+    const { automation } = await this.config.api.automation.post(this.build())
+    return new AutomationRunner<TStep>(this.config, automation)
   }
 
-  async run() {
-    const automation = await this.save()
+  async test(triggerOutput: AutomationTriggerOutputs<TStep>) {
+    const runner = await this.save()
+    return await runner.test(triggerOutput)
+  }
+}
+
+class AutomationRunner<TStep extends AutomationTriggerStepId> {
+  private readonly config: TestConfiguration
+  readonly automation: Automation
+
+  constructor(config: TestConfiguration, automation: Automation) {
+    this.config = config
+    this.automation = automation
+  }
+
+  async test(triggerOutput: AutomationTriggerOutputs<TStep>) {
     const response = await this.config.api.automation.test(
-      automation._id!,
-      this.triggerOutputs as TestAutomationRequest
+      this.automation._id!,
+      // TODO: figure out why this cast is needed.
+      triggerOutput as TestAutomationRequest
     )
 
     if (isDidNotTriggerResponse(response)) {
       throw new Error(response.message)
     }
 
+    // Remove the trigger step from the response.
     response.steps.shift()
-    return {
-      trigger: response.trigger,
-      steps: response.steps,
-    }
+
+    return response
   }
 }
 
-export function createAutomationBuilder(options?: {
-  name?: string
-  appId?: string
-  config?: TestConfiguration
-}) {
-  return new AutomationBuilder(options)
+export function createAutomationBuilder(config: TestConfiguration) {
+  return new TriggerBuilder(config)
 }
diff --git a/packages/server/src/automations/tests/zapier.spec.ts b/packages/server/src/automations/tests/zapier.spec.ts
deleted file mode 100644
index 1288e7efec..0000000000
--- a/packages/server/src/automations/tests/zapier.spec.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { getConfig, afterAll, runStep, actions } from "./utilities"
-import nock from "nock"
-
-describe("test the outgoing webhook action", () => {
-  let config = getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  afterAll()
-
-  beforeEach(() => {
-    nock.cleanAll()
-  })
-
-  it("should be able to run the action", async () => {
-    nock("http://www.example.com/").post("/").reply(200, { foo: "bar" })
-    const res = await runStep(config, actions.zapier.stepId, {
-      url: "http://www.example.com",
-    })
-    expect(res.response.foo).toEqual("bar")
-    expect(res.success).toEqual(true)
-  })
-
-  it("should add the payload props when a JSON string is provided", async () => {
-    const payload = {
-      value1: 1,
-      value2: 2,
-      value3: 3,
-      value4: 4,
-      value5: 5,
-      name: "Adam",
-      age: 9,
-    }
-
-    nock("http://www.example.com/")
-      .post("/", { ...payload, platform: "budibase" })
-      .reply(200, { foo: "bar" })
-
-    const res = await runStep(config, actions.zapier.stepId, {
-      body: { value: JSON.stringify(payload) },
-      url: "http://www.example.com",
-    })
-    expect(res.response.foo).toEqual("bar")
-    expect(res.success).toEqual(true)
-  })
-
-  it("should return a 400 if the JSON payload string is malformed", async () => {
-    const res = await runStep(config, actions.zapier.stepId, {
-      body: { value: "{ invalid json }" },
-      url: "http://www.example.com",
-    })
-    expect(res.httpStatus).toEqual(400)
-    expect(res.response).toEqual("Invalid payload JSON")
-    expect(res.success).toEqual(false)
-  })
-})
diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index a9317772d9..2ac90f3f9c 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -1,7 +1,7 @@
 import emitter from "../events/index"
 import { getAutomationParams, isDevAppID } from "../db/utils"
 import { coerce } from "../utilities/rowProcessor"
-import { definitions } from "./triggerInfo"
+import { automations } from "@budibase/shared-core"
 // need this to call directly, so we can get a response
 import { automationQueue } from "./bullboard"
 import { checkTestFlag } from "../utilities/redis"
@@ -26,7 +26,7 @@ import {
 import { executeInThread } from "../threads/automation"
 import { dataFilters, sdk } from "@budibase/shared-core"
 
-export const TRIGGER_DEFINITIONS = definitions
+export const TRIGGER_DEFINITIONS = automations.triggers.definitions
 const JOB_OPTS = {
   removeOnComplete: true,
   removeOnFail: true,
@@ -273,8 +273,8 @@ async function checkTriggerFilters(
   }
 
   if (
-    trigger.stepId === definitions.ROW_UPDATED.stepId ||
-    trigger.stepId === definitions.ROW_SAVED.stepId
+    trigger.stepId === automations.triggers.definitions.ROW_UPDATED.stepId ||
+    trigger.stepId === automations.triggers.definitions.ROW_SAVED.stepId
   ) {
     const newRow = await automationUtils.cleanUpRow(tableId, event.row)
     return rowPassesFilters(newRow, filters)
diff --git a/packages/server/src/automations/utils.ts b/packages/server/src/automations/utils.ts
index 292b288a70..83665fc975 100644
--- a/packages/server/src/automations/utils.ts
+++ b/packages/server/src/automations/utils.ts
@@ -1,5 +1,5 @@
 import { Thread, ThreadType } from "../threads"
-import { definitions } from "./triggerInfo"
+import { automations } from "@budibase/shared-core"
 import { automationQueue } from "./bullboard"
 import { updateEntityMetadata } from "../utilities"
 import { context, db as dbCore, utils } from "@budibase/backend-core"
@@ -19,7 +19,7 @@ import { automationsEnabled } from "../features"
 import { helpers, REBOOT_CRON } from "@budibase/shared-core"
 import tracer from "dd-trace"
 
-const CRON_STEP_ID = definitions.CRON.stepId
+const CRON_STEP_ID = automations.triggers.definitions.CRON.stepId
 let Runner: Thread
 if (automationsEnabled()) {
   Runner = new Thread(ThreadType.AUTOMATION)
@@ -230,7 +230,7 @@ export async function enableCronTrigger(appId: any, automation: Automation) {
     // can't use getAppDB here as this is likely to be called from dev app,
     // but this call could be for dev app or prod app, need to just use what
     // was passed in
-    await dbCore.doWithDB(appId, async (db: any) => {
+    await dbCore.doWithDB(appId, async db => {
       const response = await db.put(automation)
       automation._id = response.id
       automation._rev = response.rev
@@ -255,7 +255,10 @@ export async function cleanupAutomations(appId: any) {
  * @return if it is recurring (cron).
  */
 export function isRecurring(automation: Automation) {
-  return automation.definition.trigger.stepId === definitions.CRON.stepId
+  return (
+    automation.definition.trigger.stepId ===
+    automations.triggers.definitions.CRON.stepId
+  )
 }
 
 export function isErrorInOutput(output: {
diff --git a/packages/server/src/constants/screens.ts b/packages/server/src/constants/screens.ts
index 1107289ea0..1cbc049e42 100644
--- a/packages/server/src/constants/screens.ts
+++ b/packages/server/src/constants/screens.ts
@@ -1,6 +1,6 @@
 import { roles } from "@budibase/backend-core"
 import { BASE_LAYOUT_PROP_IDS } from "./layouts"
-import { Screen } from "@budibase/types"
+import { Screen, Table, Query, ViewV2, Component } from "@budibase/types"
 
 export function createHomeScreen(
   config: {
@@ -53,3 +53,177 @@ export function createHomeScreen(
     name: "home-screen",
   }
 }
+
+function heading(text: string): Component {
+  return {
+    _id: "c1bff24cd821e41d18c894ac77a80ef99",
+    _component: "@budibase/standard-components/heading",
+    _styles: {
+      normal: {},
+      hover: {},
+      active: {},
+      selected: {},
+    },
+    _instanceName: "Table heading",
+    _children: [],
+    text,
+  }
+}
+
+export function createTableScreen(
+  datasourceName: string,
+  table: Table
+): Screen {
+  return {
+    props: {
+      _id: "cad0a0904cacd4678a2ac094e293db1a5",
+      _component: "@budibase/standard-components/container",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
+      },
+      _children: [
+        heading("table"),
+        {
+          _id: "ca6304be2079147bb9933092c4f8ce6fa",
+          _component: "@budibase/standard-components/gridblock",
+          _styles: {
+            normal: {},
+            hover: {},
+            active: {},
+            selected: {},
+          },
+          _instanceName: "table - Table",
+          _children: [],
+          table: {
+            label: table.name,
+            tableId: table._id!,
+            type: "table",
+            datasourceName,
+          },
+        },
+      ],
+      _instanceName: "table - List",
+      layout: "grid",
+      direction: "column",
+      hAlign: "stretch",
+      vAlign: "top",
+      size: "grow",
+      gap: "M",
+    },
+    routing: {
+      route: "/table",
+      roleId: "ADMIN",
+      homeScreen: false,
+    },
+    name: "screen-id",
+  }
+}
+
+export function createViewScreen(datasourceName: string, view: ViewV2): Screen {
+  return {
+    props: {
+      _id: "cc359092bbd6c4e10b57827155edb7872",
+      _component: "@budibase/standard-components/container",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
+      },
+      _children: [
+        heading("view"),
+        {
+          _id: "ccb4a9e3734794864b5c65b012a0bdc5a",
+          _component: "@budibase/standard-components/gridblock",
+          _styles: {
+            normal: {},
+            hover: {},
+            active: {},
+            selected: {},
+          },
+          _instanceName: "view - Table",
+          _children: [],
+          table: {
+            ...view,
+            name: view.name,
+            tableId: view.tableId,
+            id: view.id,
+            label: view.name,
+            type: "viewV2",
+          },
+        },
+      ],
+      _instanceName: "view - List",
+      layout: "grid",
+      direction: "column",
+      hAlign: "stretch",
+      vAlign: "top",
+      size: "grow",
+      gap: "M",
+    },
+    routing: {
+      route: "/view",
+      roleId: "ADMIN",
+      homeScreen: false,
+    },
+    name: "view-id",
+  }
+}
+
+export function createQueryScreen(datasourceId: string, query: Query): Screen {
+  return {
+    props: {
+      _id: "cc59b217aed264939a6c5249eee39cb25",
+      _component: "@budibase/standard-components/container",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
+      },
+      _children: [
+        {
+          _id: "c33a4a6e3cb5343158a08625c06b5cd7c",
+          _component: "@budibase/standard-components/gridblock",
+          _styles: {
+            normal: {},
+            hover: {},
+            active: {},
+          },
+          _instanceName: "New Table",
+          table: {
+            ...query,
+            label: query.name,
+            _id: query._id!,
+            name: query.name,
+            datasourceId: datasourceId,
+            type: "query",
+          },
+          initialSortOrder: "Ascending",
+          allowAddRows: true,
+          allowEditRows: true,
+          allowDeleteRows: true,
+          stripeRows: false,
+          quiet: false,
+          columns: null,
+        },
+      ],
+      _instanceName: "Blank screen",
+      layout: "grid",
+      direction: "column",
+      hAlign: "stretch",
+      vAlign: "top",
+      size: "grow",
+      gap: "M",
+    },
+    routing: {
+      route: "/query",
+      roleId: "BASIC",
+      homeScreen: false,
+    },
+    name: "screen-id",
+  }
+}
diff --git a/packages/server/src/integrations/tests/utils/googlesheets.ts b/packages/server/src/integrations/tests/utils/googlesheets.ts
index 4b9445ebca..184ae15b09 100644
--- a/packages/server/src/integrations/tests/utils/googlesheets.ts
+++ b/packages/server/src/integrations/tests/utils/googlesheets.ts
@@ -609,7 +609,15 @@ export class GoogleSheetsMock {
       for (let col = startColumnIndex; col <= endColumnIndex; col++) {
         const cell = this.getCellNumericIndexes(sheetId, row, col)
         if (!cell) {
-          throw new Error("Cell not found")
+          const sheet = this.getSheetById(sheetId)
+          if (!sheet) {
+            throw new Error(`Sheet ${sheetId} not found`)
+          }
+          const sheetRows = sheet.data[0].rowData.length
+          const sheetCols = sheet.data[0].rowData[0].values.length
+          throw new Error(
+            `Failed to find cell at ${row}, ${col}. Range: ${valueRange.range}. Sheet dimensions: ${sheetRows}x${sheetCols}.`
+          )
         }
         const value =
           valueRange.values[row - startRowIndex][col - startColumnIndex]
@@ -638,7 +646,15 @@ export class GoogleSheetsMock {
       for (let col = startColumnIndex; col <= endColumnIndex; col++) {
         const cell = this.getCellNumericIndexes(sheetId, row, col)
         if (!cell) {
-          throw new Error("Cell not found")
+          const sheet = this.getSheetById(sheetId)
+          if (!sheet) {
+            throw new Error(`Sheet ${sheetId} not found`)
+          }
+          const sheetRows = sheet.data[0].rowData.length
+          const sheetCols = sheet.data[0].rowData[0].values.length
+          throw new Error(
+            `Failed to find cell at ${row}, ${col}. Range: ${valueRange.range}. Sheet dimensions: ${sheetRows}x${sheetCols}.`
+          )
         }
         values.push(this.cellValue(cell))
       }
diff --git a/packages/server/src/jsRunner/bundles/bson-polyfills.ivm.bundle.js b/packages/server/src/jsRunner/bundles/bson-polyfills.ivm.bundle.js
new file mode 100644
index 0000000000..94d08b84ed
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/bson-polyfills.ivm.bundle.js
@@ -0,0 +1,122 @@
+if (typeof btoa !== "function") {
+  var chars = {
+    ascii: function () {
+      return "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
+    },
+    indices: function () {
+      if (!this.cache) {
+        this.cache = {}
+        var ascii = chars.ascii()
+
+        for (var c = 0; c < ascii.length; c++) {
+          var chr = ascii[c]
+          this.cache[chr] = c
+        }
+      }
+      return this.cache
+    },
+  }
+
+  function atob(b64) {
+    var indices = chars.indices(),
+      pos = b64.indexOf("="),
+      padded = pos > -1,
+      len = padded ? pos : b64.length,
+      i = -1,
+      data = ""
+
+    while (i < len) {
+      var code =
+        (indices[b64[++i]] << 18) |
+        (indices[b64[++i]] << 12) |
+        (indices[b64[++i]] << 6) |
+        indices[b64[++i]]
+      if (code !== 0) {
+        data += String.fromCharCode(
+          (code >>> 16) & 255,
+          (code >>> 8) & 255,
+          code & 255
+        )
+      }
+    }
+
+    if (padded) {
+      data = data.slice(0, pos - b64.length)
+    }
+
+    return data
+  }
+
+  function btoa(data) {
+    var ascii = chars.ascii(),
+      len = data.length - 1,
+      i = -1,
+      b64 = ""
+
+    while (i < len) {
+      var code =
+        (data.charCodeAt(++i) << 16) |
+        (data.charCodeAt(++i) << 8) |
+        data.charCodeAt(++i)
+      b64 +=
+        ascii[(code >>> 18) & 63] +
+        ascii[(code >>> 12) & 63] +
+        ascii[(code >>> 6) & 63] +
+        ascii[code & 63]
+    }
+
+    var pads = data.length % 3
+    if (pads > 0) {
+      b64 = b64.slice(0, pads - 3)
+
+      while (b64.length % 4 !== 0) {
+        b64 += "="
+      }
+    }
+
+    return b64
+  }
+}
+
+if (typeof TextDecoder === "undefined") {
+  globalThis.TextDecoder = class {
+    constructor(encoding = "utf8") {
+      if (encoding !== "utf8") {
+        throw new Error(
+          `Only UTF-8 is supported in this polyfill. Recieved: ${encoding}`
+        )
+      }
+    }
+    decode(buffer) {
+      return String.fromCharCode(...buffer)
+    }
+  }
+}
+
+if (typeof TextEncoder === "undefined") {
+  globalThis.TextEncoder = class {
+    encode(str) {
+      const utf8 = []
+      for (const i = 0; i < str.length; i++) {
+        const codePoint = str.charCodeAt(i)
+
+        if (codePoint < 0x80) {
+          utf8.push(codePoint)
+        } else if (codePoint < 0x800) {
+          utf8.push(0xc0 | (codePoint >> 6))
+          utf8.push(0x80 | (codePoint & 0x3f))
+        } else if (codePoint < 0x10000) {
+          utf8.push(0xe0 | (codePoint >> 12))
+          utf8.push(0x80 | ((codePoint >> 6) & 0x3f))
+          utf8.push(0x80 | (codePoint & 0x3f))
+        } else {
+          utf8.push(0xf0 | (codePoint >> 18))
+          utf8.push(0x80 | ((codePoint >> 12) & 0x3f))
+          utf8.push(0x80 | ((codePoint >> 6) & 0x3f))
+          utf8.push(0x80 | (codePoint & 0x3f))
+        }
+      }
+      return new Uint8Array(utf8)
+    }
+  }
+}
diff --git a/packages/server/src/jsRunner/bundles/index.ts b/packages/server/src/jsRunner/bundles/index.ts
index b62adac1cc..3a00ee96cc 100644
--- a/packages/server/src/jsRunner/bundles/index.ts
+++ b/packages/server/src/jsRunner/bundles/index.ts
@@ -5,6 +5,7 @@ export const enum BundleType {
   BSON = "bson",
   SNIPPETS = "snippets",
   BUFFER = "buffer",
+  BSON_POLYFILLS = "bson_polyfills",
 }
 
 const bundleSourceFile: Record<BundleType, string> = {
@@ -12,6 +13,7 @@ const bundleSourceFile: Record<BundleType, string> = {
   [BundleType.BSON]: "./bson.ivm.bundle.js",
   [BundleType.SNIPPETS]: "./snippets.ivm.bundle.js",
   [BundleType.BUFFER]: "./buffer.ivm.bundle.js",
+  [BundleType.BSON_POLYFILLS]: "./bson-polyfills.ivm.bundle.js",
 }
 const bundleSourceCode: Partial<Record<BundleType, string>> = {}
 
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
index 8244b2eef8..343cccd36f 100644
--- a/packages/server/src/jsRunner/bundles/snippets.ts
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -1,6 +1,5 @@
 // @ts-ignore
-// eslint-disable-next-line local-rules/no-budibase-imports
-import { iifeWrapper } from "@budibase/string-templates/iife"
+import { iifeWrapper } from "@budibase/string-templates"
 
 export default new Proxy(
   {},
diff --git a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
index 5a9bc05d76..63a1a52b09 100644
--- a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
+++ b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
@@ -107,4 +107,15 @@ describe("Test isolated vm directly", () => {
     )
     expect(result).toEqual([])
   })
+
+  it("should ensure error results are cleared between runs", () => {
+    const context = {}
+    // throw error
+    // Ensure the first execution throws an error
+    expect(() => runJSWithIsolatedVM(`test.foo.bar = 123`, context)).toThrow()
+
+    // Ensure the error is not persisted across VMs
+    const secondResult = runJSWithIsolatedVM(`return {}`, context)
+    expect(secondResult).toEqual({})
+  })
 })
diff --git a/packages/server/src/jsRunner/vm/isolated-vm.ts b/packages/server/src/jsRunner/vm/isolated-vm.ts
index 3863be742d..b47137bcba 100644
--- a/packages/server/src/jsRunner/vm/isolated-vm.ts
+++ b/packages/server/src/jsRunner/vm/isolated-vm.ts
@@ -161,42 +161,10 @@ export class IsolatedVM implements VM {
 
     const bsonSource = loadBundle(BundleType.BSON)
 
-    this.addToContext({
-      textDecoderCb: new ivm.Callback(
-        (args: {
-          constructorArgs: any
-          functionArgs: Parameters<InstanceType<typeof TextDecoder>["decode"]>
-        }) => {
-          const result = new TextDecoder(...args.constructorArgs).decode(
-            ...args.functionArgs
-          )
-          return result
-        }
-      ),
-    })
-
-    // "Polyfilling" text decoder. `bson.deserialize` requires decoding. We are creating a bridge function so we don't need to inject the full library
-    const textDecoderPolyfill = class TextDecoderMock {
-      constructorArgs
-
-      constructor(...constructorArgs: any) {
-        this.constructorArgs = constructorArgs
-      }
-
-      decode(...input: any) {
-        // @ts-expect-error - this is going to run in the isolate, where this function will be available
-        // eslint-disable-next-line no-undef
-        return textDecoderCb({
-          constructorArgs: this.constructorArgs,
-          functionArgs: input,
-        })
-      }
-    }
-      .toString()
-      .replace(/TextDecoderMock/, "TextDecoder")
+    const bsonPolyfills = loadBundle(BundleType.BSON_POLYFILLS)
 
     const script = this.isolate.compileScriptSync(
-      `${textDecoderPolyfill};${bsonSource}`
+      `${bsonPolyfills};${bsonSource}`
     )
     script.runSync(this.vm, { timeout: this.invocationTimeout, release: false })
     new Promise(() => {
@@ -218,6 +186,7 @@ export class IsolatedVM implements VM {
 
     code = `
       try {
+        results = {}
         results['${this.runResultKey}']=${this.codeWrapper(code)}
       } catch (e) {
         results['${this.runErrorKey}']=e
diff --git a/packages/server/src/sdk/app/automations/crud.ts b/packages/server/src/sdk/app/automations/crud.ts
index d16ae2d042..cd8af1e548 100644
--- a/packages/server/src/sdk/app/automations/crud.ts
+++ b/packages/server/src/sdk/app/automations/crud.ts
@@ -13,7 +13,7 @@ import {
   HTTPError,
   db as dbCore,
 } from "@budibase/backend-core"
-import { definitions } from "../../../automations/triggerInfo"
+import { automations as sharedAutomations } from "@budibase/shared-core"
 import automations from "."
 
 export interface PersistedAutomation extends Automation {
@@ -202,7 +202,7 @@ export async function remove(automationId: string, rev: string) {
  * written to DB (this does not write to DB as it would be wasteful to repeat).
  */
 async function checkForWebhooks({ oldAuto, newAuto }: any) {
-  const WH_STEP_ID = definitions.WEBHOOK.stepId
+  const WH_STEP_ID = sharedAutomations.triggers.definitions.WEBHOOK.stepId
 
   const appId = context.getAppId()
   if (!appId) {
diff --git a/packages/server/src/sdk/app/common/index.ts b/packages/server/src/sdk/app/common/index.ts
new file mode 100644
index 0000000000..3eeaeaa90c
--- /dev/null
+++ b/packages/server/src/sdk/app/common/index.ts
@@ -0,0 +1 @@
+export * from "./utils"
diff --git a/packages/server/src/sdk/app/common/utils.ts b/packages/server/src/sdk/app/common/utils.ts
new file mode 100644
index 0000000000..6dac729872
--- /dev/null
+++ b/packages/server/src/sdk/app/common/utils.ts
@@ -0,0 +1,15 @@
+import { SourceType } from "@budibase/types"
+import { docIds } from "@budibase/backend-core"
+
+export function getSourceType(sourceId: string): SourceType {
+  if (docIds.isTableId(sourceId)) {
+    return SourceType.TABLE
+  } else if (docIds.isViewId(sourceId)) {
+    return SourceType.VIEW
+  } else if (docIds.isDatasourceId(sourceId)) {
+    return SourceType.DATASOURCE
+  } else if (docIds.isQueryId(sourceId)) {
+    return SourceType.QUERY
+  }
+  throw new Error(`Unknown source type for source "${sourceId}"`)
+}
diff --git a/packages/server/src/sdk/app/rowActions/crud.ts b/packages/server/src/sdk/app/rowActions/crud.ts
index 1153677685..64bb4729ce 100644
--- a/packages/server/src/sdk/app/rowActions/crud.ts
+++ b/packages/server/src/sdk/app/rowActions/crud.ts
@@ -9,7 +9,7 @@ import {
 } from "@budibase/types"
 import { generateRowActionsID } from "../../../db/utils"
 import automations from "../automations"
-import { definitions as TRIGGER_DEFINITIONS } from "../../../automations/triggerInfo"
+import { automations as sharedAutomations } from "@budibase/shared-core"
 import * as triggers from "../../../automations/triggers"
 import sdk from "../.."
 
@@ -59,7 +59,7 @@ export async function create(tableId: string, rowAction: { name: string }) {
     definition: {
       trigger: {
         id: "trigger",
-        ...TRIGGER_DEFINITIONS.ROW_ACTION,
+        ...sharedAutomations.triggers.definitions.ROW_ACTION,
         stepId: AutomationTriggerStepId.ROW_ACTION,
         inputs: {
           tableId,
diff --git a/packages/server/src/sdk/app/screens/index.ts b/packages/server/src/sdk/app/screens/index.ts
new file mode 100644
index 0000000000..84f4bad6bb
--- /dev/null
+++ b/packages/server/src/sdk/app/screens/index.ts
@@ -0,0 +1 @@
+export * from "./screens"
diff --git a/packages/server/src/sdk/app/screens/screens.ts b/packages/server/src/sdk/app/screens/screens.ts
new file mode 100644
index 0000000000..c600825efb
--- /dev/null
+++ b/packages/server/src/sdk/app/screens/screens.ts
@@ -0,0 +1,15 @@
+import { getScreenParams } from "../../../db/utils"
+import { context } from "@budibase/backend-core"
+import { Screen } from "@budibase/types"
+
+export async function fetch(): Promise<Screen[]> {
+  const db = context.getAppDB()
+
+  return (
+    await db.allDocs<Screen>(
+      getScreenParams(null, {
+        include_docs: true,
+      })
+    )
+  ).rows.map(el => el.doc!)
+}
diff --git a/packages/server/src/sdk/app/tables/utils.ts b/packages/server/src/sdk/app/tables/utils.ts
index 96499db00a..96372648c5 100644
--- a/packages/server/src/sdk/app/tables/utils.ts
+++ b/packages/server/src/sdk/app/tables/utils.ts
@@ -11,6 +11,10 @@ export function isExternal(opts: { table?: Table; tableId?: string }): boolean {
   return false
 }
 
+export function isInternal(opts: { table?: Table; tableId?: string }): boolean {
+  return !isExternal(opts)
+}
+
 export function isTable(table: any): table is Table {
   return table._id && docIds.isTableId(table._id)
 }
diff --git a/packages/server/src/sdk/app/views/index.ts b/packages/server/src/sdk/app/views/index.ts
index 157e741acd..b3edc92e17 100644
--- a/packages/server/src/sdk/app/views/index.ts
+++ b/packages/server/src/sdk/app/views/index.ts
@@ -81,6 +81,14 @@ export function isView(view: any): view is ViewV2 {
   return view.id && docIds.isViewId(view.id) && view.version === 2
 }
 
+export function isInternal(viewId: string) {
+  if (!docIds.isViewId(viewId)) {
+    return false
+  }
+  const { tableId } = utils.extractViewInfoFromID(viewId)
+  return !isExternalTableID(tableId)
+}
+
 function guardDuplicateCalculationFields(view: Omit<ViewV2, "id" | "version">) {
   const seen: Record<string, Record<CalculationType, boolean>> = {}
   const calculationFields = helpers.views.calculationFields(view)
diff --git a/packages/server/src/sdk/index.ts b/packages/server/src/sdk/index.ts
index a871546b60..e3e88c25c4 100644
--- a/packages/server/src/sdk/index.ts
+++ b/packages/server/src/sdk/index.ts
@@ -11,6 +11,8 @@ import { default as plugins } from "./plugins"
 import * as views from "./app/views"
 import * as permissions from "./app/permissions"
 import * as rowActions from "./app/rowActions"
+import * as screens from "./app/screens"
+import * as common from "./app/common"
 
 const sdk = {
   backups,
@@ -22,10 +24,12 @@ const sdk = {
   datasources,
   queries,
   plugins,
+  screens,
   views,
   permissions,
   links,
   rowActions,
+  common,
 }
 
 // default export for TS
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index 2d36e7855b..1f464b2ea4 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -258,7 +258,7 @@ export default class TestConfiguration {
     }
   }
 
-  async withApp(app: App | string, f: () => Promise<void>) {
+  async withApp<R>(app: App | string, f: () => Promise<R>) {
     const oldAppId = this.appId
     this.appId = typeof app === "string" ? app : app.appId
     try {
@@ -268,6 +268,10 @@ export default class TestConfiguration {
     }
   }
 
+  async withProdApp<R>(f: () => Promise<R>) {
+    return await this.withApp(this.getProdAppId(), f)
+  }
+
   // UTILS
 
   _req<Req extends Record<string, any> | void, Res>(
diff --git a/packages/server/src/tests/utilities/api/application.ts b/packages/server/src/tests/utilities/api/application.ts
index 1fe9840c1d..d0fcb60804 100644
--- a/packages/server/src/tests/utilities/api/application.ts
+++ b/packages/server/src/tests/utilities/api/application.ts
@@ -33,7 +33,10 @@ export class ApplicationAPI extends TestAPI {
     await this._delete(`/api/applications/${appId}`, { expectations })
   }
 
-  publish = async (appId: string): Promise<PublishResponse> => {
+  publish = async (
+    appId: string,
+    expectations?: Expectations
+  ): Promise<PublishResponse> => {
     return await this._post<PublishResponse>(
       `/api/applications/${appId}/publish`,
       {
@@ -42,14 +45,16 @@ export class ApplicationAPI extends TestAPI {
         headers: {
           [constants.Header.APP_ID]: appId,
         },
+        expectations,
       }
     )
   }
 
-  unpublish = async (appId: string): Promise<void> => {
-    await this._post(`/api/applications/${appId}/unpublish`, {
-      expectations: { status: 200 },
-    })
+  unpublish = async (
+    appId: string,
+    expectations?: Expectations
+  ): Promise<void> => {
+    await this._post(`/api/applications/${appId}/unpublish`, { expectations })
   }
 
   sync = async (
@@ -144,13 +149,20 @@ export class ApplicationAPI extends TestAPI {
     })
   }
 
-  fetch = async ({ status }: { status?: AppStatus } = {}): Promise<App[]> => {
+  fetch = async (
+    { status }: { status?: AppStatus } = {},
+    expectations?: Expectations
+  ): Promise<App[]> => {
     return await this._get<App[]>("/api/applications", {
       query: { status },
+      expectations,
     })
   }
 
-  addSampleData = async (appId: string): Promise<void> => {
-    await this._post(`/api/applications/${appId}/sample`)
+  addSampleData = async (
+    appId: string,
+    expectations?: Expectations
+  ): Promise<void> => {
+    await this._post(`/api/applications/${appId}/sample`, { expectations })
   }
 }
diff --git a/packages/server/src/tests/utilities/api/automation.ts b/packages/server/src/tests/utilities/api/automation.ts
index 3f51385251..c4438560ae 100644
--- a/packages/server/src/tests/utilities/api/automation.ts
+++ b/packages/server/src/tests/utilities/api/automation.ts
@@ -1,8 +1,17 @@
 import {
   Automation,
+  CreateAutomationResponse,
+  DeleteAutomationResponse,
   FetchAutomationResponse,
+  GetAutomationActionDefinitionsResponse,
+  GetAutomationStepDefinitionsResponse,
+  GetAutomationTriggerDefinitionsResponse,
   TestAutomationRequest,
   TestAutomationResponse,
+  TriggerAutomationRequest,
+  TriggerAutomationResponse,
+  UpdateAutomationRequest,
+  UpdateAutomationResponse,
 } from "@budibase/types"
 import { Expectations, TestAPI } from "./base"
 
@@ -20,6 +29,39 @@ export class AutomationAPI extends TestAPI {
     return result
   }
 
+  getActions = async (
+    expectations?: Expectations
+  ): Promise<GetAutomationActionDefinitionsResponse> => {
+    return await this._get<GetAutomationActionDefinitionsResponse>(
+      `/api/automations/actions/list`,
+      {
+        expectations,
+      }
+    )
+  }
+
+  getTriggers = async (
+    expectations?: Expectations
+  ): Promise<GetAutomationTriggerDefinitionsResponse> => {
+    return await this._get<GetAutomationTriggerDefinitionsResponse>(
+      `/api/automations/triggers/list`,
+      {
+        expectations,
+      }
+    )
+  }
+
+  getDefinitions = async (
+    expectations?: Expectations
+  ): Promise<GetAutomationStepDefinitionsResponse> => {
+    return await this._get<GetAutomationStepDefinitionsResponse>(
+      `/api/automations/definitions/list`,
+      {
+        expectations,
+      }
+    )
+  }
+
   fetch = async (
     expectations?: Expectations
   ): Promise<FetchAutomationResponse> => {
@@ -31,11 +73,14 @@ export class AutomationAPI extends TestAPI {
   post = async (
     body: Automation,
     expectations?: Expectations
-  ): Promise<Automation> => {
-    const result = await this._post<Automation>(`/api/automations`, {
-      body,
-      expectations,
-    })
+  ): Promise<CreateAutomationResponse> => {
+    const result = await this._post<CreateAutomationResponse>(
+      `/api/automations`,
+      {
+        body,
+        expectations,
+      }
+    )
     return result
   }
 
@@ -52,4 +97,40 @@ export class AutomationAPI extends TestAPI {
       }
     )
   }
+
+  trigger = async (
+    id: string,
+    body: TriggerAutomationRequest,
+    expectations?: Expectations
+  ): Promise<TriggerAutomationResponse> => {
+    return await this._post<TriggerAutomationResponse>(
+      `/api/automations/${id}/trigger`,
+      {
+        expectations,
+        body,
+      }
+    )
+  }
+
+  update = async (
+    body: UpdateAutomationRequest,
+    expectations?: Expectations
+  ): Promise<UpdateAutomationResponse> => {
+    return await this._put<UpdateAutomationResponse>(`/api/automations`, {
+      body,
+      expectations,
+    })
+  }
+
+  delete = async (
+    automation: Automation,
+    expectations?: Expectations
+  ): Promise<DeleteAutomationResponse> => {
+    return await this._delete<DeleteAutomationResponse>(
+      `/api/automations/${automation._id!}/${automation._rev!}`,
+      {
+        expectations,
+      }
+    )
+  }
 }
diff --git a/packages/server/src/tests/utilities/api/index.ts b/packages/server/src/tests/utilities/api/index.ts
index c5eede18d6..2fdf726b6c 100644
--- a/packages/server/src/tests/utilities/api/index.ts
+++ b/packages/server/src/tests/utilities/api/index.ts
@@ -19,43 +19,43 @@ import { PluginAPI } from "./plugin"
 import { WebhookAPI } from "./webhook"
 
 export default class API {
-  table: TableAPI
-  legacyView: LegacyViewAPI
-  viewV2: ViewV2API
-  row: RowAPI
-  permission: PermissionAPI
-  datasource: DatasourceAPI
-  screen: ScreenAPI
   application: ApplicationAPI
-  backup: BackupAPI
   attachment: AttachmentAPI
-  user: UserAPI
+  automation: AutomationAPI
+  backup: BackupAPI
+  datasource: DatasourceAPI
+  legacyView: LegacyViewAPI
+  permission: PermissionAPI
+  plugin: PluginAPI
   query: QueryAPI
   roles: RoleAPI
-  templates: TemplateAPI
+  row: RowAPI
   rowAction: RowActionAPI
-  automation: AutomationAPI
-  plugin: PluginAPI
+  screen: ScreenAPI
+  table: TableAPI
+  templates: TemplateAPI
+  user: UserAPI
+  viewV2: ViewV2API
   webhook: WebhookAPI
 
   constructor(config: TestConfiguration) {
-    this.table = new TableAPI(config)
-    this.legacyView = new LegacyViewAPI(config)
-    this.viewV2 = new ViewV2API(config)
-    this.row = new RowAPI(config)
-    this.permission = new PermissionAPI(config)
-    this.datasource = new DatasourceAPI(config)
-    this.screen = new ScreenAPI(config)
     this.application = new ApplicationAPI(config)
-    this.backup = new BackupAPI(config)
     this.attachment = new AttachmentAPI(config)
-    this.user = new UserAPI(config)
+    this.automation = new AutomationAPI(config)
+    this.backup = new BackupAPI(config)
+    this.datasource = new DatasourceAPI(config)
+    this.legacyView = new LegacyViewAPI(config)
+    this.permission = new PermissionAPI(config)
+    this.plugin = new PluginAPI(config)
     this.query = new QueryAPI(config)
     this.roles = new RoleAPI(config)
-    this.templates = new TemplateAPI(config)
+    this.row = new RowAPI(config)
     this.rowAction = new RowActionAPI(config)
-    this.automation = new AutomationAPI(config)
-    this.plugin = new PluginAPI(config)
+    this.screen = new ScreenAPI(config)
+    this.table = new TableAPI(config)
+    this.templates = new TemplateAPI(config)
+    this.user = new UserAPI(config)
+    this.viewV2 = new ViewV2API(config)
     this.webhook = new WebhookAPI(config)
   }
 }
diff --git a/packages/server/src/tests/utilities/api/screen.ts b/packages/server/src/tests/utilities/api/screen.ts
index 8b7d7f92c1..8d4c0d9ac4 100644
--- a/packages/server/src/tests/utilities/api/screen.ts
+++ b/packages/server/src/tests/utilities/api/screen.ts
@@ -1,4 +1,4 @@
-import { Screen } from "@budibase/types"
+import { Screen, UsageInScreensResponse } from "@budibase/types"
 import { Expectations, TestAPI } from "./base"
 
 export class ScreenAPI extends TestAPI {
@@ -28,4 +28,16 @@ export class ScreenAPI extends TestAPI {
       }
     )
   }
+
+  usage = async (
+    sourceId: string,
+    expectations?: Expectations
+  ): Promise<UsageInScreensResponse> => {
+    return this._post<UsageInScreensResponse>(
+      `/api/screens/usage/${sourceId}`,
+      {
+        expectations,
+      }
+    )
+  }
 }
diff --git a/packages/server/src/tests/utilities/mocks/openai.ts b/packages/server/src/tests/utilities/mocks/openai.ts
index b17491808c..7fcc0c08fc 100644
--- a/packages/server/src/tests/utilities/mocks/openai.ts
+++ b/packages/server/src/tests/utilities/mocks/openai.ts
@@ -1,26 +1,82 @@
 import nock from "nock"
 
 let chatID = 1
+const SPACE_REGEX = /\s+/g
+
+interface MockChatGPTResponseOpts {
+  host?: string
+}
+
+interface Message {
+  role: string
+  content: string
+}
+
+interface Choice {
+  index: number
+  message: Message
+  logprobs: null
+  finish_reason: string
+}
+
+interface CompletionTokensDetails {
+  reasoning_tokens: number
+  accepted_prediction_tokens: number
+  rejected_prediction_tokens: number
+}
+
+interface Usage {
+  prompt_tokens: number
+  completion_tokens: number
+  total_tokens: number
+  completion_tokens_details: CompletionTokensDetails
+}
+
+interface ChatCompletionRequest {
+  messages: Message[]
+  model: string
+}
+
+interface ChatCompletionResponse {
+  id: string
+  object: string
+  created: number
+  model: string
+  system_fingerprint: string
+  choices: Choice[]
+  usage: Usage
+}
 
 export function mockChatGPTResponse(
-  response: string | ((prompt: string) => string)
+  answer: string | ((prompt: string) => string),
+  opts?: MockChatGPTResponseOpts
 ) {
-  return nock("https://api.openai.com")
+  return nock(opts?.host || "https://api.openai.com")
     .post("/v1/chat/completions")
-    .reply(200, (uri, requestBody) => {
-      let content = response
-      if (typeof response === "function") {
-        const messages = (requestBody as any).messages
-        content = response(messages[0].content)
+    .reply(200, (uri: string, requestBody: ChatCompletionRequest) => {
+      const messages = requestBody.messages
+      const prompt = messages[0].content
+
+      let content
+      if (typeof answer === "function") {
+        content = answer(prompt)
+      } else {
+        content = answer
       }
 
       chatID++
 
-      return {
+      // We mock token usage because we use it to calculate Budibase AI quota
+      // usage when Budibase AI is enabled, and some tests assert against quota
+      // usage to make sure we're tracking correctly.
+      const prompt_tokens = messages[0].content.split(SPACE_REGEX).length
+      const completion_tokens = content.split(SPACE_REGEX).length
+
+      const response: ChatCompletionResponse = {
         id: `chatcmpl-${chatID}`,
         object: "chat.completion",
         created: Math.floor(Date.now() / 1000),
-        model: "gpt-4o-mini",
+        model: requestBody.model,
         system_fingerprint: `fp_${chatID}`,
         choices: [
           {
@@ -31,9 +87,9 @@ export function mockChatGPTResponse(
           },
         ],
         usage: {
-          prompt_tokens: 0,
-          completion_tokens: 0,
-          total_tokens: 0,
+          prompt_tokens,
+          completion_tokens,
+          total_tokens: prompt_tokens + completion_tokens,
           completion_tokens_details: {
             reasoning_tokens: 0,
             accepted_prediction_tokens: 0,
@@ -41,6 +97,14 @@ export function mockChatGPTResponse(
           },
         },
       }
+      return response
     })
     .persist()
 }
+
+export function mockChatGPTError() {
+  return nock("https://api.openai.com")
+    .post("/v1/chat/completions")
+    .reply(500, "Internal Server Error")
+    .persist()
+}
diff --git a/packages/server/src/tests/utilities/structures.ts b/packages/server/src/tests/utilities/structures.ts
index 3058a706c1..aa17983551 100644
--- a/packages/server/src/tests/utilities/structures.ts
+++ b/packages/server/src/tests/utilities/structures.ts
@@ -34,10 +34,16 @@ import {
   Webhook,
   WebhookActionType,
   BuiltinPermissionID,
+  DeepPartial,
 } from "@budibase/types"
 import { LoopInput } from "../../definitions/automations"
 import { merge } from "lodash"
 import { generator } from "@budibase/backend-core/tests"
+export {
+  createTableScreen,
+  createQueryScreen,
+  createViewScreen,
+} from "../../constants/screens"
 
 const { BUILTIN_ROLE_IDS } = roles
 
@@ -184,21 +190,12 @@ export function newAutomation({
   steps,
   trigger,
 }: { steps?: AutomationStep[]; trigger?: AutomationTrigger } = {}) {
-  const automation = basicAutomation()
-
-  if (trigger) {
-    automation.definition.trigger = trigger
-  } else {
-    automation.definition.trigger = automationTrigger()
-  }
-
-  if (steps) {
-    automation.definition.steps = steps
-  } else {
-    automation.definition.steps = [automationStep()]
-  }
-
-  return automation
+  return basicAutomation({
+    definition: {
+      steps: steps || [automationStep()],
+      trigger: trigger || automationTrigger(),
+    },
+  })
 }
 
 export function rowActionAutomation() {
@@ -211,8 +208,8 @@ export function rowActionAutomation() {
   return automation
 }
 
-export function basicAutomation(appId?: string): Automation {
-  return {
+export function basicAutomation(opts?: DeepPartial<Automation>): Automation {
+  const baseAutomation: Automation = {
     name: "My Automation",
     screenId: "kasdkfldsafkl",
     live: true,
@@ -225,10 +222,8 @@ export function basicAutomation(appId?: string): Automation {
         icon: "test",
         description: "test",
         type: AutomationStepType.TRIGGER,
+        inputs: {},
         id: "test",
-        inputs: {
-          fields: {},
-        },
         schema: {
           inputs: {
             properties: {},
@@ -241,90 +236,9 @@ export function basicAutomation(appId?: string): Automation {
       steps: [],
     },
     type: "automation",
-    appId: appId!,
-  }
-}
-
-export function basicCronAutomation(appId: string, cron: string): Automation {
-  const automation: Automation = {
-    name: `Automation ${generator.guid()}`,
-    definition: {
-      trigger: {
-        stepId: AutomationTriggerStepId.CRON,
-        name: "test",
-        tagline: "test",
-        icon: "test",
-        description: "test",
-        type: AutomationStepType.TRIGGER,
-        id: "test",
-        inputs: {
-          cron,
-        },
-        schema: {
-          inputs: {
-            properties: {},
-          },
-          outputs: {
-            properties: {},
-          },
-        },
-      },
-      steps: [],
-    },
-    type: "automation",
-    appId,
-  }
-  return automation
-}
-
-export function serverLogAutomation(appId?: string): Automation {
-  return {
-    name: "My Automation",
-    screenId: "kasdkfldsafkl",
-    live: true,
-    uiTree: {},
-    definition: {
-      trigger: {
-        stepId: AutomationTriggerStepId.APP,
-        name: "test",
-        tagline: "test",
-        icon: "test",
-        description: "test",
-        type: AutomationStepType.TRIGGER,
-        id: "test",
-        inputs: { fields: {} },
-        schema: {
-          inputs: {
-            properties: {},
-          },
-          outputs: {
-            properties: {},
-          },
-        },
-      },
-      steps: [
-        {
-          stepId: AutomationActionStepId.SERVER_LOG,
-          name: "Backend log",
-          tagline: "Console log a value in the backend",
-          icon: "Monitoring",
-          description: "Logs the given text to the server (using console.log)",
-          internal: true,
-          features: {
-            LOOPING: true,
-          },
-          inputs: {
-            text: "log statement",
-          },
-          schema: BUILTIN_ACTION_DEFINITIONS.SERVER_LOG.schema,
-          id: "y8lkZbeSe",
-          type: AutomationStepType.ACTION,
-        },
-      ],
-    },
-    type: "automation",
-    appId: appId!,
+    appId: "appId",
   }
+  return merge(baseAutomation, opts)
 }
 
 export function loopAutomation(
@@ -387,16 +301,21 @@ export function loopAutomation(
   return automation as Automation
 }
 
-export function collectAutomation(tableId?: string): Automation {
-  const automation: any = {
+export function collectAutomation(opts?: DeepPartial<Automation>): Automation {
+  const baseAutomation: Automation = {
+    appId: "appId",
     name: "looping",
     type: "automation",
     definition: {
       steps: [
         {
           id: "b",
-          type: "ACTION",
+          name: "b",
+          tagline: "An automation action step",
+          icon: "Icon",
+          type: AutomationStepType.ACTION,
           internal: true,
+          description: "Execute script",
           stepId: AutomationActionStepId.EXECUTE_SCRIPT,
           inputs: {
             code: "return [1,2,3]",
@@ -405,8 +324,12 @@ export function collectAutomation(tableId?: string): Automation {
         },
         {
           id: "c",
-          type: "ACTION",
+          name: "c",
+          type: AutomationStepType.ACTION,
+          tagline: "An automation action step",
+          icon: "Icon",
           internal: true,
+          description: "Collect",
           stepId: AutomationActionStepId.COLLECT,
           inputs: {
             collection: "{{ literal steps.1.value }}",
@@ -416,24 +339,28 @@ export function collectAutomation(tableId?: string): Automation {
       ],
       trigger: {
         id: "a",
-        type: "TRIGGER",
+        type: AutomationStepType.TRIGGER,
         event: AutomationEventType.ROW_SAVE,
         stepId: AutomationTriggerStepId.ROW_SAVED,
+        name: "trigger Step",
+        tagline: "An automation trigger",
+        description: "A trigger",
+        icon: "Icon",
         inputs: {
-          tableId,
+          tableId: "tableId",
         },
         schema: TRIGGER_DEFINITIONS.ROW_SAVED.schema,
       },
     },
   }
-  return automation
+  return merge(baseAutomation, opts)
 }
 
-export function filterAutomation(appId: string, tableId?: string): Automation {
+export function filterAutomation(opts?: DeepPartial<Automation>): Automation {
   const automation: Automation = {
     name: "looping",
     type: "automation",
-    appId,
+    appId: "appId",
     definition: {
       steps: [
         {
@@ -459,13 +386,13 @@ export function filterAutomation(appId: string, tableId?: string): Automation {
         event: AutomationEventType.ROW_SAVE,
         stepId: AutomationTriggerStepId.ROW_SAVED,
         inputs: {
-          tableId: tableId!,
+          tableId: "tableId",
         },
         schema: TRIGGER_DEFINITIONS.ROW_SAVED.schema,
       },
     },
   }
-  return automation
+  return merge(automation, opts)
 }
 
 export function updateRowAutomationWithFilters(
diff --git a/packages/server/src/threads/automation.ts b/packages/server/src/threads/automation.ts
index 2790d8fda6..174efa0fe0 100644
--- a/packages/server/src/threads/automation.ts
+++ b/packages/server/src/threads/automation.ts
@@ -11,7 +11,7 @@ import { replaceFakeBindings } from "../automations/loopUtils"
 import { dataFilters, helpers, utils } from "@budibase/shared-core"
 import { default as AutomationEmitter } from "../events/AutomationEmitter"
 import { generateAutomationMetadataID, isProdAppID } from "../db/utils"
-import { definitions as triggerDefs } from "../automations/triggerInfo"
+import { automations } from "@budibase/shared-core"
 import { AutomationErrors, MAX_AUTOMATION_RECURRING_ERRORS } from "../constants"
 import { storeLog } from "../automations/logging"
 import {
@@ -50,7 +50,7 @@ import env from "../environment"
 import tracer from "dd-trace"
 
 threadUtils.threadSetup()
-const CRON_STEP_ID = triggerDefs.CRON.stepId
+const CRON_STEP_ID = automations.triggers.definitions.CRON.stepId
 const STOPPED_STATUS = { success: true, status: AutomationStatus.STOPPED }
 
 function getLoopIterations(loopStep: LoopStep) {
diff --git a/packages/server/src/utilities/csv.ts b/packages/server/src/utilities/csv.ts
index 43d712165a..ac9304b12a 100644
--- a/packages/server/src/utilities/csv.ts
+++ b/packages/server/src/utilities/csv.ts
@@ -1,22 +1,52 @@
 import csv from "csvtojson"
 
 export async function jsonFromCsvString(csvString: string) {
-  const castedWithEmptyValues = await csv({ ignoreEmpty: true }).fromString(
-    csvString
-  )
+  const possibleDelimiters = [",", ";", ":", "|", "~", "\t", " "]
 
-  // By default the csvtojson library casts empty values as empty strings. This
-  // is causing issues on conversion.  ignoreEmpty will remove the key completly
-  // if empty, so creating this empty object will ensure we return the values
-  // with the keys but empty values
-  const result = await csv({ ignoreEmpty: false }).fromString(csvString)
-  result.forEach((r, i) => {
-    for (const [key] of Object.entries(r).filter(([, value]) => value === "")) {
-      if (castedWithEmptyValues[i][key] === undefined) {
-        r[key] = null
+  for (let i = 0; i < possibleDelimiters.length; i++) {
+    let headers: string[] | undefined = undefined
+    let headerMismatch = false
+
+    try {
+      // By default the csvtojson library casts empty values as empty strings. This
+      // is causing issues on conversion.  ignoreEmpty will remove the key completly
+      // if empty, so creating this empty object will ensure we return the values
+      // with the keys but empty values
+      const result = await csv({
+        ignoreEmpty: false,
+        delimiter: possibleDelimiters[i],
+      }).fromString(csvString)
+      for (const [, row] of result.entries()) {
+        // The purpose of this is to find rows that have been split
+        // into the wrong number of columns - Any valid .CSV file will have
+        // the same number of colums in each row
+        // If the number of columms in each row is different to
+        // the number of headers, this isn't the right delimiter
+        const columns = Object.keys(row)
+        if (headers == null) {
+          headers = columns
+        }
+        if (headers.length === 1 || headers.length !== columns.length) {
+          headerMismatch = true
+          break
+        }
+
+        for (const header of headers) {
+          if (row[header] === undefined || row[header] === "") {
+            row[header] = null
+          }
+        }
       }
+      if (headerMismatch) {
+        continue
+      } else {
+        return result
+      }
+    } catch (err) {
+      // Splitting on the wrong delimiter sometimes throws CSV parsing error
+      // (eg unterminated strings), which tells us we've picked the wrong delimiter
+      continue
     }
-  })
-
-  return result
+  }
+  throw new Error("Unable to determine delimiter")
 }
diff --git a/packages/server/src/utilities/tests/csv.spec.ts b/packages/server/src/utilities/tests/csv.spec.ts
index 14063d0e8e..b1dc192bf0 100644
--- a/packages/server/src/utilities/tests/csv.spec.ts
+++ b/packages/server/src/utilities/tests/csv.spec.ts
@@ -29,5 +29,34 @@ describe("csv", () => {
         expect(Object.keys(r)).toEqual(["id", "optional", "title"])
       )
     })
+
+    const possibleDelimeters = [",", ";", ":", "|", "~", "\t", " "]
+
+    const csvArray = [
+      ["id", "title"],
+      ["1", "aaa"],
+      ["2", "bbb"],
+      ["3", "c ccc"],
+      ["", ""],
+      [":5", "eee5:e"],
+    ]
+
+    test.each(possibleDelimeters)(
+      "Should parse with delimiter %s",
+      async delimiter => {
+        const csvString = csvArray
+          .map(row => row.map(col => `"${col}"`).join(delimiter))
+          .join("\n")
+        const result = await jsonFromCsvString(csvString)
+
+        expect(result).toEqual([
+          { id: "1", title: "aaa" },
+          { id: "2", title: "bbb" },
+          { id: "3", title: "c ccc" },
+          { id: null, title: null },
+          { id: ":5", title: "eee5:e" },
+        ])
+      }
+    )
   })
 })
diff --git a/packages/shared-core/src/automations/index.ts b/packages/shared-core/src/automations/index.ts
index 064796845e..db38233494 100644
--- a/packages/shared-core/src/automations/index.ts
+++ b/packages/shared-core/src/automations/index.ts
@@ -1 +1,2 @@
 export * as steps from "./steps/index"
+export * as triggers from "./triggers/index"
diff --git a/packages/server/src/automations/triggerInfo/app.ts b/packages/shared-core/src/automations/triggers/app.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/app.ts
rename to packages/shared-core/src/automations/triggers/app.ts
diff --git a/packages/server/src/automations/triggerInfo/cron.ts b/packages/shared-core/src/automations/triggers/cron.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/cron.ts
rename to packages/shared-core/src/automations/triggers/cron.ts
diff --git a/packages/server/src/automations/triggerInfo/index.ts b/packages/shared-core/src/automations/triggers/index.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/index.ts
rename to packages/shared-core/src/automations/triggers/index.ts
diff --git a/packages/server/src/automations/triggerInfo/rowAction.ts b/packages/shared-core/src/automations/triggers/rowAction.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/rowAction.ts
rename to packages/shared-core/src/automations/triggers/rowAction.ts
diff --git a/packages/server/src/automations/triggerInfo/rowDeleted.ts b/packages/shared-core/src/automations/triggers/rowDeleted.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/rowDeleted.ts
rename to packages/shared-core/src/automations/triggers/rowDeleted.ts
diff --git a/packages/server/src/automations/triggerInfo/rowSaved.ts b/packages/shared-core/src/automations/triggers/rowSaved.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/rowSaved.ts
rename to packages/shared-core/src/automations/triggers/rowSaved.ts
diff --git a/packages/server/src/automations/triggerInfo/rowUpdated.ts b/packages/shared-core/src/automations/triggers/rowUpdated.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/rowUpdated.ts
rename to packages/shared-core/src/automations/triggers/rowUpdated.ts
diff --git a/packages/server/src/automations/triggerInfo/webhook.ts b/packages/shared-core/src/automations/triggers/webhook.ts
similarity index 100%
rename from packages/server/src/automations/triggerInfo/webhook.ts
rename to packages/shared-core/src/automations/triggers/webhook.ts
diff --git a/packages/shared-core/src/sdk/documents/index.ts b/packages/shared-core/src/sdk/documents/index.ts
index 4b17c1ea08..502e968a15 100644
--- a/packages/shared-core/src/sdk/documents/index.ts
+++ b/packages/shared-core/src/sdk/documents/index.ts
@@ -1,3 +1,4 @@
 export * as applications from "./applications"
 export * as automations from "./automations"
 export * as users from "./users"
+export * as screens from "./screens"
diff --git a/packages/shared-core/src/sdk/documents/screens.ts b/packages/shared-core/src/sdk/documents/screens.ts
new file mode 100644
index 0000000000..218c6673aa
--- /dev/null
+++ b/packages/shared-core/src/sdk/documents/screens.ts
@@ -0,0 +1,23 @@
+import { Screen, Component } from "@budibase/types"
+
+export function findInSettings(screen: Screen, toFind: string) {
+  const foundIn: { setting: string; value: string }[] = []
+  function recurse(props: Component, parentKey = "") {
+    for (const [key, value] of Object.entries(props)) {
+      if (!value) {
+        continue
+      }
+      if (typeof value === "string" && value.includes(toFind)) {
+        foundIn.push({
+          setting: parentKey ? `${parentKey}.${key}` : key,
+          value: value,
+        })
+      } else if (typeof value === "object") {
+        recurse(value, key)
+      }
+    }
+  }
+
+  recurse(screen.props)
+  return foundIn
+}
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index b1b4b9ef55..acd0ea4fa8 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -11,8 +11,7 @@
       "require": "./dist/bundle.cjs",
       "import": "./dist/bundle.mjs"
     },
-    "./package.json": "./package.json",
-    "./iife": "./dist/iife.mjs"
+    "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsc --emitDeclarationOnly && rollup -c",
diff --git a/packages/types/src/api/account/license.ts b/packages/types/src/api/account/license.ts
index edb1267ecf..342e4882e6 100644
--- a/packages/types/src/api/account/license.ts
+++ b/packages/types/src/api/account/license.ts
@@ -20,7 +20,8 @@ export interface QuotaTriggeredRequest {
 }
 
 export interface LicenseActivateRequest {
-  installVersion?: string
+  installVersion: string
+  installId: string
 }
 
 export interface UpdateLicenseRequest {
diff --git a/packages/types/src/api/web/app/automation.ts b/packages/types/src/api/web/app/automation.ts
index b97dee0baf..f72966d100 100644
--- a/packages/types/src/api/web/app/automation.ts
+++ b/packages/types/src/api/web/app/automation.ts
@@ -75,6 +75,7 @@ export interface TestAutomationRequest {
   revision?: string
   fields: Record<string, any>
   row?: Row
+  oldRow?: Row
 }
 export type TestAutomationResponse = AutomationResults | DidNotTriggerResponse
 
diff --git a/packages/types/src/api/web/app/screen.ts b/packages/types/src/api/web/app/screen.ts
index 372d1ba2ea..2ddac2f19a 100644
--- a/packages/types/src/api/web/app/screen.ts
+++ b/packages/types/src/api/web/app/screen.ts
@@ -1,4 +1,4 @@
-import { ScreenRoutingJson, Screen } from "../../../documents"
+import { ScreenRoutingJson, Screen, SourceType } from "../../../documents"
 
 export interface FetchScreenRoutingResponse {
   routes: ScreenRoutingJson
@@ -15,3 +15,13 @@ export interface SaveScreenResponse extends Screen {}
 export interface DeleteScreenResponse {
   message: string
 }
+
+export interface ScreenUsage {
+  url: string
+  _id: string
+}
+
+export interface UsageInScreensResponse {
+  sourceType: SourceType
+  screens: ScreenUsage[]
+}
diff --git a/packages/types/src/documents/app/automation/StepInputsOutputs.ts b/packages/types/src/documents/app/automation/StepInputsOutputs.ts
index 6f7223300d..18a6f86284 100644
--- a/packages/types/src/documents/app/automation/StepInputsOutputs.ts
+++ b/packages/types/src/documents/app/automation/StepInputsOutputs.ts
@@ -141,7 +141,7 @@ export type MakeIntegrationInputs = {
 
 export type n8nStepInputs = {
   url: string
-  method: HttpMethod
+  method?: HttpMethod
   authorization: string
   body: any
 }
@@ -237,7 +237,8 @@ export type ZapierStepInputs = {
 export type ZapierStepOutputs = Omit<ExternalAppStepOutputs, "response"> & {
   response: string
 }
-enum RequestType {
+
+export enum RequestType {
   POST = "POST",
   GET = "GET",
   PUT = "PUT",
@@ -249,11 +250,7 @@ export type OutgoingWebhookStepInputs = {
   requestMethod: RequestType
   url: string
   requestBody: string
-  headers: string
-}
-
-export type AppActionTriggerInputs = {
-  fields: object
+  headers: string | Record<string, string>
 }
 
 export type AppActionTriggerOutputs = {
diff --git a/packages/types/src/documents/app/automation/schema.ts b/packages/types/src/documents/app/automation/schema.ts
index 84bfebf6bf..820858b48c 100644
--- a/packages/types/src/documents/app/automation/schema.ts
+++ b/packages/types/src/documents/app/automation/schema.ts
@@ -45,13 +45,18 @@ import {
   OpenAIStepInputs,
   OpenAIStepOutputs,
   LoopStepInputs,
-  AppActionTriggerInputs,
   CronTriggerInputs,
   RowUpdatedTriggerInputs,
   RowCreatedTriggerInputs,
   RowDeletedTriggerInputs,
   BranchStepInputs,
   BaseAutomationOutputs,
+  AppActionTriggerOutputs,
+  CronTriggerOutputs,
+  RowDeletedTriggerOutputs,
+  RowCreatedTriggerOutputs,
+  RowUpdatedTriggerOutputs,
+  WebhookTriggerOutputs,
 } from "./StepInputsOutputs"
 
 export type ActionImplementations<T extends Hosting> = {
@@ -326,7 +331,7 @@ export type AutomationTriggerDefinition = Omit<
 
 export type AutomationTriggerInputs<T extends AutomationTriggerStepId> =
   T extends AutomationTriggerStepId.APP
-    ? AppActionTriggerInputs
+    ? void | Record<string, any>
     : T extends AutomationTriggerStepId.CRON
     ? CronTriggerInputs
     : T extends AutomationTriggerStepId.ROW_ACTION
@@ -341,6 +346,23 @@ export type AutomationTriggerInputs<T extends AutomationTriggerStepId> =
     ? Record<string, any>
     : never
 
+export type AutomationTriggerOutputs<T extends AutomationTriggerStepId> =
+  T extends AutomationTriggerStepId.APP
+    ? AppActionTriggerOutputs
+    : T extends AutomationTriggerStepId.CRON
+    ? CronTriggerOutputs
+    : T extends AutomationTriggerStepId.ROW_ACTION
+    ? Record<string, any>
+    : T extends AutomationTriggerStepId.ROW_DELETED
+    ? RowDeletedTriggerOutputs
+    : T extends AutomationTriggerStepId.ROW_SAVED
+    ? RowCreatedTriggerOutputs
+    : T extends AutomationTriggerStepId.ROW_UPDATED
+    ? RowUpdatedTriggerOutputs
+    : T extends AutomationTriggerStepId.WEBHOOK
+    ? WebhookTriggerOutputs
+    : never
+
 export interface AutomationTriggerSchema<
   TTrigger extends AutomationTriggerStepId
 > extends AutomationStepSchemaBase {
diff --git a/packages/types/src/documents/app/component.ts b/packages/types/src/documents/app/component.ts
index 654b2c87cb..abf9db26ff 100644
--- a/packages/types/src/documents/app/component.ts
+++ b/packages/types/src/documents/app/component.ts
@@ -1,9 +1,22 @@
 import { Document } from "../document"
+import { BasicOperator } from "../../sdk"
 
 export interface Component extends Document {
   _instanceName: string
   _styles: { [key: string]: any }
   _component: string
   _children?: Component[]
+  _conditions?: ComponentCondition[]
   [key: string]: any
 }
+
+export interface ComponentCondition {
+  id: string
+  operator: BasicOperator
+  action: "update" | "show" | "hide"
+  valueType: "string" | "number" | "datetime" | "boolean"
+  newValue?: any
+  referenceValue?: any
+  setting?: string
+  settingValue?: any
+}
diff --git a/packages/types/src/documents/app/datasource.ts b/packages/types/src/documents/app/datasource.ts
index a0be7bd80d..46d2a81de0 100644
--- a/packages/types/src/documents/app/datasource.ts
+++ b/packages/types/src/documents/app/datasource.ts
@@ -57,3 +57,10 @@ export interface RestConfig {
   }
   dynamicVariables?: DynamicVariable[]
 }
+
+export enum SourceType {
+  DATASOURCE = "datasource",
+  QUERY = "query",
+  TABLE = "table",
+  VIEW = "view",
+}
diff --git a/packages/types/src/documents/app/screen.ts b/packages/types/src/documents/app/screen.ts
index a8c32118d3..f1a119083c 100644
--- a/packages/types/src/documents/app/screen.ts
+++ b/packages/types/src/documents/app/screen.ts
@@ -23,6 +23,7 @@ export interface Screen extends Document {
   props: ScreenProps
   name?: string
   pluginAdded?: boolean
+  onLoad?: EventHandler[]
 }
 
 export interface ScreenRoutesViewOutput extends Document {
@@ -36,3 +37,14 @@ export type ScreenRoutingJson = Record<
     subpaths: Record<string, any>
   }
 >
+
+export interface EventHandler {
+  parameters: {
+    key: string
+    type: string
+    value: string
+    persist: any | null
+  }
+  "##eventHandlerType": string
+  id: string
+}
diff --git a/packages/types/src/sdk/featureFlag.ts b/packages/types/src/sdk/featureFlag.ts
index d9f092c80a..996d3bba8d 100644
--- a/packages/types/src/sdk/featureFlag.ts
+++ b/packages/types/src/sdk/featureFlag.ts
@@ -1,6 +1,5 @@
 export enum FeatureFlag {
   USE_ZOD_VALIDATOR = "USE_ZOD_VALIDATOR",
-  CHECK_SCREEN_COMPONENT_SETTINGS_ERRORS = "CHECK_SCREEN_COMPONENT_SETTINGS_ERRORS",
 
   // Account-portal
   DIRECT_LOGIN_TO_ACCOUNT_PORTAL = "DIRECT_LOGIN_TO_ACCOUNT_PORTAL",
@@ -8,7 +7,6 @@ export enum FeatureFlag {
 
 export const FeatureFlagDefaults = {
   [FeatureFlag.USE_ZOD_VALIDATOR]: false,
-  [FeatureFlag.CHECK_SCREEN_COMPONENT_SETTINGS_ERRORS]: false,
 
   // Account-portal
   [FeatureFlag.DIRECT_LOGIN_TO_ACCOUNT_PORTAL]: false,
diff --git a/packages/types/src/ui/common.ts b/packages/types/src/ui/common.ts
new file mode 100644
index 0000000000..0f5a2590b9
--- /dev/null
+++ b/packages/types/src/ui/common.ts
@@ -0,0 +1,5 @@
+export interface UIEvent extends Omit<Event, "target"> {
+  currentTarget: EventTarget & HTMLInputElement
+  key?: string
+  target?: any
+}
diff --git a/packages/types/src/ui/components/errors.ts b/packages/types/src/ui/components/errors.ts
new file mode 100644
index 0000000000..78ca14c330
--- /dev/null
+++ b/packages/types/src/ui/components/errors.ts
@@ -0,0 +1,23 @@
+interface BaseUIComponentError {
+  componentId: string
+  message: string
+}
+
+interface UISettingComponentError extends BaseUIComponentError {
+  errorType: "setting"
+  key: string
+  label: string
+  cause: "missing" | "invalid"
+}
+
+interface UIAncestorComponentError extends BaseUIComponentError {
+  errorType: "ancestor-setting"
+  ancestor: {
+    name: string
+    fullType: string
+  }
+}
+
+export type UIComponentError =
+  | UISettingComponentError
+  | UIAncestorComponentError
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index 8dc1638f8c..37b43ea203 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -1,2 +1,38 @@
 export * from "./sidepanel"
 export * from "./codeEditor"
+export * from "./errors"
+
+export interface ComponentDefinition {
+  component: string
+  name: string
+  friendlyName?: string
+  hasChildren?: boolean
+  settings?: ComponentSetting[]
+  features?: Record<string, boolean>
+  typeSupportPresets?: Record<string, any>
+  legalDirectChildren: string[]
+  requiredAncestors?: string[]
+  illegalChildren: string[]
+}
+
+export type DependsOnComponentSetting =
+  | string
+  | {
+      setting: string
+      value: string
+    }
+
+export interface ComponentSetting {
+  key: string
+  type: string
+  label?: string
+  section?: string
+  name?: string
+  required?: boolean
+  defaultValue?: any
+  selectAllFields?: boolean
+  resetOn?: string | string[]
+  settings?: ComponentSetting[]
+  dependsOn?: DependsOnComponentSetting
+  sectionDependsOn?: DependsOnComponentSetting
+}
diff --git a/packages/types/src/ui/index.ts b/packages/types/src/ui/index.ts
index 6e5f37608c..9c4ba93058 100644
--- a/packages/types/src/ui/index.ts
+++ b/packages/types/src/ui/index.ts
@@ -3,3 +3,4 @@ export * from "./bindings"
 export * from "./components"
 export * from "./dataFetch"
 export * from "./datasource"
+export * from "./common"
diff --git a/packages/types/src/ui/stores/grid/columns.ts b/packages/types/src/ui/stores/grid/columns.ts
index 2517d2a3e0..c6ea801713 100644
--- a/packages/types/src/ui/stores/grid/columns.ts
+++ b/packages/types/src/ui/stores/grid/columns.ts
@@ -1,9 +1,10 @@
-import { CalculationType, FieldSchema, FieldType } from "@budibase/types"
+import { CalculationType, FieldSchema, FieldType, UIRow } from "@budibase/types"
 
 export type UIColumn = FieldSchema & {
   label: string
   readonly: boolean
   conditions: any
+  format?: (row: UIRow) => any
   related?: {
     field: string
     subField: string
diff --git a/packages/types/src/ui/stores/grid/table.ts b/packages/types/src/ui/stores/grid/table.ts
index 7b6d659e4c..9a0a54c5c6 100644
--- a/packages/types/src/ui/stores/grid/table.ts
+++ b/packages/types/src/ui/stores/grid/table.ts
@@ -5,6 +5,7 @@ import {
   RelationSchemaField,
   SortOrder,
   Table,
+  UIRow,
   UISearchFilter,
 } from "@budibase/types"
 
@@ -27,6 +28,7 @@ export type UIFieldSchema = FieldSchema &
     columns?: Record<string, UIRelationSchemaField>
     cellRenderType?: string
     disabled?: boolean
+    format?: (row: UIRow) => any
   }
 
 interface UIRelationSchemaField extends RelationSchemaField {
diff --git a/yarn.lock b/yarn.lock
index 60294cc5ab..ea7084e53a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18993,10 +18993,10 @@ svelte-loading-spinners@^0.1.1:
   resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz#3fa6fa0ef67ab635773bf20b07d0b071debbadaa"
   integrity sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==
 
-svelte-portal@1.0.0, svelte-portal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
-  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
+svelte-portal@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-2.2.1.tgz#b1d7bed78e56318db245996beb5483d8de6b9740"
+  integrity sha512-uF7is5sM4aq5iN7QF/67XLnTUvQCf2iiG/B1BHTqLwYVY1dsVmTeXZ/LeEyU6dLjApOQdbEG9lkqHzxiQtOLEQ==
 
 svelte-spa-router@^4.0.1:
   version "4.0.1"