Merge branch 'master' into master

2023-11-06 13:46:08 -05:00 · 2023-11-06 13:46:08 -05:00 · c4cbebca79
parent 5f585a426d 3bbf6a2868
commit c4cbebca79
95 changed files with 2036 additions and 1224 deletions
--- a/.github/workflows/deploy-qa.yml
+++ b/.github/workflows/deploy-qa.yml
@ -11,10 +11,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: peter-evans/repository-dispatch@v2
-        env:
-          PAYLOAD_VERSION: ${{ github.sha }}
-          REF_NAME: ${{ github.ref_name}}
        with:
          repository: budibase/budibase-deploys
          event-type: budicloud-qa-deploy
          token: ${{ secrets.GH_ACCESS_TOKEN }}
+          client-payload: |-
+            {
+              "VERSION": "${{ github.sha }}",
+              "REF_NAME": "${{ github.ref_name}}"
+            }
--- a/.github/workflows/release-master.yml
+++ b/.github/workflows/release-master.yml
@ -165,17 +165,14 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - name: Get the current budibase release version
-        id: version
-        run: |
-          release_version=$(cat lerna.json | jq -r '.version')
-          echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV

-      - uses: passeidireto/trigger-external-workflow-action@main
-        env:
-          PAYLOAD_VERSION: ${{ env.RELEASE_VERSION }}
-          REF_NAME: ${{ github.ref_name}}
+      - uses: peter-evans/repository-dispatch@v2
        with:
          repository: budibase/budibase-deploys
-          event: budicloud-qa-deploy
-          github_pat: ${{ secrets.GH_ACCESS_TOKEN }}
+          event-type: budicloud-qa-deploy
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+          client-payload: |-
+            {
+              "VERSION": "${{ github.ref_name }}",
+              "REF_NAME": "${{ github.ref_name}}"
+            }
--- a/.github/workflows/release-singleimage.yml
+++ b/.github/workflows/release-singleimage.yml
@ -66,7 +66,7 @@ jobs:
          context: .
          push: true
          platforms: linux/amd64,linux/arm64
-          build-args: BUDIBASE_VERSION=$BUDIBASE_VERSION
+          build-args: BUDIBASE_VERSION=${{ env.BUDIBASE_VERSION }}
          tags: budibase/budibase,budibase/budibase:${{ env.RELEASE_VERSION }}
          file: ./hosting/single/Dockerfile.v2
        env:
@ -79,7 +79,7 @@ jobs:
          platforms: linux/amd64
          build-args: |
            TARGETBUILD=aas
-            BUDIBASE_VERSION=$BUDIBASE_VERSION
+            BUDIBASE_VERSION=${{ env.BUDIBASE_VERSION }}
          tags: budibase/budibase-aas,budibase/budibase-aas:${{ env.RELEASE_VERSION }}
          file: ./hosting/single/Dockerfile.v2
        env:
--- a/.github/workflows/tag-release.yml
+++ b/.github/workflows/tag-release.yml
@ -1,4 +1,4 @@
-name: Tag release
+name: Release
 concurrency:
  group: tag-release
  cancel-in-progress: false
@ -19,6 +19,8 @@ on:
 jobs:
  tag-release:
    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.tag-release.outputs.version }}

    steps:
      - name: Fail if branch is not master
@ -33,6 +35,7 @@ jobs:

      - run: cd scripts && yarn
      - name: Tag release
+        id: tag-release
        run: |
          cd scripts
          # setup the username and email.
@ -41,3 +44,23 @@ jobs:
          BUMP_TYPE_INPUT=${{ github.event.inputs.versioning }}
          BUMP_TYPE=${BUMP_TYPE_INPUT:-"patch"}
          ./versionCommit.sh $BUMP_TYPE
+
+
+          new_version=$(./getCurrentVersion.sh)
+          echo "version=$new_version" >> $GITHUB_OUTPUT
+
+  trigger-release:
+    needs: [tag-release]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: peter-evans/repository-dispatch@v2
+        with:
+          repository: budibase/budibase-deploys
+          event-type: release-prod
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+          client-payload: |-
+            {
+              "TAG": "${{ needs.tag-release.outputs.version }}"
+            }
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/hosting/proxy/error.html
+++ b/hosting/proxy/error.html
@ -57,8 +57,8 @@
      --spectrum-global-color-gray-600: rgb(144,144,144);
      --spectrum-global-color-gray-900: rgb(255,255,255);
      --spectrum-global-color-gray-800: rgb(227,227,227);
-      --spectrum-global-color-static-blue-600: rgb(20,115,230);
-      --spectrum-global-color-static-blue-hover: rgb(	18, 103, 207);
+      --bb-indigo: #6E56FF;
+      --bb-indigo-light: #9F8FFF;
    }

    html, body {
@ -90,15 +90,8 @@
    .info {
      display: flex;
      flex-direction: column;
-      align-items: left;
+      align-items: flex-start;
    }
-
-    @media only screen and (max-width: 600px) {
-      .info {
-        align-items: center;
-      }
-    }
-
    .status {
      color: var(--spectrum-global-color-gray-600)
    }
@ -113,13 +106,14 @@
    .buttons {
      display: flex;
      flex-direction: row;
+      justify-content: flex-start;
      margin-top: 15px;
    }
    .homeButton {
-      background-color: var(--spectrum-global-color-static-blue-600);
+      background-color: var(--bb-indigo);
    }
    .homeButton:hover {
-      background-color: var(--spectrum-global-color-static-blue-hover);
+      background-color: var(--bb-indigo-light);
    }
    .statusButton {
      background-color: transparent;
@ -127,20 +121,30 @@
      border: none;
    }
    .hero {
-      height: 160px;
-      width: 160px;
-      margin-right: 80px;
+      height: 60px;
+      margin: 10px 40px 10px 0;
+    }
+    .hero img {
+      height: 100%;
    }
    .content {
      display: flex;
      flex-direction: row;
-      align-items: flex-end;
+      align-items: center;
      justify-content: center;
+      padding: 0 40px;
+    }
+    h1 {
+      margin-bottom: 10px;
+    }
+    h3 {
+      margin-top: 0;
    }

    @media only screen and (max-width: 600px) {
      .content {
        flex-direction: column;
+        align-items: flex-start;
      }
    }
  </style>
@ -152,16 +156,15 @@
    <div class="main">
      <div class="content">
        <div class="hero">
-          <img src="https://raw.githubusercontent.com/Budibase/budibase/master/packages/builder/assets/bb-space-man.svg" alt="Budibase Logo">
+          <img src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" alt="Budibase Logo">
        </div>
        <div class="info">
          <div>
-            <h4 id="status" class="status"></h4>
+            <h4 id="status" class="status">&nbsp;</h4>
            <h1 class="title">
              Houston we have a problem!
            </h1>
-            <h3 id="message" class="message">
-            </h3>
+            <h3 id="message" class="message">&nbsp;</h3>
          </div>
          <div class="buttons">
            <button class="homeButton" onclick=goHome()>Return home</button> 
--- a/hosting/single/runner.sh
+++ b/hosting/single/runner.sh
@ -77,7 +77,7 @@ mkdir -p ${DATA_DIR}/minio
 chown -R couchdb:couchdb ${DATA_DIR}/couch
 redis-server --requirepass $REDIS_PASSWORD > /dev/stdout 2>&1 &
 /bbcouch-runner.sh &
-minio server --console-address ":9001" ${DATA_DIR}/minio > /dev/stdout 2>&1 &
+/minio/minio server --console-address ":9001" ${DATA_DIR}/minio > /dev/stdout 2>&1 &
 /etc/init.d/nginx restart
 if [[ ! -z "${CUSTOM_DOMAIN}" ]]; then
    # Add monthly cron job to renew certbot certificate
--- a/i18n/README.de.md
+++ b/i18n/README.de.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/i18n/README.es.md
+++ b/i18n/README.es.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/i18n/README.fr.md
+++ b/i18n/README.fr.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/i18n/README.id.md
+++ b/i18n/README.id.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/i18n/README.jp.md
+++ b/i18n/README.jp.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/i18n/README.zh.md
+++ b/i18n/README.zh.md
@ -1,6 +1,6 @@
 <p align="center">
  <a href="https://www.budibase.com">
-    <img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" />
+    <img alt="Budibase" src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" width="60" />
  </a>
 </p>
 <h1 align="center">
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.12.4",
+  "version": "2.13.0",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/package.json
+++ b/package.json
@ -27,7 +27,7 @@
  "scripts": {
    "preinstall": "node scripts/syncProPackage.js",
    "setup": "git config submodule.recurse true && git submodule update && node ./hosting/scripts/setup.js && yarn && yarn build && yarn dev",
-    "build": "lerna run build --stream",
+    "build": "NODE_OPTIONS=--max-old-space-size=1500 lerna run build --stream",
    "build:dev": "lerna run --stream prebuild && yarn nx run-many --target=build --output-style=dynamic --watch --preserveWatchOutput",
    "check:types": "lerna run check:types",
    "build:sdk": "lerna run --stream build:sdk",
--- a/packages/backend-core/src/index.ts
+++ b/packages/backend-core/src/index.ts
@ -30,7 +30,6 @@ export * as timers from "./timers"
 export { default as env } from "./environment"
 export * as blacklist from "./blacklist"
 export * as docUpdates from "./docUpdates"
-export * from "./utils/Duration"
 export { SearchParams } from "./db"
 // Add context to tenancy for backwards compatibility
 // only do this for external usages to prevent internal
--- a/packages/backend-core/src/objectStore/utils.ts
+++ b/packages/backend-core/src/objectStore/utils.ts
@ -18,8 +18,12 @@ export const ObjectStoreBuckets = {
 }

 const bbTmp = join(tmpdir(), ".budibase")
-if (!fs.existsSync(bbTmp)) {
+try {
  fs.mkdirSync(bbTmp)
+} catch (e: any) {
+  if (e.code !== "EEXIST") {
+    throw e
+  }
 }

 export function budibaseTempDir() {
--- a/packages/backend-core/src/queue/inMemoryQueue.ts
+++ b/packages/backend-core/src/queue/inMemoryQueue.ts
@ -36,7 +36,7 @@ class InMemoryQueue {
   * @param opts This is not used by the in memory queue as there is no real use
   * case when in memory, but is the same API as Bull
   */
-  constructor(name: string, opts?: any) {
+  constructor(name: string, opts = null) {
    this._name = name
    this._opts = opts
    this._messages = []
--- a/packages/backend-core/src/queue/queue.ts
+++ b/packages/backend-core/src/queue/queue.ts
@ -2,18 +2,11 @@ import env from "../environment"
 import { getRedisOptions } from "../redis/utils"
 import { JobQueue } from "./constants"
 import InMemoryQueue from "./inMemoryQueue"
-import BullQueue, { QueueOptions } from "bull"
+import BullQueue from "bull"
 import { addListeners, StalledFn } from "./listeners"
-import { Duration } from "../utils"
 import * as timers from "../timers"
-import * as Redis from "ioredis"

-// the queue lock is held for 5 minutes
-const QUEUE_LOCK_MS = Duration.fromMinutes(5).toMs()
-// queue lock is refreshed every 30 seconds
-const QUEUE_LOCK_RENEW_INTERNAL_MS = Duration.fromSeconds(30).toMs()
-// cleanup the queue every 60 seconds
-const CLEANUP_PERIOD_MS = Duration.fromSeconds(60).toMs()
+const CLEANUP_PERIOD_MS = 60 * 1000
 let QUEUES: BullQueue.Queue[] | InMemoryQueue[] = []
 let cleanupInterval: NodeJS.Timeout

@ -28,14 +21,7 @@ export function createQueue<T>(
  opts: { removeStalledCb?: StalledFn } = {}
 ): BullQueue.Queue<T> {
  const { opts: redisOpts, redisProtocolUrl } = getRedisOptions()
-  const queueConfig: QueueOptions = {
-    redis: redisProtocolUrl! || (redisOpts as Redis.RedisOptions),
-    settings: {
-      maxStalledCount: 0,
-      lockDuration: QUEUE_LOCK_MS,
-      lockRenewTime: QUEUE_LOCK_RENEW_INTERNAL_MS,
-    },
-  }
+  const queueConfig: any = redisProtocolUrl || { redis: redisOpts }
  let queue: any
  if (!env.isTest()) {
    queue = new BullQueue(jobQueue, queueConfig)
--- a/packages/backend-core/src/utils/Duration.ts
+++ b/packages/backend-core/src/utils/Duration.ts
@ -1,49 +0,0 @@
-export enum DurationType {
-  MILLISECONDS = "milliseconds",
-  SECONDS = "seconds",
-  MINUTES = "minutes",
-  HOURS = "hours",
-  DAYS = "days",
-}
-
-const conversion: Record<DurationType, number> = {
-  milliseconds: 1,
-  seconds: 1000,
-  minutes: 60 * 1000,
-  hours: 60 * 60 * 1000,
-  days: 24 * 60 * 60 * 1000,
-}
-
-export class Duration {
-  static convert(from: DurationType, to: DurationType, duration: number) {
-    const milliseconds = duration * conversion[from]
-    return milliseconds / conversion[to]
-  }
-
-  static from(from: DurationType, duration: number) {
-    return {
-      to: (to: DurationType) => {
-        return Duration.convert(from, to, duration)
-      },
-      toMs: () => {
-        return Duration.convert(from, DurationType.MILLISECONDS, duration)
-      },
-    }
-  }
-
-  static fromSeconds(duration: number) {
-    return Duration.from(DurationType.SECONDS, duration)
-  }
-
-  static fromMinutes(duration: number) {
-    return Duration.from(DurationType.MINUTES, duration)
-  }
-
-  static fromHours(duration: number) {
-    return Duration.from(DurationType.HOURS, duration)
-  }
-
-  static fromDays(duration: number) {
-    return Duration.from(DurationType.DAYS, duration)
-  }
-}
--- a/packages/backend-core/src/utils/index.ts
+++ b/packages/backend-core/src/utils/index.ts
@ -1,4 +1,3 @@
 export * from "./hashing"
 export * from "./utils"
 export * from "./stringUtils"
-export * from "./Duration"
--- a/packages/backend-core/src/utils/tests/Duration.spec.ts
+++ b/packages/backend-core/src/utils/tests/Duration.spec.ts
@ -1,19 +0,0 @@
-import { Duration, DurationType } from "../Duration"
-
-describe("duration", () => {
-  it("should convert minutes to milliseconds", () => {
-    expect(Duration.fromMinutes(5).toMs()).toBe(300000)
-  })
-
-  it("should convert seconds to milliseconds", () => {
-    expect(Duration.fromSeconds(30).toMs()).toBe(30000)
-  })
-
-  it("should convert days to milliseconds", () => {
-    expect(Duration.fromDays(1).toMs()).toBe(86400000)
-  })
-
-  it("should convert minutes to days", () => {
-    expect(Duration.fromMinutes(1440).to(DurationType.DAYS)).toBe(1)
-  })
-})
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@ -386,7 +386,7 @@
  }
  .compact .placeholder,
  .compact img {
-    margin: 10px 16px;
+    margin: 8px 16px;
  }
  .compact img {
    height: 90px;
@ -456,6 +456,12 @@
    color: var(--red);
  }

+  .spectrum-Dropzone {
+    height: 220px;
+  }
+  .compact .spectrum-Dropzone {
+    height: 40px;
+  }
  .spectrum-Dropzone.disabled {
    pointer-events: none;
    background-color: var(--spectrum-global-color-gray-200);
@ -463,10 +469,6 @@
  .disabled .spectrum-Heading--sizeL {
    color: var(--spectrum-alias-text-color-disabled);
  }
-  .compact .spectrum-Dropzone {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
  .compact .spectrum-IllustratedMessage-description {
    margin: 0;
  }
@ -477,7 +479,6 @@
    flex-wrap: wrap;
    justify-content: center;
  }
-
  .tag {
    margin-top: 8px;
  }
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@ -2,6 +2,15 @@
  --background: #ffffff;
  --ink: #000000;

+  /* Brand colours */
+  --bb-coral: #FF4E4E;
+  --bb-coral-light: #F97777;
+  --bb-indigo: #6E56FF;
+  --bb-indigo-light: #9F8FFF;
+  --bb-lime: #ECFFB5;
+  --bb-forest-green: #053835;
+  --bb-beige: #F6EFEA;
+
  --grey-1: #fafafa;
  --grey-2: #f5f5f5;
  --grey-3: #eeeeee;
--- a/packages/builder/.gitignore
+++ b/packages/builder/.gitignore
@ -6,3 +6,4 @@ release/
 dist/
 routify
 .routify/
+svelte.config.js
--- a/packages/builder/assets/bb-emblem.svg
+++ b/packages/builder/assets/bb-emblem.svg
@ -1,80 +1,13 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#000000;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:#4285F4;}
-</style>
-<rect x="-152.17" y="-24.17" class="st0" width="96.17" height="96.17"/>
-<path class="st1" d="M-83.19,48h-41.79c-1.76,0-3.19-1.43-3.19-3.19V3.02c0-1.76,1.43-3.19,3.19-3.19h41.79
-	c1.76,0,3.19,1.43,3.19,3.19v41.79C-80,46.57-81.43,48-83.19,48z"/>
-<g>
-	<g>
-		<path class="st0" d="M-99.62,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
-			c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
-			c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35h-4.89V12.57H-99.62z
-			 M-93.46,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
-			c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
-			c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
-			c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
-			C-93.55,28.92-93.46,28.52-93.46,28.11z"/>
-	</g>
-	<g>
-		<path class="st0" d="M-114.76,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58
-			c0.86,0.39,1.59,0.91,2.19,1.57c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89
-			c-0.35,0.9-0.84,1.68-1.47,2.35c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35
-			h-4.89V12.57H-114.76z M-108.6,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
-			c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
-			c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
-			c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
-			C-108.68,28.92-108.6,28.52-108.6,28.11z"/>
-	</g>
-</g>
-<path class="st2" d="M44.81,159H3.02c-1.76,0-3.19-1.43-3.19-3.19v-41.79c0-1.76,1.43-3.19,3.19-3.19h41.79
-	c1.76,0,3.19,1.43,3.19,3.19v41.79C48,157.57,46.57,159,44.81,159z"/>
-<g>
-	<g>
-		<path class="st1" d="M28.38,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
-			c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
-			c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146h-4.89v-22.43H28.38z
-			 M34.54,139.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
-			c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
-			c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
-			c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
-			C34.45,139.92,34.54,139.52,34.54,139.11z"/>
-	</g>
-	<g>
-		<path class="st1" d="M13.24,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
-			c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
-			c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146H8.35v-22.43H13.24z M19.4,139.11
-			c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69c-0.38-0.17-0.79-0.26-1.24-0.26
-			c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01c-0.17,0.39-0.26,0.8-0.26,1.23
-			c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68c0.39,0.17,0.8,0.26,1.23,0.26
-			c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1C19.32,139.92,19.4,139.52,19.4,139.11z"/>
-	</g>
-</g>
-<g>
-	<path class="st0" d="M44,48H4c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4v40C48,46.21,46.21,48,44,48z"/>
-	<g>
-		<path class="st1" d="M28.48,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
-			c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
-			c-0.64,0.7-1.4,1.25-2.28,1.66C34.8,35.8,33.86,36,32.84,36c-1.84,0-3.3-0.69-4.37-2.07v1.62h-5V12H28.48z M34.78,28.31
-			c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
-			c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
-			s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
-			c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C34.69,29.16,34.78,28.75,34.78,28.31z"
-			/>
-	</g>
-	<g>
-		<path class="st1" d="M13,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
-			c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
-			c-0.64,0.7-1.4,1.25-2.28,1.66C19.32,35.8,18.38,36,17.37,36c-1.84,0-3.3-0.69-4.37-2.07v1.62H8V12H13z M19.3,28.31
-			c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
-			c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
-			s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
-			c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C19.21,29.16,19.3,28.75,19.3,28.31z"/>
-	</g>
+<svg width="265" height="265" viewBox="0 0 265 265" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_1799)">
+<path d="M158.2 8.6V116.6C158.2 121.3 162 125.2 166.8 125.2H213.8C218 125.2 222 123.2 224.6 119.8L262.9 68.9C265.7 65.2 265.7 60.1 262.9 56.4L224.6 5.4C222 2 218 0 213.8 0H166.8C162 0 158.2 3.8 158.2 8.6Z" fill="#FF4E4E"/>
+<path d="M158.2 148.4V256.4C158.2 261.1 162 265 166.8 265H213.8C218 265 222 263 224.6 259.6L262.9 208.7C265.7 205 265.7 199.9 262.9 196.2L224.6 145.3C222.1 141.9 218.1 139.9 213.8 139.9H166.8C162 139.8 158.2 143.7 158.2 148.4Z" fill="#6E56FF"/>
+<path d="M0 8.6V116.6C0 121.3 3.8 125.2 8.6 125.2H109.6C113.8 125.2 117.8 123.2 120.4 119.8L155.9 72.5C160.3 66.6 160.3 58.5 155.9 52.6L120.3 5.4C117.8 2 113.8 0 109.5 0H8.6C3.8 0 0 3.8 0 8.6Z" fill="#F97777"/>
+<path d="M0 148.4V256.4C0 261.1 3.8 265 8.6 265H109.6C113.8 265 117.8 263 120.4 259.6L155.9 212.3C160.3 206.4 160.3 198.3 155.9 192.4L120.4 145.1C117.9 141.7 113.9 139.7 109.6 139.7H8.6C3.8 139.8 0 143.7 0 148.4Z" fill="#9F8FFF"/>
 </g>
+<defs>
+<clipPath id="clip0_1_1799">
+<rect width="265" height="265" fill="white"/>
+</clipPath>
+</defs>
 </svg>
--- a/packages/builder/assets/bb-space-black.svg
+++ b/packages/builder/assets/bb-space-black.svg
@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     viewBox="0 0 46.39 46.39" style="enable-background:new 0 0 46.39 46.39;" xml:space="preserve">
-<style type="text/css">
-    .st0{fill:#FFFFFF;}
-</style>
-    <g>
-    <path class="st0" d="M45.28,22.9c-0.49,28.44-42.79,28.43-43.27,0C2.5-5.54,44.8-5.54,45.28,22.9z"/>
-        <path d="M23.65,45.45c-29.64-0.48-29.63-44.63,0-45.1C53.28,0.82,53.28,44.98,23.65,45.45z M23.65,2.18
-        c-27.09,0.09-27.09,41.36,0,41.44C50.74,43.53,50.74,2.26,23.65,2.18z"/>
-        <path d="M41.94,21.07C38.86,8.69,3.47,8.77,5.01,24.45C5.74,49.51,46.24,46.16,41.94,21.07z"/>
-        <path class="st0" d="M14.69,22.35c0.06,4.27-6.65,4.27-6.58,0C8.05,18.08,14.76,18.08,14.69,22.35z"/>
-        <path class="st0" d="M11.07,28.39c0.02,1.7-2.65,1.7-2.62,0C8.42,26.68,11.09,26.68,11.07,28.39z"/>
-        <path class="st0" d="M30.56,16.2c0.28-1.27,6.76,0.79,8.45,5.64c1.69,4.84-2.11,12.22-3.52,11.43
-        C36.02,25.33,37.44,22.84,30.56,16.2z"/>
-</g>
-</svg>
--- a/packages/builder/assets/bb-space-purple.svg
+++ b/packages/builder/assets/bb-space-purple.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     viewBox="0 0 34.41 34.41" style="enable-background:new 0 0 34.41 34.41;" xml:space="preserve">
-<style type="text/css">
-    .st0{fill:#FFFFFF;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
-    .st1{fill:url(#SVGID_2_);}
-    .st2{fill:#FFFFFF;}
-</style>
-    <g>
-    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0.9311" y1="17.2025" x2="33.4739" y2="17.2025">
-        <stop  offset="0" style="stop-color:#9E99FF"/>
-        <stop  offset="1" style="stop-color:#5C45FF"/>
-    </linearGradient>
-        <path class="st0" d="M17.2,33.2c-21.03-0.34-21.03-31.67,0-32C38.23,1.54,38.23,32.87,17.2,33.2z"/>
-        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="3.9435" y1="20.058" x2="30.407" y2="20.058">
-        <stop  offset="0" style="stop-color:#9E99FF"/>
-            <stop  offset="1" style="stop-color:#5C45FF"/>
-    </linearGradient>
-        <path class="st1" d="M30.18,15.91C27.99,7.12,2.89,7.18,3.98,18.3C4.5,36.09,33.23,33.71,30.18,15.91z"/>
-        <path class="st2" d="M6.42,21.1c-0.02-1.21,1.88-1.21,1.86,0C8.29,22.3,6.4,22.3,6.42,21.1z"/>
-        <path class="st2" d="M6.18,16.81c-0.04-3.03,4.72-3.03,4.67,0C10.89,19.84,6.13,19.84,6.18,16.81z"/>
-        <path class="st2" d="M25.61,24.56c0.38-5.63,1.38-7.4-3.5-12.11c0.2-0.9,4.8,0.56,6,4C29.3,19.88,26.61,25.12,25.61,24.56z"/>
-</g>
-</svg>
--- a/packages/builder/public/bblogo.png
+++ b/packages/builder/public/bblogo.png
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@ -3,6 +3,7 @@ import { API } from "api"
 import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
 import { selectedAutomation } from "builderStore"
+import { notifications } from "@budibase/bbui"

 const initialAutomationState = {
  automations: [],
@ -21,6 +22,37 @@ export const getAutomationStore = () => {
  return store
 }

+const updateReferencesInObject = (obj, modifiedIndex, action) => {
+  const regex = /{{\s*steps\.(\d+)\./g
+  for (const key in obj) {
+    if (typeof obj[key] === "string") {
+      let matches
+      while ((matches = regex.exec(obj[key])) !== null) {
+        const referencedStep = parseInt(matches[1])
+        if (action === "add" && referencedStep >= modifiedIndex) {
+          obj[key] = obj[key].replace(
+            `{{ steps.${referencedStep}.`,
+            `{{ steps.${referencedStep + 1}.`
+          )
+        } else if (action === "delete" && referencedStep > modifiedIndex) {
+          obj[key] = obj[key].replace(
+            `{{ steps.${referencedStep}.`,
+            `{{ steps.${referencedStep - 1}.`
+          )
+        }
+      }
+    } else if (typeof obj[key] === "object" && obj[key] !== null) {
+      updateReferencesInObject(obj[key], modifiedIndex, action)
+    }
+  }
+}
+
+const updateStepReferences = (steps, modifiedIndex, action) => {
+  steps.forEach(step => {
+    updateReferencesInObject(step.inputs, modifiedIndex, action)
+  })
+}
+
 const automationActions = store => ({
  definitions: async () => {
    const response = await API.getAutomationDefinitions()
@ -218,10 +250,40 @@ const automationActions = store => ({
    if (!automation) {
      return
    }
+
+    try {
+      updateStepReferences(newAutomation.definition.steps, blockIdx, "add")
+    } catch (e) {
+      notifications.error("Error adding automation block")
+    }
    newAutomation.definition.steps.splice(blockIdx, 0, block)
    await store.actions.save(newAutomation)
  },
-  deleteAutomationBlock: async block => {
+  saveAutomationName: async (blockId, name) => {
+    const automation = get(selectedAutomation)
+    let newAutomation = cloneDeep(automation)
+    if (!automation) {
+      return
+    }
+    newAutomation.definition.stepNames = {
+      ...newAutomation.definition.stepNames,
+      [blockId]: name.trim(),
+    }
+
+    await store.actions.save(newAutomation)
+  },
+  deleteAutomationName: async blockId => {
+    const automation = get(selectedAutomation)
+    let newAutomation = cloneDeep(automation)
+    if (!automation) {
+      return
+    }
+    delete newAutomation.definition.stepNames[blockId]
+
+    await store.actions.save(newAutomation)
+  },
+
+  deleteAutomationBlock: async (block, blockIdx) => {
    const automation = get(selectedAutomation)
    let newAutomation = cloneDeep(automation)

@ -233,7 +295,14 @@ const automationActions = store => ({
      newAutomation.definition.steps = newAutomation.definition.steps.filter(
        step => step.id !== block.id
      )
+      delete newAutomation.definition.stepNames?.[block.id]
    }
+    try {
+      updateStepReferences(newAutomation.definition.steps, blockIdx, "delete")
+    } catch (e) {
+      notifications.error("Error deleting automation block")
+    }
+
    await store.actions.save(newAutomation)
  },
  replace: async (automationId, automation) => {
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@ -5,13 +5,7 @@
  import TestDataModal from "./TestDataModal.svelte"
  import { flip } from "svelte/animate"
  import { fly } from "svelte/transition"
-  import {
-    Heading,
-    Icon,
-    ActionButton,
-    notifications,
-    Modal,
-  } from "@budibase/bbui"
+  import { Icon, notifications, Modal } from "@budibase/bbui"
  import { ActionStepID } from "constants/backend/automations"
  import UndoRedoControl from "components/common/UndoRedoControl.svelte"
  import { automationHistoryStore } from "builderStore"
@ -20,9 +14,8 @@

  let testDataModal
  let confirmDeleteDialog
-
-  $: blocks = getBlocks(automation)
-
+  let scrolling = false
+  $: blocks = getBlocks(automation).filter(x => x.stepId !== ActionStepID.LOOP)
  const getBlocks = automation => {
    let blocks = []
    if (automation.definition.trigger) {
@ -32,58 +25,72 @@
    return blocks
  }

-  async function deleteAutomation() {
+  const deleteAutomation = async () => {
    try {
      await automationStore.actions.delete($selectedAutomation)
    } catch (error) {
      notifications.error("Error deleting automation")
    }
  }
+
+  const handleScroll = e => {
+    if (e.target.scrollTop >= 30) {
+      scrolling = true
+    } else if (e.target.scrollTop) {
+      // Set scrolling back to false if scrolled back to less than 100px
+      scrolling = false
+    }
+  }
 </script>

-<div class="canvas">
-  <div class="header">
-    <Heading size="S">{automation.name}</Heading>
-    <div class="controls">
-      <UndoRedoControl store={automationHistoryStore} />
+<div class="header" class:scrolling>
+  <div class="header-left">
+    <UndoRedoControl store={automationHistoryStore} />
+  </div>
+  <div class="controls">
+    <div class="buttons">
+      <Icon hoverable size="M" name="Play" />
+      <div
+        on:click={() => {
+          testDataModal.show()
+        }}
+      >
+        Run test
+      </div>
+    </div>
+    <div class="buttons">
      <Icon
-        on:click={confirmDeleteDialog.show}
+        disabled={!$automationStore.testResults}
        hoverable
        size="M"
-        name="DeleteOutline"
+        name="Multiple"
      />
-      <div class="buttons">
-        <ActionButton
-          on:click={() => {
-            testDataModal.show()
-          }}
-          icon="MultipleCheck"
-          size="M">Run test</ActionButton
-        >
-        <ActionButton
-          disabled={!$automationStore.testResults}
-          on:click={() => {
-            $automationStore.showTestPanel = true
-          }}
-          size="M">Test Details</ActionButton
-        >
+      <div
+        class:disabled={!$automationStore.testResults}
+        on:click={() => {
+          $automationStore.showTestPanel = true
+        }}
+      >
+        Test details
      </div>
    </div>
  </div>
 </div>
-<div class="content">
-  {#each blocks as block, idx (block.id)}
-    <div
-      class="block"
-      animate:flip={{ duration: 500 }}
-      in:fly={{ x: 500, duration: 500 }}
-      out:fly|local={{ x: 500, duration: 500 }}
-    >
-      {#if block.stepId !== ActionStepID.LOOP}
-        <FlowItem {testDataModal} {block} {idx} />
-      {/if}
-    </div>
-  {/each}
+<div class="canvas" on:scroll={handleScroll}>
+  <div class="content">
+    {#each blocks as block, idx (block.id)}
+      <div
+        class="block"
+        animate:flip={{ duration: 500 }}
+        in:fly={{ x: 500, duration: 500 }}
+        out:fly|local={{ x: 500, duration: 500 }}
+      >
+        {#if block.stepId !== ActionStepID.LOOP}
+          <FlowItem {testDataModal} {block} {idx} />
+        {/if}
+      </div>
+    {/each}
+  </div>
 </div>
 <ConfirmDialog
  bind:this={confirmDeleteDialog}
@ -103,6 +110,12 @@
 <style>
  .canvas {
    padding: var(--spacing-l) var(--spacing-xl);
+    overflow-y: auto;
+    max-height: 100%;
+  }
+
+  .header-left :global(div) {
+    border-right: none;
  }
  /* Fix for firefox not respecting bottom padding in scrolling containers */
  .canvas > *:last-child {
@ -117,23 +130,45 @@
  }

  .content {
-    display: inline-block;
-    text-align: left;
+    flex-grow: 1;
+    padding: 23px 23px 80px;
+    box-sizing: border-box;
+  }
+
+  .header.scrolling {
+    background: var(--background);
+    border-bottom: var(--border-light);
+    border-left: var(--border-light);
+    z-index: 1;
  }

  .header {
+    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
+    padding-left: var(--spacing-l);
+    transition: background 130ms ease-out;
+    flex: 0 0 48px;
+    padding-right: var(--spacing-xl);
+  }
+  .controls {
+    display: flex;
+    gap: var(--spacing-xl);
  }
-  .controls,
  .buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
-    gap: var(--spacing-xl);
-  }
-  .buttons {
    gap: var(--spacing-s);
  }
+
+  .buttons:hover {
+    cursor: pointer;
+  }
+
+  .disabled {
+    pointer-events: none;
+    color: var(--spectrum-global-color-gray-500) !important;
+  }
 </style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -7,20 +7,16 @@
    Detail,
    Modal,
    Button,
-    ActionButton,
    notifications,
    Label,
+    AbsTooltip,
  } from "@budibase/bbui"
  import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
  import ActionModal from "./ActionModal.svelte"
  import FlowItemHeader from "./FlowItemHeader.svelte"
  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-  import {
-    ActionStepID,
-    TriggerStepID,
-    Features,
-  } from "constants/backend/automations"
+  import { ActionStepID, TriggerStepID } from "constants/backend/automations"
  import { permissions } from "stores/backend"

  export let block
@ -86,7 +82,7 @@
      if (loopBlock) {
        await automationStore.actions.deleteAutomationBlock(loopBlock)
      }
-      await automationStore.actions.deleteAutomationBlock(block)
+      await automationStore.actions.deleteAutomationBlock(block, blockIdx)
    } catch (error) {
      notifications.error("Error saving automation")
    }
@ -129,6 +125,10 @@
        </div>

        <div class="blockTitle">
+          <AbsTooltip type="negative" text="Remove looping">
+            <Icon on:click={removeLooping} hoverable name="DeleteOutline" />
+          </AbsTooltip>
+
          <div style="margin-left: 10px;" on:click={() => {}}>
            <Icon hoverable name={showLooping ? "ChevronDown" : "ChevronUp"} />
          </div>
@ -139,9 +139,6 @@
    <Divider noMargin />
    {#if !showLooping}
      <div class="blockSection">
-        <div class="block-options">
-          <ActionButton on:click={() => removeLooping()} icon="DeleteOutline" />
-        </div>
        <Layout noPadding gap="S">
          <AutomationBlockSetup
            schemaProperties={Object.entries(
@ -162,31 +159,19 @@
    {block}
    {testDataModal}
    {idx}
+    {addLooping}
+    {deleteStep}
    on:toggle={() => (open = !open)}
  />
  {#if open}
    <Divider noMargin />
    <div class="blockSection">
      <Layout noPadding gap="S">
-        {#if !isTrigger}
-          <div>
-            <div class="block-options">
-              {#if !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)}
-                <ActionButton on:click={() => addLooping()} icon="Reuse">
-                  Add Looping
-                </ActionButton>
-              {/if}
-              <ActionButton
-                on:click={() => deleteStep()}
-                icon="DeleteOutline"
-              />
-            </div>
-          </div>
-        {/if}
-
        {#if isAppAction}
-          <Label>Role</Label>
-          <RoleSelect bind:value={role} />
+          <div>
+            <Label>Role</Label>
+            <RoleSelect bind:value={role} />
+          </div>
        {/if}
        <AutomationBlockSetup
          schemaProperties={Object.entries(block.schema.inputs.properties)}
@ -270,5 +255,6 @@
  .blockTitle {
    display: flex;
    align-items: center;
+    gap: var(--spacing-s);
  }
 </style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@ -1,8 +1,9 @@
 <script>
-  import { automationStore } from "builderStore"
-  import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
+  import { automationStore, selectedAutomation } from "builderStore"
+  import { Icon, Body, StatusLight, AbsTooltip } from "@budibase/bbui"
  import { externalActions } from "./ExternalActions"
  import { createEventDispatcher } from "svelte"
+  import { Features } from "constants/backend/automations"

  export let block
  export let open
@ -10,9 +11,20 @@
  export let testResult
  export let isTrigger
  export let idx
+  export let addLooping
+  export let deleteStep
+
+  let validRegex = /^[A-Za-z0-9_\s]+$/
+  let typing = false

  const dispatch = createEventDispatcher()

+  $: stepNames = $selectedAutomation.definition.stepNames
+  $: automationName = stepNames?.[block.id] || block?.name || ""
+  $: automationNameError = getAutomationNameError(automationName)
+  $: status = updateStatus(testResult, isTrigger)
+  $: isHeaderTrigger = isTrigger || block.type === "TRIGGER"
+
  $: {
    if (!testResult) {
      testResult = $automationStore.testResults?.steps?.filter(step =>
@ -20,8 +32,9 @@
      )?.[0]
    }
  }
-  $: isTrigger = isTrigger || block.type === "TRIGGER"
-  $: status = updateStatus(testResult, isTrigger)
+  $: loopBlock = $selectedAutomation.definition.steps.find(
+    x => x.blockToLoop === block?.id
+  )

  async function onSelect(block) {
    await automationStore.update(state => {
@ -43,10 +56,49 @@
      return { negative: true, message: "Error" }
    }
  }
+
+  const getAutomationNameError = name => {
+    if (stepNames) {
+      for (const [key, value] of Object.entries(stepNames)) {
+        if (name === value && key !== block.id) {
+          return "This name already exists, please enter a unique name"
+        }
+      }
+    }
+
+    if (name !== block.name && name?.length > 0) {
+      let invalidRoleName = !validRegex.test(name)
+      if (invalidRoleName) {
+        return "Please enter a role name consisting of only alphanumeric symbols and underscores"
+      }
+
+      return null
+    }
+  }
+
+  const startTyping = async () => {
+    typing = true
+  }
+
+  const saveName = async () => {
+    if (automationNameError || block.name === automationName) {
+      return
+    }
+
+    if (automationName.length === 0) {
+      await automationStore.actions.deleteAutomationName(block.id)
+    } else {
+      await automationStore.actions.saveAutomationName(block.id, automationName)
+    }
+  }
 </script>

-<div class="blockSection">
-  <div on:click={() => dispatch("toggle")} class="splitHeader">
+<div
+  class:typing={typing && !automationNameError}
+  class:typing-error={automationNameError}
+  class="blockSection"
+>
+  <div class="splitHeader">
    <div class="center-items">
      {#if externalActions[block.stepId]}
        <img
@ -67,40 +119,104 @@
        </svg>
      {/if}
      <div class="iconAlign">
-        {#if isTrigger}
+        {#if isHeaderTrigger}
          <Body size="XS"><b>Trigger</b></Body>
-          <Body size="XS">When this happens:</Body>
        {:else}
-          <Body size="XS"><b>Step {idx}</b></Body>
-          <Body size="XS">Do this:</Body>
+          <div style="margin-left: 2px;">
+            <Body size="XS"><b>Step {idx}</b></Body>
+          </div>
        {/if}
-        <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
+        <input
+          placeholder="Enter some text"
+          name="name"
+          autocomplete="off"
+          value={automationName}
+          on:input={e => {
+            automationName = e.target.value.trim()
+          }}
+          on:click={startTyping}
+          on:blur={async () => {
+            typing = false
+            if (automationNameError) {
+              automationName = stepNames[block.id] || block?.name
+            } else {
+              await saveName()
+            }
+          }}
+        />
      </div>
    </div>
    <div class="blockTitle">
      {#if showTestStatus && testResult}
-        <div style="float: right;">
-          <StatusLight
-            positive={status?.positive}
-            yellow={status?.yellow}
-            negative={status?.negative}
-            ><Body size="XS">{status?.message}</Body></StatusLight
-          >
+        <div class="status-container">
+          <div style="float:right;">
+            <StatusLight
+              positive={status?.positive}
+              yellow={status?.yellow}
+              negative={status?.negative}
+            >
+              <Body size="XS">{status?.message}</Body>
+            </StatusLight>
+          </div>
+          <Icon
+            on:click={() => dispatch("toggle")}
+            hoverable
+            name={open ? "ChevronUp" : "ChevronDown"}
+          />
        </div>
      {/if}
      <div
-        style="margin-left: 10px; margin-bottom: var(--spacing-xs);"
+        class="context-actions"
+        class:hide-context-actions={typing}
        on:click={() => {
          onSelect(block)
        }}
      >
-        <Icon hoverable name={open ? "ChevronUp" : "ChevronDown"} />
+        {#if !showTestStatus}
+          {#if !isHeaderTrigger && !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)}
+            <AbsTooltip type="info" text="Add looping">
+              <Icon on:click={addLooping} hoverable name="RotateCW" />
+            </AbsTooltip>
+          {/if}
+          <AbsTooltip type="negative" text="Delete step">
+            <Icon on:click={deleteStep} hoverable name="DeleteOutline" />
+          </AbsTooltip>
+        {/if}
+        {#if !showTestStatus}
+          <Icon
+            on:click={() => dispatch("toggle")}
+            hoverable
+            name={open ? "ChevronUp" : "ChevronDown"}
+          />
+        {/if}
      </div>
+      {#if automationNameError}
+        <div class="error-container">
+          <AbsTooltip type="negative" text={automationNameError}>
+            <div class="error-icon">
+              <Icon size="S" name="Alert" />
+            </div>
+          </AbsTooltip>
+        </div>
+      {/if}
    </div>
  </div>
 </div>

 <style>
+  .status-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+    /* You can also add padding or margin to adjust the spacing between the text and the chevron if needed. */
+  }
+
+  .context-actions {
+    display: flex;
+    gap: var(--spacing-l);
+    margin-bottom: var(--spacing-xs);
+  }
  .center-items {
    display: flex;
    align-items: center;
@ -117,10 +233,55 @@

  .blockSection {
    padding: var(--spacing-xl);
+    border: 1px solid transparent;
  }

  .blockTitle {
    display: flex;
-    align-items: center;
+  }
+
+  .hide-context-actions {
+    display: none;
+  }
+  input {
+    font-family: var(--font-sans);
+    color: var(--ink);
+    background-color: transparent;
+    border: 1px solid transparent;
+    font-size: var(--spectrum-alias-font-size-default);
+    width: 230px;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  /* Hide arrows for number fields */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .typing {
+    border: 1px solid var(--spectrum-global-color-static-blue-500);
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .typing-error {
+    border: 1px solid var(--spectrum-global-color-static-red-500);
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+
+  .error-container {
+    padding-top: var(--spacing-xl);
  }
 </style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@ -60,6 +60,7 @@
 <ModalContent
  title="Add test data"
  confirmText="Test"
+  size="M"
  showConfirmButton={true}
  disabled={isError}
  onConfirm={testAutomation}
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -58,7 +58,6 @@
  let fillWidth = true
  let inputData
  let codeBindingOpen = false
-
  $: filters = lookForFilters(schemaProperties) || []
  $: tempFilters = filters
  $: stepId = block.stepId
@ -155,7 +154,7 @@
    }
    let blockIdx = allSteps.findIndex(step => step.id === block.id)

-    // Extract all outputs from all previous steps as available bindins
+    // Extract all outputs from all previous steps as available bindingsx§x
    let bindings = []
    let loopBlockCount = 0
    for (let idx = 0; idx < blockIdx; idx++) {
@ -183,20 +182,19 @@
        }
      }
      const outputs = Object.entries(schema)
-
      let bindingIcon = ""
-      let bindindingRank = 0
-
+      let bindingRank = 0
      if (idx === 0) {
        bindingIcon = automation.trigger.icon
      } else if (isLoopBlock) {
        bindingIcon = "Reuse"
-        bindindingRank = idx + 1
+        bindingRank = idx + 1
      } else {
        bindingIcon = allSteps[idx].icon
-        bindindingRank = idx - loopBlockCount
+        bindingRank = idx - loopBlockCount
      }
-
+      let bindingName =
+        automation.stepNames?.[allSteps[idx - loopBlockCount].id]
      bindings = bindings.concat(
        outputs.map(([name, value]) => {
          let runtimeName = isLoopBlock
@ -205,14 +203,20 @@
            ? `steps[${idx - loopBlockCount}].${name}`
            : `steps.${idx - loopBlockCount}.${name}`
          const runtime = idx === 0 ? `trigger.${name}` : runtimeName
-          const categoryName =
-            idx === 0
-              ? "Trigger outputs"
-              : isLoopBlock
-              ? "Loop Outputs"
-              : `Step ${idx - loopBlockCount} outputs`
+
+          let categoryName
+          if (idx === 0) {
+            categoryName = "Trigger outputs"
+          } else if (isLoopBlock) {
+            categoryName = "Loop Outputs"
+          } else if (bindingName) {
+            categoryName = `${bindingName} outputs`
+          } else {
+            categoryName = `Step ${idx - loopBlockCount} outputs`
+          }
+
          return {
-            readableBinding: runtime,
+            readableBinding: bindingName ? `${bindingName}.${name}` : runtime,
            runtimeBinding: runtime,
            type: value.type,
            description: value.description,
@ -221,7 +225,7 @@
            display: {
              type: value.type,
              name: name,
-              rank: bindindingRank,
+              rank: bindingRank,
            },
          }
        })
@ -277,6 +281,16 @@
    return !dependsOn || !!inputData[dependsOn]
  }

+  function shouldRenderField(value) {
+    return (
+      value.customType !== "row" &&
+      value.customType !== "code" &&
+      value.customType !== "queryParams" &&
+      value.customType !== "cron" &&
+      value.customType !== "triggerSchema"
+    )
+  }
+
  onMount(async () => {
    try {
      await environment.loadVariables()
@ -289,245 +303,248 @@
 <div class="fields">
  {#each schemaProperties as [key, value]}
    {#if canShowField(key, value)}
-      <div class="block-field">
-        {#if key !== "fields" && value.type !== "boolean"}
+      <div class:block-field={shouldRenderField(value)}>
+        {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
          <Label
            tooltip={value.title === "Binding / Value"
              ? "If using the String input type, please use a comma or newline separated string"
              : null}>{value.title || (key === "row" ? "Table" : key)}</Label
          >
        {/if}
-        {#if value.type === "string" && value.enum && canShowField(key, value)}
-          <Select
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-            placeholder={false}
-            options={value.enum}
-            getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
-          />
-        {:else if value.type === "json"}
-          <Editor
-            editorHeight="250"
-            editorWidth="448"
-            mode="json"
-            value={inputData[key]?.value}
-            on:change={e => {
-              onChange(e, key)
-            }}
-          />
-        {:else if value.type === "boolean"}
-          <div style="margin-top: 10px">
-            <Checkbox
-              text={value.title}
-              value={inputData[key]}
+        <div class:field-width={shouldRenderField(value)}>
+          {#if value.type === "string" && value.enum && canShowField(key, value)}
+            <Select
              on:change={e => onChange(e, key)}
-            />
-          </div>
-        {:else if value.type === "date"}
-          <DrawerBindableSlot
-            fillWidth
-            title={value.title}
-            panel={AutomationBindingPanel}
-            type={"date"}
-            value={inputData[key]}
-            on:change={e => onChange(e, key)}
-            {bindings}
-            allowJS={true}
-            updateOnChange={false}
-            drawerLeft="260px"
-          >
-            <DatePicker
              value={inputData[key]}
-              on:change={e => onChange(e, key)}
+              placeholder={false}
+              options={value.enum}
+              getOptionLabel={(x, idx) =>
+                value.pretty ? value.pretty[idx] : x}
            />
-          </DrawerBindableSlot>
-        {:else if value.customType === "column"}
-          <Select
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-            options={Object.keys(table?.schema || {})}
-          />
-        {:else if value.customType === "filters"}
-          <ActionButton on:click={drawer.show}>Define filters</ActionButton>
-          <Drawer bind:this={drawer} {fillWidth} title="Filtering">
-            <Button cta slot="buttons" on:click={() => saveFilters(key)}>
-              Save
-            </Button>
-            <FilterDrawer
-              slot="body"
-              {filters}
-              {bindings}
-              {schemaFields}
-              datasource={{ type: "table", tableId }}
-              panel={AutomationBindingPanel}
-              fillWidth
-              on:change={e => (tempFilters = e.detail)}
+          {:else if value.type === "json"}
+            <Editor
+              editorHeight="250"
+              editorWidth="448"
+              mode="json"
+              value={inputData[key]?.value}
+              on:change={e => {
+                onChange(e, key)
+              }}
            />
-          </Drawer>
-        {:else if value.customType === "password"}
-          <Input
-            type="password"
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-          />
-        {:else if value.customType === "email"}
-          {#if isTestModal}
-            <ModalBindableInput
-              title={value.title}
-              value={inputData[key]}
-              panel={AutomationBindingPanel}
-              type="email"
-              on:change={e => onChange(e, key)}
-              {bindings}
-              fillWidth
-              updateOnChange={false}
-            />
-          {:else}
-            <DrawerBindableInput
+          {:else if value.type === "boolean"}
+            <div style="margin-top: 10px">
+              <Checkbox
+                text={value.title}
+                value={inputData[key]}
+                on:change={e => onChange(e, key)}
+              />
+            </div>
+          {:else if value.type === "date"}
+            <DrawerBindableSlot
              fillWidth
              title={value.title}
              panel={AutomationBindingPanel}
-              type="email"
+              type={"date"}
              value={inputData[key]}
              on:change={e => onChange(e, key)}
              {bindings}
-              allowJS={false}
+              allowJS={true}
              updateOnChange={false}
              drawerLeft="260px"
-            />
-          {/if}
-        {:else if value.customType === "query"}
-          <QuerySelector
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-          />
-        {:else if value.customType === "cron"}
-          <CronBuilder
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-          />
-        {:else if value.customType === "queryParams"}
-          <QueryParamSelector
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-            {bindings}
-          />
-        {:else if value.customType === "table"}
-          <TableSelector
-            {isTrigger}
-            value={inputData[key]}
-            on:change={e => onChange(e, key)}
-          />
-        {:else if value.customType === "row"}
-          <RowSelector
-            value={inputData[key]}
-            meta={inputData["meta"] || {}}
-            on:change={e => {
-              if (e.detail?.key) {
-                onChange(e, e.detail.key)
-              } else {
-                onChange(e, key)
-              }
-            }}
-            {bindings}
-            {isTestModal}
-            {isUpdateRow}
-          />
-        {:else if value.customType === "webhookUrl"}
-          <WebhookDisplay
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-          />
-        {:else if value.customType === "fields"}
-          <FieldSelector
-            {block}
-            value={inputData[key]}
-            on:change={e => onChange(e, key)}
-            {bindings}
-            {isTestModal}
-          />
-        {:else if value.customType === "triggerSchema"}
-          <SchemaSetup
-            on:change={e => onChange(e, key)}
-            value={inputData[key]}
-          />
-        {:else if value.customType === "code"}
-          <CodeEditorModal>
-            {#if codeMode == EditorModes.JS}
-              <ActionButton
-                on:click={() => (codeBindingOpen = !codeBindingOpen)}
-                quiet
-                icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
-              >
-                <Detail size="S">Bindings</Detail>
-              </ActionButton>
-              {#if codeBindingOpen}
-                <pre>{JSON.stringify(bindings, null, 2)}</pre>
-              {/if}
-            {/if}
-            <CodeEditor
-              value={inputData[key]}
-              on:change={e => {
-                // need to pass without the value inside
-                onChange({ detail: e.detail }, key)
-                inputData[key] = e.detail
-              }}
-              completions={stepCompletions}
-              mode={codeMode}
-              autocompleteEnabled={codeMode != EditorModes.JS}
-              height={500}
-            />
-            <div class="messaging">
-              {#if codeMode == EditorModes.Handlebars}
-                <Icon name="FlashOn" />
-                <div class="messaging-wrap">
-                  <div>
-                    Add available bindings by typing <strong>
-                      &#125;&#125;
-                    </strong>
-                  </div>
-                </div>
-              {/if}
-            </div>
-          </CodeEditorModal>
-        {:else if value.customType === "loopOption"}
-          <Select
-            on:change={e => onChange(e, key)}
-            autoWidth
-            value={inputData[key]}
-            options={["Array", "String"]}
-            defaultValue={"Array"}
-          />
-        {:else if value.type === "string" || value.type === "number" || value.type === "integer"}
-          {#if isTestModal}
-            <ModalBindableInput
-              title={value.title}
-              value={inputData[key]}
-              panel={AutomationBindingPanel}
-              type={value.customType}
+            >
+              <DatePicker
+                value={inputData[key]}
+                on:change={e => onChange(e, key)}
+              />
+            </DrawerBindableSlot>
+          {:else if value.customType === "column"}
+            <Select
              on:change={e => onChange(e, key)}
-              {bindings}
-              updateOnChange={false}
+              value={inputData[key]}
+              options={Object.keys(table?.schema || {})}
            />
-          {:else}
-            <div class="test">
+          {:else if value.customType === "filters"}
+            <ActionButton on:click={drawer.show}>Define filters</ActionButton>
+            <Drawer bind:this={drawer} {fillWidth} title="Filtering">
+              <Button cta slot="buttons" on:click={() => saveFilters(key)}>
+                Save
+              </Button>
+              <FilterDrawer
+                slot="body"
+                {filters}
+                {bindings}
+                {schemaFields}
+                datasource={{ type: "table", tableId }}
+                panel={AutomationBindingPanel}
+                fillWidth
+                on:change={e => (tempFilters = e.detail)}
+              />
+            </Drawer>
+          {:else if value.customType === "password"}
+            <Input
+              type="password"
+              on:change={e => onChange(e, key)}
+              value={inputData[key]}
+            />
+          {:else if value.customType === "email"}
+            {#if isTestModal}
+              <ModalBindableInput
+                title={value.title}
+                value={inputData[key]}
+                panel={AutomationBindingPanel}
+                type="email"
+                on:change={e => onChange(e, key)}
+                {bindings}
+                fillWidth
+                updateOnChange={false}
+              />
+            {:else}
              <DrawerBindableInput
-                fillWidth={true}
+                fillWidth
                title={value.title}
                panel={AutomationBindingPanel}
-                type={value.customType}
+                type="email"
                value={inputData[key]}
                on:change={e => onChange(e, key)}
                {bindings}
+                allowJS={false}
                updateOnChange={false}
-                placeholder={value.customType === "queryLimit"
-                  ? queryLimit
-                  : ""}
                drawerLeft="260px"
              />
-            </div>
+            {/if}
+          {:else if value.customType === "query"}
+            <QuerySelector
+              on:change={e => onChange(e, key)}
+              value={inputData[key]}
+            />
+          {:else if value.customType === "cron"}
+            <CronBuilder
+              on:change={e => onChange(e, key)}
+              value={inputData[key]}
+            />
+          {:else if value.customType === "queryParams"}
+            <QueryParamSelector
+              on:change={e => onChange(e, key)}
+              value={inputData[key]}
+              {bindings}
+            />
+          {:else if value.customType === "table"}
+            <TableSelector
+              {isTrigger}
+              value={inputData[key]}
+              on:change={e => onChange(e, key)}
+            />
+          {:else if value.customType === "row"}
+            <RowSelector
+              value={inputData[key]}
+              meta={inputData["meta"] || {}}
+              on:change={e => {
+                if (e.detail?.key) {
+                  onChange(e, e.detail.key)
+                } else {
+                  onChange(e, key)
+                }
+              }}
+              {bindings}
+              {isTestModal}
+              {isUpdateRow}
+            />
+          {:else if value.customType === "webhookUrl"}
+            <WebhookDisplay
+              on:change={e => onChange(e, key)}
+              value={inputData[key]}
+            />
+          {:else if value.customType === "fields"}
+            <FieldSelector
+              {block}
+              value={inputData[key]}
+              on:change={e => onChange(e, key)}
+              {bindings}
+              {isTestModal}
+            />
+          {:else if value.customType === "triggerSchema"}
+            <SchemaSetup
+              on:change={e => onChange(e, key)}
+              value={inputData[key]}
+            />
+          {:else if value.customType === "code"}
+            <CodeEditorModal>
+              {#if codeMode == EditorModes.JS}
+                <ActionButton
+                  on:click={() => (codeBindingOpen = !codeBindingOpen)}
+                  quiet
+                  icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
+                >
+                  <Detail size="S">Bindings</Detail>
+                </ActionButton>
+                {#if codeBindingOpen}
+                  <pre>{JSON.stringify(bindings, null, 2)}</pre>
+                {/if}
+              {/if}
+              <CodeEditor
+                value={inputData[key]}
+                on:change={e => {
+                  // need to pass without the value inside
+                  onChange({ detail: e.detail }, key)
+                  inputData[key] = e.detail
+                }}
+                completions={stepCompletions}
+                mode={codeMode}
+                autocompleteEnabled={codeMode != EditorModes.JS}
+                height={500}
+              />
+              <div class="messaging">
+                {#if codeMode == EditorModes.Handlebars}
+                  <Icon name="FlashOn" />
+                  <div class="messaging-wrap">
+                    <div>
+                      Add available bindings by typing <strong>
+                        &#125;&#125;
+                      </strong>
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            </CodeEditorModal>
+          {:else if value.customType === "loopOption"}
+            <Select
+              on:change={e => onChange(e, key)}
+              autoWidth
+              value={inputData[key]}
+              options={["Array", "String"]}
+              defaultValue={"Array"}
+            />
+          {:else if value.type === "string" || value.type === "number" || value.type === "integer"}
+            {#if isTestModal}
+              <ModalBindableInput
+                title={value.title}
+                value={inputData[key]}
+                panel={AutomationBindingPanel}
+                type={value.customType}
+                on:change={e => onChange(e, key)}
+                {bindings}
+                updateOnChange={false}
+              />
+            {:else}
+              <div class="test">
+                <DrawerBindableInput
+                  fillWidth={true}
+                  title={value.title}
+                  panel={AutomationBindingPanel}
+                  type={value.customType}
+                  value={inputData[key]}
+                  on:change={e => onChange(e, key)}
+                  {bindings}
+                  updateOnChange={false}
+                  placeholder={value.customType === "queryLimit"
+                    ? queryLimit
+                    : ""}
+                  drawerLeft="260px"
+                />
+              </div>
+            {/if}
          {/if}
-        {/if}
+        </div>
      </div>
    {/if}
  {/each}
@ -541,6 +558,10 @@
 {/if}

 <style>
+  .field-width {
+    width: 320px;
+  }
+
  .messaging {
    display: flex;
    align-items: center;
@ -555,8 +576,13 @@
  }

  .block-field {
-    display: grid;
-    grid-gap: 5px;
+    display: flex; /* Use Flexbox */
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row; /* Arrange label and field side by side */
+    align-items: center; /* Align vertically in the center */
+    gap: 10px; /* Add some space between label and field */
+    flex: 1;
  }

  .test :global(.drawer) {
--- a/packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte
@ -23,7 +23,9 @@
    </div>
  </ModalContent>
 </Modal>
-<Button primary on:click={show}>Edit Code</Button>
+<div class="center">
+  <Button primary on:click={show}>Edit Code</Button>
+</div>

 <style>
  .container :global(section > header) {
@ -33,4 +35,9 @@
  .container :global(textarea) {
    min-height: 60px;
  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+  }
 </style>
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@ -1,7 +1,7 @@
 <script>
  import { createEventDispatcher } from "svelte"
  import { queries } from "stores/backend"
-  import { Select } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"

@ -27,41 +27,55 @@
  $: if (value?.queryId == null) value = { queryId: "" }
 </script>

-<div class="block-field">
-  <Select
-    label="Query"
-    on:change={onChangeQuery}
-    value={value.queryId}
-    options={$queries.list}
-    getOptionValue={query => query._id}
-    getOptionLabel={query => query.name}
-  />
+<div class="schema-fields">
+  <Label>Query</Label>
+  <div class="field-width">
+    <Select
+      on:change={onChangeQuery}
+      value={value.queryId}
+      options={$queries.list}
+      getOptionValue={query => query._id}
+      getOptionLabel={query => query.name}
+    />
+  </div>
 </div>

 {#if parameters.length}
  <div class="schema-fields">
    {#each parameters as field}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
-        extraThin
-        value={value[field.name]}
-        on:change={e => onChange(e, field)}
-        label={field.name}
-        type="string"
-        {bindings}
-        fillWidth={true}
-        updateOnChange={false}
-      />
+      <Label>{field.name}</Label>
+      <div class="field-width">
+        <DrawerBindableInput
+          panel={AutomationBindingPanel}
+          extraThin
+          value={value[field.name]}
+          on:change={e => onChange(e, field)}
+          type="string"
+          {bindings}
+          fillWidth={true}
+          updateOnChange={false}
+        />
+      </div>
    {/each}
  </div>
 {/if}

 <style>
-  .schema-fields {
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    margin-top: var(--spacing-xl);
+  .field-width {
+    width: 320px;
  }
+
+  .schema-fields {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    margin-bottom: 10px;
+  }
+
  .schema-fields :global(label) {
    text-transform: capitalize;
  }
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@ -1,10 +1,11 @@
 <script>
  import { tables } from "stores/backend"
-  import { Select, Checkbox } from "@budibase/bbui"
+  import { Select, Checkbox, Label } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import RowSelectorTypes from "./RowSelectorTypes.svelte"
  import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
+  import { TableNames } from "constants"

  const dispatch = createEventDispatcher()

@ -99,41 +100,25 @@
  $: if (value?.tableId == null) value = { tableId: "" }
 </script>

-<Select
-  on:change={onChangeTable}
-  value={value.tableId}
-  options={$tables.list}
-  getOptionLabel={table => table.name}
-  getOptionValue={table => table._id}
-/>
+<div class="schema-fields">
+  <Label>Table</Label>
+  <div class="field-width">
+    <Select
+      on:change={onChangeTable}
+      value={value.tableId}
+      options={$tables.list.filter(table => table._id !== TableNames.USERS)}
+      getOptionLabel={table => table.name}
+      getOptionValue={table => table._id}
+    />
+  </div>
+</div>
 {#if schemaFields.length}
-  <div class="schema-fields">
-    {#each schemaFields as [field, schema]}
-      {#if !schema.autocolumn && schema.type !== "attachment"}
-        {#if isTestModal}
-          <RowSelectorTypes
-            {isTestModal}
-            {field}
-            {schema}
-            bindings={parsedBindings}
-            {value}
-            {onChange}
-          />
-        {:else}
-          <DrawerBindableSlot
-            fillWidth
-            title={value.title}
-            label={field}
-            panel={AutomationBindingPanel}
-            type={schema.type}
-            {schema}
-            value={value[field]}
-            on:change={e => onChange(e, field)}
-            {bindings}
-            allowJS={true}
-            updateOnChange={false}
-            drawerLeft="260px"
-          >
+  {#each schemaFields as [field, schema]}
+    <div class="schema-fields">
+      <Label>{field}</Label>
+      <div class="field-width">
+        {#if !schema.autocolumn && schema.type !== "attachment"}
+          {#if isTestModal}
            <RowSelectorTypes
              {isTestModal}
              {field}
@ -142,28 +127,61 @@
              {value}
              {onChange}
            />
-          </DrawerBindableSlot>
+          {:else}
+            <DrawerBindableSlot
+              fillWidth
+              title={value.title}
+              panel={AutomationBindingPanel}
+              type={schema.type}
+              {schema}
+              value={value[field]}
+              on:change={e => onChange(e, field)}
+              {bindings}
+              allowJS={true}
+              updateOnChange={false}
+              drawerLeft="260px"
+            >
+              <RowSelectorTypes
+                {isTestModal}
+                {field}
+                {schema}
+                bindings={parsedBindings}
+                {value}
+                {onChange}
+              />
+            </DrawerBindableSlot>
+          {/if}
        {/if}
-      {/if}
-      {#if isUpdateRow && schema.type === "link"}
-        <div class="checkbox-field">
-          <Checkbox
-            value={meta.fields?.[field]?.clearRelationships}
-            text={"Clear relationships if empty?"}
-            size={"S"}
-            on:change={e => onChangeSetting(e, field)}
-          />
-        </div>
-      {/if}
-    {/each}
-  </div>
+
+        {#if isUpdateRow && schema.type === "link"}
+          <div class="checkbox-field">
+            <Checkbox
+              value={meta.fields?.[field]?.clearRelationships}
+              text={"Clear relationships if empty?"}
+              size={"S"}
+              on:change={e => onChangeSetting(e, field)}
+            />
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/each}
 {/if}

 <style>
+  .field-width {
+    width: 320px;
+  }
+
  .schema-fields {
-    display: grid;
-    grid-gap: var(--spacing-s);
-    margin-top: var(--spacing-s);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    margin-bottom: 10px;
  }
  .schema-fields :global(label) {
    text-transform: capitalize;
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@ -1,11 +1,5 @@
 <script>
-  import {
-    Select,
-    DatePicker,
-    Multiselect,
-    TextArea,
-    Label,
-  } from "@budibase/bbui"
+  import { Select, DatePicker, Multiselect, TextArea } from "@budibase/bbui"
  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
  import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
  import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
@ -33,20 +27,14 @@
 {#if schemaHasOptions(schema) && schema.type !== "array"}
  <Select
    on:change={e => onChange(e, field)}
-    label={field}
    value={value[field]}
    options={schema.constraints.inclusion}
  />
 {:else if schema.type === "datetime"}
-  <DatePicker
-    label={field}
-    value={value[field]}
-    on:change={e => onChange(e, field)}
-  />
+  <DatePicker value={value[field]} on:change={e => onChange(e, field)} />
 {:else if schema.type === "boolean"}
  <Select
    on:change={e => onChange(e, field)}
-    label={field}
    value={value[field]}
    options={[
      { label: "True", value: "true" },
@ -56,19 +44,13 @@
 {:else if schema.type === "array"}
  <Multiselect
    bind:value={value[field]}
-    label={field}
    options={schema.constraints.inclusion}
    on:change={e => onChange(e, field)}
  />
 {:else if schema.type === "longform"}
-  <TextArea
-    label={field}
-    bind:value={value[field]}
-    on:change={e => onChange(e, field)}
-  />
+  <TextArea bind:value={value[field]} on:change={e => onChange(e, field)} />
 {:else if schema.type === "json"}
  <span>
-    <Label>{field}</Label>
    <Editor
      editorHeight="150"
      mode="json"
@ -92,7 +74,6 @@
    panel={AutomationBindingPanel}
    value={value[field]}
    on:change={e => onChange(e, field)}
-    label={field}
    type="string"
    bindings={parsedBindings}
    fillWidth={true}
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@ -22,7 +22,7 @@
 <Select
  on:change={onChange}
  bind:value
-  options={filteredTables}
+  options={filteredTables.filter(table => table._id !== TableNames.USERS)}
  getOptionLabel={table => table.name}
  getOptionValue={table => table._id}
 />
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Budibase.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Budibase.svelte
@ -4,123 +4,33 @@
 </script>

 <svg
-  version="1.1"
-  id="Layer_1"
+  viewBox="0 0 265 265"
+  fill="none"
  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  x="0px"
-  y="0px"
-  viewBox="0 0 48 48"
-  style="enable-background:new 0 0 48 48;"
-  xml:space="preserve"
  {height}
  {width}
 >
-  <style type="text/css">
-    .st0 {
-      fill: #393c44;
-    }
-    .st1 {
-      fill: #ffffff;
-    }
-    .st2 {
-      fill: #4285f4;
-    }
-  </style>
-  <rect x="-152.17" y="-24.17" class="st0" width="96.17" height="96.17" />
-  <path
-    class="st1"
-    d="M-83.19,48h-41.79c-1.76,0-3.19-1.43-3.19-3.19V3.02c0-1.76,1.43-3.19,3.19-3.19h41.79
-  c1.76,0,3.19,1.43,3.19,3.19v41.79C-80,46.57-81.43,48-83.19,48z"
-  />
-  <g>
-    <g>
-      <path
-        class="st0"
-        d="M-99.62,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
-      c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
-      c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35h-4.89V12.57H-99.62z
-       M-93.46,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
-      c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
-      c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
-      c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
-      C-93.55,28.92-93.46,28.52-93.46,28.11z"
-      />
-    </g>
-    <g>
-      <path
-        class="st0"
-        d="M-114.76,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58
-      c0.86,0.39,1.59,0.91,2.19,1.57c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89
-      c-0.35,0.9-0.84,1.68-1.47,2.35c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35
-      h-4.89V12.57H-114.76z M-108.6,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
-      c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
-      c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
-      c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
-      C-108.68,28.92-108.6,28.52-108.6,28.11z"
-      />
-    </g>
-  </g>
-  <path
-    class="st2"
-    d="M44.81,159H3.02c-1.76,0-3.19-1.43-3.19-3.19v-41.79c0-1.76,1.43-3.19,3.19-3.19h41.79
-  c1.76,0,3.19,1.43,3.19,3.19v41.79C48,157.57,46.57,159,44.81,159z"
-  />
-  <g>
-    <g>
-      <path
-        class="st1"
-        d="M28.38,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
-      c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
-      c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146h-4.89v-22.43H28.38z
-       M34.54,139.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
-      c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
-      c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
-      c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
-      C34.45,139.92,34.54,139.52,34.54,139.11z"
-      />
-    </g>
-    <g>
-      <path
-        class="st1"
-        d="M13.24,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
-      c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
-      c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146H8.35v-22.43H13.24z M19.4,139.11
-      c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69c-0.38-0.17-0.79-0.26-1.24-0.26
-      c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01c-0.17,0.39-0.26,0.8-0.26,1.23
-      c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68c0.39,0.17,0.8,0.26,1.23,0.26
-      c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1C19.32,139.92,19.4,139.52,19.4,139.11z"
-      />
-    </g>
-  </g>
-  <g>
+  <g clip-path="url(#clip0_1_1799)">
    <path
-      class="st0"
-      d="M44,48H4c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4v40C48,46.21,46.21,48,44,48z"
+      d="M158.2 8.6V116.6C158.2 121.3 162 125.2 166.8 125.2H213.8C218 125.2 222 123.2 224.6 119.8L262.9 68.9C265.7 65.2 265.7 60.1 262.9 56.4L224.6 5.4C222 2 218 0 213.8 0H166.8C162 0 158.2 3.8 158.2 8.6Z"
+      fill="#FF4E4E"
+    />
+    <path
+      d="M158.2 148.4V256.4C158.2 261.1 162 265 166.8 265H213.8C218 265 222 263 224.6 259.6L262.9 208.7C265.7 205 265.7 199.9 262.9 196.2L224.6 145.3C222.1 141.9 218.1 139.9 213.8 139.9H166.8C162 139.8 158.2 143.7 158.2 148.4Z"
+      fill="#6E56FF"
+    />
+    <path
+      d="M0 8.6V116.6C0 121.3 3.8 125.2 8.6 125.2H109.6C113.8 125.2 117.8 123.2 120.4 119.8L155.9 72.5C160.3 66.6 160.3 58.5 155.9 52.6L120.3 5.4C117.8 2 113.8 0 109.5 0H8.6C3.8 0 0 3.8 0 8.6Z"
+      fill="#F97777"
+    />
+    <path
+      d="M0 148.4V256.4C0 261.1 3.8 265 8.6 265H109.6C113.8 265 117.8 263 120.4 259.6L155.9 212.3C160.3 206.4 160.3 198.3 155.9 192.4L120.4 145.1C117.9 141.7 113.9 139.7 109.6 139.7H8.6C3.8 139.8 0 143.7 0 148.4Z"
+      fill="#9F8FFF"
    />
-    <g>
-      <path
-        class="st1"
-        d="M28.48,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
-      c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
-      c-0.64,0.7-1.4,1.25-2.28,1.66C34.8,35.8,33.86,36,32.84,36c-1.84,0-3.3-0.69-4.37-2.07v1.62h-5V12H28.48z M34.78,28.31
-      c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
-      c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
-      s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
-      c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C34.69,29.16,34.78,28.75,34.78,28.31z"
-      />
-    </g>
-    <g>
-      <path
-        class="st1"
-        d="M13,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
-      c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
-      c-0.64,0.7-1.4,1.25-2.28,1.66C19.32,35.8,18.38,36,17.37,36c-1.84,0-3.3-0.69-4.37-2.07v1.62H8V12H13z M19.3,28.31
-      c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
-      c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
-      s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
-      c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C19.21,29.16,19.3,28.75,19.3,28.31z"
-      />
-    </g>
  </g>
+  <defs>
+    <clipPath id="clip0_1_1799">
+      <rect width="265" height="265" fill="white" />
+    </clipPath>
+  </defs>
 </svg>
--- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
+++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
@ -30,15 +30,15 @@
      part2: PrettyRelationshipDefinitions.MANY,
    },
    [RelationshipType.MANY_TO_ONE]: {
-      part1: PrettyRelationshipDefinitions.ONE,
-      part2: PrettyRelationshipDefinitions.MANY,
+      part1: PrettyRelationshipDefinitions.MANY,
+      part2: PrettyRelationshipDefinitions.ONE,
    },
  }
  let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
  let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)

-  let relationshipPart1 = PrettyRelationshipDefinitions.MANY
-  let relationshipPart2 = PrettyRelationshipDefinitions.ONE
+  let relationshipPart1 = PrettyRelationshipDefinitions.ONE
+  let relationshipPart2 = PrettyRelationshipDefinitions.MANY

  let originalFromColumnName = toRelationship.name,
    originalToColumnName = fromRelationship.name
--- a/packages/builder/src/components/common/HelpMenu.svelte
+++ b/packages/builder/src/components/common/HelpMenu.svelte
@ -90,13 +90,17 @@

  .openMenu {
    cursor: pointer;
-    background-color: #6a1dc8;
+    background-color: var(--bb-indigo);
    border-radius: 100px;
    color: white;
    border: none;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
+    transition: background-color 130ms ease-out;
+  }
+  .openMenu:hover {
+    background-color: var(--bb-indigo-light);
  }

  .helpMenu {
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@ -206,12 +206,12 @@
  .text-area-slot-icon {
    border-bottom: 1px solid var(--spectrum-alias-border-color);
    border-bottom-right-radius: 0px !important;
-    top: 26px !important;
+    top: 1px !important;
  }
  .json-slot-icon {
    border-bottom: 1px solid var(--spectrum-alias-border-color);
    border-bottom-right-radius: 0px !important;
-    top: 23px !important;
+    top: 1px !important;
    right: 0px !important;
  }

--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@ -1,5 +1,5 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
-import DataSourceSelect from "./controls/DataSourceSelect.svelte"
+import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
 import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
@ -0,0 +1,55 @@
+<script>
+  import { Divider, Heading } from "@budibase/bbui"
+
+  export let dividerState
+  export let heading
+  export let dataSet
+  export let value
+  export let onSelect
+</script>
+
+{#if dividerState}
+  <Divider />
+{/if}
+{#if heading}
+  <div class="title">
+    <Heading size="XS">{heading}</Heading>
+  </div>
+{/if}
+<ul class="spectrum-Menu" role="listbox">
+  {#each dataSet as data}
+    <li
+      class="spectrum-Menu-item"
+      class:is-selected={value?.label === data.label &&
+        value?.type === data.type}
+      role="option"
+      aria-selected="true"
+      tabindex="0"
+      on:click={() => onSelect(data)}
+    >
+      <span class="spectrum-Menu-itemLabel">
+        {data.label}
+      </span>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Checkmark100" />
+      </svg>
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m);
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+    width: 100%;
+  }
+</style>
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
@ -7,10 +7,8 @@
  import {
    Button,
    Popover,
-    Divider,
    Select,
    Layout,
-    Heading,
    Drawer,
    DrawerContent,
    Icon,
@ -32,6 +30,7 @@
  import IntegrationQueryEditor from "components/integration/index.svelte"
  import { makePropSafe as safe } from "@budibase/string-templates"
  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
  import { API } from "api"

  export let value = {}
@ -279,102 +278,81 @@
 </div>
 <Popover bind:this={dropdownRight} anchor={anchorRight}>
  <div class="dropdown">
-    <div class="title">
-      <Heading size="XS">Tables</Heading>
-    </div>
-    <ul>
-      {#each tables as table}
-        <li on:click={() => handleSelected(table)}>{table.label}</li>
-      {/each}
-    </ul>
+    <DataSourceCategory
+      heading="Tables"
+      dataSet={tables}
+      {value}
+      onSelect={handleSelected}
+    />
    {#if views?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Views</Heading>
-      </div>
-      <ul>
-        {#each views as view}
-          <li on:click={() => handleSelected(view)}>{view.label}</li>
-        {/each}
-      </ul>
+      <DataSourceCategory
+        dividerState={true}
+        heading="Views"
+        dataSet={views}
+        {value}
+        onSelect={handleSelected}
+      />
    {/if}
    {#if queries?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Queries</Heading>
-      </div>
-      <ul>
-        {#each queries as query}
-          <li
-            class:selected={value === query}
-            on:click={() => handleSelected(query)}
-          >
-            {query.label}
-          </li>
-        {/each}
-      </ul>
+      <DataSourceCategory
+        dividerState={true}
+        heading="Queries"
+        dataSet={queries}
+        {value}
+        onSelect={handleSelected}
+      />
    {/if}
    {#if links?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Relationships</Heading>
-      </div>
-      <ul>
-        {#each links as link}
-          <li on:click={() => handleSelected(link)}>{link.label}</li>
-        {/each}
-      </ul>
+      <DataSourceCategory
+        dividerState={true}
+        heading="Links"
+        dataSet={links}
+        {value}
+        onSelect={handleSelected}
+      />
    {/if}
    {#if fields?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Fields</Heading>
-      </div>
-      <ul>
-        {#each fields as field}
-          <li on:click={() => handleSelected(field)}>{field.label}</li>
-        {/each}
-      </ul>
+      <DataSourceCategory
+        dividerState={true}
+        heading="Fields"
+        dataSet={fields}
+        {value}
+        onSelect={handleSelected}
+      />
    {/if}
    {#if jsonArrays?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">JSON Arrays</Heading>
-      </div>
-      <ul>
-        {#each jsonArrays as field}
-          <li on:click={() => handleSelected(field)}>{field.label}</li>
-        {/each}
-      </ul>
+      <DataSourceCategory
+        dividerState={true}
+        heading="JSON Arrays"
+        dataSet={jsonArrays}
+        {value}
+        onSelect={handleSelected}
+      />
    {/if}
    {#if showDataProviders && dataProviders?.length}
-      <Divider />
-      <div class="title">
-        <Heading size="XS">Data Providers</Heading>
-      </div>
-      <ul>
-        {#each dataProviders as provider}
-          <li
-            class:selected={value === provider}
-            on:click={() => handleSelected(provider)}
-          >
-            {provider.label}
-          </li>
-        {/each}
-      </ul>
+      <DataSourceCategory
+        dividerState={true}
+        heading="Data Providers"
+        dataSet={dataProviders}
+        {value}
+        onSelect={handleSelected}
+      />
+    {/if}
+    <DataSourceCategory
+      dividerState={true}
+      heading="Other"
+      dataSet={[custom]}
+      {value}
+      onSelect={handleSelected}
+    />
+    {#if otherSources?.length}
+      <DataSourceCategory
+        dividerState={false}
+        dataSet={otherSources}
+        {value}
+        onSelect={handleSelected}
+      />
    {/if}
-    <Divider />
-    <div class="title">
-      <Heading size="XS">Other</Heading>
-    </div>
-    <ul>
-      <li on:click={() => handleSelected(custom)}>{custom.label}</li>
-      {#if otherSources?.length}
-        {#each otherSources as source}
-          <li on:click={() => handleSelected(source)}>{source.label}</li>
-        {/each}
-      {/if}
-    </ul>
  </div>
 </Popover>

@ -398,31 +376,6 @@
  .dropdown {
    padding: var(--spacing-m) 0;
    z-index: 99999999;
-    overflow-y: scroll;
-  }
-  .title {
-    padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m);
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0px;
-    margin: 0px;
-  }
-
-  li {
-    cursor: pointer;
-    margin: 0px;
-    padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-m);
-  }
-
-  .selected {
-    color: var(--spectrum-global-color-blue-600);
-  }
-
-  li:hover {
-    background-color: var(--spectrum-global-color-gray-200);
  }

  .icon {
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@ -20,7 +20,7 @@
  let open = false

  // Auto hide the component when another item is selected
-  $: if (open && $draggable.selected != componentInstance._id) {
+  $: if (open && $draggable.selected !== componentInstance._id) {
    popover.hide()
  }

@ -100,13 +100,13 @@
  }}
  on:close={() => {
    open = false
-    if ($draggable.selected == componentInstance._id) {
+    if ($draggable.selected === componentInstance._id) {
      $draggable.actions.select()
    }
  }}
  {anchor}
  align="left-outside"
-  showPopover={drawers.length == 0}
+  showPopover={drawers.length === 0}
  clickOutsideOverride={drawers.length > 0}
  maxHeight={600}
  handlePostionUpdate={customPositionHandler}
@ -115,6 +115,7 @@
    <Layout noPadding noGap>
      <slot name="header" />
      <ComponentSettingsSection
+        includeHidden
        {componentInstance}
        componentDefinition={parsedComponentDef}
        isScreen={false}
--- a/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/SchemaSelect.svelte
@ -1,5 +1,5 @@
 <script>
-  import DataSourceSelect from "./DataSourceSelect.svelte"
+  import DataSourceSelect from "./DataSourceSelect/DataSourceSelect.svelte"

  const otherSources = [{ name: "Custom", label: "Custom" }]
 </script>
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@ -91,7 +91,6 @@
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    gap: var(--spacing-l);
    overflow: auto;
  }
  .centered {
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@ -3,7 +3,6 @@
  import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
  import Panel from "components/design/Panel.svelte"
  import { isActive, redirect, goto, params } from "@roxi/routify"
-  import BetaButton from "./_components/BetaButton.svelte"
  import { datasources } from "stores/backend"

  $: {
@ -30,7 +29,6 @@
  <div class="content">
    <slot />
  </div>
-  <BetaButton />
 </div>

 <style>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@ -16,16 +16,18 @@
  export let isScreen = false
  export let onUpdateSetting
  export let showSectionTitle = true
+  export let includeHidden = false
  export let tag

  $: sections = getSections(
    componentInstance,
    componentDefinition,
    isScreen,
-    tag
+    tag,
+    includeHidden
  )

-  const getSections = (instance, definition, isScreen, tag) => {
+  const getSections = (instance, definition, isScreen, tag, includeHidden) => {
    const settings = definition?.settings ?? []
    const generalSettings = settings.filter(
      setting => !setting.section && setting.tag === tag
@ -52,7 +54,12 @@
        return
      }
      section.settings.forEach(setting => {
-        setting.visible = canRenderControl(instance, setting, isScreen)
+        setting.visible = canRenderControl(
+          instance,
+          setting,
+          isScreen,
+          includeHidden
+        )
      })
      section.visible =
        section.name === "General" ||
@ -122,16 +129,20 @@
    })
  }

-  const canRenderControl = (instance, setting, isScreen) => {
+  const canRenderControl = (instance, setting, isScreen, includeHidden) => {
    // Prevent rendering on click setting for screens
    if (setting?.type === "event" && isScreen) {
      return false
    }
+    // Check we have a component to render for this setting
    const control = getComponentForSetting(setting)
    if (!control) {
      return false
    }
-
+    // Check if setting is hidden
+    if (setting.hidden && !includeHidden) {
+      return false
+    }
    return shouldDisplay(instance, setting)
  }
 </script>
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@ -9,12 +9,18 @@
  let searchString
  let searching = false

-  $: filteredApps = $apps.filter(app => {
-    return (
-      !searchString ||
-      app.name.toLowerCase().includes(searchString.toLowerCase())
-    )
-  })
+  $: filteredApps = $apps
+    .filter(app => {
+      return (
+        !searchString ||
+        app.name.toLowerCase().includes(searchString.toLowerCase())
+      )
+    })
+    .sort((a, b) => {
+      const lowerA = a.name.toLowerCase()
+      const lowerB = b.name.toLowerCase()
+      return lowerA > lowerB ? 1 : -1
+    })

  const startSearching = async () => {
    searching = true
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte
@ -8,11 +8,7 @@
 </script>

 <div class="header">
-  <img
-    alt="Budibase Logo"
-    class="budibaseLogo"
-    src={"https://i.imgur.com/Xhdt1YP.png"}
-  />
+  <img alt="Budibase Logo" class="budibaseLogo" src="/builder/bblogo.png" />
  <div class="headingAndBack">
    {#if onBack}
      <button on:click={onBack}>
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -2776,6 +2776,35 @@
            "barTitle": "Justify text"
          }
        ]
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -2833,6 +2862,35 @@
        "type": "validation/number",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -2885,6 +2943,35 @@
        "label": "Disabled",
        "key": "disabled",
        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -2942,6 +3029,35 @@
        "type": "validation/string",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3110,6 +3226,35 @@
        "type": "validation/string",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3272,6 +3417,35 @@
        "type": "validation/array",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3352,6 +3526,35 @@
        "type": "validation/boolean",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3431,6 +3634,35 @@
        "type": "validation/string",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3512,6 +3744,35 @@
        "type": "validation/datetime",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3598,6 +3859,22 @@
          "value": "custom"
        }
      },
+      {
+        "type": "select",
+        "label": "Preferred camera",
+        "key": "preferredCamera",
+        "defaultValue": "environment",
+        "options": [
+          {
+            "label": "Front",
+            "value": "user"
+          },
+          {
+            "label": "Back",
+            "value": "environment"
+          }
+        ]
+      },
      {
        "type": "event",
        "label": "On change",
@ -3613,6 +3890,35 @@
        "type": "validation/string",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3789,6 +4095,35 @@
        "type": "validation/attachment",
        "label": "Validation",
        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3857,6 +4192,35 @@
        "label": "Disabled",
        "key": "disabled",
        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -3909,6 +4273,35 @@
        "label": "Disabled",
        "key": "disabled",
        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  },
@ -5590,23 +5983,6 @@
          }
        ]
      },
-      {
-        "tag": "style",
-        "type": "select",
-        "label": "Align labels",
-        "key": "labelPosition",
-        "defaultValue": "left",
-        "options": [
-          {
-            "label": "Left",
-            "value": "left"
-          },
-          {
-            "label": "Above",
-            "value": "above"
-          }
-        ]
-      },
      {
        "tag": "style",
        "type": "select",
@ -5921,6 +6297,35 @@
        "label": "Disabled",
        "key": "disabled",
        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
      }
    ]
  }
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@ -26,15 +26,15 @@
  $: parentId = $component?.id
  $: inBuilder = $builderStore.inBuilder
  $: instance = {
+    ...props,
    _component: getComponent(type),
    _id: id,
    _instanceName: getInstanceName(name, type),
+    _containsSlot: containsSlot,
    _styles: {
      ...styles,
      normal: styles?.normal || {},
    },
-    _containsSlot: containsSlot,
-    ...props,
  }

  // Register this block component if we're inside the builder so it can be
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@ -140,6 +140,7 @@
    interactive &&
    !isLayout &&
    !isRoot &&
+    !isBlock &&
    definition?.draggable !== false
  $: droppable = interactive
  $: builderHidden =
@ -194,6 +195,7 @@
      interactive,
      draggable,
      editable,
+      isBlock,
    },
    empty: emptyState,
    selected,
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@ -10,7 +10,6 @@
  export let size
  export let disabled
  export let fields
-  export let labelPosition
  export let title
  export let description
  export let showDeleteButton
@ -97,7 +96,6 @@
    size,
    disabled,
    fields: fieldsOrDefault,
-    labelPosition,
    title,
    description,
    saveButtonLabel: saveLabel,
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@ -2,6 +2,7 @@
  import BlockComponent from "components/BlockComponent.svelte"
  import Placeholder from "components/app/Placeholder.svelte"
  import { makePropSafe as safe } from "@budibase/string-templates"
+  import { getContext } from "svelte"

  export let dataSource
  export let actionUrl
@ -9,7 +10,6 @@
  export let size
  export let disabled
  export let fields
-  export let labelPosition
  export let title
  export let description
  export let saveButtonLabel
@ -33,6 +33,7 @@
    barcodeqr: "codescanner",
    bb_reference: "bbreferencefield",
  }
+  const context = getContext("context")

  let formId

@ -226,16 +227,20 @@
        <BlockComponent type="text" props={{ text: description }} order={1} />
      {/if}
      {#key fields}
-        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-          {#each fields as field, idx}
-            {#if getComponentForField(field) && field.active}
-              <BlockComponent
-                type={getComponentForField(field)}
-                props={getPropsForField(field)}
-                order={idx}
-              />
-            {/if}
-          {/each}
+        <BlockComponent type="container">
+          <div class="form-block fields" class:mobile={$context.device.mobile}>
+            {#each fields as field, idx}
+              {#if getComponentForField(field) && field.active}
+                <BlockComponent
+                  type={getComponentForField(field)}
+                  props={getPropsForField(field)}
+                  order={idx}
+                  interactive
+                  name={field?.field}
+                />
+              {/if}
+            {/each}
+          </div>
        </BlockComponent>
      {/key}
    </BlockComponent>
@ -245,3 +250,14 @@
    text="Choose your table and add some fields to your form to get started"
  />
 {/if}
+
+<style>
+  .fields {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px 16px;
+  }
+  .fields.mobile :global(.spectrum-Form-item) {
+    grid-column: span 6 !important;
+  }
+</style>
--- a/packages/client/src/components/app/deprecated/Navigation.svelte
+++ b/packages/client/src/components/app/deprecated/Navigation.svelte
@ -4,9 +4,6 @@
  const { linkable, styleable } = getContext("sdk")
  const component = getContext("component")

-  // BB emblem: https://i.imgur.com/Xhdt1YP.png
-  // Space logo: https://i.imgur.com/Dn7Xt1G.png
-
  export let logoUrl
  export let hideLogo
 </script>
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@ -11,6 +11,7 @@
  export let extensions
  export let onChange
  export let maximum = undefined
+  export let span

  let fieldState
  let fieldApi
@ -72,32 +73,25 @@
  {field}
  {disabled}
  {validation}
+  {span}
  type="attachment"
  bind:fieldState
  bind:fieldApi
  defaultValue={[]}
 >
-  <div class="minHeightWrapper">
-    {#if fieldState}
-      <CoreDropzone
-        value={fieldState.value}
-        disabled={fieldState.disabled}
-        error={fieldState.error}
-        on:change={handleChange}
-        {processFiles}
-        {deleteAttachments}
-        {handleFileTooLarge}
-        {handleTooManyFiles}
-        {maximum}
-        {extensions}
-        {compact}
-      />
-    {/if}
-  </div>
+  {#if fieldState}
+    <CoreDropzone
+      value={fieldState.value}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      on:change={handleChange}
+      {processFiles}
+      {deleteAttachments}
+      {handleFileTooLarge}
+      {handleTooManyFiles}
+      {maximum}
+      {extensions}
+      {compact}
+    />
+  {/if}
 </Field>
-
-<style>
-  .minHeightWrapper {
-    min-height: 80px;
-  }
-</style>
--- a/packages/client/src/components/app/forms/CodeScanner.svelte
+++ b/packages/client/src/components/app/forms/CodeScanner.svelte
@ -11,6 +11,7 @@
  export let beepOnScan = false
  export let beepFrequency = 2637
  export let customFrequency = 1046
+  export let preferredCamera = "environment"

  const dispatch = createEventDispatcher()

@ -20,7 +21,7 @@
  let cameraEnabled
  let cameraStarted = false
  let html5QrCode
-  let cameraSetting = { facingMode: "environment" }
+  let cameraSetting = { facingMode: preferredCamera }
  let cameraConfig = {
    fps: 25,
    qrbox: { width: 250, height: 250 },
--- a/packages/client/src/components/app/forms/CodeScannerField.svelte
+++ b/packages/client/src/components/app/forms/CodeScannerField.svelte
@ -14,6 +14,7 @@
  export let beepOnScan
  export let beepFrequency
  export let customFrequency
+  export let preferredCamera

  let fieldState
  let fieldApi
@ -48,6 +49,7 @@
      {beepOnScan}
      {beepFrequency}
      {customFrequency}
+      {preferredCamera}
    />
  {/if}
 </Field>
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@ -13,6 +13,7 @@
  export let validation
  export let defaultValue
  export let onChange
+  export let span

  let fieldState
  let fieldApi
@ -31,6 +32,7 @@
  {disabled}
  {validation}
  {defaultValue}
+  {span}
  type="datetime"
  bind:fieldState
  bind:fieldApi
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@ -1,6 +1,5 @@
 <script>
  import Placeholder from "../Placeholder.svelte"
-  import FieldGroupFallback from "./FieldGroupFallback.svelte"
  import { getContext, onDestroy } from "svelte"

  export let label
@ -12,6 +11,7 @@
  export let type
  export let disabled = false
  export let validation
+  export let span = 6

  // Get contexts
  const formContext = getContext("form")
@ -62,40 +62,58 @@
  })
 </script>

-<FieldGroupFallback>
-  <div class="spectrum-Form-item" use:styleable={$component.styles}>
-    {#key $component.editing}
-      <label
-        bind:this={labelNode}
-        contenteditable={$component.editing}
-        on:blur={$component.editing ? updateLabel : null}
-        class:hidden={!label}
-        for={fieldState?.fieldId}
-        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
-      >
-        {label || " "}
-      </label>
-    {/key}
-    <div class="spectrum-Form-itemField">
-      {#if !formContext}
-        <Placeholder text="Form components need to be wrapped in a form" />
-      {:else if !fieldState}
-        <Placeholder />
-      {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
-        <Placeholder
-          text="This Field setting is the wrong data type for this component"
-        />
-      {:else}
-        <slot />
-        {#if fieldState.error}
-          <div class="error">{fieldState.error}</div>
-        {/if}
+<div
+  class="spectrum-Form-item"
+  class:span-2={span === 2}
+  class:span-3={span === 3}
+  class:span-6={span === 6 || !span}
+  use:styleable={$component.styles}
+  class:above={labelPos === "above"}
+>
+  {#key $component.editing}
+    <label
+      bind:this={labelNode}
+      contenteditable={$component.editing}
+      on:blur={$component.editing ? updateLabel : null}
+      class:hidden={!label}
+      for={fieldState?.fieldId}
+      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
+    >
+      {label || " "}
+    </label>
+  {/key}
+  <div class="spectrum-Form-itemField">
+    {#if !formContext}
+      <Placeholder text="Form components need to be wrapped in a form" />
+    {:else if !fieldState}
+      <Placeholder />
+    {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
+      <Placeholder
+        text="This Field setting is the wrong data type for this component"
+      />
+    {:else}
+      <slot />
+      {#if fieldState.error}
+        <div class="error">{fieldState.error}</div>
      {/if}
-    </div>
+    {/if}
  </div>
-</FieldGroupFallback>
+</div>

 <style>
+  :global(.form-block .spectrum-Form-item.span-2) {
+    grid-column: span 2;
+  }
+  :global(.form-block .spectrum-Form-item.span-3) {
+    grid-column: span 3;
+  }
+  :global(.form-block .spectrum-Form-item.span-6) {
+    grid-column: span 6;
+  }
+  .spectrum-Form-item.above {
+    display: flex;
+    flex-direction: column;
+  }
  label {
    white-space: nowrap;
  }
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@ -17,6 +17,7 @@
  export let onChange
  export let optionsType = "select"
  export let direction = "vertical"
+  export let span

  let fieldState
  let fieldApi
@ -56,6 +57,7 @@
  {label}
  {disabled}
  {validation}
+  {span}
  defaultValue={expandedDefaultValue}
  type="array"
  bind:fieldState
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@ -18,6 +18,7 @@
  export let direction = "vertical"
  export let onChange
  export let sort = true
+  export let span

  let fieldState
  let fieldApi
@ -47,6 +48,7 @@
  {disabled}
  {validation}
  {defaultValue}
+  {span}
  type="options"
  bind:fieldState
  bind:fieldApi
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@ -18,6 +18,7 @@
  export let filter
  export let datasourceType = "table"
  export let primaryDisplay
+  export let span

  let fieldState
  let fieldApi
@ -137,7 +138,9 @@
      typeof value === "object" ? value._id : value
    )
    // Make sure field state is valid
-    fieldApi.setValue(values)
+    if (values?.length > 0) {
+      fieldApi.setValue(values)
+    }
    return values
  }

@ -186,6 +189,7 @@
  {validation}
  defaultValue={expandedDefaultValue}
  {type}
+  {span}
  bind:fieldState
  bind:fieldApi
  bind:fieldSchema
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@ -11,6 +11,7 @@
  export let defaultValue = ""
  export let align
  export let onChange
+  export let span

  let fieldState
  let fieldApi
@ -29,6 +30,7 @@
  {disabled}
  {validation}
  {defaultValue}
+  {span}
  type={type === "number" ? "number" : "string"}
  bind:fieldState
  bind:fieldApi
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@ -40,6 +40,7 @@ export const styleable = (node, styles = {}) => {

    const componentId = newStyles.id
    const customStyles = newStyles.custom || ""
+    const { isBlock } = newStyles
    const normalStyles = { ...baseStyles, ...newStyles.normal }
    const hoverStyles = {
      ...normalStyles,
@ -76,6 +77,9 @@ export const styleable = (node, styles = {}) => {
    // Handler to start editing a component (if applicable) when double
    // clicking in the builder preview
    editComponent = event => {
+      if (isBlock) {
+        return
+      }
      if (newStyles.interactive && newStyles.editable) {
        builderStore.actions.setEditMode(true)
      }
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@ -1,27 +1,10 @@
-<script context="module">
-  // We can create a module level cache for all relationship cells to avoid
-  // having to fetch the table definition one time for each cell
-  let primaryDisplayCache = {}
-
-  const getPrimaryDisplayForTableId = async (API, tableId) => {
-    if (primaryDisplayCache[tableId]) {
-      return primaryDisplayCache[tableId]
-    }
-    const definition = await API.fetchTableDefinition(tableId)
-    const primaryDisplay =
-      definition?.primaryDisplay || definition?.schema?.[0]?.name
-    primaryDisplayCache[tableId] = primaryDisplay
-    return primaryDisplay
-  }
-</script>
-
 <script>
  import { getColor } from "../lib/utils"
  import { onMount, getContext } from "svelte"
  import { Icon, Input, ProgressCircle, clickOutside } from "@budibase/bbui"
  import { debounce } from "../../../utils/utils"

-  const { API, dispatch } = getContext("grid")
+  const { API, dispatch, cache } = getContext("grid")

  export let value
  export let api
@ -147,7 +130,9 @@
    // Find the primary display for the related table
    if (!primaryDisplay) {
      searching = true
-      primaryDisplay = await getPrimaryDisplayForTableId(API, schema.tableId)
+      primaryDisplay = await cache.actions.getPrimaryDisplayForTableId(
+        schema.tableId
+      )
    }

    // Show initial list of results
@ -195,7 +180,7 @@
  const toggleRow = async row => {
    if (value?.some(x => x._id === row._id)) {
      // If the row is already included, remove it and update the candidate
-      // row to be the the same position if possible
+      // row to be the same position if possible
      if (oneRowOnly) {
        await onChange([])
      } else {
@ -260,31 +245,29 @@
      class:wrap={editable || contentLines > 1}
      on:wheel={e => (focused ? e.stopPropagation() : null)}
    >
-      {#if Array.isArray(value) && value.length}
-        {#each value as relationship}
-          {#if relationship[primaryDisplay] || relationship.primaryDisplay}
-            <div class="badge">
-              <span
-                on:click={editable
-                  ? () => showRelationship(relationship._id)
-                  : null}
-              >
-                {readable(
-                  relationship[primaryDisplay] || relationship.primaryDisplay
-                )}
-              </span>
-              {#if editable}
-                <Icon
-                  name="Close"
-                  size="XS"
-                  hoverable
-                  on:click={() => toggleRow(relationship)}
-                />
-              {/if}
-            </div>
-          {/if}
-        {/each}
-      {/if}
+      {#each value || [] as relationship}
+        {#if relationship[primaryDisplay] || relationship.primaryDisplay}
+          <div class="badge">
+            <span
+              on:click={editable
+                ? () => showRelationship(relationship._id)
+                : null}
+            >
+              {readable(
+                relationship[primaryDisplay] || relationship.primaryDisplay
+              )}
+            </span>
+            {#if editable}
+              <Icon
+                name="Close"
+                size="XS"
+                hoverable
+                on:click={() => toggleRow(relationship)}
+              />
+            {/if}
+          </div>
+        {/if}
+      {/each}
      {#if editable}
        <div class="add" on:click={open}>
          <Icon name="Add" size="S" />
@ -320,7 +303,7 @@
        <div class="searching">
          <ProgressCircle size="S" />
        </div>
-      {:else if Array.isArray(searchResults) && searchResults.length}
+      {:else if searchResults?.length}
        <div class="results">
          {#each searchResults as row, idx}
            <div
--- a/packages/frontend-core/src/components/grid/stores/cache.js
+++ b/packages/frontend-core/src/components/grid/stores/cache.js
@ -0,0 +1,47 @@
+export const createActions = context => {
+  const { API } = context
+
+  // Cache for the primary display columns of different tables.
+  // If we ever need to cache table definitions for other purposes then we can
+  // expand this to be a more generic cache.
+  let primaryDisplayCache = {}
+
+  const resetPrimaryDisplayCache = () => {
+    primaryDisplayCache = {}
+  }
+
+  const getPrimaryDisplayForTableId = async tableId => {
+    // If we've never encountered this tableId before then store a promise that
+    // resolves to the primary display so that subsequent invocations before the
+    // promise completes can reuse this promise
+    if (!primaryDisplayCache[tableId]) {
+      primaryDisplayCache[tableId] = new Promise(resolve => {
+        API.fetchTableDefinition(tableId).then(def => {
+          const display = def?.primaryDisplay || def?.schema?.[0]?.name
+          primaryDisplayCache[tableId] = display
+          resolve(display)
+        })
+      })
+    }
+
+    // We await the result so that we account for both promises and primitives
+    return await primaryDisplayCache[tableId]
+  }
+
+  return {
+    cache: {
+      actions: {
+        getPrimaryDisplayForTableId,
+        resetPrimaryDisplayCache,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const { datasource, cache } = context
+
+  // Wipe the caches whenever the datasource changes to ensure we aren't
+  // storing any stale information
+  datasource.subscribe(cache.actions.resetPrimaryDisplayCache)
+}
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@ -160,11 +160,6 @@ export const createActions = context => {
    return getAPI()?.actions.canUseColumn(name)
  }

-  // Gets the default number of rows for a single page
-  const getFeatures = () => {
-    return getAPI()?.actions.getFeatures()
-  }
-
  return {
    datasource: {
      ...datasource,
@ -177,7 +172,6 @@ export const createActions = context => {
        getRow,
        isDatasourceValid,
        canUseColumn,
-        getFeatures,
      },
    },
  }
--- a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js
+++ b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js
@ -35,11 +35,6 @@ export const createActions = context => {
    return $columns.some(col => col.name === name) || $sticky?.name === name
  }

-  const getFeatures = () => {
-    // We don't support any features
-    return {}
-  }
-
  return {
    nonPlus: {
      actions: {
@ -50,7 +45,6 @@ export const createActions = context => {
        getRow,
        isDatasourceValid,
        canUseColumn,
-        getFeatures,
      },
    },
  }
--- a/packages/frontend-core/src/components/grid/stores/datasources/table.js
+++ b/packages/frontend-core/src/components/grid/stores/datasources/table.js
@ -1,5 +1,4 @@
 import { get } from "svelte/store"
-import TableFetch from "../../../../fetch/TableFetch"

 const SuppressErrors = true

@ -46,10 +45,6 @@ export const createActions = context => {
    return $columns.some(col => col.name === name) || $sticky?.name === name
  }

-  const getFeatures = () => {
-    return new TableFetch({ API }).determineFeatureFlags()
-  }
-
  return {
    table: {
      actions: {
@ -60,7 +55,6 @@ export const createActions = context => {
        getRow,
        isDatasourceValid,
        canUseColumn,
-        getFeatures,
      },
    },
  }
--- a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js
+++ b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js
@ -1,5 +1,4 @@
 import { get } from "svelte/store"
-import ViewV2Fetch from "../../../../fetch/ViewV2Fetch"

 const SuppressErrors = true

@ -46,10 +45,6 @@ export const createActions = context => {
    )
  }

-  const getFeatures = () => {
-    return new ViewV2Fetch({ API }).determineFeatureFlags()
-  }
-
  return {
    viewV2: {
      actions: {
@ -60,7 +55,6 @@ export const createActions = context => {
        getRow,
        isDatasourceValid,
        canUseColumn,
-        getFeatures,
      },
    },
  }
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ b/packages/frontend-core/src/components/grid/stores/index.js
@ -19,6 +19,7 @@ import * as Datasource from "./datasource"
 import * as Table from "./datasources/table"
 import * as ViewV2 from "./datasources/viewV2"
 import * as NonPlus from "./datasources/nonPlus"
+import * as Cache from "./cache"

 const DependencyOrderedStores = [
  Sort,
@ -42,6 +43,7 @@ const DependencyOrderedStores = [
  Clipboard,
  Config,
  Notifications,
+  Cache,
 ]

 export const attachStores = context => {
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@ -114,10 +114,6 @@ export const createActions = context => {
    const $allFilters = get(allFilters)
    const $sort = get(sort)

-    // Determine how many rows to fetch per page
-    const features = datasource.actions.getFeatures()
-    const limit = features?.supportsPagination ? RowPageSize : null
-
    // Create new fetch model
    const newFetch = fetchData({
      API,
@ -126,8 +122,12 @@ export const createActions = context => {
        filter: $allFilters,
        sortColumn: $sort.column,
        sortOrder: $sort.order,
-        limit,
+        limit: RowPageSize,
        paginate: true,
+
+        // Disable client side limiting, so that for queries and custom data
+        // sources we don't impose fake row limits. We want all the data.
+        clientSideLimiting: false,
      },
    })

--- a/packages/frontend-core/src/fetch/DataFetch.js
+++ b/packages/frontend-core/src/fetch/DataFetch.js
@ -43,6 +43,11 @@ export default class DataFetch {

      // Pagination config
      paginate: true,
+
+      // Client side feature customisation
+      clientSideSearching: true,
+      clientSideSorting: true,
+      clientSideLimiting: true,
    }

    // State of the fetch
@ -208,24 +213,32 @@ export default class DataFetch {
   * Fetches some filtered, sorted and paginated data
   */
  async getPage() {
-    const { sortColumn, sortOrder, sortType, limit } = this.options
+    const {
+      sortColumn,
+      sortOrder,
+      sortType,
+      limit,
+      clientSideSearching,
+      clientSideSorting,
+      clientSideLimiting,
+    } = this.options
    const { query } = get(this.store)

    // Get the actual data
    let { rows, info, hasNextPage, cursor, error } = await this.getData()

    // If we don't support searching, do a client search
-    if (!this.features.supportsSearch) {
+    if (!this.features.supportsSearch && clientSideSearching) {
      rows = runLuceneQuery(rows, query)
    }

    // If we don't support sorting, do a client-side sort
-    if (!this.features.supportsSort) {
+    if (!this.features.supportsSort && clientSideSorting) {
      rows = luceneSort(rows, sortColumn, sortOrder, sortType)
    }

    // If we don't support pagination, do a client-side limit
-    if (!this.features.supportsPagination) {
+    if (!this.features.supportsPagination && clientSideLimiting) {
      rows = luceneLimit(rows, limit)
    }

--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@ -147,7 +147,7 @@ export const serveApp = async function (ctx: Ctx) {
      const { head, html, css } = App.render({
        metaImage:
          branding?.metaImageUrl ||
-          "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
+          "https://res.cloudinary.com/daog6scxm/image/upload/v1698759482/meta-images/plain-branded-meta-image-coral_ocxmgu.png",
        metaDescription: branding?.metaDescription || "",
        metaTitle:
          branding?.metaTitle || `${appInfo.name} - built with Budibase`,
@ -185,7 +185,7 @@ export const serveApp = async function (ctx: Ctx) {
        metaTitle: branding?.metaTitle,
        metaImage:
          branding?.metaImageUrl ||
-          "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
+          "https://res.cloudinary.com/daog6scxm/image/upload/v1698759482/meta-images/plain-branded-meta-image-coral_ocxmgu.png",
        metaDescription: branding?.metaDescription || "",
        favicon:
          branding.faviconUrl !== ""
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@ -49,7 +49,12 @@ describe.each([
  let table: Table
  let tableId: string

-  afterAll(setup.afterAll)
+  afterAll(async () => {
+    if (dsProvider) {
+      await dsProvider.stopContainer()
+    }
+    setup.afterAll()
+  })

  beforeAll(async () => {
    await config.init()
@ -521,20 +526,17 @@ describe.each([
      const rowUsage = await getRowUsage()
      const queryUsage = await getQueryUsage()

-      const res = await config.api.row.patch(table._id!, {
+      const row = await config.api.row.patch(table._id!, {
        _id: existing._id!,
        _rev: existing._rev!,
        tableId: table._id!,
        name: "Updated Name",
      })

-      expect((res as any).res.statusMessage).toEqual(
-        `${table.name} updated successfully.`
-      )
-      expect(res.body.name).toEqual("Updated Name")
-      expect(res.body.description).toEqual(existing.description)
+      expect(row.name).toEqual("Updated Name")
+      expect(row.description).toEqual(existing.description)

-      const savedRow = await loadRow(res.body._id, table._id!)
+      const savedRow = await loadRow(row._id!, table._id!)

      expect(savedRow.body.description).toEqual(existing.description)
      expect(savedRow.body.name).toEqual("Updated Name")
@ -561,6 +563,56 @@ describe.each([
      await assertRowUsage(rowUsage)
      await assertQueryUsage(queryUsage)
    })
+
+    it("should not overwrite links if those links are not set", async () => {
+      let linkField: FieldSchema = {
+        type: FieldType.LINK,
+        name: "",
+        fieldName: "",
+        constraints: {
+          type: "array",
+          presence: false,
+        },
+        relationshipType: RelationshipType.ONE_TO_MANY,
+        tableId: InternalTable.USER_METADATA,
+      }
+
+      let table = await config.api.table.create({
+        name: "TestTable",
+        type: "table",
+        sourceType: TableSourceType.INTERNAL,
+        sourceId: INTERNAL_TABLE_SOURCE_ID,
+        schema: {
+          user1: { ...linkField, name: "user1", fieldName: "user1" },
+          user2: { ...linkField, name: "user2", fieldName: "user2" },
+        },
+      })
+
+      let user1 = await config.createUser()
+      let user2 = await config.createUser()
+
+      let row = await config.api.row.save(table._id!, {
+        user1: [{ _id: user1._id }],
+        user2: [{ _id: user2._id }],
+      })
+
+      let getResp = await config.api.row.get(table._id!, row._id!)
+      expect(getResp.body.user1[0]._id).toEqual(user1._id)
+      expect(getResp.body.user2[0]._id).toEqual(user2._id)
+
+      let patchResp = await config.api.row.patch(table._id!, {
+        _id: row._id!,
+        _rev: row._rev!,
+        tableId: table._id!,
+        user1: [{ _id: user2._id }],
+      })
+      expect(patchResp.user1[0]._id).toEqual(user2._id)
+      expect(patchResp.user2[0]._id).toEqual(user2._id)
+
+      getResp = await config.api.row.get(table._id!, row._id!)
+      expect(getResp.body.user1[0]._id).toEqual(user2._id)
+      expect(getResp.body.user2[0]._id).toEqual(user2._id)
+    })
  })

  describe("destroy", () => {
--- a/packages/server/src/api/routes/tests/table.spec.ts
+++ b/packages/server/src/api/routes/tests/table.spec.ts
@ -492,6 +492,67 @@ describe("/tables", () => {
      }
    })

+    it("should succeed when the row is created from the other side of the relationship", async () => {
+      // We found a bug just after releasing this feature where if the row was created from the
+      // users table, not the table linking to it, the migration would succeed but lose the data.
+      // This happened because the order of the documents in the link was reversed.
+      const table = await config.api.table.create({
+        name: "table",
+        type: "table",
+        sourceId: INTERNAL_TABLE_SOURCE_ID,
+        sourceType: TableSourceType.INTERNAL,
+        schema: {
+          "user relationship": {
+            type: FieldType.LINK,
+            fieldName: "test",
+            name: "user relationship",
+            constraints: {
+              type: "array",
+              presence: false,
+            },
+            relationshipType: RelationshipType.MANY_TO_ONE,
+            tableId: InternalTable.USER_METADATA,
+          },
+        },
+      })
+
+      let testRow = await config.api.row.save(table._id!, {})
+
+      await Promise.all(
+        users.map(u =>
+          config.api.row.patch(InternalTable.USER_METADATA, {
+            tableId: InternalTable.USER_METADATA,
+            _rev: u._rev!,
+            _id: u._id!,
+            test: [testRow],
+          })
+        )
+      )
+
+      await config.api.table.migrate(table._id!, {
+        oldColumn: table.schema["user relationship"],
+        newColumn: {
+          name: "user column",
+          type: FieldType.BB_REFERENCE,
+          subtype: FieldSubtype.USERS,
+        },
+      })
+
+      const migratedTable = await config.api.table.get(table._id!)
+      expect(migratedTable.schema["user column"]).toBeDefined()
+      expect(migratedTable.schema["user relationship"]).not.toBeDefined()
+
+      const resp = await config.api.row.get(table._id!, testRow._id!)
+      const migratedRow = resp.body as Row
+
+      expect(migratedRow["user column"]).toBeDefined()
+      expect(migratedRow["user relationship"]).not.toBeDefined()
+      expect(migratedRow["user column"]).toHaveLength(3)
+      expect(migratedRow["user column"].map((u: Row) => u._id)).toEqual(
+        expect.arrayContaining(users.map(u => u._id))
+      )
+    })
+
    it("should successfully migrate a many-to-many user relationship to a users column", async () => {
      const table = await config.api.table.create({
        name: "table",
--- a/packages/server/src/automations/tests/automation.spec.ts
+++ b/packages/server/src/automations/tests/automation.spec.ts
@ -36,7 +36,7 @@ describe("Run through some parts of the automations system", () => {
  it("should be able to init in builder", async () => {
    const automation: Automation = {
      ...basicAutomation(),
-      appId: config.appId,
+      appId: config.appId!,
    }
    const fields: any = { a: 1, appId: config.appId }
    await triggers.externalTrigger(automation, fields)
--- a/packages/server/src/automations/tests/updateRow.spec.js
+++ b/packages/server/src/automations/tests/updateRow.spec.js
@ -1,44 +0,0 @@
-const setup = require("./utilities")
-
-describe("test the update row action", () => {
-  let table, row, inputs
-  let config = setup.getConfig()
-
-  beforeAll(async () => {
-    await config.init()
-    table = await config.createTable()
-    row = await config.createRow()
-    inputs = {
-      rowId: row._id,
-      row: {
-        ...row,
-        name: "Updated name",
-        // put a falsy option in to be removed
-        description: "",
-      }
-    }
-  })
-
-  afterAll(setup.afterAll)
-
-  it("should be able to run the action", async () => {
-    const res = await setup.runStep(setup.actions.UPDATE_ROW.stepId, inputs)
-    expect(res.success).toEqual(true)
-    const updatedRow = await config.getRow(table._id, res.id)
-    expect(updatedRow.name).toEqual("Updated name")
-    expect(updatedRow.description).not.toEqual("")
-  })
-
-  it("should check invalid inputs return an error", async () => {
-    const res = await setup.runStep(setup.actions.UPDATE_ROW.stepId, {})
-    expect(res.success).toEqual(false)
-  })
-
-  it("should return an error when table doesn't exist", async () => {
-    const res = await setup.runStep(setup.actions.UPDATE_ROW.stepId, {
-      row: { _id: "invalid" },
-      rowId: "invalid",
-    })
-    expect(res.success).toEqual(false)
-  })
-})
--- a/packages/server/src/automations/tests/updateRow.spec.ts
+++ b/packages/server/src/automations/tests/updateRow.spec.ts
@ -0,0 +1,169 @@
+import {
+  FieldSchema,
+  FieldType,
+  INTERNAL_TABLE_SOURCE_ID,
+  InternalTable,
+  RelationshipType,
+  Row,
+  Table,
+  TableSourceType,
+} from "@budibase/types"
+
+import * as setup from "./utilities"
+import * as uuid from "uuid"
+
+describe("test the update row action", () => {
+  let table: Table, row: Row, inputs: any
+  let config = setup.getConfig()
+
+  beforeAll(async () => {
+    await config.init()
+    table = await config.createTable()
+    row = await config.createRow()
+    inputs = {
+      rowId: row._id,
+      row: {
+        ...row,
+        name: "Updated name",
+        // put a falsy option in to be removed
+        description: "",
+      },
+    }
+  })
+
+  afterAll(setup.afterAll)
+
+  it("should be able to run the action", async () => {
+    const res = await setup.runStep(setup.actions.UPDATE_ROW.stepId, inputs)
+    expect(res.success).toEqual(true)
+    const updatedRow = await config.getRow(table._id!, res.id)
+    expect(updatedRow.name).toEqual("Updated name")
+    expect(updatedRow.description).not.toEqual("")
+  })
+
+  it("should check invalid inputs return an error", async () => {
+    const res = await setup.runStep(setup.actions.UPDATE_ROW.stepId, {})
+    expect(res.success).toEqual(false)
+  })
+
+  it("should return an error when table doesn't exist", async () => {
+    const res = await setup.runStep(setup.actions.UPDATE_ROW.stepId, {
+      row: { _id: "invalid" },
+      rowId: "invalid",
+    })
+    expect(res.success).toEqual(false)
+  })
+
+  it("should not overwrite links if those links are not set", async () => {
+    let linkField: FieldSchema = {
+      type: FieldType.LINK,
+      name: "",
+      fieldName: "",
+      constraints: {
+        type: "array",
+        presence: false,
+      },
+      relationshipType: RelationshipType.ONE_TO_MANY,
+      tableId: InternalTable.USER_METADATA,
+    }
+
+    let table = await config.api.table.create({
+      name: uuid.v4(),
+      type: "table",
+      sourceType: TableSourceType.INTERNAL,
+      sourceId: INTERNAL_TABLE_SOURCE_ID,
+      schema: {
+        user1: { ...linkField, name: "user1", fieldName: uuid.v4() },
+        user2: { ...linkField, name: "user2", fieldName: uuid.v4() },
+      },
+    })
+
+    let user1 = await config.createUser()
+    let user2 = await config.createUser()
+
+    let row = await config.api.row.save(table._id!, {
+      user1: [{ _id: user1._id }],
+      user2: [{ _id: user2._id }],
+    })
+
+    let getResp = await config.api.row.get(table._id!, row._id!)
+    expect(getResp.body.user1[0]._id).toEqual(user1._id)
+    expect(getResp.body.user2[0]._id).toEqual(user2._id)
+
+    let stepResp = await setup.runStep(setup.actions.UPDATE_ROW.stepId, {
+      rowId: row._id,
+      row: {
+        _id: row._id,
+        _rev: row._rev,
+        tableId: row.tableId,
+        user1: [user2._id],
+        user2: "",
+      },
+    })
+    expect(stepResp.success).toEqual(true)
+
+    getResp = await config.api.row.get(table._id!, row._id!)
+    expect(getResp.body.user1[0]._id).toEqual(user2._id)
+    expect(getResp.body.user2[0]._id).toEqual(user2._id)
+  })
+
+  it("should overwrite links if those links are not set and we ask it do", async () => {
+    let linkField: FieldSchema = {
+      type: FieldType.LINK,
+      name: "",
+      fieldName: "",
+      constraints: {
+        type: "array",
+        presence: false,
+      },
+      relationshipType: RelationshipType.ONE_TO_MANY,
+      tableId: InternalTable.USER_METADATA,
+    }
+
+    let table = await config.api.table.create({
+      name: uuid.v4(),
+      type: "table",
+      sourceType: TableSourceType.INTERNAL,
+      sourceId: INTERNAL_TABLE_SOURCE_ID,
+      schema: {
+        user1: { ...linkField, name: "user1", fieldName: uuid.v4() },
+        user2: { ...linkField, name: "user2", fieldName: uuid.v4() },
+      },
+    })
+
+    let user1 = await config.createUser()
+    let user2 = await config.createUser()
+
+    let row = await config.api.row.save(table._id!, {
+      user1: [{ _id: user1._id }],
+      user2: [{ _id: user2._id }],
+    })
+
+    let getResp = await config.api.row.get(table._id!, row._id!)
+    expect(getResp.body.user1[0]._id).toEqual(user1._id)
+    expect(getResp.body.user2[0]._id).toEqual(user2._id)
+
+    let stepResp = await setup.runStep(setup.actions.UPDATE_ROW.stepId, {
+      rowId: row._id,
+      row: {
+        _id: row._id,
+        _rev: row._rev,
+        tableId: row.tableId,
+        user1: [user2._id],
+        user2: "",
+      },
+      meta: {
+        fields: {
+          user2: {
+            clearRelationships: true,
+          },
+        },
+      },
+    })
+    expect(stepResp.success).toEqual(true)
+
+    getResp = await config.api.row.get(table._id!, row._id!)
+    expect(getResp.body.user1[0]._id).toEqual(user2._id)
+    expect(getResp.body.user2).toBeUndefined()
+  })
+})
--- a/packages/server/src/automations/tests/utilities/index.ts
+++ b/packages/server/src/automations/tests/utilities/index.ts
@ -4,11 +4,11 @@ import { BUILTIN_ACTION_DEFINITIONS, getAction } from "../../actions"
 import emitter from "../../../events/index"
 import env from "../../../environment"

-let config: any
+let config: TestConfig

-export function getConfig() {
+export function getConfig(): TestConfig {
  if (!config) {
-    config = new TestConfig(false)
+    config = new TestConfig(true)
  }
  return config
 }
--- a/packages/server/src/sdk/app/tables/migration.ts
+++ b/packages/server/src/sdk/app/tables/migration.ts
@ -7,6 +7,7 @@ import {
  isBBReferenceField,
  isRelationshipField,
  LinkDocument,
+  LinkInfo,
  RelationshipFieldMetadata,
  RelationshipType,
  Row,
@ -125,7 +126,23 @@ abstract class UserColumnMigrator implements ColumnMigrator {
    protected newColumn: BBReferenceFieldMetadata
  ) {}

-  abstract updateRow(row: Row, link: LinkDocument): void
+  abstract updateRow(row: Row, linkInfo: LinkInfo): void
+
+  pickUserTableLinkSide(link: LinkDocument): LinkInfo {
+    if (link.doc1.tableId === InternalTable.USER_METADATA) {
+      return link.doc1
+    } else {
+      return link.doc2
+    }
+  }
+
+  pickOtherTableLinkSide(link: LinkDocument): LinkInfo {
+    if (link.doc1.tableId === InternalTable.USER_METADATA) {
+      return link.doc2
+    } else {
+      return link.doc1
+    }
+  }

  async doMigration(): Promise<MigrationResult> {
    let oldTable = cloneDeep(this.table)
@ -137,15 +154,17 @@ abstract class UserColumnMigrator implements ColumnMigrator {

    let links = await sdk.links.fetchWithDocument(this.table._id!)
    for (let link of links) {
+      const userSide = this.pickUserTableLinkSide(link)
+      const otherSide = this.pickOtherTableLinkSide(link)
      if (
-        link.doc1.tableId !== this.table._id ||
-        link.doc1.fieldName !== this.oldColumn.name ||
-        link.doc2.tableId !== InternalTable.USER_METADATA
+        otherSide.tableId !== this.table._id ||
+        otherSide.fieldName !== this.oldColumn.name ||
+        userSide.tableId !== InternalTable.USER_METADATA
      ) {
        continue
      }

-      let row = rowsById[link.doc1.rowId]
+      let row = rowsById[otherSide.rowId]
      if (!row) {
        // This can happen if the row has been deleted but the link hasn't,
        // which was a state that was found during the initial testing of this
@ -153,7 +172,7 @@ abstract class UserColumnMigrator implements ColumnMigrator {
        continue
      }

-      this.updateRow(row, link)
+      this.updateRow(row, userSide)
    }

    let db = context.getAppDB()
@ -175,20 +194,20 @@ abstract class UserColumnMigrator implements ColumnMigrator {
 }

 class SingleUserColumnMigrator extends UserColumnMigrator {
-  updateRow(row: Row, link: LinkDocument): void {
+  updateRow(row: Row, linkInfo: LinkInfo): void {
    row[this.newColumn.name] = dbCore.getGlobalIDFromUserMetadataID(
-      link.doc2.rowId
+      linkInfo.rowId
    )
  }
 }

 class MultiUserColumnMigrator extends UserColumnMigrator {
-  updateRow(row: Row, link: LinkDocument): void {
+  updateRow(row: Row, linkInfo: LinkInfo): void {
    if (!row[this.newColumn.name]) {
      row[this.newColumn.name] = []
    }
    row[this.newColumn.name].push(
-      dbCore.getGlobalIDFromUserMetadataID(link.doc2.rowId)
+      dbCore.getGlobalIDFromUserMetadataID(linkInfo.rowId)
    )
  }
 }
--- a/packages/server/src/tests/utilities/api/row.ts
+++ b/packages/server/src/tests/utilities/api/row.ts
@ -55,7 +55,13 @@ export class RowAPI extends TestAPI {
      .send(row)
      .set(this.config.defaultHeaders())
      .expect("Content-Type", /json/)
-      .expect(expectStatus)
+    if (resp.status !== expectStatus) {
+      throw new Error(
+        `Expected status ${expectStatus} but got ${
+          resp.status
+        }, body: ${JSON.stringify(resp.body)}`
+      )
+    }
    return resp.body as Row
  }

@ -77,13 +83,20 @@ export class RowAPI extends TestAPI {
    sourceId: string,
    row: PatchRowRequest,
    { expectStatus } = { expectStatus: 200 }
-  ) => {
-    return this.request
+  ): Promise<Row> => {
+    let resp = await this.request
      .patch(`/api/${sourceId}/rows`)
      .send(row)
      .set(this.config.defaultHeaders())
      .expect("Content-Type", /json/)
-      .expect(expectStatus)
+    if (resp.status !== expectStatus) {
+      throw new Error(
+        `Expected status ${expectStatus} but got ${
+          resp.status
+        }, body: ${JSON.stringify(resp.body)}`
+      )
+    }
+    return resp.body as Row
  }

  delete = async (
--- a/packages/server/src/tests/utilities/api/table.ts
+++ b/packages/server/src/tests/utilities/api/table.ts
@ -22,7 +22,15 @@ export class TableAPI extends TestAPI {
      .send(data)
      .set(this.config.defaultHeaders())
      .expect("Content-Type", /json/)
-      .expect(expectStatus)
+
+    if (res.status !== expectStatus) {
+      throw new Error(
+        `Expected status ${expectStatus} but got ${
+          res.status
+        } with body ${JSON.stringify(res.body)}`
+      )
+    }
+
    return res.body
  }

--- a/packages/types/src/documents/app/links.ts
+++ b/packages/types/src/documents/app/links.ts
@ -1,17 +1,15 @@
 import { Document } from "../document"

+export interface LinkInfo {
+  rowId: string
+  fieldName: string
+  tableId: string
+}
+
 export interface LinkDocument extends Document {
  type: string
-  doc1: {
-    rowId: string
-    fieldName: string
-    tableId: string
-  }
-  doc2: {
-    rowId: string
-    fieldName: string
-    tableId: string
-  }
+  doc1: LinkInfo
+  doc2: LinkInfo
 }

 export interface LinkDocumentValue {
--- a/packages/types/src/sdk/featureFlag.ts
+++ b/packages/types/src/sdk/featureFlag.ts
@ -1,8 +1,7 @@
 export enum FeatureFlag {
  LICENSING = "LICENSING",
-  // Feature IDs in Posthog
-  PER_CREATOR_PER_USER_PRICE = "18873",
-  PER_CREATOR_PER_USER_PRICE_ALERT = "18530",
+  PER_CREATOR_PER_USER_PRICE = "PER_CREATOR_PER_USER_PRICE",
+  PER_CREATOR_PER_USER_PRICE_ALERT = "PER_CREATOR_PER_USER_PRICE_ALERT",
 }

 export interface TenantFeatureFlags {
--- a/packages/worker/src/constants/templates/base.hbs
+++ b/packages/worker/src/constants/templates/base.hbs
@ -19,7 +19,7 @@
    }

    a {
-      color: #3869D4 !important;
+      color: #6E56FF !important;
    }

    a img {
@ -109,11 +109,11 @@
    /* Buttons ------------------------------ */

    .button {
-      background-color: #3869D4;
-      border-top: 10px solid #3869D4;
-      border-right: 18px solid #3869D4;
-      border-bottom: 10px solid #3869D4;
-      border-left: 18px solid #3869D4;
+      background-color: #6E56FF;
+      border-top: 10px solid #6E56FF;
+      border-right: 18px solid #6E56FF;
+      border-bottom: 10px solid #6E56FF;
+      border-left: 18px solid #6E56FF;
      display: inline-block;
      color: #FFF !important;
      text-decoration: none !important;
--- a/packages/worker/src/constants/templates/core.hbs
+++ b/packages/worker/src/constants/templates/core.hbs
@ -16,15 +16,11 @@
              cellspacing="0"
            >
              <img
-                width="32"
                height="32"
                style="margin-right:16px; vertical-align: middle;"
                alt="Budibase Logo"
-                src="https://i.imgur.com/Xhdt1YP.png"
+                src="https://res.cloudinary.com/daog6scxm/image/upload/v1696521007/Branding/Assets/Logo/RGB/Full%20Colour/Budibase_Logo_RGB_FullColour_Negative_e9yziz_1_u6oxzg.png"
              />
-              <strong style="vertical-align: middle; font-size: 1.1em">
-                Budibase
-              </strong>
            </td>
          </tr>
        </tbody>
--- a/pull_request_template.md
+++ b/pull_request_template.md
@ -1,7 +1,7 @@
 ## Description
 _Describe the problem or feature in addition to a link to the relevant github issues._

-Addresses: 
+### Addresses:
 - `<Enter the Link to the issue(s) this PR addresses>`
 - ...more if required

@ -10,9 +10,3 @@ Addresses:

 ## Screenshots
 _If a UI facing feature, a short video of the happy path, and some screenshots of the new functionality._
-
-## Documentation
- [ ] I have reviewed the budibase documentatation to verify if this feature requires any changes. If changes or new docs are required I have written them.
-
-
-
--- a/scripts/install-minio.sh
+++ b/scripts/install-minio.sh
@ -2,9 +2,9 @@
 if [[ $TARGETARCH == arm* ]] ;
 then
  echo "INSTALLING ARM64 MINIO"
-  wget wget https://dl.min.io/server/minio/release/linux-arm64/archive/minio.deb -O minio.deb
+  wget https://dl.min.io/server/minio/release/linux-arm64/minio
 else
  echo "INSTALLING AMD64 MINIO"
-  wget wget https://dl.min.io/server/minio/release/linux-amd64/archive/minio.deb -O minio.deb
+  wget https://dl.min.io/server/minio/release/linux-amd64/minio
 fi
-dpkg -i minio.deb
+chmod +x minio