diff --git a/.github/workflows/README.md b/.github/workflows/README.md
index f77323d85a..7e4172e602 100644
--- a/.github/workflows/README.md
+++ b/.github/workflows/README.md
@@ -115,77 +115,4 @@ This job is responsible for deploying to our production, cloud kubernetes enviro
 ### Rollback A Bad Cloud Deployment
 - Kick off cloud deploy job
 - Ensure you are running off master
-- Enter the version number of the last known good version of budibase. For example `1.0.0`
-
-## Pro
-
-| **NOTE**: When developing for both pro / budibase repositories, your branch names need to match, or else the correct pro doesn't get run within your CI job.
-
-### Installing Pro
-
-The pro package is always installed from source in our CI jobs. 
-
-This is done to prevent pro needing to be published prior to CI runs in budiabse. This is required for two reasons:
-- To reduce developer need to manually bump versions, i.e: 
-  - release pro, bump pro dep in budibase, now ci can run successfully
-- The cyclic dependency on backend-core, i.e:
-  - pro depends on backend-core
-  - server depends on pro
-  - backend-core lives in the monorepo, so it can't be released independently to be used in pro
-  - therefore the only option is to pull pro from source and release it as a part of the monorepo release, as if it were a mono package
-
-The install is performed using the same steps as local development, via the `yarn bootstrap` command, see the [Contributing Guide#Pro](../../docs/CONTRIBUTING.md#pro)
-
-The branch to install pro from can vary depending on ref of the commit that triggered the budibase CI job. This is done to enable branches which have changes in both the monorepo and the pro repo to have their CI pass successfully. 
-
-This is done using the [pro/install.sh](../../scripts/pro/install.sh) script. The script will:
-- Clone pro to it's default branch (`develop`)
-- Check if the clone worked, on forked versions of budibase this will fail due to no access
-  - This is fine as the `yarn` command will install the version from NPM
-  - Community PRs should never touch pro so this will always work
-- Checkout the `BRANCH` argument, if this fails fallback to `BASE_BRANCH`
-  - This enables the more complex case of a feature branch being merged to another feature branch, e.g. 
-    - I am working on a branch `epic/stonks` which exists on budibase and pro. 
-    - I want to merge a change to this branch in budibase from `feature/stonks-ui`, which only exists in budibase
-    - The base branch ensures that `epic/stonks` in pro will still be checked out for the CI run, rather than falling back to `develop`
-- Run `yarn setup` to build and install dependencies
-  - `yarn` 
-  - `yarn bootstrap`
-  - `yarn build`
-    - The will build .ts files, and also update the `main` and `types` of `package.json` to point to `dist` rather than src
-    - The build command will only ever work in CI, it is prevented in local dev
-
-#### `BRANCH` and `BASE_BRANCH` arguments
-These arguments are supplied by the various budibase build and release pipelines
-- `budibase_ci` 
-  - `BRANCH: ${{ github.event.pull_request.head.ref }}` -> The branch being merged
-  - `BASE_BRANCH: ${{ github.event.pull_request.base.ref}}` -> The base branch
-- `release-develop`
-  - `BRANCH: develop` -> always use the `develop` branch in pro
-- `release`
-  - `BRANCH: master` -> always use the `master` branch in pro 
-
-
-### Releasing Pro
-After budibase dependencies have been released we will release the new version of pro to match the release version of budibase dependencies. This is to ensure that we are always keeping the version of `backend-core` in sync in the pro package and in budibase packages. Without this we could run into scenarios where different versions are being used when installed via `yarn` inside the docker images, creating very difficult to debug cases.
-
-Pro is released using the [pro/release.sh](../../scripts/pro/release.sh) script. The script will:
-- Inspect the `VERSION` from the `lerna.json` file in budibase
-- Determine whether to use the `latest` or `develop` tag based on the command argument
-- Go to pro directory
-  - install npm creds
-  - update the version of `backend-core` to be `VERSION`, the version just released by lerna
-  - publish to npm. Uses a `lerna publish` command, pro itself is a mono repo. 
-    - force the version to be the same as `VERSION` to keep pro and budibase in sync
-  - reverts the changes to `main` and `types` in `package.json` that were made by the build step, to point back to source
-  - commit & push: `Prep next development iteration`
-- Go to budibase
-  - Update to the new version of pro in `server` and `worker` so the latest pro version is used in the docker builds
-  - commit & push: `Update pro version to $VERSION`
-
-
-#### `COMMAND` argument
-This argument is supplied by the existing `release` and `release:develop` budibase commands, which invoke the pro release
-- `release` will supply no command and default to use `latest`
-- `release:develop` will supply `develop` 
-
+- Enter the version number of the last known good version of budibase. For example `1.0.0`
\ No newline at end of file
diff --git a/.github/workflows/budibase_ci.yml b/.github/workflows/budibase_ci.yml
index 9da52f8bc0..d670e222d3 100644
--- a/.github/workflows/budibase_ci.yml
+++ b/.github/workflows/budibase_ci.yml
@@ -18,6 +18,8 @@ env:
   BRANCH: ${{ github.event.pull_request.head.ref }}
   BASE_BRANCH: ${{ github.event.pull_request.base.ref}}
   PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+  NX_BASE_BRANCH: origin/${{ github.base_ref }}
+  USE_NX_AFFECTED: ${{ github.event_name == 'pull_request' && github.base_ref != 'master'}}
 
 jobs:
   lint:
@@ -25,20 +27,20 @@ jobs:
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
-        if: github.repository == 'Budibase/budibase'
+        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
         with:
           submodules: true
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Checkout repo only
         uses: actions/checkout@v3
-        if: github.repository != 'Budibase/budibase'
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != 'Budibase/budibase'
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: "yarn"
-      - run: yarn
+      - run: yarn --frozen-lockfile
       - run: yarn lint
 
   build:
@@ -46,45 +48,66 @@ jobs:
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
-        if: github.repository == 'Budibase/budibase'
+        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
         with:
           submodules: true
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
+          fetch-depth: 0
       - name: Checkout repo only
         uses: actions/checkout@v3
-        if: github.repository != 'Budibase/budibase'
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != 'Budibase/budibase'
+        with:
+          fetch-depth: 0
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: "yarn"
-      - run: yarn
+      - run: yarn --frozen-lockfile
+
       # Run build all the projects
-      - run: yarn build
+      - name: Build
+        run: |
+          yarn build
       # Check the types of the projects built via esbuild
-      - run: yarn check:types
+      - name: Check types
+        run: |
+          if ${{ env.USE_NX_AFFECTED }}; then
+            yarn check:types --since=${{ env.NX_BASE_BRANCH }}
+          else
+            yarn check:types
+          fi
 
   test-libraries:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
-        if: github.repository == 'Budibase/budibase'
+        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
         with:
           submodules: true
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
+          fetch-depth: 0
       - name: Checkout repo only
         uses: actions/checkout@v3
-        if: github.repository != 'Budibase/budibase'
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != 'Budibase/budibase'
+        with:
+          fetch-depth: 0
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: "yarn"
-      - run: yarn
-      - run: yarn test --ignore=@budibase/worker --ignore=@budibase/server --ignore=@budibase/pro
+      - run: yarn --frozen-lockfile
+      - name: Test
+        run: |
+          if ${{ env.USE_NX_AFFECTED }}; then
+            yarn test --ignore=@budibase/worker --ignore=@budibase/server --ignore=@budibase/pro --since=${{ env.NX_BASE_BRANCH }}
+          else
+            yarn test --ignore=@budibase/worker --ignore=@budibase/server --ignore=@budibase/pro
+          fi
       - uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }} # not required for public repos
@@ -96,21 +119,31 @@ jobs:
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
-        if: github.repository == 'Budibase/budibase'
+        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
         with:
           submodules: true
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
+          fetch-depth: 0
       - name: Checkout repo only
         uses: actions/checkout@v3
-        if: github.repository != 'Budibase/budibase'
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != 'Budibase/budibase'
+        with:
+          fetch-depth: 0
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: "yarn"
-      - run: yarn
-      - run: yarn test --scope=@budibase/worker --scope=@budibase/server
+      - run: yarn --frozen-lockfile
+      - name: Test worker and server
+        run: |
+          if ${{ env.USE_NX_AFFECTED }}; then
+            yarn test --scope=@budibase/worker --scope=@budibase/server --since=${{ env.NX_BASE_BRANCH }}
+          else
+            yarn test --scope=@budibase/worker --scope=@budibase/server
+          fi
+
       - uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN || github.token }} # not required for public repos
@@ -119,42 +152,50 @@ jobs:
 
   test-pro:
     runs-on: ubuntu-latest
-    if: github.repository == 'Budibase/budibase'
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
         with:
           submodules: true
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
+          fetch-depth: 0
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: "yarn"
-      - run: yarn
-      - run: yarn test --scope=@budibase/pro
+      - run: yarn --frozen-lockfile
+      - name: Test
+        run: |
+          if ${{ env.USE_NX_AFFECTED }}; then
+            yarn test --scope=@budibase/pro --since=${{ env.NX_BASE_BRANCH }}
+          else
+            yarn test --scope=@budibase/pro
+          fi
 
   integration-test:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
-        if: github.repository == 'Budibase/budibase'
+        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
         with:
           submodules: true
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Checkout repo only
         uses: actions/checkout@v3
-        if: github.repository != 'Budibase/budibase'
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != 'Budibase/budibase'
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: "yarn"
-      - run: yarn
-      - run: yarn build --projects=@budibase/server,@budibase/worker,@budibase/client
+      - run: yarn --frozen-lockfile
+      - name: Build packages
+        run: yarn build --scope @budibase/server --scope @budibase/worker --scope @budibase/client --scope @budibase/backend-core
       - name: Run tests
         run: |
           cd qa-core
@@ -166,14 +207,14 @@ jobs:
 
   check-pro-submodule:
     runs-on: ubuntu-latest
-    if: github.repository == 'Budibase/budibase'
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
     steps:
       - name: Checkout repo and submodules
         uses: actions/checkout@v3
         with:
           submodules: true
-          fetch-depth: 0
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
+          fetch-depth: 0
 
       - name: Check pro commit
         id: get_pro_commits
@@ -211,4 +252,4 @@ jobs:
               process.exit(1);
             } else {
               console.log('All good, the submodule had been merged and setup correctly!')
-            }
+            }
\ No newline at end of file
diff --git a/.github/workflows/check_unreleased_changes.yml b/.github/workflows/check_unreleased_changes.yml
new file mode 100644
index 0000000000..d558330545
--- /dev/null
+++ b/.github/workflows/check_unreleased_changes.yml
@@ -0,0 +1,29 @@
+name: check_unreleased_changes
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check_unreleased:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for unreleased changes
+        env:
+          REPO: "Budibase/budibase"
+          TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+        run: |
+          RELEASE_TIMESTAMP=$(curl -s -H "Authorization: token $TOKEN" \
+              "https://api.github.com/repos/$REPO/releases/latest" | \
+              jq -r .published_at)
+          COMMIT_TIMESTAMP=$(curl -s -H "Authorization: token $TOKEN" \
+              "https://api.github.com/repos/$REPO/commits/master" | \
+              jq -r .commit.committer.date)
+          RELEASE_SECONDS=$(date --date="$RELEASE_TIMESTAMP" "+%s")
+          COMMIT_SECONDS=$(date --date="$COMMIT_TIMESTAMP" "+%s")
+          if (( COMMIT_SECONDS > RELEASE_SECONDS )); then
+              echo "There are unreleased changes. Please release these changes before merging."
+              exit 1
+          fi
+          echo "No unreleased changes detected."
diff --git a/.github/workflows/release-develop.yml b/.github/workflows/release-develop.yml
index 61cb283e28..bd727b7865 100644
--- a/.github/workflows/release-develop.yml
+++ b/.github/workflows/release-develop.yml
@@ -44,7 +44,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 18.x
 
       - run: yarn install --frozen-lockfile
       - name: Update versions
diff --git a/.github/workflows/release-master.yml b/.github/workflows/release-master.yml
index 1dae4ae578..b4991cbfbe 100644
--- a/.github/workflows/release-master.yml
+++ b/.github/workflows/release-master.yml
@@ -36,7 +36,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 18.x
 
       - run: yarn install --frozen-lockfile
       - name: Update versions
diff --git a/.github/workflows/release-selfhost.yml b/.github/workflows/release-selfhost.yml
index 39ee812726..d2689a0ea0 100644
--- a/.github/workflows/release-selfhost.yml
+++ b/.github/workflows/release-selfhost.yml
@@ -28,10 +28,10 @@ jobs:
             exit 1
           fi
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 18.x
 
       - name: Get the latest budibase release version
         id: version
@@ -67,7 +67,6 @@ jobs:
       - name: Bootstrap and build (CLI)
         run: |
           yarn
-          yarn bootstrap
           yarn build
 
       - name: Build OpenAPI spec
diff --git a/.github/workflows/release-singleimage.yml b/.github/workflows/release-singleimage.yml
index b879b519d2..bd01ed786a 100644
--- a/.github/workflows/release-singleimage.yml
+++ b/.github/workflows/release-singleimage.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
     steps:
       - name: Maximize build space
         uses: easimon/maximize-build-space@master
diff --git a/.nvmrc b/.nvmrc
index 835d07c442..7950a44576 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v14.20.1
+v18.17.0
diff --git a/.tool-versions b/.tool-versions
index 9f2ea77b14..a909d60941 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,3 +1,3 @@
-nodejs 14.21.3
+nodejs 18.17.0
 python 3.10.0
-yarn 1.22.19
\ No newline at end of file
+yarn 1.22.19
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 8cb49d5825..cfd8d7b155 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,42 +1,31 @@
+
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Budibase Server",
-            "type": "node",
-            "request": "launch",
-            "runtimeArgs": [
-                "--nolazy",
-                "-r",
-                "ts-node/register/transpile-only"
-            ],
-            "args": [
-                "${workspaceFolder}/packages/server/src/index.ts"
-            ],
-            "cwd": "${workspaceFolder}/packages/server"
-        },
-        {
-            "name": "Budibase Worker",
-            "type": "node",
-            "request": "launch",
-            "runtimeArgs": [
-                "--nolazy",
-                "-r",
-                "ts-node/register/transpile-only"
-            ],
-            "args": [
-                "${workspaceFolder}/packages/worker/src/index.ts"
-            ],
-            "cwd": "${workspaceFolder}/packages/worker"
-        },
-    ],
-    "compounds": [
-        {
-          "name": "Start Budibase",
-          "configurations": ["Budibase Server", "Budibase Worker"]
-        }
-    ]
-}
\ No newline at end of file
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Budibase Server",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
+      "args": ["${workspaceFolder}/packages/server/src/index.ts"],
+      "cwd": "${workspaceFolder}/packages/server"
+    },
+    {
+      "name": "Budibase Worker",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
+      "args": ["${workspaceFolder}/packages/worker/src/index.ts"],
+      "cwd": "${workspaceFolder}/packages/worker"
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Start Budibase",
+      "configurations": ["Budibase Server", "Budibase Worker"]
+    }
+  ]
+}
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index 2fb4c36fa8..70f198a84c 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -90,7 +90,7 @@ Component libraries are collections of components as well as the definition of t
 
 #### 1. Prerequisites
 
-- NodeJS version `14.x.x`
+- NodeJS version `18.x.x`
 - Python version `3.x`
 
 ### Using asdf (recommended)
diff --git a/docs/DEV-SETUP-DEBIAN.md b/docs/DEV-SETUP-DEBIAN.md
index a8b1e3dce4..e098862c64 100644
--- a/docs/DEV-SETUP-DEBIAN.md
+++ b/docs/DEV-SETUP-DEBIAN.md
@@ -55,7 +55,7 @@ yarn setup
 The yarn setup command runs several build steps i.e.
 
 ```
-node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev
+node ./hosting/scripts/setup.js && yarn && yarn build && yarn dev
 ```
 
 So this command will actually run the application in dev mode. It creates .env files under `./packages/server` and `./packages/worker` and runs docker containers for each service via docker-compose.
diff --git a/docs/DEV-SETUP-MACOSX.md b/docs/DEV-SETUP-MACOSX.md
index 94ed3fc1ee..0e13d540b3 100644
--- a/docs/DEV-SETUP-MACOSX.md
+++ b/docs/DEV-SETUP-MACOSX.md
@@ -55,7 +55,7 @@ yarn setup
 The yarn setup command runs several build steps i.e.
 
 ```
-node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev
+node ./hosting/scripts/setup.js && yarn && yarn build && yarn dev
 ```
 
 So this command will actually run the application in dev mode. It creates .env files under `./packages/server` and `./packages/worker` and runs docker containers for each service via docker-compose.
diff --git a/docs/DEV-SETUP-WINDOWS.md b/docs/DEV-SETUP-WINDOWS.md
index 176e0700d7..f26a5a0882 100644
--- a/docs/DEV-SETUP-WINDOWS.md
+++ b/docs/DEV-SETUP-WINDOWS.md
@@ -74,7 +74,7 @@ yarn setup
 The yarn setup command runs several build steps i.e.
 
 ```
-node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev
+node ./hosting/scripts/setup.js && yarn && yarn build && yarn dev
 ```
 
 So this command will actually run the application in dev mode. It creates .env files under `./packages/server` and `./packages/worker` and runs docker containers for each service via docker-compose.
diff --git a/hosting/docker-compose.test.yaml b/hosting/docker-compose.test.yaml
deleted file mode 100644
index f059173d2d..0000000000
--- a/hosting/docker-compose.test.yaml
+++ /dev/null
@@ -1,47 +0,0 @@
-version: "3"
-
-# optional ports are specified throughout for more advanced use cases.
-
-services:
-  minio-service:
-    restart: on-failure
-    # Last version that supports the "fs" backend
-    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
-    ports:
-      - "9000"
-      - "9001"
-    environment:
-      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
-      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
-    command: server /data --console-address ":9001"
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
-      interval: 30s
-      timeout: 20s
-      retries: 3
-
-  couchdb-service:
-    # platform: linux/amd64
-    restart: on-failure
-    image: budibase/couchdb
-    environment:
-      - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
-      - COUCHDB_USER=${COUCH_DB_USER}
-    ports:
-      - "5984"
-      - "4369"
-      - "9100"
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:5984/_up"]
-      interval: 30s
-      timeout: 20s
-      retries: 3
-
-  redis-service:
-    restart: on-failure
-    image: redis
-    command: redis-server --requirepass ${REDIS_PASSWORD}
-    ports:
-      - "6379"
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
\ No newline at end of file
diff --git a/hosting/single/Dockerfile b/hosting/single/Dockerfile
index e43e5ad10c..9fdf2449d1 100644
--- a/hosting/single/Dockerfile
+++ b/hosting/single/Dockerfile
@@ -1,7 +1,7 @@
-FROM node:14-slim as build
+FROM node:18-slim as build
 
 # install node-gyp dependencies
-RUN apt-get update && apt-get upgrade -y && apt-get install -y --no-install-recommends apt-utils cron g++ make python
+RUN apt-get update && apt-get upgrade -y && apt-get install -y --no-install-recommends apt-utils cron g++ make python3
 
 # add pin script
 WORKDIR /
diff --git a/hosting/single/README.md b/hosting/single/README.md
index 1147d55c89..09010f5075 100644
--- a/hosting/single/README.md
+++ b/hosting/single/README.md
@@ -58,7 +58,6 @@ Node setup:
 ```
 node ./hosting/scripts/setup.js
 yarn
-yarn bootstrap
 yarn build
 ```
 #### Build Image
diff --git a/hosting/dependencies/Dockerfile b/hosting/tests/Dockerfile
similarity index 100%
rename from hosting/dependencies/Dockerfile
rename to hosting/tests/Dockerfile
diff --git a/hosting/dependencies/README.md b/hosting/tests/README.md
similarity index 98%
rename from hosting/dependencies/README.md
rename to hosting/tests/README.md
index 8586b31948..19b9ed5037 100644
--- a/hosting/dependencies/README.md
+++ b/hosting/tests/README.md
@@ -47,7 +47,6 @@ Node setup:
 ```
 node ./hosting/scripts/setup.js
 yarn
-yarn bootstrap
 yarn build
 ```
 #### Build Image
diff --git a/hosting/dependencies/runner.sh b/hosting/tests/runner.sh
similarity index 100%
rename from hosting/dependencies/runner.sh
rename to hosting/tests/runner.sh
diff --git a/jestTestcontainersConfigGenerator.js b/jestTestcontainersConfigGenerator.js
index 4b94cf5016..1e39ed771f 100644
--- a/jestTestcontainersConfigGenerator.js
+++ b/jestTestcontainersConfigGenerator.js
@@ -1,9 +1,16 @@
 module.exports = () => {
   return {
-    dockerCompose: {
-      composeFilePath: "../../hosting",
-      composeFile: "docker-compose.test.yaml",
-      startupTimeout: 10000,
-    },
+    couchdb: {
+      image: "budibase/couchdb",
+      ports: [5984],
+      env: {
+        COUCHDB_PASSWORD: "budibase",
+        COUCHDB_USER: "budibase",
+      },
+      wait: {
+        type: "ports",
+        timeout: 20000,
+      }
+    }
   }
 }
diff --git a/lerna.json b/lerna.json
index 8742093f39..a662b691ed 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.9.38",
+  "version": "2.9.39-alpha.14",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/package.json b/package.json
index d27af2e27d..b0c428fe70 100644
--- a/package.json
+++ b/package.json
@@ -33,21 +33,18 @@
   "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",
-    "bootstrap": "./scripts/link-dependencies.sh && echo '***BOOTSTRAP ONLY REQUIRED FOR USE WITH ACCOUNT PORTAL***'",
-    "build": "yarn nx run-many -t=build",
+    "build": "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",
-    "backend:bootstrap": "./scripts/scopeBackend.sh && yarn run bootstrap",
-    "backend:build": "./scripts/scopeBackend.sh 'lerna run --stream build'",
     "build:sdk": "lerna run --stream build:sdk",
     "deps:circular": "madge packages/server/dist/index.js packages/worker/src/index.ts packages/backend-core/dist/src/index.js packages/cli/src/index.js --circular",
     "release": "lerna publish from-package --yes --force-publish --no-git-tag-version --no-push --no-git-reset",
     "release:develop": "yarn release --dist-tag develop",
-    "restore": "yarn run clean && yarn run bootstrap && yarn run build",
+    "restore": "yarn run clean && yarn && yarn run build",
     "nuke": "yarn run nuke:packages && yarn run nuke:docker",
     "nuke:packages": "yarn run restore",
     "nuke:docker": "lerna run --stream dev:stack:nuke",
-    "clean": "lerna clean",
+    "clean": "lerna clean -y",
     "kill-builder": "kill-port 3000",
     "kill-server": "kill-port 4001 4002",
     "kill-all": "yarn run kill-builder && yarn run kill-server",
@@ -93,9 +90,8 @@
     "mode:account": "yarn mode:cloud && yarn env:account:enable",
     "security:audit": "node scripts/audit.js",
     "postinstall": "husky install",
-    "dep:clean": "yarn clean -y && yarn bootstrap",
-    "submodules:load": "git submodule init && git submodule update && yarn && yarn bootstrap",
-    "submodules:unload": "git submodule deinit --all && yarn && yarn bootstrap"
+    "submodules:load": "git submodule init && git submodule update && yarn",
+    "submodules:unload": "git submodule deinit --all && yarn"
   },
   "workspaces": {
     "packages": [
@@ -109,7 +105,7 @@
     "@budibase/types": "0.0.0"
   },
   "engines": {
-    "node": ">=14.0.0 <15.0.0"
+    "node": ">=18.0.0 <19.0.0"
   },
   "dependencies": {}
 }
diff --git a/packages/backend-core/.npmignore b/packages/backend-core/.npmignore
index fb547825eb..30bba85ce8 100644
--- a/packages/backend-core/.npmignore
+++ b/packages/backend-core/.npmignore
@@ -1,4 +1,6 @@
 *
 !dist/**/*
 dist/tsconfig.build.tsbuildinfo
-!package.json
\ No newline at end of file
+!package.json
+!src/**
+!tests/**
\ No newline at end of file
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 1d6aa5b9fd..cf8d6fbe17 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -6,7 +6,7 @@
   "types": "dist/src/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
-    "./tests": "./dist/tests.js",
+    "./tests": "./dist/tests/index.js",
     "./*": "./dist/*.js"
   },
   "author": "Budibase",
@@ -14,7 +14,7 @@
   "scripts": {
     "prebuild": "rimraf dist/",
     "prepack": "cp package.json dist",
-    "build": "node ./scripts/build.js && tsc -p tsconfig.build.json --emitDeclarationOnly --paths null",
+    "build": "tsc -p tsconfig.build.json --paths null && node ./scripts/build.js",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "check:types": "tsc -p tsconfig.json --noEmit --paths null",
     "test": "bash scripts/test.sh",
diff --git a/packages/backend-core/scripts/build.js b/packages/backend-core/scripts/build.js
index bd00cbc7ff..9cc33d7b75 100644
--- a/packages/backend-core/scripts/build.js
+++ b/packages/backend-core/scripts/build.js
@@ -1,6 +1,4 @@
 #!/usr/bin/node
 const coreBuild = require("../../../scripts/build")
 
-coreBuild("./src/plugin/index.ts", "./dist/plugins.js")
 coreBuild("./src/index.ts", "./dist/index.js")
-coreBuild("./tests/index.ts", "./dist/tests.js")
diff --git a/packages/backend-core/src/cache/user.ts b/packages/backend-core/src/cache/user.ts
index 8281bfca62..e2af78adfd 100644
--- a/packages/backend-core/src/cache/user.ts
+++ b/packages/backend-core/src/cache/user.ts
@@ -4,6 +4,8 @@ import * as context from "../context"
 import * as platform from "../platform"
 import env from "../environment"
 import * as accounts from "../accounts"
+import { UserDB } from "../users"
+import { sdk } from "@budibase/shared-core"
 
 const EXPIRY_SECONDS = 3600
 
@@ -60,6 +62,18 @@ export async function getUser(
     // make sure the tenant ID is always correct/set
     user.tenantId = tenantId
   }
+  // if has groups, could have builder permissions granted by a group
+  if (user.userGroups && !sdk.users.isGlobalBuilder(user)) {
+    await context.doInTenant(tenantId, async () => {
+      const appIds = await UserDB.getGroupBuilderAppIds(user)
+      if (appIds.length) {
+        const existing = user.builder?.apps || []
+        user.builder = {
+          apps: [...new Set(existing.concat(appIds))],
+        }
+      }
+    })
+  }
   return user
 }
 
diff --git a/packages/backend-core/src/db/db.ts b/packages/backend-core/src/db/db.ts
index f13eb9a965..9aae64b892 100644
--- a/packages/backend-core/src/db/db.ts
+++ b/packages/backend-core/src/db/db.ts
@@ -11,7 +11,11 @@ export function getDB(dbName?: string, opts?: any): Database {
 // we have to use a callback for this so that we can close
 // the DB when we're done, without this manual requests would
 // need to close the database when done with it to avoid memory leaks
-export async function doWithDB(dbName: string, cb: any, opts = {}) {
+export async function doWithDB<T>(
+  dbName: string,
+  cb: (db: Database) => Promise<T>,
+  opts = {}
+) {
   const db = getDB(dbName, opts)
   // need this to be async so that we can correctly close DB after all
   // async operations have been completed
diff --git a/packages/backend-core/src/db/lucene.ts b/packages/backend-core/src/db/lucene.ts
index a491451a62..7451d581b5 100644
--- a/packages/backend-core/src/db/lucene.ts
+++ b/packages/backend-core/src/db/lucene.ts
@@ -1,7 +1,6 @@
 import fetch from "node-fetch"
 import { getCouchInfo } from "./couch"
-import { SearchFilters, Row } from "@budibase/types"
-import { createUserIndex } from "./searchIndexes/searchIndexes"
+import { SearchFilters, Row, EmptyFilterOption } from "@budibase/types"
 
 const QUERY_START_REGEX = /\d[0-9]*:/g
 
@@ -65,6 +64,7 @@ export class QueryBuilder<T> {
     this.#index = index
     this.#query = {
       allOr: false,
+      onEmptyFilter: EmptyFilterOption.RETURN_ALL,
       string: {},
       fuzzy: {},
       range: {},
@@ -218,6 +218,10 @@ export class QueryBuilder<T> {
     this.#query.allOr = true
   }
 
+  setOnEmptyFilter(value: EmptyFilterOption) {
+    this.#query.onEmptyFilter = value
+  }
+
   handleSpaces(input: string) {
     if (this.#noEscaping) {
       return input
@@ -289,8 +293,9 @@ export class QueryBuilder<T> {
     const builder = this
     let allOr = this.#query && this.#query.allOr
     let query = allOr ? "" : "*:*"
+    let allFiltersEmpty = true
     const allPreProcessingOpts = { escape: true, lowercase: true, wrap: true }
-    let tableId
+    let tableId: string = ""
     if (this.#query.equal!.tableId) {
       tableId = this.#query.equal!.tableId
       delete this.#query.equal!.tableId
@@ -305,7 +310,7 @@ export class QueryBuilder<T> {
     }
 
     const contains = (key: string, value: any, mode = "AND") => {
-      if (Array.isArray(value) && value.length === 0) {
+      if (!value || (Array.isArray(value) && value.length === 0)) {
         return null
       }
       if (!Array.isArray(value)) {
@@ -384,6 +389,12 @@ export class QueryBuilder<T> {
           built += ` ${mode} `
         }
         built += expression
+        if (
+          (typeof value !== "string" && value != null) ||
+          (typeof value === "string" && value !== tableId && value !== "")
+        ) {
+          allFiltersEmpty = false
+        }
       }
       if (opts?.returnBuilt) {
         return built
@@ -463,6 +474,13 @@ export class QueryBuilder<T> {
       allOr = false
       build({ tableId }, equal)
     }
+    if (allFiltersEmpty) {
+      if (this.#query.onEmptyFilter === EmptyFilterOption.RETURN_NONE) {
+        return ""
+      } else if (this.#query?.allOr) {
+        return query.replace("()", "(*:*)")
+      }
+    }
     return query
   }
 
diff --git a/packages/backend-core/src/db/tests/lucene.spec.ts b/packages/backend-core/src/db/tests/lucene.spec.ts
index a82828d8f2..7716661d88 100644
--- a/packages/backend-core/src/db/tests/lucene.spec.ts
+++ b/packages/backend-core/src/db/tests/lucene.spec.ts
@@ -1,6 +1,6 @@
 import { newid } from "../../docIds/newid"
 import { getDB } from "../db"
-import { Database } from "@budibase/types"
+import { Database, EmptyFilterOption } from "@budibase/types"
 import { QueryBuilder, paginatedSearch, fullSearch } from "../lucene"
 
 const INDEX_NAME = "main"
@@ -156,6 +156,76 @@ describe("lucene", () => {
       expect(resp.rows.length).toBe(2)
     })
 
+    describe("empty filters behaviour", () => {
+      it("should return all rows by default", async () => {
+        const builder = new QueryBuilder(dbName, INDEX_NAME)
+        builder.addEqual("property", "")
+        builder.addEqual("number", null)
+        builder.addString("property", "")
+        builder.addFuzzy("property", "")
+        builder.addNotEqual("number", undefined)
+        builder.addOneOf("number", null)
+        builder.addContains("array", undefined)
+        builder.addNotContains("array", null)
+        builder.addContainsAny("array", null)
+
+        const resp = await builder.run()
+        expect(resp.rows.length).toBe(3)
+      })
+
+      it("should return all rows when onEmptyFilter is ALL", async () => {
+        const builder = new QueryBuilder(dbName, INDEX_NAME)
+        builder.setOnEmptyFilter(EmptyFilterOption.RETURN_ALL)
+        builder.setAllOr()
+        builder.addEqual("property", "")
+        builder.addEqual("number", null)
+        builder.addString("property", "")
+        builder.addFuzzy("property", "")
+        builder.addNotEqual("number", undefined)
+        builder.addOneOf("number", null)
+        builder.addContains("array", undefined)
+        builder.addNotContains("array", null)
+        builder.addContainsAny("array", null)
+
+        const resp = await builder.run()
+        expect(resp.rows.length).toBe(3)
+      })
+
+      it("should return no rows when onEmptyFilter is NONE", async () => {
+        const builder = new QueryBuilder(dbName, INDEX_NAME)
+        builder.setOnEmptyFilter(EmptyFilterOption.RETURN_NONE)
+        builder.addEqual("property", "")
+        builder.addEqual("number", null)
+        builder.addString("property", "")
+        builder.addFuzzy("property", "")
+        builder.addNotEqual("number", undefined)
+        builder.addOneOf("number", null)
+        builder.addContains("array", undefined)
+        builder.addNotContains("array", null)
+        builder.addContainsAny("array", null)
+
+        const resp = await builder.run()
+        expect(resp.rows.length).toBe(0)
+      })
+
+      it("should return all matching rows when onEmptyFilter is NONE, but a filter value is provided", async () => {
+        const builder = new QueryBuilder(dbName, INDEX_NAME)
+        builder.setOnEmptyFilter(EmptyFilterOption.RETURN_NONE)
+        builder.addEqual("property", "")
+        builder.addEqual("number", 1)
+        builder.addString("property", "")
+        builder.addFuzzy("property", "")
+        builder.addNotEqual("number", undefined)
+        builder.addOneOf("number", null)
+        builder.addContains("array", undefined)
+        builder.addNotContains("array", null)
+        builder.addContainsAny("array", null)
+
+        const resp = await builder.run()
+        expect(resp.rows.length).toBe(1)
+      })
+    })
+
     describe("skip", () => {
       const skipDbName = `db-${newid()}`
       let docs: {
diff --git a/packages/backend-core/src/featureFlags/index.ts b/packages/backend-core/src/features/index.ts
similarity index 98%
rename from packages/backend-core/src/featureFlags/index.ts
rename to packages/backend-core/src/features/index.ts
index 877cd60e1a..8f5c903e05 100644
--- a/packages/backend-core/src/featureFlags/index.ts
+++ b/packages/backend-core/src/features/index.ts
@@ -1,5 +1,6 @@
 import env from "../environment"
 import * as context from "../context"
+export * from "./installation"
 
 /**
  * Read the TENANT_FEATURE_FLAGS env var and return an array of features flags for each tenant.
diff --git a/packages/backend-core/src/features/installation.ts b/packages/backend-core/src/features/installation.ts
new file mode 100644
index 0000000000..defc8bf987
--- /dev/null
+++ b/packages/backend-core/src/features/installation.ts
@@ -0,0 +1,17 @@
+export function processFeatureEnvVar<T>(
+  fullList: string[],
+  featureList?: string
+) {
+  let list
+  if (!featureList) {
+    list = fullList
+  } else {
+    list = featureList.split(",")
+  }
+  for (let feature of list) {
+    if (!fullList.includes(feature)) {
+      throw new Error(`Feature: ${feature} is not an allowed option`)
+    }
+  }
+  return list as unknown as T[]
+}
diff --git a/packages/backend-core/src/featureFlags/tests/featureFlags.spec.ts b/packages/backend-core/src/features/tests/featureFlags.spec.ts
similarity index 100%
rename from packages/backend-core/src/featureFlags/tests/featureFlags.spec.ts
rename to packages/backend-core/src/features/tests/featureFlags.spec.ts
diff --git a/packages/backend-core/src/index.ts b/packages/backend-core/src/index.ts
index 7b98674788..ffffd8240a 100644
--- a/packages/backend-core/src/index.ts
+++ b/packages/backend-core/src/index.ts
@@ -6,7 +6,8 @@ export * as roles from "./security/roles"
 export * as permissions from "./security/permissions"
 export * as accounts from "./accounts"
 export * as installation from "./installation"
-export * as featureFlags from "./featureFlags"
+export * as featureFlags from "./features"
+export * as features from "./features/installation"
 export * as sessions from "./security/sessions"
 export * as platform from "./platform"
 export * as auth from "./auth"
diff --git a/packages/backend-core/src/middleware/builderOnly.ts b/packages/backend-core/src/middleware/builderOnly.ts
index 8c1c54a44c..fafcc524cc 100644
--- a/packages/backend-core/src/middleware/builderOnly.ts
+++ b/packages/backend-core/src/middleware/builderOnly.ts
@@ -5,11 +5,12 @@ import env from "../environment"
 
 export default async (ctx: UserCtx, next: any) => {
   const appId = getAppId()
-  const builderFn = env.isWorker()
-    ? hasBuilderPermissions
-    : env.isApps()
-    ? isBuilder
-    : undefined
+  const builderFn =
+    env.isWorker() || !appId
+      ? hasBuilderPermissions
+      : env.isApps()
+      ? isBuilder
+      : undefined
   if (!builderFn) {
     throw new Error("Service name unknown - middleware inactive.")
   }
diff --git a/packages/backend-core/src/middleware/builderOrAdmin.ts b/packages/backend-core/src/middleware/builderOrAdmin.ts
index c03e856233..4b8badec15 100644
--- a/packages/backend-core/src/middleware/builderOrAdmin.ts
+++ b/packages/backend-core/src/middleware/builderOrAdmin.ts
@@ -5,11 +5,12 @@ import env from "../environment"
 
 export default async (ctx: UserCtx, next: any) => {
   const appId = getAppId()
-  const builderFn = env.isWorker()
-    ? hasBuilderPermissions
-    : env.isApps()
-    ? isBuilder
-    : undefined
+  const builderFn =
+    env.isWorker() || !appId
+      ? hasBuilderPermissions
+      : env.isApps()
+      ? isBuilder
+      : undefined
   if (!builderFn) {
     throw new Error("Service name unknown - middleware inactive.")
   }
diff --git a/packages/backend-core/src/security/permissions.ts b/packages/backend-core/src/security/permissions.ts
index 70dae57ae6..13083534b1 100644
--- a/packages/backend-core/src/security/permissions.ts
+++ b/packages/backend-core/src/security/permissions.ts
@@ -78,7 +78,6 @@ export const BUILTIN_PERMISSIONS = {
     permissions: [
       new Permission(PermissionType.QUERY, PermissionLevel.READ),
       new Permission(PermissionType.TABLE, PermissionLevel.READ),
-      new Permission(PermissionType.VIEW, PermissionLevel.READ),
     ],
   },
   WRITE: {
@@ -87,8 +86,8 @@ export const BUILTIN_PERMISSIONS = {
     permissions: [
       new Permission(PermissionType.QUERY, PermissionLevel.WRITE),
       new Permission(PermissionType.TABLE, PermissionLevel.WRITE),
-      new Permission(PermissionType.VIEW, PermissionLevel.READ),
       new Permission(PermissionType.AUTOMATION, PermissionLevel.EXECUTE),
+      new Permission(PermissionType.LEGACY_VIEW, PermissionLevel.READ),
     ],
   },
   POWER: {
@@ -98,8 +97,8 @@ export const BUILTIN_PERMISSIONS = {
       new Permission(PermissionType.TABLE, PermissionLevel.WRITE),
       new Permission(PermissionType.USER, PermissionLevel.READ),
       new Permission(PermissionType.AUTOMATION, PermissionLevel.EXECUTE),
-      new Permission(PermissionType.VIEW, PermissionLevel.READ),
       new Permission(PermissionType.WEBHOOK, PermissionLevel.READ),
+      new Permission(PermissionType.LEGACY_VIEW, PermissionLevel.READ),
     ],
   },
   ADMIN: {
@@ -109,9 +108,9 @@ export const BUILTIN_PERMISSIONS = {
       new Permission(PermissionType.TABLE, PermissionLevel.ADMIN),
       new Permission(PermissionType.USER, PermissionLevel.ADMIN),
       new Permission(PermissionType.AUTOMATION, PermissionLevel.ADMIN),
-      new Permission(PermissionType.VIEW, PermissionLevel.ADMIN),
       new Permission(PermissionType.WEBHOOK, PermissionLevel.READ),
       new Permission(PermissionType.QUERY, PermissionLevel.ADMIN),
+      new Permission(PermissionType.LEGACY_VIEW, PermissionLevel.READ),
     ],
   },
 }
diff --git a/packages/backend-core/src/security/roles.ts b/packages/backend-core/src/security/roles.ts
index 081193b433..e87df2e9c9 100644
--- a/packages/backend-core/src/security/roles.ts
+++ b/packages/backend-core/src/security/roles.ts
@@ -253,7 +253,7 @@ export function checkForRoleResourceArray(
  * Given an app ID this will retrieve all of the roles that are currently within that app.
  * @return {Promise<object[]>} An array of the role objects that were found.
  */
-export async function getAllRoles(appId?: string) {
+export async function getAllRoles(appId?: string): Promise<RoleDoc[]> {
   if (appId) {
     return doWithDB(appId, internal)
   } else {
@@ -312,37 +312,6 @@ export async function getAllRoles(appId?: string) {
   }
 }
 
-/**
- * This retrieves the required role for a resource
- * @param permLevel The level of request
- * @param resourceId The resource being requested
- * @param subResourceId The sub resource being requested
- * @return {Promise<{permissions}|Object>} returns the permissions required to access.
- */
-export async function getRequiredResourceRole(
-  permLevel: string,
-  { resourceId, subResourceId }: { resourceId?: string; subResourceId?: string }
-) {
-  const roles = await getAllRoles()
-  let main = [],
-    sub = []
-  for (let role of roles) {
-    // no permissions, ignore it
-    if (!role.permissions) {
-      continue
-    }
-    const mainRes = resourceId ? role.permissions[resourceId] : undefined
-    const subRes = subResourceId ? role.permissions[subResourceId] : undefined
-    if (mainRes && mainRes.indexOf(permLevel) !== -1) {
-      main.push(role._id)
-    } else if (subRes && subRes.indexOf(permLevel) !== -1) {
-      sub.push(role._id)
-    }
-  }
-  // for now just return the IDs
-  return main.concat(sub)
-}
-
 export class AccessController {
   userHierarchies: { [key: string]: string[] }
   constructor() {
@@ -411,8 +380,8 @@ export function getDBRoleID(roleName: string) {
 export function getExternalRoleID(roleId: string, version?: string) {
   // for built-in roles we want to remove the DB role ID element (role_)
   if (
-    (roleId.startsWith(DocumentType.ROLE) && isBuiltin(roleId)) ||
-    version === RoleIDVersion.NAME
+    roleId.startsWith(DocumentType.ROLE) &&
+    (isBuiltin(roleId) || version === RoleIDVersion.NAME)
   ) {
     return roleId.split(`${DocumentType.ROLE}${SEPARATOR}`)[1]
   }
diff --git a/packages/backend-core/src/users/db.ts b/packages/backend-core/src/users/db.ts
index 55cc97bb1c..c288540f35 100644
--- a/packages/backend-core/src/users/db.ts
+++ b/packages/backend-core/src/users/db.ts
@@ -1,30 +1,32 @@
 import env from "../environment"
 import * as eventHelpers from "./events"
 import * as accounts from "../accounts"
+import * as accountSdk from "../accounts"
 import * as cache from "../cache"
-import { getIdentity, getTenantId, getGlobalDB } from "../context"
+import { getGlobalDB, getIdentity, getTenantId } from "../context"
 import * as dbUtils from "../db"
 import { EmailUnavailableError, HTTPError } from "../errors"
 import * as platform from "../platform"
 import * as sessions from "../security/sessions"
 import * as usersCore from "./users"
 import {
+  Account,
   AllDocsResponse,
   BulkUserCreated,
   BulkUserDeleted,
+  isSSOAccount,
+  isSSOUser,
   RowResponse,
   SaveUserOpts,
   User,
-  Account,
-  isSSOUser,
-  isSSOAccount,
   UserStatus,
+  UserGroup,
+  ContextUser,
 } from "@budibase/types"
-import * as accountSdk from "../accounts"
 import {
-  validateUniqueUser,
   getAccountHolderFromUserIds,
   isAdmin,
+  validateUniqueUser,
 } from "./utils"
 import { searchExistingEmails } from "./lookup"
 import { hash } from "../utils"
@@ -32,8 +34,14 @@ import { hash } from "../utils"
 type QuotaUpdateFn = (change: number, cb?: () => Promise<any>) => Promise<any>
 type GroupUpdateFn = (groupId: string, userIds: string[]) => Promise<any>
 type FeatureFn = () => Promise<Boolean>
+type GroupGetFn = (ids: string[]) => Promise<UserGroup[]>
+type GroupBuildersFn = (user: User) => Promise<string[]>
 type QuotaFns = { addUsers: QuotaUpdateFn; removeUsers: QuotaUpdateFn }
-type GroupFns = { addUsers: GroupUpdateFn }
+type GroupFns = {
+  addUsers: GroupUpdateFn
+  getBulk: GroupGetFn
+  getGroupBuilderAppIds: GroupBuildersFn
+}
 type FeatureFns = { isSSOEnforced: FeatureFn; isAppBuildersEnabled: FeatureFn }
 
 const bulkDeleteProcessing = async (dbUser: User) => {
@@ -179,6 +187,14 @@ export class UserDB {
     return user
   }
 
+  static async bulkGet(userIds: string[]) {
+    return await usersCore.bulkGetGlobalUsersById(userIds)
+  }
+
+  static async bulkUpdate(users: User[]) {
+    return await usersCore.bulkUpdateGlobalUsers(users)
+  }
+
   static async save(user: User, opts: SaveUserOpts = {}): Promise<User> {
     // default booleans to true
     if (opts.hashPassword == null) {
@@ -457,4 +473,12 @@ export class UserDB {
     await cache.user.invalidateUser(userId)
     await sessions.invalidateSessions(userId, { reason: "deletion" })
   }
+
+  static async getGroups(groupIds: string[]) {
+    return await this.groups.getBulk(groupIds)
+  }
+
+  static async getGroupBuilderAppIds(user: User) {
+    return await this.groups.getGroupBuilderAppIds(user)
+  }
 }
diff --git a/packages/backend-core/tests/core/utilities/mocks/licenses.ts b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
index 6747282040..309f0fd159 100644
--- a/packages/backend-core/tests/core/utilities/mocks/licenses.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
@@ -86,6 +86,10 @@ export const useAuditLogs = () => {
   return useFeature(Feature.AUDIT_LOGS)
 }
 
+export const usePublicApiUserRoles = () => {
+  return useFeature(Feature.USER_ROLE_PUBLIC_API)
+}
+
 export const useScimIntegration = () => {
   return useFeature(Feature.SCIM)
 }
@@ -98,6 +102,10 @@ export const useAppBuilders = () => {
   return useFeature(Feature.APP_BUILDERS)
 }
 
+export const useViewPermissions = () => {
+  return useFeature(Feature.VIEW_PERMISSIONS)
+}
+
 // QUOTAS
 
 export const setAutomationLogsQuota = (value: number) => {
diff --git a/packages/backend-core/tests/core/utilities/testContainerUtils.ts b/packages/backend-core/tests/core/utilities/testContainerUtils.ts
index f6c702f7ef..7da6cbc777 100644
--- a/packages/backend-core/tests/core/utilities/testContainerUtils.ts
+++ b/packages/backend-core/tests/core/utilities/testContainerUtils.ts
@@ -32,8 +32,8 @@ function getTestContainerSettings(
 ): string | null {
   const entry = Object.entries(global).find(
     ([k]) =>
-      k.includes(`_${serverName.toUpperCase()}`) &&
-      k.includes(`_${key.toUpperCase()}__`)
+      k.includes(`${serverName.toUpperCase()}`) &&
+      k.includes(`${key.toUpperCase()}`)
   )
   if (!entry) {
     return null
@@ -67,27 +67,14 @@ function getContainerInfo(containerName: string, port: number) {
 }
 
 function getCouchConfig() {
-  return getContainerInfo("couchdb-service", 5984)
-}
-
-function getMinioConfig() {
-  return getContainerInfo("minio-service", 9000)
-}
-
-function getRedisConfig() {
-  return getContainerInfo("redis-service", 6379)
+  return getContainerInfo("couchdb", 5984)
 }
 
 export function setupEnv(...envs: any[]) {
-  const couch = getCouchConfig(),
-    minio = getCouchConfig(),
-    redis = getRedisConfig()
+  const couch = getCouchConfig()
   const configs = [
     { key: "COUCH_DB_PORT", value: couch.port },
     { key: "COUCH_DB_URL", value: couch.url },
-    { key: "MINIO_PORT", value: minio.port },
-    { key: "MINIO_URL", value: minio.url },
-    { key: "REDIS_URL", value: redis.url },
   ]
 
   for (const config of configs.filter(x => !!x.value)) {
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 8fa02bb8f3..f2018272f6 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -17,6 +17,8 @@ export default function positionDropdown(element, opts) {
       maxWidth,
       useAnchorWidth,
       offset = 5,
+      customUpdate,
+      offsetBelow,
     } = opts
     if (!anchor) {
       return
@@ -33,33 +35,41 @@ export default function positionDropdown(element, opts) {
       top: null,
     }
 
-    // Determine vertical styles
-    if (align === "right-outside") {
-      styles.top = anchorBounds.top
-    } else if (window.innerHeight - anchorBounds.bottom < 100) {
-      styles.top = anchorBounds.top - elementBounds.height - offset
-      styles.maxHeight = maxHeight || 240
+    if (typeof customUpdate === "function") {
+      styles = customUpdate(anchorBounds, elementBounds, styles)
     } else {
-      styles.top = anchorBounds.bottom + offset
-      styles.maxHeight =
-        maxHeight || window.innerHeight - anchorBounds.bottom - 20
-    }
+      // Determine vertical styles
+      if (align === "right-outside") {
+        styles.top = anchorBounds.top
+      } else if (
+        window.innerHeight - anchorBounds.bottom <
+        (maxHeight || 100)
+      ) {
+        styles.top = anchorBounds.top - elementBounds.height - offset
+        styles.maxHeight = maxHeight || 240
+      } else {
+        styles.top = anchorBounds.bottom + (offsetBelow || offset)
+        styles.maxHeight =
+          maxHeight || window.innerHeight - anchorBounds.bottom - 20
+      }
 
-    // Determine horizontal styles
-    if (!maxWidth && useAnchorWidth) {
-      styles.maxWidth = anchorBounds.width
-    }
-    if (useAnchorWidth) {
-      styles.minWidth = anchorBounds.width
-    }
-    if (align === "right") {
-      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
-    } else if (align === "right-outside") {
-      styles.left = anchorBounds.right + offset
-    } else if (align === "left-outside") {
-      styles.left = anchorBounds.left - elementBounds.width - offset
-    } else {
-      styles.left = anchorBounds.left
+      // Determine horizontal styles
+      if (!maxWidth && useAnchorWidth) {
+        styles.maxWidth = anchorBounds.width
+      }
+      if (useAnchorWidth) {
+        styles.minWidth = anchorBounds.width
+      }
+      if (align === "right") {
+        styles.left =
+          anchorBounds.left + anchorBounds.width - elementBounds.width
+      } else if (align === "right-outside") {
+        styles.left = anchorBounds.right + offset
+      } else if (align === "left-outside") {
+        styles.left = anchorBounds.left - elementBounds.width - offset
+      } else {
+        styles.left = anchorBounds.left
+      }
     }
 
     // Apply styles
diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 9a70134fb6..2ba5309860 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -1,8 +1,8 @@
 <script>
+  import Popover from "../Popover/Popover.svelte"
+  import Layout from "../Layout/Layout.svelte"
   import { createEventDispatcher } from "svelte"
   import "@spectrum-css/popover/dist/index-vars.css"
-  import clickOutside from "../Actions/click_outside"
-  import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import Input from "../Form/Input.svelte"
   import { capitalise } from "../helpers"
@@ -10,9 +10,11 @@
   export let value
   export let size = "M"
   export let spectrumTheme
-  export let alignRight = false
+  export let offset
+  export let align
 
-  let open = false
+  let dropdown
+  let preview
 
   $: customValue = getCustomValue(value)
   $: checkColor = getCheckColor(value)
@@ -82,7 +84,7 @@
 
   const onChange = value => {
     dispatch("change", value)
-    open = false
+    dropdown.hide()
   }
 
   const getCustomValue = value => {
@@ -119,30 +121,25 @@
 
     return "var(--spectrum-global-color-static-gray-900)"
   }
-
-  const handleOutsideClick = event => {
-    if (open) {
-      event.stopPropagation()
-      open = false
-    }
-  }
 </script>
 
-<div class="container">
-  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
-    <div
-      class="fill {spectrumTheme || ''}"
-      style={value ? `background: ${value};` : ""}
-      class:placeholder={!value}
-    />
-  </div>
-  {#if open}
-    <div
-      use:clickOutside={handleOutsideClick}
-      transition:fly|local={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      class:spectrum-Popover--align-right={alignRight}
-    >
+<div
+  bind:this={preview}
+  class="preview size--{size || 'M'}"
+  on:click={() => {
+    dropdown.toggle()
+  }}
+>
+  <div
+    class="fill {spectrumTheme || ''}"
+    style={value ? `background: ${value};` : ""}
+    class:placeholder={!value}
+  />
+</div>
+
+<Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
+  <Layout paddingX="XL" paddingY="L">
+    <div class="container">
       {#each categories as category}
         <div class="category">
           <div class="heading">{category.label}</div>
@@ -187,8 +184,8 @@
         </div>
       </div>
     </div>
-  {/if}
-</div>
+  </Layout>
+</Popover>
 
 <style>
   .container {
@@ -248,20 +245,6 @@
     width: 48px;
     height: 48px;
   }
-  .spectrum-Popover {
-    width: 210px;
-    z-index: 999;
-    top: 100%;
-    padding: var(--spacing-l) var(--spacing-xl);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xl);
-  }
-  .spectrum-Popover--align-right {
-    right: 0;
-  }
   .colors {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@@ -297,7 +280,11 @@
   .category--custom .heading {
     margin-bottom: var(--spacing-xs);
   }
-
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+  }
   .spectrum-wrapper {
     background-color: transparent;
   }
diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index f7e2611792..daa9f3f5ca 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -44,7 +44,9 @@
     align-items: stretch;
     border-bottom: var(--border-light);
   }
-
+  .property-group-container:last-child {
+    border-bottom: 0px;
+  }
   .property-group-name {
     cursor: pointer;
     display: flex;
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 4ff4df854b..421d12615f 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -4,6 +4,8 @@
   import Body from "../Typography/Body.svelte"
   import Heading from "../Typography/Heading.svelte"
   import { setContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
+  import { generate } from "shortid"
 
   export let title
   export let fillWidth
@@ -11,13 +13,17 @@
   export let width = "calc(100% - 626px)"
   export let headless = false
 
+  const dispatch = createEventDispatcher()
+
   let visible = false
+  let drawerId = generate()
 
   export function show() {
     if (visible) {
       return
     }
     visible = true
+    dispatch("drawerShow", drawerId)
   }
 
   export function hide() {
@@ -25,6 +31,7 @@
       return
     }
     visible = false
+    dispatch("drawerHide", drawerId)
   }
 
   setContext("drawer-actions", {
diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
index ee43ecc3ca..e015f51570 100644
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -2,8 +2,9 @@
   import { createEventDispatcher } from "svelte"
   import FancyField from "./FancyField.svelte"
   import Icon from "../Icon/Icon.svelte"
-  import Popover from "../Popover/Popover.svelte"
   import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import StatusLight from "../StatusLight/StatusLight.svelte"
+  import Picker from "../Form/Core/Picker.svelte"
 
   export let label
   export let value
@@ -11,18 +12,30 @@
   export let error = null
   export let validate = null
   export let options = []
+  export let isOptionEnabled = () => true
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
-
+  export let getOptionSubtitle = option => extractProperty(option, "subtitle")
+  export let getOptionColour = () => null
   const dispatch = createEventDispatcher()
 
   let open = false
-  let popover
   let wrapper
 
   $: placeholder = !value
   $: selectedLabel = getSelectedLabel(value)
+  $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
+  const getFieldAttribute = (getAttribute, value, options) => {
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getAttribute(options[index], index) : null
+  }
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
       return value[property]
@@ -64,46 +77,45 @@
     <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
   {/if}
 
+  {#if fieldColour}
+    <span class="align">
+      <StatusLight square color={fieldColour} />
+    </span>
+  {/if}
+
   <div class="value" class:placeholder>
     {selectedLabel || ""}
   </div>
 
-  <div class="arrow">
+  <div class="align arrow-alignment">
     <Icon name="ChevronDown" />
   </div>
 </FancyField>
 
-<Popover
-  anchor={wrapper}
-  align="left"
-  portalTarget={document.documentElement}
-  bind:this={popover}
-  {open}
-  on:close={() => (open = false)}
-  useAnchorWidth={true}
-  maxWidth={null}
->
-  <div class="popover-content">
-    {#if options.length}
-      {#each options as option, idx}
-        <div
-          class="popover-option"
-          tabindex="0"
-          on:click={() => onChange(getOptionValue(option, idx))}
-        >
-          <span class="option-text">
-            {getOptionLabel(option, idx)}
-          </span>
-          {#if value === getOptionValue(option, idx)}
-            <Icon name="Checkmark" />
-          {/if}
-        </div>
-      {/each}
-    {/if}
-  </div>
-</Popover>
+<div id="picker-wrapper">
+  <Picker
+    customAnchor={wrapper}
+    onlyPopover={true}
+    bind:open
+    {error}
+    {disabled}
+    {options}
+    {getOptionLabel}
+    {getOptionValue}
+    {getOptionSubtitle}
+    {getOptionColour}
+    {isOptionEnabled}
+    isPlaceholder={value == null || value === ""}
+    placeholderOption={placeholder === false ? null : placeholder}
+    onSelectOption={onChange}
+    isOptionSelected={option => option === value}
+  />
+</div>
 
 <style>
+  #picker-wrapper :global(.spectrum-Picker) {
+    display: none;
+  }
   .value {
     display: block;
     flex: 1 1 auto;
@@ -118,30 +130,23 @@
     width: 0;
     transform: translateY(9px);
   }
+
+  .align {
+    display: block;
+    font-size: 15px;
+    line-height: 17px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    transform: translateY(9px);
+  }
+
+  .arrow-alignment {
+    transform: translateY(-2px);
+  }
   .value.placeholder {
     transform: translateY(0);
     opacity: 0;
     pointer-events: none;
     margin-top: 0;
   }
-  .popover-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    padding: 7px 0;
-  }
-  .popover-option {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 7px 16px;
-    transition: background 130ms ease-out;
-    font-size: 15px;
-  }
-  .popover-option:hover {
-    background: var(--spectrum-global-color-gray-200);
-    cursor: pointer;
-  }
 </style>
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index b68a24d8db..b1b264a9b7 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -2,8 +2,8 @@
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
+  import clickOutside from "../../Actions/click_outside"
 
   export let value = null
   export let id = null
@@ -80,10 +80,11 @@
     </svg>
   </button>
   {#if open}
-    <div class="overlay" on:mousedown|self={() => (open = false)} />
     <div
-      transition:fly|local={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom is-open"
+      use:clickOutside={() => {
+        open = false
+      }}
     >
       <ul class="spectrum-Menu" role="listbox">
         {#if options && Array.isArray(options)}
@@ -125,14 +126,6 @@
   .spectrum-Textfield-input {
     width: 0;
   }
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-  }
   .spectrum-Popover {
     max-height: 240px;
     width: 100%;
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index ea9b5858f5..8816da33c4 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -17,6 +17,9 @@
   export let fetchTerm = null
   export let useFetch = false
   export let customPopoverHeight
+  export let customPopoverOffsetBelow
+  export let customPopoverMaxHeight
+  export let open = false
 
   const dispatch = createEventDispatcher()
 
@@ -88,6 +91,7 @@
   isPlaceholder={!arrayValue.length}
   {autocomplete}
   bind:fetchTerm
+  bind:open
   {useFetch}
   {isOptionSelected}
   {getOptionLabel}
@@ -96,4 +100,6 @@
   {sort}
   {autoWidth}
   {customPopoverHeight}
+  {customPopoverOffsetBelow}
+  {customPopoverMaxHeight}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index aada17b318..9b90c1a865 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -8,6 +8,8 @@
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
   import Popover from "../../Popover/Popover.svelte"
+  import Tags from "../../Tags/Tags.svelte"
+  import Tag from "../../Tags/Tag.svelte"
 
   export let id = null
   export let disabled = false
@@ -26,6 +28,7 @@
   export let getOptionIcon = () => null
   export let useOptionIconImage = false
   export let getOptionColour = () => null
+  export let getOptionSubtitle = () => null
   export let open = false
   export let readonly = false
   export let quiet = false
@@ -35,9 +38,11 @@
   export let fetchTerm = null
   export let useFetch = false
   export let customPopoverHeight
+  export let customPopoverOffsetBelow
+  export let customPopoverMaxHeight
   export let align = "left"
   export let footer = null
-
+  export let customAnchor = null
   const dispatch = createEventDispatcher()
 
   let searchTerm = null
@@ -139,16 +144,17 @@
     <use xlink:href="#spectrum-css-icon-Chevron100" />
   </svg>
 </button>
-
 <Popover
-  anchor={button}
+  anchor={customAnchor ? customAnchor : button}
   align={align || "left"}
   bind:this={popover}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
   maxWidth={autoWidth ? 400 : null}
+  maxHeight={customPopoverMaxHeight}
   customHeight={customPopoverHeight}
+  offsetBelow={customPopoverOffsetBelow}
 >
   <div
     class="popover-content"
@@ -215,8 +221,21 @@
               </span>
             {/if}
             <span class="spectrum-Menu-itemLabel">
+              {#if getOptionSubtitle(option, idx)}
+                <span class="subtitle-text"
+                  >{getOptionSubtitle(option, idx)}</span
+                >
+              {/if}
+
               {getOptionLabel(option, idx)}
             </span>
+            {#if option.tag}
+              <span class="option-tag">
+                <Tags>
+                  <Tag icon="LockClosed">{option.tag}</Tag>
+                </Tags>
+              </span>
+            {/if}
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -242,6 +261,17 @@
     width: 100%;
     box-shadow: none;
   }
+
+  .subtitle-text {
+    font-size: 12px;
+    line-height: 15px;
+    font-weight: 500;
+    top: 10px;
+    color: var(--spectrum-global-color-gray-600);
+    display: block;
+    margin-bottom: var(--spacing-s);
+  }
+
   .spectrum-Picker-label.auto-width {
     margin-right: var(--spacing-xs);
   }
@@ -321,4 +351,12 @@
   .option-extra.icon.field-icon {
     display: flex;
   }
+
+  .option-tag {
+    margin: 0 var(--spacing-m) 0 var(--spacing-m);
+  }
+
+  .option-tag :global(.spectrum-Tags-item > .spectrum-Icon) {
+    margin-top: 2px;
+  }
 </style>
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 2fad886910..f843e2ccbd 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -21,11 +21,13 @@
   export let sort = false
   export let align
   export let footer = null
+  export let open = false
+  export let tag = null
+  export let customPopoverOffsetBelow
+  export let customPopoverMaxHeight
 
   const dispatch = createEventDispatcher()
 
-  let open = false
-
   $: fieldText = getFieldText(value, options, placeholder)
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
@@ -83,6 +85,9 @@
   {isOptionEnabled}
   {autocomplete}
   {sort}
+  {tag}
+  {customPopoverOffsetBelow}
+  {customPopoverMaxHeight}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder === false ? null : placeholder}
   isOptionSelected={option => option === value}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index e87496652d..a9214320f9 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -25,7 +25,7 @@
   export let customPopoverHeight
   export let align
   export let footer = null
-
+  export let tag = null
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -61,6 +61,7 @@
     {isOptionEnabled}
     {autocomplete}
     {customPopoverHeight}
+    {tag}
     on:change={onChange}
     on:click
   />
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 384cfe6cac..da97bf332e 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -9,6 +9,7 @@
   export let fixed = false
   export let inline = false
   export let disableCancel = false
+  export let autoFocus = true
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
@@ -53,6 +54,9 @@
   }
 
   async function focusModal(node) {
+    if (!autoFocus) {
+      return
+    }
     await tick()
 
     // Try to focus first input
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 6706bf7a8b..4c4b818440 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -19,10 +19,15 @@
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
+  export let offsetBelow
   export let customHeight
   export let animate = true
   export let customZindex
 
+  export let handlePostionUpdate
+  export let showPopover = true
+  export let clickOutsideOverride = false
+
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
   export const show = () => {
@@ -35,7 +40,18 @@
     open = false
   }
 
+  export const toggle = () => {
+    if (!open) {
+      show()
+    } else {
+      hide()
+    }
+  }
+
   const handleOutsideClick = e => {
+    if (clickOutsideOverride) {
+      return
+    }
     if (open) {
       // Stop propagation if the source is the anchor
       let node = e.target
@@ -54,6 +70,9 @@
   }
 
   function handleEscape(e) {
+    if (!clickOutsideOverride) {
+      return
+    }
     if (open && e.key === "Escape") {
       hide()
     }
@@ -71,6 +90,8 @@
         maxWidth,
         useAnchorWidth,
         offset,
+        offsetBelow,
+        customUpdate: handlePostionUpdate,
       }}
       use:clickOutside={{
         callback: dismissible ? handleOutsideClick : () => {},
@@ -79,6 +100,7 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       class:customZindex
+      class:hide-popover={open && !showPopover}
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
@@ -89,6 +111,10 @@
 {/if}
 
 <style>
+  .hide-popover {
+    display: contents;
+  }
+
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 9c3d25a807..c94b396398 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -57,10 +57,8 @@
   function calculateIndicatorLength() {
     if (!vertical) {
       width = $tab.info?.width + "px"
-      height = $tab.info?.height
     } else {
       height = $tab.info?.height + 4 + "px"
-      width = $tab.info?.width
     }
   }
 
diff --git a/packages/bbui/src/Tooltip/TempTooltip.svelte b/packages/bbui/src/Tooltip/TempTooltip.svelte
index 0d590b1ec6..6da01a2bfc 100644
--- a/packages/bbui/src/Tooltip/TempTooltip.svelte
+++ b/packages/bbui/src/Tooltip/TempTooltip.svelte
@@ -4,7 +4,7 @@
 
   export let text = null
   export let condition = true
-  export let duration = 3000
+  export let duration = 5000
   export let position
   export let type
 
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index bbe116721a..efd56e9d4b 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -6,7 +6,7 @@ import {
   findComponentPath,
   getComponentSettings,
 } from "./componentUtils"
-import { store } from "builderStore"
+import { store, currentAsset } from "builderStore"
 import {
   queries as queriesStores,
   tables as tablesStore,
@@ -22,6 +22,7 @@ import { TableNames } from "../constants"
 import { JSONUtils } from "@budibase/frontend-core"
 import ActionDefinitions from "components/design/settings/controls/ButtonActionEditor/manifest.json"
 import { environment, licensing } from "stores/portal"
+import { convertOldFieldFormat } from "components/design/settings/controls/FieldConfiguration/utils"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
@@ -328,7 +329,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
       if (context.type === "form") {
         // Forms do not need table schemas
         // Their schemas are built from their component field names
-        schema = buildFormSchema(component)
+        schema = buildFormSchema(component, asset)
         readablePrefix = "Fields"
       } else if (context.type === "static") {
         // Static contexts are fully defined by the components
@@ -350,12 +351,19 @@ const getProviderContextBindings = (asset, dataProviders) => {
         schema = info.schema
         table = info.table
 
-        // For JSON arrays, use the array name as the readable prefix.
-        // Otherwise use the table name
+        // Determine what to prefix bindings with
         if (datasource.type === "jsonarray") {
+          // For JSON arrays, use the array name as the readable prefix
           const split = datasource.label.split(".")
           readablePrefix = split[split.length - 1]
+        } else if (datasource.type === "viewV2") {
+          // For views, use the view name
+          const view = Object.values(table?.views || {}).find(
+            view => view.id === datasource.id
+          )
+          readablePrefix = view?.name
         } else {
+          // Otherwise use the table name
           readablePrefix = info.table?.name
         }
       }
@@ -370,6 +378,11 @@ const getProviderContextBindings = (asset, dataProviders) => {
       if (runtimeSuffix) {
         providerId += `-${runtimeSuffix}`
       }
+
+      if (!filterCategoryByContext(component, context)) {
+        return
+      }
+
       const safeComponentId = makePropSafe(providerId)
 
       // Create bindable properties for each schema field
@@ -387,6 +400,12 @@ const getProviderContextBindings = (asset, dataProviders) => {
         }
         readableBinding += `.${fieldSchema.name || key}`
 
+        const bindingCategory = getComponentBindingCategory(
+          component,
+          context,
+          def
+        )
+
         // Create the binding object
         bindings.push({
           type: "context",
@@ -399,8 +418,8 @@ const getProviderContextBindings = (asset, dataProviders) => {
           // Table ID is used by JSON fields to know what table the field is in
           tableId: table?._id,
           component: component._component,
-          category: component._instanceName,
-          icon: def.icon,
+          category: bindingCategory.category,
+          icon: bindingCategory.icon,
           display: {
             name: fieldSchema.name || key,
             type: fieldSchema.type,
@@ -413,12 +432,46 @@ const getProviderContextBindings = (asset, dataProviders) => {
   return bindings
 }
 
+// Exclude a data context based on the component settings
+const filterCategoryByContext = (component, context) => {
+  const { _component } = component
+  if (_component.endsWith("formblock")) {
+    if (
+      (component.actionType == "Create" && context.type === "schema") ||
+      (component.actionType == "View" && context.type === "form")
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+const getComponentBindingCategory = (component, context, def) => {
+  let icon = def.icon
+  let category = component._instanceName
+
+  if (component._component.endsWith("formblock")) {
+    let contextCategorySuffix = {
+      form: "Fields",
+      schema: "Row",
+    }
+    category = `${component._instanceName} - ${
+      contextCategorySuffix[context.type]
+    }`
+    icon = context.type === "form" ? "Form" : "Data"
+  }
+  return {
+    icon,
+    category,
+  }
+}
+
 /**
  * Gets all bindable properties from the logged in user.
  */
 export const getUserBindings = () => {
   let bindings = []
-  const { schema } = getSchemaForTable(TableNames.USERS)
+  const { schema } = getSchemaForDatasourcePlus(TableNames.USERS)
   const keys = Object.keys(schema).sort()
   const safeUser = makePropSafe("user")
 
@@ -507,6 +560,7 @@ const getSelectedRowsBindings = asset => {
         )}.${makePropSafe("selectedRows")}`,
         readableBinding: `${block._instanceName}.Selected rows`,
         category: "Selected rows",
+        icon: "ViewRow",
         display: { name: block._instanceName },
       }))
     )
@@ -582,24 +636,36 @@ const getRoleBindings = () => {
 }
 
 /**
- * Gets all bindable properties exposed in an event action flow up until
- * the specified action ID, as well as context provided for the action
- * setting as a whole by the component.
+ * Gets all bindable event context properties provided in the component
+ * setting
  */
-export const getEventContextBindings = (
-  asset,
-  componentId,
+export const getEventContextBindings = ({
   settingKey,
-  actions,
-  actionId
-) => {
+  componentInstance,
+  componentId,
+  componentDefinition,
+  asset,
+}) => {
   let bindings = []
+
+  const selectedAsset = asset ?? get(currentAsset)
+
   // Check if any context bindings are provided by the component for this
   // setting
-  const component = findComponent(asset.props, componentId)
-  const def = store.actions.components.getDefinition(component?._component)
+  const component =
+    componentInstance ?? findComponent(selectedAsset.props, componentId)
+
+  if (!component) {
+    return bindings
+  }
+
+  const definition =
+    componentDefinition ??
+    store.actions.components.getDefinition(component?._component)
+
   const settings = getComponentSettings(component?._component)
   const eventSetting = settings.find(setting => setting.key === settingKey)
+
   if (eventSetting?.context?.length) {
     eventSetting.context.forEach(contextEntry => {
       bindings.push({
@@ -608,14 +674,23 @@ export const getEventContextBindings = (
           contextEntry.key
         )}`,
         category: component._instanceName,
-        icon: def.icon,
+        icon: definition.icon,
         display: {
           name: contextEntry.label,
         },
       })
     })
   }
+  return bindings
+}
 
+/**
+ * Gets all bindable properties exposed in an event action flow up until
+ * the specified action ID, as well as context provided for the action
+ * setting as a whole by the component.
+ */
+export const getActionBindings = (actions, actionId) => {
+  let bindings = []
   // Get the steps leading up to this value
   const index = actions?.findIndex(action => action.id === actionId)
   if (index == null || index === -1) {
@@ -642,22 +717,29 @@ export const getEventContextBindings = (
       })
     }
   })
-
   return bindings
 }
 
 /**
- * Gets the schema for a certain table ID.
+ * Gets the schema for a certain datasource plus.
  * The options which can be passed in are:
  *   formSchema: whether the schema is for a form
  *   searchableSchema: whether to generate a searchable schema, which may have
  *     fewer fields than a readable schema
- * @param tableId the table ID to get the schema for
+ * @param resourceId the DS+ resource ID
  * @param options options for generating the schema
  * @return {{schema: Object, table: Object}}
  */
-export const getSchemaForTable = (tableId, options) => {
-  return getSchemaForDatasource(null, { type: "table", tableId }, options)
+export const getSchemaForDatasourcePlus = (resourceId, options) => {
+  const isViewV2 = resourceId?.includes("view_")
+  const datasource = isViewV2
+    ? {
+        type: "viewV2",
+        id: resourceId,
+        tableId: resourceId.split("_").slice(1, 3).join("_"),
+      }
+    : { type: "table", tableId: resourceId }
+  return getSchemaForDatasource(null, datasource, options)
 }
 
 /**
@@ -734,9 +816,21 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
     // Determine the schema from the backing entity if not already determined
     if (table && !schema) {
       if (type === "view") {
-        // For views, the schema is pulled from the `views` property of the
-        // table
+        // Old views
         schema = cloneDeep(table.views?.[datasource.name]?.schema)
+      } else if (type === "viewV2") {
+        // New views which are DS+
+        const view = Object.values(table.views || {}).find(
+          view => view.id === datasource.id
+        )
+        schema = cloneDeep(view?.schema)
+
+        // Strip hidden fields
+        Object.keys(schema || {}).forEach(field => {
+          if (!schema[field].visible) {
+            delete schema[field]
+          }
+        })
       } else if (
         type === "query" &&
         (options.formSchema || options.searchableSchema)
@@ -782,12 +876,12 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
 
     // Determine if we should add ID and rev to the schema
     const isInternal = table && !table.sql
-    const isTable = ["table", "link"].includes(datasource.type)
+    const isDSPlus = ["table", "link", "viewV2"].includes(datasource.type)
 
     // ID is part of the readable schema for all tables
     // Rev is part of the readable schema for internal tables only
-    let addId = isTable
-    let addRev = isTable && isInternal
+    let addId = isDSPlus
+    let addRev = isDSPlus && isInternal
 
     // Don't add ID or rev for form schemas
     if (options.formSchema) {
@@ -797,7 +891,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
 
     // ID is only searchable for internal tables
     else if (options.searchableSchema) {
-      addId = isTable && isInternal
+      addId = isDSPlus && isInternal
     }
 
     // Add schema properties if required
@@ -835,18 +929,38 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
  * Builds a form schema given a form component.
  * A form schema is a schema of all the fields nested anywhere within a form.
  */
-export const buildFormSchema = component => {
+export const buildFormSchema = (component, asset) => {
   let schema = {}
   if (!component) {
     return schema
   }
 
-  // If this is a form block, simply use the fields setting
   if (component._component.endsWith("formblock")) {
     let schema = {}
-    component.fields?.forEach(field => {
-      schema[field] = { type: "string" }
-    })
+
+    const datasource = getDatasourceForProvider(asset, component)
+    const info = getSchemaForDatasource(component, datasource)
+
+    if (!component.fields) {
+      Object.values(info?.schema)
+        .filter(
+          ({ autocolumn, name }) =>
+            !autocolumn && !["_rev", "_id"].includes(name)
+        )
+        .forEach(({ name }) => {
+          schema[name] = { type: info?.schema[name].type }
+        })
+    } else {
+      // Field conversion
+      const patched = convertOldFieldFormat(component.fields || [])
+      patched?.forEach(({ field, active }) => {
+        if (!active) return
+        if (info?.schema[field]) {
+          schema[field] = { type: info?.schema[field].type }
+        }
+      })
+    }
+
     return schema
   }
 
@@ -862,7 +976,7 @@ export const buildFormSchema = component => {
     }
   }
   component._children?.forEach(child => {
-    const childSchema = buildFormSchema(child)
+    const childSchema = buildFormSchema(child, asset)
     schema = { ...schema, ...childSchema }
   })
   return schema
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 2ca8057b48..eecccab7a6 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -4,7 +4,7 @@ import { getTemporalStore } from "./store/temporal"
 import { getThemeStore } from "./store/theme"
 import { getUserStore } from "./store/users"
 import { getDeploymentStore } from "./store/deployments"
-import { derived } from "svelte/store"
+import { derived, writable } from "svelte/store"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 import { createHistoryStore } from "builderStore/store/history"
@@ -61,6 +61,12 @@ export const selectedLayout = derived(store, $store => {
 export const selectedComponent = derived(
   [store, selectedScreen],
   ([$store, $selectedScreen]) => {
+    if (
+      $selectedScreen &&
+      $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
+    ) {
+      return $selectedScreen?.props
+    }
     if (!$selectedScreen || !$store.selectedComponentId) {
       return null
     }
@@ -141,3 +147,5 @@ export const userSelectedResourceMap = derived(userStore, $userStore => {
 export const isOnlyUser = derived(userStore, $userStore => {
   return $userStore.length < 2
 })
+
+export const screensHeight = writable("210px")
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index f312a58e97..13b28a3572 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -111,6 +111,7 @@ export const getFrontendStore = () => {
     }
     let clone = cloneDeep(screen)
     const result = patchFn(clone)
+
     if (result === false) {
       return
     }
@@ -225,7 +226,6 @@ export const getFrontendStore = () => {
         // Select new screen
         store.update(state => {
           state.selectedScreenId = screen._id
-          state.selectedComponentId = screen.props?._id
           return state
         })
       },
@@ -627,6 +627,7 @@ export const getFrontendStore = () => {
               component[setting.key] = {
                 label: defaultDS.name,
                 tableId: defaultDS._id,
+                resourceId: defaultDS._id,
                 type: "table",
               }
             } else if (setting.type === "dataProvider") {
@@ -769,9 +770,13 @@ export const getFrontendStore = () => {
         else {
           await store.actions.screens.patch(screen => {
             // Find the selected component
+            let selectedComponentId = state.selectedComponentId
+            if (selectedComponentId.startsWith(`${screen._id}-`)) {
+              selectedComponentId = screen?.props._id
+            }
             const currentComponent = findComponent(
               screen.props,
-              state.selectedComponentId
+              selectedComponentId
             )
             if (!currentComponent) {
               return false
@@ -834,6 +839,7 @@ export const getFrontendStore = () => {
           return
         }
         const patchScreen = screen => {
+          // findComponent looks in the tree not comp.settings[0]
           let component = findComponent(screen.props, componentId)
           if (!component) {
             return false
@@ -994,12 +1000,20 @@ export const getFrontendStore = () => {
         const componentId = state.selectedComponentId
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
-
-        // Check we aren't right at the top of the tree
         const index = parent?._children.findIndex(x => x._id === componentId)
-        if (!parent || componentId === screen.props._id) {
+
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        if (componentId === screenComponentId) {
           return null
         }
+        if (componentId === navComponentId) {
+          return screenComponentId
+        }
+        if (parent._id === screen.props._id && index === 0) {
+          return navComponentId
+        }
 
         // If we have siblings above us, choose the sibling or a descendant
         if (index > 0) {
@@ -1021,12 +1035,20 @@ export const getFrontendStore = () => {
         return parent._id
       },
       getNext: () => {
+        const state = get(store)
         const component = get(selectedComponent)
         const componentId = component?._id
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        if (state.selectedComponentId === screenComponentId) {
+          return navComponentId
+        }
+
         // If we have children, select first child
         if (component._children?.length) {
           return component._children[0]._id
@@ -1207,7 +1229,12 @@ export const getFrontendStore = () => {
         })
       },
       updateSetting: async (name, value) => {
-        await store.actions.components.patch(component => {
+        await store.actions.components.patch(
+          store.actions.components.updateComponentSetting(name, value)
+        )
+      },
+      updateComponentSetting: (name, value) => {
+        return component => {
           if (!name || !component) {
             return false
           }
@@ -1219,6 +1246,13 @@ export const getFrontendStore = () => {
           const settings = getComponentSettings(component._component)
           const updatedSetting = settings.find(setting => setting.key === name)
 
+          const resetFields = settings.filter(
+            setting => name === setting.resetOn
+          )
+          resetFields?.forEach(setting => {
+            component[setting.key] = null
+          })
+
           if (
             updatedSetting?.type === "dataSource" ||
             updatedSetting?.type === "table"
@@ -1235,9 +1269,8 @@ export const getFrontendStore = () => {
               component[key] = columnNames
             })
           }
-
           component[name] = value
-        })
+        }
       },
       requestEjectBlock: componentId => {
         store.actions.preview.sendEvent("eject-block", componentId)
diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js
index 1bf0af6eeb..3ff42fdec6 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/index.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/index.js
@@ -1,10 +1,10 @@
 import rowListScreen from "./rowListScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
 
-const allTemplates = tables => [...rowListScreen(tables)]
+const allTemplates = datasources => [...rowListScreen(datasources)]
 
 // Allows us to apply common behaviour to all create() functions
-const createTemplateOverride = (frontendState, template) => () => {
+const createTemplateOverride = template => () => {
   const screen = template.create()
   screen.name = screen.props._id
   screen.routing.route = screen.routing.route.toLowerCase()
@@ -12,14 +12,13 @@ const createTemplateOverride = (frontendState, template) => () => {
   return screen
 }
 
-export default (frontendState, tables) => {
+export default datasources => {
   const enrichTemplate = template => ({
     ...template,
-    create: createTemplateOverride(frontendState, template),
+    create: createTemplateOverride(template),
   })
-
   const fromScratch = enrichTemplate(createFromScratchScreen)
-  const tableTemplates = allTemplates(tables).map(enrichTemplate)
+  const tableTemplates = allTemplates(datasources).map(enrichTemplate)
   return [
     fromScratch,
     ...tableTemplates.sort((templateA, templateB) => {
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index 06d9e5aa3e..bbefe65fc8 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -2,31 +2,29 @@ import sanitizeUrl from "./utils/sanitizeUrl"
 import { Screen } from "./utils/Screen"
 import { Component } from "./utils/Component"
 
-export default function (tables) {
-  return tables.map(table => {
+export default function (datasources) {
+  if (!Array.isArray(datasources)) {
+    return []
+  }
+  return datasources.map(datasource => {
     return {
-      name: `${table.name} - List`,
-      create: () => createScreen(table),
+      name: `${datasource.label} - List`,
+      create: () => createScreen(datasource),
       id: ROW_LIST_TEMPLATE,
-      table: table._id,
+      resourceId: datasource.resourceId,
     }
   })
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
-export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
+export const rowListUrl = datasource => sanitizeUrl(`/${datasource.label}`)
 
-const generateTableBlock = table => {
+const generateTableBlock = datasource => {
   const tableBlock = new Component("@budibase/standard-components/tableblock")
   tableBlock
     .customProps({
-      title: table.name,
-      dataSource: {
-        label: table.name,
-        name: table._id,
-        tableId: table._id,
-        type: "table",
-      },
+      title: datasource.label,
+      dataSource: datasource,
       sortOrder: "Ascending",
       size: "spectrum--medium",
       paginate: true,
@@ -36,14 +34,14 @@ const generateTableBlock = table => {
       titleButtonText: "Create row",
       titleButtonClickBehaviour: "new",
     })
-    .instanceName(`${table.name} - Table block`)
+    .instanceName(`${datasource.label} - Table block`)
   return tableBlock
 }
 
-const createScreen = table => {
+const createScreen = datasource => {
   return new Screen()
-    .route(rowListUrl(table))
-    .instanceName(`${table.name} - List`)
-    .addChild(generateTableBlock(table))
+    .route(rowListUrl(datasource))
+    .instanceName(`${datasource.label} - List`)
+    .addChild(generateTableBlock(datasource))
     .json()
 }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 7a02433411..85c3776fdb 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -73,7 +73,7 @@
     if (!perms["execute"]) {
       role = "BASIC"
     } else {
-      role = perms["execute"]
+      role = perms["execute"].role
     }
   }
 
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 6b57fe3d18..02340ab2b7 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -39,7 +39,7 @@
   import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
   import { LuceneUtils } from "@budibase/frontend-core"
   import {
-    getSchemaForTable,
+    getSchemaForDatasourcePlus,
     getEnvironmentBindings,
   } from "builderStore/dataBinding"
   import { Utils } from "@budibase/frontend-core"
@@ -67,7 +67,9 @@
   $: table = tableId
     ? $tables.list.find(table => table._id === inputData.tableId)
     : { schema: {} }
-  $: schema = getSchemaForTable(tableId, { searchableSchema: true }).schema
+  $: schema = getSchemaForDatasourcePlus(tableId, {
+    searchableSchema: true,
+  }).schema
   $: schemaFields = Object.values(schema || {})
   $: queryLimit = tableId?.includes("datasource") ? "∞" : "1000"
   $: isTrigger = block?.type === "TRIGGER"
@@ -158,7 +160,7 @@
     // instead fetch the schema in the backend at runtime.
     let schema
     if (e.detail?.tableId) {
-      schema = getSchemaForTable(e.detail.tableId, {
+      schema = getSchemaForDatasourcePlus(e.detail.tableId, {
         searchableSchema: true,
       }).schema
     }
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
similarity index 90%
rename from packages/builder/src/components/backend/DataTable/DataTable.svelte
rename to packages/builder/src/components/backend/DataTable/TableDataTable.svelte
index 38eb87aa73..e0c653e9d7 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
@@ -26,12 +26,14 @@
   $: id = $tables.selected?._id
   $: isUsersTable = id === TableNames.USERS
   $: isInternal = $tables.selected?.type !== "external"
-
-  $: datasource = $datasources.list.find(datasource => {
+  $: gridDatasource = {
+    type: "table",
+    tableId: id,
+  }
+  $: tableDatasource = $datasources.list.find(datasource => {
     return datasource._id === $tables.selected?.sourceId
   })
-
-  $: relationshipsEnabled = relationshipSupport(datasource)
+  $: relationshipsEnabled = relationshipSupport(tableDatasource)
 
   const relationshipSupport = datasource => {
     const integration = $integrations[datasource?.source]
@@ -54,12 +56,12 @@
 <div class="wrapper">
   <Grid
     {API}
-    tableId={id}
-    allowAddRows={!isUsersTable}
-    allowDeleteRows={!isUsersTable}
+    datasource={gridDatasource}
+    canAddRows={!isUsersTable}
+    canDeleteRows={!isUsersTable}
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
-    on:updatetable={handleGridTableUpdate}
+    on:updatedatasource={handleGridTableUpdate}
   >
     <svelte:fragment slot="filter">
       <GridFilterButton />
@@ -72,9 +74,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="controls">
-      {#if isInternal}
-        <GridCreateViewButton />
-      {/if}
+      <GridCreateViewButton />
       <GridManageAccessButton />
       {#if relationshipsEnabled}
         <GridRelationshipButton />
diff --git a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
new file mode 100644
index 0000000000..0c6a0cca9a
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { viewsV2 } from "stores/backend"
+  import { Grid } from "@budibase/frontend-core"
+  import { API } from "api"
+  import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
+  import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
+  import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
+
+  $: id = $viewsV2.selected?.id
+  $: datasource = {
+    type: "viewV2",
+    id,
+    tableId: $viewsV2.selected?.tableId,
+  }
+
+  const handleGridViewUpdate = async e => {
+    viewsV2.replaceView(id, e.detail)
+  }
+</script>
+
+<div class="wrapper">
+  <Grid
+    {API}
+    {datasource}
+    allowAddRows
+    allowDeleteRows
+    showAvatars={false}
+    on:updatedatasource={handleGridViewUpdate}
+  >
+    <svelte:fragment slot="filter">
+      <GridFilterButton />
+    </svelte:fragment>
+    <svelte:fragment slot="controls">
+      <GridCreateEditRowModal />
+      <GridManageAccessButton />
+    </svelte:fragment>
+  </Grid>
+</div>
+
+<style>
+  .wrapper {
+    flex: 1 1 auto;
+    margin: -28px -40px -40px -40px;
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    overflow: hidden;
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index bc8e0c5318..5c0b7df742 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -9,19 +9,15 @@
   let modal
   let resourcePermissions
 
-  async function openDropdown() {
-    resourcePermissions = await permissions.forResource(resourceId)
+  async function openModal() {
+    resourcePermissions = await permissions.forResourceDetailed(resourceId)
     modal.show()
   }
 </script>
 
-<ActionButton icon="LockClosed" quiet on:click={openDropdown} {disabled}>
+<ActionButton icon="LockClosed" quiet on:click={openModal} {disabled}>
   Access
 </ActionButton>
 <Modal bind:this={modal}>
-  <ManageAccessModal
-    {resourceId}
-    levels={$permissions}
-    permissions={resourcePermissions}
-  />
+  <ManageAccessModal {resourceId} permissions={resourcePermissions} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index b96738ab1a..23f6d1dea1 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -15,6 +15,7 @@
   $: tempValue = filters || []
   $: schemaFields = Object.values(schema || {})
   $: text = getText(filters)
+  $: selected = tempValue.filter(x => !x.onEmptyFilter)?.length > 0
 
   const getText = filters => {
     const count = filters?.filter(filter => filter.field)?.length
@@ -22,13 +23,7 @@
   }
 </script>
 
-<ActionButton
-  icon="Filter"
-  quiet
-  {disabled}
-  on:click={modal.show}
-  selected={tempValue?.length > 0}
->
+<ActionButton icon="Filter" quiet {disabled} on:click={modal.show} {selected}>
   {text}
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
index 33c416d7ef..3441d8de17 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
@@ -1,18 +1,30 @@
 <script>
   import { getContext } from "svelte"
-  import { Modal, ActionButton } from "@budibase/bbui"
-  import CreateViewModal from "../../modals/CreateViewModal.svelte"
+  import { Modal, ActionButton, TooltipType, TempTooltip } from "@budibase/bbui"
+  import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
 
-  const { rows, columns } = getContext("grid")
+  const { rows, columns, filter } = getContext("grid")
 
   let modal
+  let firstFilterUsage = false
 
   $: disabled = !$columns.length || !$rows.length
+  $: {
+    if ($filter?.length && !firstFilterUsage) {
+      firstFilterUsage = true
+    }
+  }
 </script>
 
-<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
-  Add view
-</ActionButton>
+<TempTooltip
+  text="Create a view to save your filters"
+  type={TooltipType.Info}
+  condition={firstFilterUsage}
+>
+  <ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
+    Create view
+  </ActionButton>
+</TempTooltip>
 <Modal bind:this={modal}>
-  <CreateViewModal />
+  <GridCreateViewModal />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
index b5fe202d11..f1bbc04328 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
@@ -2,7 +2,7 @@
   import ExportButton from "../ExportButton.svelte"
   import { getContext } from "svelte"
 
-  const { rows, columns, tableId, sort, selectedRows, filter } =
+  const { rows, columns, datasource, sort, selectedRows, filter } =
     getContext("grid")
 
   $: disabled = !$rows.length || !$columns.length
@@ -12,7 +12,7 @@
 <span data-ignore-click-outside="true">
   <ExportButton
     {disabled}
-    view={$tableId}
+    view={$datasource.tableId}
     filters={$filter}
     sorting={{
       sortColumn: $sort.column,
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
index 45e5d4e2b0..f927f84876 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
@@ -2,22 +2,19 @@
   import TableFilterButton from "../TableFilterButton.svelte"
   import { getContext } from "svelte"
 
-  const { columns, tableId, filter, table } = getContext("grid")
-
-  // Wipe filter whenever table ID changes to avoid using stale filters
-  $: $tableId, filter.set([])
+  const { columns, datasource, filter, definition } = getContext("grid")
 
   const onFilter = e => {
     filter.set(e.detail || [])
   }
 </script>
 
-{#key $tableId}
+{#key $datasource}
   <TableFilterButton
-    schema={$table?.schema}
+    schema={$definition?.schema}
     filters={$filter}
     on:change={onFilter}
     disabled={!$columns.length}
-    tableId={$tableId}
+    tableId={$datasource.tableId}
   />
 {/key}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
index a0881163b4..71d971891c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
@@ -4,12 +4,12 @@
 
   export let disabled = false
 
-  const { rows, tableId, table } = getContext("grid")
+  const { rows, datasource, definition } = getContext("grid")
 </script>
 
 <ImportButton
   {disabled}
-  tableId={$tableId}
-  tableType={$table?.type}
+  tableId={$datasource?.tableId}
+  tableType={$definition?.type}
   on:importrows={rows.actions.refreshData}
 />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
index 154007950a..0cd008bab1 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
@@ -2,7 +2,16 @@
   import ManageAccessButton from "../ManageAccessButton.svelte"
   import { getContext } from "svelte"
 
-  const { tableId } = getContext("grid")
+  const { datasource } = getContext("grid")
+
+  $: resourceId = getResourceID($datasource)
+
+  const getResourceID = datasource => {
+    if (!datasource) {
+      return null
+    }
+    return datasource.type === "table" ? datasource.tableId : datasource.id
+  }
 </script>
 
-<ManageAccessButton resourceId={$tableId} />
+<ManageAccessButton {resourceId} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
index 460391366f..baa7dbed14 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
@@ -2,12 +2,12 @@
   import ExistingRelationshipButton from "../ExistingRelationshipButton.svelte"
   import { getContext } from "svelte"
 
-  const { table, rows } = getContext("grid")
+  const { definition, rows } = getContext("grid")
 </script>
 
-{#if $table}
+{#if $definition}
   <ExistingRelationshipButton
-    table={$table}
+    table={$definition}
     on:updatecolumns={() => rows.actions.refreshData()}
   />
 {/if}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 7c3e13f39a..fdfbff7b14 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -6,13 +6,15 @@
     Select,
     Toggle,
     RadioGroup,
+    Icon,
     DatePicker,
     Modal,
     notifications,
     OptionSelectDnD,
     Layout,
+    AbsTooltip,
   } from "@budibase/bbui"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher, getContext, onMount } from "svelte"
   import { cloneDeep } from "lodash/fp"
   import { tables, datasources } from "stores/backend"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
@@ -47,6 +49,7 @@
 
   export let field
 
+  let mounted = false
   let fieldDefinitions = cloneDeep(FIELDS)
   let originalName
   let linkEditDisabled
@@ -413,16 +416,22 @@
     }
     return newError
   }
+
+  onMount(() => {
+    mounted = true
+  })
 </script>
 
 <Layout noPadding gap="S">
-  <Input
-    bind:value={editableColumn.name}
-    disabled={uneditable ||
-      (linkEditDisabled && editableColumn.type === LINK_TYPE)}
-    error={errors?.name}
-  />
-
+  {#if mounted}
+    <Input
+      autofocus
+      bind:value={editableColumn.name}
+      disabled={uneditable ||
+        (linkEditDisabled && editableColumn.type === LINK_TYPE)}
+      error={errors?.name}
+    />
+  {/if}
   <Select
     disabled={!typeEnabled}
     bind:value={editableColumn.type}
@@ -452,12 +461,17 @@
     />
   {:else if editableColumn.type === "longform"}
     <div>
-      <Label
-        size="M"
-        tooltip="Rich text includes support for images, links, tables, lists and more"
-      >
-        Formatting
-      </Label>
+      <div class="tooltip-alignment">
+        <Label size="M">Formatting</Label>
+        <AbsTooltip
+          position="top"
+          type="info"
+          text={"Rich text includes support for images, link"}
+        >
+          <Icon size="XS" name="InfoOutline" />
+        </AbsTooltip>
+      </div>
+
       <Toggle
         bind:value={editableColumn.useRichText}
         text="Enable rich text support (markdown)"
@@ -488,13 +502,18 @@
     </div>
     {#if datasource?.source !== "ORACLE" && datasource?.source !== "SQL_SERVER"}
       <div>
-        <Label
-          tooltip={isCreating
-            ? null
-            : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
-        >
-          Time zones
-        </Label>
+        <div>
+          <Label>Time zones</Label>
+          <AbsTooltip
+            position="top"
+            type="info"
+            text={isCreating
+              ? null
+              : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
+          >
+            <Icon size="XS" name="InfoOutline" />
+          </AbsTooltip>
+        </div>
         <Toggle
           bind:value={editableColumn.ignoreTimezones}
           text="Ignore time zones"
@@ -671,6 +690,12 @@
     align-items: center;
   }
 
+  .tooltip-alignment {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
   .label-length {
     flex-basis: 40%;
   }
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
deleted file mode 100644
index 8f2679f874..0000000000
--- a/packages/builder/src/components/backend/DataTable/modals/CreateViewModal.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import { Input, notifications, ModalContent } from "@budibase/bbui"
-  import { goto } from "@roxi/routify"
-  import { views as viewsStore } from "stores/backend"
-  import { tables } from "stores/backend"
-
-  let name
-  let field
-
-  $: views = $tables.list.flatMap(table => Object.keys(table.views || {}))
-
-  const saveView = async () => {
-    name = name?.trim()
-    if (views.includes(name)) {
-      notifications.error(`View exists with name ${name}`)
-      return
-    }
-    try {
-      await viewsStore.save({
-        name,
-        tableId: $tables.selected._id,
-        field,
-      })
-      notifications.success(`View ${name} created`)
-      $goto(`../../view/${encodeURIComponent(name)}`)
-    } catch (error) {
-      notifications.error("Error creating view")
-    }
-  }
-</script>
-
-<ModalContent
-  title="Create View"
-  confirmText="Create View"
-  onConfirm={saveView}
->
-  <Input label="View Name" thin bind:value={name} />
-</ModalContent>
diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
index aa6dbc93e0..161757c570 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { PermissionSource } from "@budibase/types"
   import { roles, permissions as permissionsStore } from "stores/backend"
   import {
     Label,
@@ -7,45 +8,130 @@
     notifications,
     Body,
     ModalContent,
+    Tags,
+    Tag,
+    Icon,
   } from "@budibase/bbui"
   import { capitalise } from "helpers"
+  import { get } from "svelte/store"
 
   export let resourceId
   export let permissions
 
+  const inheritedRoleId = "inherited"
+
   async function changePermission(level, role) {
     try {
-      await permissionsStore.save({
-        level,
-        role,
-        resource: resourceId,
-      })
+      if (role === inheritedRoleId) {
+        await permissionsStore.remove({
+          level,
+          role,
+          resource: resourceId,
+        })
+      } else {
+        await permissionsStore.save({
+          level,
+          role,
+          resource: resourceId,
+        })
+      }
 
       // Show updated permissions in UI: REMOVE
-      permissions = await permissionsStore.forResource(resourceId)
+      permissions = await permissionsStore.forResourceDetailed(resourceId)
       notifications.success("Updated permissions")
     } catch (error) {
       notifications.error("Error updating permissions")
     }
   }
+
+  $: computedPermissions = Object.entries(permissions.permissions).reduce(
+    (p, [level, roleInfo]) => {
+      p[level] = {
+        selectedValue:
+          roleInfo.permissionType === PermissionSource.INHERITED
+            ? inheritedRoleId
+            : roleInfo.role,
+        options: [...get(roles)],
+      }
+
+      if (roleInfo.inheritablePermission) {
+        p[level].inheritOption = roleInfo.inheritablePermission
+        p[level].options.unshift({
+          _id: inheritedRoleId,
+          name: `Inherit (${
+            get(roles).find(x => x._id === roleInfo.inheritablePermission).name
+          })`,
+        })
+      }
+      return p
+    },
+    {}
+  )
+
+  $: requiresPlanToModify = permissions.requiresPlanToModify
+
+  let dependantsInfoMessage
+  async function loadDependantInfo() {
+    const dependantsInfo = await permissionsStore.getDependantsInfo(resourceId)
+
+    const resourceByType = dependantsInfo?.resourceByType
+
+    if (resourceByType) {
+      const total = Object.values(resourceByType).reduce((p, c) => p + c, 0)
+      let resourceDisplay =
+        Object.keys(resourceByType).length === 1 && resourceByType.view
+          ? "view"
+          : "resource"
+
+      if (total === 1) {
+        dependantsInfoMessage = `1 ${resourceDisplay} is inheriting this access.`
+      } else if (total > 1) {
+        dependantsInfoMessage = `${total} ${resourceDisplay}s are inheriting this access.`
+      }
+    }
+  }
+  loadDependantInfo()
 </script>
 
-<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
+<ModalContent showCancelButton={false} confirmText="Done">
+  <span slot="header">
+    Manage Access
+    {#if requiresPlanToModify}
+      <span class="lock-tag">
+        <Tags>
+          <Tag icon="LockClosed">{capitalise(requiresPlanToModify)}</Tag>
+        </Tags>
+      </span>
+    {/if}
+  </span>
   <Body size="S">Specify the minimum access level role for this data.</Body>
   <div class="row">
     <Label extraSmall grey>Level</Label>
     <Label extraSmall grey>Role</Label>
-    {#each Object.keys(permissions) as level}
+    {#each Object.keys(computedPermissions) as level}
       <Input value={capitalise(level)} disabled />
       <Select
-        value={permissions[level]}
+        disabled={requiresPlanToModify}
+        placeholder={false}
+        value={computedPermissions[level].selectedValue}
         on:change={e => changePermission(level, e.detail)}
-        options={$roles}
+        options={computedPermissions[level].options}
         getOptionLabel={x => x.name}
         getOptionValue={x => x._id}
       />
     {/each}
   </div>
+
+  {#if dependantsInfoMessage}
+    <div class="inheriting-resources">
+      <Icon name="Alert" />
+      <Body size="S">
+        <i>
+          {dependantsInfoMessage}
+        </i>
+      </Body>
+    </div>
+  {/if}
 </ModalContent>
 
 <style>
@@ -54,4 +140,13 @@
     grid-template-columns: 1fr 1fr;
     grid-gap: var(--spacing-s);
   }
+
+  .lock-tag {
+    padding-left: var(--spacing-s);
+  }
+
+  .inheriting-resources {
+    display: flex;
+    gap: var(--spacing-s);
+  }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
index 12834e6c7f..2040f66706 100644
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
 
-  const { rows } = getContext("grid")
+  const { datasource } = getContext("grid")
 </script>
 
-<CreateEditColumn on:updatecolumns={rows.actions.refreshTableDefinition} />
+<CreateEditColumn on:updatecolumns={datasource.actions.refreshDefinition} />
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte
new file mode 100644
index 0000000000..2f96a3d82a
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { getContext } from "svelte"
+  import { Input, notifications, ModalContent } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { viewsV2 } from "stores/backend"
+
+  const { filter, sort, definition } = getContext("grid")
+
+  let name
+
+  $: views = Object.keys($definition?.views || {}).map(x => x.toLowerCase())
+  $: nameExists = views.includes(name?.trim().toLowerCase())
+
+  const enrichSchema = schema => {
+    // We need to sure that "visible" is set to true for any fields which have
+    // not yet been saved with grid metadata attached
+    const cloned = { ...schema }
+    Object.entries(cloned).forEach(([field, fieldSchema]) => {
+      if (fieldSchema.visible == null) {
+        cloned[field] = { ...cloned[field], visible: true }
+      }
+    })
+    return cloned
+  }
+
+  const saveView = async () => {
+    name = name?.trim()
+    try {
+      const newView = await viewsV2.create({
+        name,
+        tableId: $definition._id,
+        query: $filter,
+        sort: {
+          field: $sort.column,
+          order: $sort.order,
+        },
+        schema: enrichSchema($definition.schema),
+        primaryDisplay: $definition.primaryDisplay,
+      })
+      notifications.success(`View ${name} created`)
+      $goto(`../../view/v2/${newView.id}`)
+    } catch (error) {
+      notifications.error("Error creating view")
+    }
+  }
+</script>
+
+<ModalContent
+  title="Create view"
+  confirmText="Create view"
+  onConfirm={saveView}
+  disabled={nameExists}
+>
+  <Input
+    label="View name"
+    thin
+    bind:value={name}
+    error={nameExists ? "A view already exists with that name" : null}
+  />
+</ModalContent>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index f7b6f61a10..1c264a5aaf 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -1,7 +1,14 @@
 <script>
   import { goto, isActive, params } from "@roxi/routify"
   import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
-  import { database, datasources, queries, tables, views } from "stores/backend"
+  import {
+    database,
+    datasources,
+    queries,
+    tables,
+    views,
+    viewsV2,
+  } from "stores/backend"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -24,6 +31,7 @@
     $tables,
     $queries,
     $views,
+    $viewsV2,
     openDataSources
   )
   $: openDataSource = enrichedDataSources.find(x => x.open)
@@ -41,6 +49,7 @@
     tables,
     queries,
     views,
+    viewsV2,
     openDataSources
   ) => {
     if (!datasources?.list?.length) {
@@ -57,7 +66,8 @@
         isActive,
         tables,
         queries,
-        views
+        views,
+        viewsV2
       )
       const onlySource = datasources.list.length === 1
       return {
@@ -106,7 +116,8 @@
     isActive,
     tables,
     queries,
-    views
+    views,
+    viewsV2
   ) => {
     // Check for being on a datasource page
     if (params.datasourceId === datasource._id) {
@@ -152,10 +163,16 @@
 
     // Check for a matching view
     const selectedView = views.selected?.name
-    const table = options.find(table => {
+    const viewTable = options.find(table => {
       return table.views?.[selectedView] != null
     })
-    return table != null
+    if (viewTable) {
+      return true
+    }
+
+    // Check for a matching viewV2
+    const viewV2Table = options.find(x => x._id === viewsV2.selected?.tableId)
+    return viewV2Table != null
   }
 </script>
 
diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
index 36c6a32801..9c98bdc2e5 100644
--- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
+++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
@@ -290,11 +290,11 @@
     datasource.entities[getTable(toId).name].schema[toRelationship.name] =
       toRelationship
 
-    await save()
+    await save({ action: "saved" })
   }
   async function deleteRelationship() {
     removeExistingRelationship()
-    await save()
+    await save({ action: "deleted" })
     await tables.fetch()
     close()
   }
diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte
index 03683bcfc9..0dfb4ca796 100644
--- a/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte
+++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte
@@ -33,7 +33,7 @@
   }
 
   // action is one of 'created', 'updated' or 'deleted'
-  async function saveRelationship(action) {
+  async function saveRelationship({ action }) {
     try {
       await beforeSave({ action, datasource })
 
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index d9def682dc..056a36c4a7 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { tables, views, database } from "stores/backend"
+  import { tables, views, viewsV2, database } from "stores/backend"
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
@@ -7,9 +7,6 @@
   import { goto, isActive } from "@roxi/routify"
   import { userSelectedResourceMap } from "builderStore"
 
-  const alphabetical = (a, b) =>
-    a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
-
   export let sourceId
   export let selectTable
 
@@ -18,6 +15,17 @@
       table => table.sourceId === sourceId && table._id !== TableNames.USERS
     )
     .sort(alphabetical)
+
+  const alphabetical = (a, b) => {
+    return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
+  }
+
+  const isViewActive = (view, isActive, views, viewsV2) => {
+    return (
+      (isActive("./view/v1") && views.selected?.name === view.name) ||
+      (isActive("./view/v2") && viewsV2.selected?.id === view.id)
+    )
+  }
 </script>
 
 {#if $database?._id}
@@ -37,18 +45,23 @@
           <EditTablePopover {table} />
         {/if}
       </NavItem>
-      {#each [...Object.keys(table.views || {})].sort() as viewName, idx (idx)}
+      {#each [...Object.entries(table.views || {})].sort() as [name, view], idx (idx)}
         <NavItem
           indentLevel={2}
           icon="Remove"
-          text={viewName}
-          selected={$isActive("./view") && $views.selected?.name === viewName}
-          on:click={() => $goto(`./view/${encodeURIComponent(viewName)}`)}
-          selectedBy={$userSelectedResourceMap[viewName]}
+          text={name}
+          selected={isViewActive(view, $isActive, $views, $viewsV2)}
+          on:click={() => {
+            if (view.version === 2) {
+              $goto(`./view/v2/${view.id}`)
+            } else {
+              $goto(`./view/v1/${encodeURIComponent(name)}`)
+            }
+          }}
+          selectedBy={$userSelectedResourceMap[name] ||
+            $userSelectedResourceMap[view.id]}
         >
-          <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }}
-          />
+          <EditViewPopover {view} />
         </NavItem>
       {/each}
     {/each}
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 11ef60480b..1760938c53 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -35,7 +35,7 @@
       screen => screen.autoTableId === table._id
     )
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
+      templateScreens.map(screen => `Screen ${screen.routing?.route || ""}`)
     )
     confirmDeleteDialog.show()
   }
@@ -44,7 +44,10 @@
     const isSelected = $params.tableId === table._id
     try {
       await tables.delete(table)
-      await store.actions.screens.delete(templateScreens)
+      // Screens need deleted one at a time because of undo/redo
+      for (let screen of templateScreens) {
+        await store.actions.screens.delete(screen)
+      }
       if (table.type === "external") {
         await datasources.fetch()
       }
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 99f19935a1..5e2b0102f8 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { goto, params } from "@roxi/routify"
-  import { views } from "stores/backend"
+  import { views, viewsV2 } from "stores/backend"
   import { cloneDeep } from "lodash/fp"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -24,23 +23,29 @@
     const updatedView = cloneDeep(view)
     updatedView.name = updatedName
 
-    await views.save({
-      originalName,
-      ...updatedView,
-    })
+    if (view.version === 2) {
+      await viewsV2.save({
+        originalName,
+        ...updatedView,
+      })
+    } else {
+      await views.save({
+        originalName,
+        ...updatedView,
+      })
+    }
+
     notifications.success("View renamed successfully")
   }
 
   async function deleteView() {
     try {
-      const isSelected =
-        decodeURIComponent($params.viewName) === $views.selectedViewName
-      const id = view.tableId
-      await views.delete(view)
-      notifications.success("View deleted")
-      if (isSelected) {
-        $goto(`./table/${id}`)
+      if (view.version === 2) {
+        await viewsV2.delete(view)
+      } else {
+        await views.delete(view)
       }
+      notifications.success("View deleted")
     } catch (error) {
       notifications.error("Error deleting view")
     }
diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 3c95dbbd0b..b9a4c0a412 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -109,7 +109,13 @@
       type: "View",
       name: view.name,
       icon: "Remove",
-      action: () => $goto(`./data/view/${view.name}`),
+      action: () => {
+        if (view.version === 2) {
+          $goto(`./data/view/v2/${view.id}`)
+        } else {
+          $goto(`./data/view/${view.name}`)
+        }
+      },
     })) ?? []),
     ...($queries?.list?.map(query => ({
       type: "Query",
@@ -121,7 +127,9 @@
       type: "Screen",
       name: screen.routing.route,
       icon: "WebPage",
-      action: () => $goto(`./design/${screen._id}/components`),
+      action: () => {
+        $goto(`./design/${screen._id}/${screen._id}-screen`)
+      },
     })),
     ...($automationStore?.automations?.map(automation => ({
       type: "Automation",
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 6590463408..a65da55c8f 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -21,6 +21,7 @@
   export let id
   export let showTooltip = false
   export let selectedBy = null
+  export let compact = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -80,8 +81,9 @@
     {#if withArrow}
       <div
         class:opened
-        class:relative={indentLevel === 0}
-        class:absolute={indentLevel > 0}
+        class:relative={indentLevel === 0 && !compact}
+        class:absolute={indentLevel > 0 && !compact}
+        class:compact
         class="icon arrow"
         on:click={onIconClick}
       >
@@ -194,10 +196,21 @@
     padding: 8px;
     margin-left: -8px;
   }
+
+  .compact {
+    position: absolute;
+    left: 6px;
+    padding: 8px;
+    margin-left: -8px;
+  }
   .icon.arrow :global(svg) {
     width: 12px;
     height: 12px;
   }
+  .icon.arrow.compact :global(svg) {
+    width: 9px;
+    height: 9px;
+  }
   .icon.arrow.relative {
     position: relative;
     margin: 0 -6px 0 -4px;
diff --git a/packages/builder/src/components/common/RoleSelect.svelte b/packages/builder/src/components/common/RoleSelect.svelte
index 09a67cb6fe..82752554d5 100644
--- a/packages/builder/src/components/common/RoleSelect.svelte
+++ b/packages/builder/src/components/common/RoleSelect.svelte
@@ -1,8 +1,11 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { Select, FancySelect } from "@budibase/bbui"
   import { roles } from "stores/backend"
+  import { licensing } from "stores/portal"
+
   import { Constants, RoleUtils } from "@budibase/frontend-core"
   import { createEventDispatcher } from "svelte"
+  import { capitalise } from "helpers"
 
   export let value
   export let error
@@ -15,17 +18,43 @@
   export let align
   export let footer = null
   export let allowedRoles = null
+  export let allowCreator = false
+  export let fancySelect = false
 
   const dispatch = createEventDispatcher()
   const RemoveID = "remove"
 
-  $: options = getOptions($roles, allowPublic, allowRemove, allowedRoles)
-
-  const getOptions = (roles, allowPublic, allowRemove, allowedRoles) => {
+  $: options = getOptions(
+    $roles,
+    allowPublic,
+    allowRemove,
+    allowedRoles,
+    allowCreator
+  )
+  const getOptions = (
+    roles,
+    allowPublic,
+    allowRemove,
+    allowedRoles,
+    allowCreator
+  ) => {
     if (allowedRoles?.length) {
       return roles.filter(role => allowedRoles.includes(role._id))
     }
     let newRoles = [...roles]
+
+    if (allowCreator) {
+      newRoles = [
+        {
+          _id: Constants.Roles.CREATOR,
+          name: "Creator",
+          tag:
+            !$licensing.perAppBuildersEnabled &&
+            capitalise(Constants.PlanType.BUSINESS),
+        },
+        ...newRoles,
+      ]
+    }
     if (allowRemove) {
       newRoles = [
         ...newRoles,
@@ -64,19 +93,45 @@
   }
 </script>
 
-<Select
-  {autoWidth}
-  {quiet}
-  {disabled}
-  {align}
-  {footer}
-  bind:value
-  on:change={onChange}
-  {options}
-  getOptionLabel={role => role.name}
-  getOptionValue={role => role._id}
-  getOptionColour={getColor}
-  getOptionIcon={getIcon}
-  {placeholder}
-  {error}
-/>
+{#if fancySelect}
+  <FancySelect
+    {autoWidth}
+    {quiet}
+    {disabled}
+    {align}
+    {footer}
+    bind:value
+    on:change={onChange}
+    {options}
+    label="Access on this app"
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
+    getOptionColour={getColor}
+    getOptionIcon={getIcon}
+    isOptionEnabled={option =>
+      option._id !== Constants.Roles.CREATOR ||
+      $licensing.perAppBuildersEnabled}
+    {placeholder}
+    {error}
+  />
+{:else}
+  <Select
+    {autoWidth}
+    {quiet}
+    {disabled}
+    {align}
+    {footer}
+    bind:value
+    on:change={onChange}
+    {options}
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
+    getOptionColour={getColor}
+    getOptionIcon={getIcon}
+    isOptionEnabled={option =>
+      option._id !== Constants.Roles.CREATOR ||
+      $licensing.perAppBuildersEnabled}
+    {placeholder}
+    {error}
+  />
+{/if}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index dacb076bdb..5c4f90606d 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -74,6 +74,8 @@
   {/if}
 </div>
 <Drawer
+  on:drawerHide
+  on:drawerShow
   {fillWidth}
   bind:this={bindingDrawer}
   {title}
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 3968292ba9..f649a9bd06 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Heading } from "@budibase/bbui"
+  import { Icon, Body } from "@budibase/bbui"
 
   export let title
   export let icon
@@ -25,7 +25,7 @@
       <Icon name={icon} />
     {/if}
     <div class="title">
-      <Heading size="XXS">{title || ""}</Heading>
+      <Body size="S">{title}</Body>
     </div>
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
@@ -78,15 +78,14 @@
     align-items: center;
     padding: 0 var(--spacing-l);
     border-bottom: var(--border-light);
-    gap: var(--spacing-l);
+    gap: var(--spacing-m);
   }
   .title {
     flex: 1 1 auto;
     width: 0;
   }
-  .title :global(h1) {
+  .title :global(p) {
     overflow: hidden;
-    font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
index ef6410abca..f9541ea79f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -13,9 +13,9 @@
   import { generate } from "shortid"
   import {
     getEventContextBindings,
+    getActionBindings,
     makeStateBinding,
   } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150
@@ -26,6 +26,7 @@
   export let actions
   export let bindings = []
   export let nested
+  export let componentInstance
 
   let actionQuery
   let selectedAction = actions?.length ? actions[0] : null
@@ -68,15 +69,19 @@
     acc[action.type].push(action)
     return acc
   }, {})
+
   // These are ephemeral bindings which only exist while executing actions
-  $: eventContexBindings = getEventContextBindings(
-    $currentAsset,
-    $store.selectedComponentId,
-    key,
-    actions,
-    selectedAction?.id
+  $: eventContextBindings = getEventContextBindings({
+    componentInstance,
+    settingKey: key,
+  })
+  $: actionContextBindings = getActionBindings(actions, selectedAction?.id)
+
+  $: allBindings = getAllBindings(
+    bindings,
+    [...eventContextBindings, ...actionContextBindings],
+    actions
   )
-  $: allBindings = getAllBindings(bindings, eventContexBindings, actions)
   $: {
     // Ensure each action has a unique ID
     if (actions) {
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
index 3fefb60387..792777349c 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -13,6 +13,7 @@
   export let name
   export let bindings
   export let nested
+  export let componentInstance
 
   let drawer
   let tmpValue
@@ -74,7 +75,7 @@
   <ActionButton on:click={openDrawer}>{actionText}</ActionButton>
 </div>
 
-<Drawer bind:this={drawer} title={"Actions"}>
+<Drawer bind:this={drawer} title={"Actions"} on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>
@@ -86,6 +87,7 @@
     {bindings}
     {key}
     {nested}
+    {componentInstance}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte
index ca2df71c6d..81a2119474 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte
@@ -1,10 +1,12 @@
 <script>
-  import { Select, Label, Stepper } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
   import { getActionProviderComponents } from "builderStore/dataBinding"
   import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
+  export let bindings = []
 
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
@@ -51,7 +53,11 @@
   <Select bind:value={parameters.type} options={typeOptions} />
   {#if parameters.type === "specific"}
     <Label small>Number</Label>
-    <Stepper bind:value={parameters.number} />
+    <DrawerBindableInput
+      {bindings}
+      value={parameters.number}
+      on:change={e => (parameters.number = e.detail)}
+    />
   {/if}
 </div>
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
index e4a5f171ff..1e79c51051 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
@@ -1,12 +1,20 @@
 <script>
   import { Select, Label, Checkbox, Input, Body } from "@budibase/bbui"
-  import { tables } from "stores/backend"
+  import { tables, viewsV2 } from "stores/backend"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
 
-  $: tableOptions = $tables.list || []
+  $: tableOptions = $tables.list.map(table => ({
+    label: table.name,
+    resourceId: table._id,
+  }))
+  $: viewOptions = $viewsV2.list.map(view => ({
+    label: view.name,
+    resourceId: view.id,
+  }))
+  $: options = [...(tableOptions || []), ...(viewOptions || [])]
 </script>
 
 <div class="root">
@@ -15,9 +23,9 @@
     <Label>Table</Label>
     <Select
       bind:value={parameters.tableId}
-      options={tableOptions}
-      getOptionLabel={table => table.name}
-      getOptionValue={table => table._id}
+      {options}
+      getOptionLabel={x => x.label}
+      getOptionValue={x => x.resourceId}
     />
 
     <Label small>Row IDs</Label>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
index bb253da56a..18711497ff 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
-  import { tables } from "stores/backend"
+  import { tables, viewsV2 } from "stores/backend"
   import {
     getContextProviderComponents,
-    getSchemaForTable,
+    getSchemaForDatasourcePlus,
   } from "builderStore/dataBinding"
   import SaveFields from "./SaveFields.svelte"
 
@@ -23,7 +23,15 @@
   )
   $: providerOptions = getProviderOptions(formComponents, schemaComponents)
   $: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
-  $: tableOptions = $tables.list || []
+  $: tableOptions = $tables.list.map(table => ({
+    label: table.name,
+    resourceId: table._id,
+  }))
+  $: viewOptions = $viewsV2.list.map(view => ({
+    label: view.name,
+    resourceId: view.id,
+  }))
+  $: options = [...(tableOptions || []), ...(viewOptions || [])]
 
   // Gets a context definition of a certain type from a component definition
   const extractComponentContext = (component, contextType) => {
@@ -60,7 +68,7 @@
   }
 
   const getSchemaFields = (asset, tableId) => {
-    const { schema } = getSchemaForTable(tableId)
+    const { schema } = getSchemaForDatasourcePlus(tableId)
     delete schema._id
     delete schema._rev
     return Object.values(schema || {})
@@ -89,9 +97,9 @@
     <Label small>Duplicate to Table</Label>
     <Select
       bind:value={parameters.tableId}
-      options={tableOptions}
-      getOptionLabel={option => option.name}
-      getOptionValue={option => option._id}
+      {options}
+      getOptionLabel={option => option.label}
+      getOptionValue={option => option.resourceId}
     />
 
     <Label small />
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
index fb8b8c3f90..e01fcab4f3 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
@@ -1,21 +1,29 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { tables } from "stores/backend"
+  import { tables, viewsV2 } from "stores/backend"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
 
-  $: tableOptions = $tables.list || []
+  $: tableOptions = $tables.list.map(table => ({
+    label: table.name,
+    resourceId: table._id,
+  }))
+  $: viewOptions = $viewsV2.list.map(view => ({
+    label: view.name,
+    resourceId: view.id,
+  }))
+  $: options = [...(tableOptions || []), ...(viewOptions || [])]
 </script>
 
 <div class="root">
   <Label>Table</Label>
   <Select
     bind:value={parameters.tableId}
-    options={tableOptions}
-    getOptionLabel={table => table.name}
-    getOptionValue={table => table._id}
+    {options}
+    getOptionLabel={table => table.label}
+    getOptionValue={table => table.resourceId}
   />
 
   <Label small>Row ID</Label>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
index d16a279c68..c1917ad90f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
-  import { tables } from "stores/backend"
+  import { tables, viewsV2 } from "stores/backend"
   import {
     getContextProviderComponents,
-    getSchemaForTable,
+    getSchemaForDatasourcePlus,
   } from "builderStore/dataBinding"
   import SaveFields from "./SaveFields.svelte"
 
@@ -24,8 +24,16 @@
     "schema"
   )
   $: providerOptions = getProviderOptions(formComponents, schemaComponents)
-  $: schemaFields = getSchemaFields($currentAsset, parameters?.tableId)
-  $: tableOptions = $tables.list || []
+  $: schemaFields = getSchemaFields(parameters?.tableId)
+  $: tableOptions = $tables.list.map(table => ({
+    label: table.name,
+    resourceId: table._id,
+  }))
+  $: viewOptions = $viewsV2.list.map(view => ({
+    label: view.name,
+    resourceId: view.id,
+  }))
+  $: options = [...(tableOptions || []), ...(viewOptions || [])]
 
   // Gets a context definition of a certain type from a component definition
   const extractComponentContext = (component, contextType) => {
@@ -61,8 +69,8 @@
     })
   }
 
-  const getSchemaFields = (asset, tableId) => {
-    const { schema } = getSchemaForTable(tableId)
+  const getSchemaFields = resourceId => {
+    const { schema } = getSchemaForDatasourcePlus(resourceId)
     return Object.values(schema || {})
   }
 
@@ -89,9 +97,9 @@
     <Label small>Table</Label>
     <Select
       bind:value={parameters.tableId}
-      options={tableOptions}
-      getOptionLabel={option => option.name}
-      getOptionValue={option => option._id}
+      {options}
+      getOptionLabel={option => option.label}
+      getOptionValue={option => option.resourceId}
     />
 
     <Label small />
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
index a03d22386d..8e3079101a 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
@@ -42,7 +42,6 @@
         <ColorPicker
           value={column.background}
           on:change={e => (column.background = e.detail)}
-          alignRight
           spectrumTheme={$store.theme}
         />
       </Layout>
@@ -51,7 +50,6 @@
         <ColorPicker
           value={column.color}
           on:change={e => (column.color = e.detail)}
-          alignRight
           spectrumTheme={$store.theme}
         />
       </Layout>
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
index 6da1bd6187..d70929469a 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@@ -15,6 +15,8 @@
   import {
     tables as tablesStore,
     queries as queriesStore,
+    viewsV2 as viewsV2Store,
+    views as viewsStore,
   } from "stores/backend"
   import { datasources, integrations } from "stores/backend"
   import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
@@ -39,15 +41,17 @@
     tableId: m._id,
     type: "table",
   }))
-  $: views = $tablesStore.list.reduce((acc, cur) => {
-    let viewsArr = Object.entries(cur.views || {}).map(([key, value]) => ({
-      label: key,
-      name: key,
-      ...value,
-      type: "view",
-    }))
-    return [...acc, ...viewsArr]
-  }, [])
+  $: viewsV1 = $viewsStore.list.map(view => ({
+    ...view,
+    label: view.name,
+    type: "view",
+  }))
+  $: viewsV2 = $viewsV2Store.list.map(view => ({
+    ...view,
+    label: view.name,
+    type: "viewV2",
+  }))
+  $: views = [...(viewsV1 || []), ...(viewsV2 || [])]
   $: queries = $queriesStore.list
     .filter(q => showAllQueries || q.queryVerb === "read" || q.readable)
     .map(query => ({
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
new file mode 100644
index 0000000000..c8395b2a1f
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/DraggableList.svelte
@@ -0,0 +1,156 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { dndzone } from "svelte-dnd-action"
+  import { createEventDispatcher } from "svelte"
+  import { generate } from "shortid"
+  import { setContext } from "svelte"
+  import { writable } from "svelte/store"
+
+  export let items = []
+  export let showHandle = true
+  export let listType
+  export let listTypeProps = {}
+  export let listItemKey
+  export let draggable = true
+
+  let store = writable({
+    selected: null,
+    actions: {
+      select: id => {
+        store.update(state => ({
+          ...state,
+          selected: id,
+        }))
+      },
+    },
+  })
+
+  setContext("draggable", store)
+
+  const dispatch = createEventDispatcher()
+  const flipDurationMs = 150
+
+  let anchors = {}
+  let draggableItems = []
+
+  const buildDraggable = items => {
+    return items
+      .map(item => {
+        return {
+          id: listItemKey ? item[listItemKey] : generate(),
+          item,
+        }
+      })
+      .filter(item => item.id)
+  }
+
+  $: if (items) {
+    draggableItems = buildDraggable(items)
+  }
+
+  const updateRowOrder = e => {
+    draggableItems = e.detail.items
+  }
+
+  const serialiseUpdate = () => {
+    return draggableItems.reduce((acc, ele) => {
+      acc.push(ele.item)
+      return acc
+    }, [])
+  }
+
+  const handleFinalize = e => {
+    updateRowOrder(e)
+    dispatch("change", serialiseUpdate())
+  }
+
+  const onItemChanged = e => {
+    dispatch("itemChange", e.detail)
+  }
+</script>
+
+<ul
+  class="list-wrap"
+  use:dndzone={{
+    items: draggableItems,
+    flipDurationMs,
+    dropTargetStyle: { outline: "none" },
+    dragDisabled: !draggable,
+  }}
+  on:finalize={handleFinalize}
+  on:consider={updateRowOrder}
+>
+  {#each draggableItems as draggable (draggable.id)}
+    <li
+      bind:this={anchors[draggable.id]}
+      class:highlighted={draggable.id === $store.selected}
+    >
+      <div class="left-content">
+        {#if showHandle}
+          <div class="handle" aria-label="drag-handle">
+            <Icon name="DragHandle" size="XL" />
+          </div>
+        {/if}
+      </div>
+      <div class="right-content">
+        <svelte:component
+          this={listType}
+          anchor={anchors[draggable.item._id]}
+          item={draggable.item}
+          {...listTypeProps}
+          on:change={onItemChanged}
+        />
+      </div>
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .list-wrap {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-radius: 4px;
+    background-color: var(
+      --spectrum-table-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  }
+  .list-wrap > li {
+    background-color: var(
+      --spectrum-table-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    transition: background-color ease-in-out 130ms;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  }
+  .list-wrap > li:hover,
+  li.highlighted {
+    background-color: var(
+      --spectrum-table-row-background-color-hover,
+      var(--spectrum-alias-highlight-hover)
+    );
+  }
+  .list-wrap > li:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .list-wrap > li:last-child {
+    border-top-left-radius: var(--spectrum-table-regular-border-radius);
+    border-top-right-radius: var(--spectrum-table-regular-border-radius);
+  }
+  .right-content {
+    flex: 1;
+    min-width: 0;
+  }
+  .list-wrap li {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
new file mode 100644
index 0000000000..7d2eaae478
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -0,0 +1,160 @@
+<script>
+  import { Icon, Popover, Layout } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { cloneDeep } from "lodash/fp"
+  import { createEventDispatcher } from "svelte"
+  import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import { getContext } from "svelte"
+
+  export let anchor
+  export let field
+  export let componentBindings
+  export let bindings
+
+  const draggable = getContext("draggable")
+  const dispatch = createEventDispatcher()
+
+  let popover
+  let drawers = []
+  let pseudoComponentInstance
+  let open = false
+
+  $: if (open && $draggable.selected && $draggable.selected != field._id) {
+    popover.hide()
+  }
+
+  $: if (field) {
+    pseudoComponentInstance = field
+  }
+  $: componentDef = store.actions.components.getDefinition(
+    pseudoComponentInstance._component
+  )
+  $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
+
+  const processComponentDefinitionSettings = componentDef => {
+    if (!componentDef) {
+      return {}
+    }
+    const clone = cloneDeep(componentDef)
+    const updatedSettings = clone.settings
+      .filter(setting => setting.key !== "field")
+      .map(setting => {
+        return { ...setting, nested: true }
+      })
+    clone.settings = updatedSettings
+    return clone
+  }
+
+  const updateSetting = async (setting, value) => {
+    const nestedComponentInstance = cloneDeep(pseudoComponentInstance)
+
+    const patchFn = store.actions.components.updateComponentSetting(
+      setting.key,
+      value
+    )
+    patchFn(nestedComponentInstance)
+
+    const update = {
+      ...nestedComponentInstance,
+      active: pseudoComponentInstance.active,
+    }
+
+    dispatch("change", update)
+  }
+</script>
+
+<Icon
+  name="Settings"
+  hoverable
+  size="S"
+  on:click={() => {
+    if (!open) {
+      popover.show()
+      open = true
+    }
+  }}
+/>
+
+<Popover
+  bind:this={popover}
+  on:open={() => {
+    drawers = []
+    $draggable.actions.select(field._id)
+  }}
+  on:close={() => {
+    open = false
+    if ($draggable.selected == field._id) {
+      $draggable.actions.select()
+    }
+  }}
+  {anchor}
+  align="left-outside"
+  showPopover={drawers.length == 0}
+  clickOutsideOverride={drawers.length > 0}
+  maxHeight={600}
+  handlePostionUpdate={(anchorBounds, eleBounds, cfg) => {
+    let { left, top } = cfg
+    let percentageOffset = 30
+    // left-outside
+    left = anchorBounds.left - eleBounds.width - 18
+
+    // shift up from the anchor, if space allows
+    let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
+    let defaultTop = anchorBounds.top - offsetPos
+
+    if (window.innerHeight - defaultTop < eleBounds.height) {
+      top = window.innerHeight - eleBounds.height - 5
+    } else {
+      top = anchorBounds.top - offsetPos
+    }
+
+    return { ...cfg, left, top }
+  }}
+>
+  <span class="popover-wrap">
+    <Layout noPadding noGap>
+      <div class="type-icon">
+        <Icon name={parsedComponentDef.icon} />
+        <span>{field.field}</span>
+      </div>
+      <ComponentSettingsSection
+        componentInstance={pseudoComponentInstance}
+        componentDefinition={parsedComponentDef}
+        isScreen={false}
+        onUpdateSetting={updateSetting}
+        showSectionTitle={false}
+        showInstanceName={false}
+        {bindings}
+        {componentBindings}
+        on:drawerShow={e => {
+          drawers = [...drawers, e.detail]
+        }}
+        on:drawerHide={() => {
+          drawers = drawers.slice(0, -1)
+        }}
+      />
+    </Layout>
+  </span>
+</Popover>
+
+<style>
+  .popover-wrap {
+    background-color: var(--spectrum-alias-background-color-primary);
+  }
+  .type-icon {
+    display: flex;
+    gap: var(--spacing-m);
+    margin: var(--spacing-xl);
+    margin-bottom: 0px;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
index f9dccf586c..4c4fa0b7b7 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -1,45 +1,81 @@
 <script>
-  import { Button, ActionButton, Drawer } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import ColumnDrawer from "./ColumnDrawer.svelte"
-  import { cloneDeep } from "lodash/fp"
+  import { cloneDeep, isEqual } from "lodash/fp"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
+    getBindableProperties,
+    getComponentBindableProperties,
   } from "builderStore/dataBinding"
   import { currentAsset } from "builderStore"
+  import DraggableList from "../DraggableList.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { store, selectedScreen } from "builderStore"
+  import FieldSetting from "./FieldSetting.svelte"
+  import { convertOldFieldFormat, getComponentForField } from "./utils"
 
   export let componentInstance
-  export let value = []
+  export let value
 
   const dispatch = createEventDispatcher()
+  let sanitisedFields
+  let fieldList
+  let schema
+  let cachedValue
+  let options
+  let sanitisedValue
+  let unconfigured
 
-  let drawer
-  let boundValue
+  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
+  $: actionType = componentInstance.actionType
+  let componentBindings = []
 
-  $: text = getText(value)
-  $: convertOldColumnFormat(value)
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchema($currentAsset, datasource)
-  $: options = Object.keys(schema || {})
-  $: sanitisedValue = getValidColumns(value, options)
-  $: updateBoundValue(sanitisedValue)
-
-  const getText = value => {
-    if (!value?.length) {
-      return "All fields"
-    }
-    let text = `${value.length} field`
-    if (value.length !== 1) {
-      text += "s"
-    }
-    return text
+  $: if (actionType) {
+    componentBindings = getComponentBindableProperties(
+      $selectedScreen,
+      componentInstance._id
+    )
   }
 
-  const convertOldColumnFormat = oldColumns => {
-    if (typeof oldColumns?.[0] === "string") {
-      value = oldColumns.map(field => ({ name: field, displayName: field }))
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: resourceId = datasource.resourceId || datasource.tableId
+
+  $: if (!isEqual(value, cachedValue)) {
+    cachedValue = cloneDeep(value)
+  }
+
+  const updateState = value => {
+    schema = getSchema($currentAsset, datasource)
+    options = Object.keys(schema || {})
+    sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
+    updateSanitsedFields(sanitisedValue)
+    unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
+    fieldList = [...sanitisedFields, ...unconfigured]
+      .map(buildSudoInstance)
+      .filter(x => x != null)
+  }
+
+  $: updateState(cachedValue, resourceId)
+
+  // Builds unused ones only
+  const buildUnconfiguredOptions = (schema, selected) => {
+    if (!schema) {
+      return []
     }
+    let schemaClone = cloneDeep(schema)
+    selected.forEach(val => {
+      delete schemaClone[val.field]
+    })
+
+    return Object.keys(schemaClone)
+      .filter(key => !schemaClone[key].autocolumn)
+      .map(key => {
+        const col = schemaClone[key]
+        let toggleOn = !value
+        return {
+          field: key,
+          active: typeof col.active != "boolean" ? toggleOn : col.active,
+        }
+      })
   }
 
   const getSchema = (asset, datasource) => {
@@ -54,50 +90,83 @@
     return schema
   }
 
-  const updateBoundValue = value => {
-    boundValue = cloneDeep(value)
+  const updateSanitsedFields = value => {
+    sanitisedFields = cloneDeep(value)
   }
 
   const getValidColumns = (columns, options) => {
     if (!Array.isArray(columns) || !columns.length) {
       return []
     }
-    // We need to account for legacy configs which would just be an array
-    // of strings
-    if (typeof columns[0] === "string") {
-      columns = columns.map(col => ({
-        name: col,
-        displayName: col,
-      }))
-    }
+
     return columns.filter(column => {
-      return options.includes(column.name)
+      return options.includes(column.field)
     })
   }
 
-  const open = () => {
-    updateBoundValue(sanitisedValue)
-    drawer.show()
+  const buildSudoInstance = instance => {
+    if (instance._component) {
+      return instance
+    }
+    const type = getComponentForField(instance.field, schema)
+    if (!type) {
+      return null
+    }
+    instance._component = `@budibase/standard-components/${type}`
+
+    const pseudoComponentInstance = store.actions.components.createInstance(
+      instance._component,
+      {
+        _instanceName: instance.field,
+        field: instance.field,
+        label: instance.field,
+        placeholder: instance.field,
+      },
+      {}
+    )
+
+    return { ...instance, ...pseudoComponentInstance }
   }
 
-  const save = () => {
-    dispatch("change", getValidColumns(boundValue, options))
-    drawer.hide()
+  const processItemUpdate = e => {
+    const updatedField = e.detail
+    const parentFieldsUpdated = fieldList ? cloneDeep(fieldList) : []
+
+    let parentFieldIdx = parentFieldsUpdated.findIndex(pSetting => {
+      return pSetting.field === updatedField?.field
+    })
+
+    if (parentFieldIdx == -1) {
+      parentFieldsUpdated.push(updatedField)
+    } else {
+      parentFieldsUpdated[parentFieldIdx] = updatedField
+    }
+
+    dispatch("change", getValidColumns(parentFieldsUpdated, options))
+  }
+
+  const listUpdated = e => {
+    const parsedColumns = getValidColumns(e.detail, options)
+    dispatch("change", parsedColumns)
   }
 </script>
 
 <div class="field-configuration">
-  <ActionButton on:click={open}>{text}</ActionButton>
+  {#if fieldList?.length}
+    <DraggableList
+      on:change={listUpdated}
+      on:itemChange={processItemUpdate}
+      items={fieldList}
+      listItemKey={"_id"}
+      listType={FieldSetting}
+      listTypeProps={{
+        componentBindings,
+        bindings,
+      }}
+    />
+  {/if}
 </div>
 
-<Drawer bind:this={drawer} title="Form Fields">
-  <svelte:fragment slot="description">
-    Configure the fields in your form.
-  </svelte:fragment>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
-</Drawer>
-
 <style>
   .field-configuration :global(.spectrum-ActionButton) {
     width: 100%;
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
new file mode 100644
index 0000000000..b5cfcb12d9
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@@ -0,0 +1,56 @@
+<script>
+  import EditFieldPopover from "./EditFieldPopover.svelte"
+  import { Toggle } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { cloneDeep } from "lodash/fp"
+
+  export let item
+  export let componentBindings
+  export let bindings
+  export let anchor
+
+  const dispatch = createEventDispatcher()
+  const onToggle = item => {
+    return e => {
+      item.active = e.detail
+      dispatch("change", { ...cloneDeep(item), active: e.detail })
+    }
+  }
+</script>
+
+<div class="list-item-body">
+  <div class="list-item-left">
+    <EditFieldPopover
+      {anchor}
+      field={item}
+      {componentBindings}
+      {bindings}
+      on:change
+    />
+    <div class="field-label">{item.label || item.field}</div>
+  </div>
+  <div class="list-item-right">
+    <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
+  </div>
+</div>
+
+<style>
+  .field-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .list-item-body,
+  .list-item-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    min-width: 0;
+  }
+  .list-item-right :global(div.spectrum-Switch) {
+    margin: 0px;
+  }
+  .list-item-body {
+    justify-content: space-between;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
new file mode 100644
index 0000000000..d4a8963dba
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
@@ -0,0 +1,46 @@
+export const convertOldFieldFormat = fields => {
+  if (!fields) {
+    return []
+  }
+  const converted = fields.map(field => {
+    if (typeof field === "string") {
+      // existed but was a string
+      return {
+        field,
+        active: true,
+      }
+    } else if (typeof field?.active != "boolean") {
+      // existed but had no state
+      return {
+        field: field.name,
+        active: true,
+      }
+    } else {
+      return field
+    }
+  })
+  return converted
+}
+
+export const getComponentForField = (field, schema) => {
+  if (!field || !schema?.[field]) {
+    return null
+  }
+  const type = schema[field].type
+  return FieldTypeToComponentMap[type]
+}
+
+export const FieldTypeToComponentMap = {
+  string: "stringfield",
+  number: "numberfield",
+  bigint: "bigintfield",
+  options: "optionsfield",
+  array: "multifieldselect",
+  boolean: "booleanfield",
+  longform: "longformfield",
+  datetime: "datetimefield",
+  attachment: "attachmentfield",
+  link: "relationshipfield",
+  json: "jsonfield",
+  barcodeqr: "codescanner",
+}
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
index 4b1ab0d68a..ef8699824e 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
@@ -17,7 +17,7 @@
   import { generate } from "shortid"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { getFields } from "helpers/searchFields"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
 
   export let schemaFields
   export let filters = []
@@ -35,22 +35,28 @@
     { value: "and", label: "Match all filters" },
     { value: "or", label: "Match any filter" },
   ]
+  const onEmptyOptions = [
+    { value: "all", label: "Return all table rows" },
+    { value: "none", label: "Return no rows" },
+  ]
 
   let rawFilters
   let matchAny = false
+  let onEmptyFilter = "all"
 
   $: parseFilters(filters)
-  $: dispatch("change", enrichFilters(rawFilters, matchAny))
+  $: dispatch("change", enrichFilters(rawFilters, matchAny, onEmptyFilter))
   $: enrichedSchemaFields = getFields(schemaFields || [], { allowLinks: true })
   $: fieldOptions = enrichedSchemaFields.map(field => field.name) || []
   $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
 
-  // Remove field key prefixes and determine whether to use the "match all"
-  // or "match any" behaviour
+  // Remove field key prefixes and determine which behaviours to use
   const parseFilters = filters => {
     matchAny = filters?.find(filter => filter.operator === "allOr") != null
+    onEmptyFilter =
+      filters?.find(filter => filter.onEmptyFilter)?.onEmptyFilter ?? "all"
     rawFilters = (filters || [])
-      .filter(filter => filter.operator !== "allOr")
+      .filter(filter => filter.operator !== "allOr" && !filter.onEmptyFilter)
       .map(filter => {
         const { field } = filter
         let newFilter = { ...filter }
@@ -64,9 +70,18 @@
       })
   }
 
+  onMount(() => {
+    parseFilters(filters)
+    rawFilters.forEach(filter => {
+      filter.type =
+        schemaFields.find(field => field.name === filter.field)?.type ||
+        filter.type
+    })
+  })
+
   // Add field key prefixes and a special metadata filter object to indicate
-  // whether to use the "match all" or "match any" behaviour
-  const enrichFilters = (rawFilters, matchAny) => {
+  // how to handle filter behaviour
+  const enrichFilters = (rawFilters, matchAny, onEmptyFilter) => {
     let count = 1
     return rawFilters
       .filter(filter => filter.field)
@@ -75,6 +90,7 @@
         field: `${count++}:${filter.field}`,
       }))
       .concat(matchAny ? [{ operator: "allOr" }] : [])
+      .concat([{ onEmptyFilter }])
   }
 
   const addFilter = () => {
@@ -186,6 +202,17 @@
             on:change={e => (matchAny = e.detail === "or")}
             placeholder={null}
           />
+          {#if datasource?.type === "table"}
+            <Select
+              label="When filter empty"
+              value={onEmptyFilter}
+              options={onEmptyOptions}
+              getOptionLabel={opt => opt.label}
+              getOptionValue={opt => opt.value}
+              on:change={e => (onEmptyFilter = e.detail)}
+              placeholder={null}
+            />
+          {/if}
         </div>
         <div>
           <div class="filter-label">
diff --git a/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte
index 1201edd31e..c626081042 100644
--- a/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsEditor.svelte
@@ -24,11 +24,22 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define Options</ActionButton>
-<Drawer bind:this={drawer} title="Options">
+<div class="options-wrap">
+  <div />
+  <div><ActionButton on:click={drawer.show}>Define Options</ActionButton></div>
+</div>
+<Drawer bind:this={drawer} title="Options" on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Define the options for this picker.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveOptions}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>
+
+<style>
+  .options-wrap {
+    gap: 8px;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 5125c3bade..c8135b4f61 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -100,6 +100,8 @@
       {key}
       {type}
       {...props}
+      on:drawerHide
+      on:drawerShow
     />
   </div>
   {#if info}
diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index 384bbe1e3a..da50ad8c2a 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
@@ -1,28 +1,48 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { tables as tablesStore } from "stores/backend"
+  import { createEventDispatcher, onMount } from "svelte"
+  import { tables as tablesStore, viewsV2 } from "stores/backend"
 
   export let value
 
   const dispatch = createEventDispatcher()
 
-  $: tables = $tablesStore.list.map(m => ({
-    label: m.name,
-    tableId: m._id,
+  $: tables = $tablesStore.list.map(table => ({
     type: "table",
+    label: table.name,
+    tableId: table._id,
+    resourceId: table._id,
   }))
+  $: views = $viewsV2.list.map(view => ({
+    type: "viewV2",
+    id: view.id,
+    label: view.name,
+    tableId: view.tableId,
+    resourceId: view.id,
+  }))
+  $: options = [...(tables || []), ...(views || [])]
 
   const onChange = e => {
-    const dataSource = tables?.find(x => x.tableId === e.detail)
-    dispatch("change", dataSource)
+    dispatch(
+      "change",
+      options.find(x => x.resourceId === e.detail)
+    )
   }
+
+  onMount(() => {
+    // Migrate old values before "resourceId" existed
+    if (value && !value.resourceId) {
+      const view = views.find(x => x.resourceId === value.id)
+      const table = tables.find(x => x.resourceId === value.tableId)
+      dispatch("change", view || table)
+    }
+  })
 </script>
 
 <Select
   on:change={onChange}
-  value={value?.tableId}
-  options={tables}
-  getOptionValue={x => x.tableId}
+  value={value?.resourceId}
+  {options}
+  getOptionValue={x => x.resourceId}
   getOptionLabel={x => x.label}
 />
diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
index 6db24e8d69..96953b56b8 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
@@ -5,9 +5,8 @@
 
   export let value = []
   export let bindings = []
-  export let componentDefinition
+  export let componentInstance
   export let type
-
   const dispatch = createEventDispatcher()
   let drawer
 
@@ -31,7 +30,7 @@
   <ActionButton on:click={drawer.show}>{text}</ActionButton>
 </div>
 
-<Drawer bind:this={drawer} title="Validation Rules">
+<Drawer bind:this={drawer} title="Validation Rules" on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Configure validation rules for this field.
   </svelte:fragment>
@@ -41,7 +40,7 @@
     bind:rules={value}
     {type}
     {bindings}
-    {componentDefinition}
+    fieldName={componentInstance?.field}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/integration/AccessLevelSelect.svelte b/packages/builder/src/components/integration/AccessLevelSelect.svelte
index 091f33cbcd..3dc24983d3 100644
--- a/packages/builder/src/components/integration/AccessLevelSelect.svelte
+++ b/packages/builder/src/components/integration/AccessLevelSelect.svelte
@@ -40,7 +40,7 @@
       return
     }
     try {
-      roleId = (await permissions.forResource(queryToFetch._id))["read"]
+      roleId = (await permissions.forResource(queryToFetch._id))["read"].role
     } catch (err) {
       roleId = Constants.Roles.BASIC
     }
diff --git a/packages/builder/src/helpers/helpers.js b/packages/builder/src/helpers/helpers.js
index bf5cdc003b..99483d40e2 100644
--- a/packages/builder/src/helpers/helpers.js
+++ b/packages/builder/src/helpers/helpers.js
@@ -26,6 +26,9 @@ export const capitalise = s => {
 
 export const lowercase = s => s.substring(0, 1).toLowerCase() + s.substring(1)
 
+export const lowercaseExceptFirst = s =>
+  s.charAt(0) + s.substring(1).toLowerCase()
+
 export const get_name = s => (!s ? "" : last(s.split("/")))
 
 export const get_capitalised_name = name => pipe(name, [get_name, capitalise])
diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index c4c48fb3fb..2408dde2f1 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -56,6 +56,11 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    // Clean URL
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Allow custom URL handling
     if (beforeNavigate) {
       const res = beforeNavigate(url, params)
       if (res?.url) {
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index 95f7eb7ab1..7c4d3db7ce 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -1,18 +1,27 @@
 <script>
   import {
     Icon,
+    Divider,
     Heading,
     Layout,
     Input,
     clickOutside,
     notifications,
-    ActionButton,
     CopyInput,
     Modal,
+    FancyForm,
+    FancyInput,
+    Button,
+    FancySelect,
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import { groups, licensing, apps, users, auth, admin } from "stores/portal"
-  import { fetchData, Constants, Utils } from "@budibase/frontend-core"
+  import {
+    fetchData,
+    Constants,
+    Utils,
+    RoleUtils,
+  } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import GroupIcon from "../../../portal/users/groups/_components/GroupIcon.svelte"
@@ -26,10 +35,15 @@
   let loaded = false
   let inviting = false
   let searchFocus = false
-
+  let invitingFlow = false
   // Initially filter entities without app access
   // Show all when false
-  let filterByAppAccess = true
+  let filterByAppAccess = false
+  let email
+  let error
+  let form
+  let creationRoleType = Constants.BudibaseRoles.AppUser
+  let creationAccessType = Constants.Roles.BASIC
 
   let appInvites = []
   let filteredInvites = []
@@ -40,8 +54,7 @@
   let userLimitReachedModal
 
   let inviteFailureResponse = ""
-
-  $: queryIsEmail = emailValidator(query) === true
+  $: validEmail = emailValidator(email) === true
   $: prodAppId = apps.getProdAppID($store.appId)
   $: promptInvite = showInvite(
     filteredInvites,
@@ -50,7 +63,6 @@
     query
   )
   $: isOwner = $auth.accountPortalAccess && $admin.cloud
-
   const showInvite = (invites, users, groups, query) => {
     return !invites?.length && !users?.length && !groups?.length && query
   }
@@ -66,9 +78,9 @@
     if (!filterByAppAccess && !query) {
       filteredInvites =
         appInvites.length > 100 ? appInvites.slice(0, 100) : [...appInvites]
+      filteredInvites.sort(sortInviteRoles)
       return
     }
-
     filteredInvites = appInvites.filter(invite => {
       const inviteInfo = invite.info?.apps
       if (!query && inviteInfo && prodAppId) {
@@ -76,8 +88,8 @@
       }
       return invite.email.includes(query)
     })
+    filteredInvites.sort(sortInviteRoles)
   }
-
   $: filterByAppAccess, prodAppId, filterInvites(query)
   $: if (searchFocus === true) {
     filterByAppAccess = false
@@ -107,24 +119,63 @@
     })
     await usersFetch.refresh()
 
-    filteredUsers = $usersFetch.rows.map(user => {
-      const isAdminOrBuilder = sdk.users.isAdminOrBuilder(user, prodAppId)
-      let role = undefined
-      if (isAdminOrBuilder) {
-        role = Constants.Roles.ADMIN
-      } else {
-        const appRole = Object.keys(user.roles).find(x => x === prodAppId)
-        if (appRole) {
-          role = user.roles[appRole]
+    filteredUsers = $usersFetch.rows
+      .filter(user => user.email !== $auth.user.email)
+      .map(user => {
+        const isAdminOrGlobalBuilder = sdk.users.isAdminOrGlobalBuilder(
+          user,
+          prodAppId
+        )
+        const isAppBuilder = sdk.users.hasAppBuilderPermissions(user, prodAppId)
+        let role
+        if (isAdminOrGlobalBuilder) {
+          role = Constants.Roles.ADMIN
+        } else if (isAppBuilder) {
+          role = Constants.Roles.CREATOR
+        } else {
+          const appRole = user.roles[prodAppId]
+          if (appRole) {
+            role = appRole
+          }
         }
-      }
 
-      return {
-        ...user,
-        role,
-        isAdminOrBuilder,
-      }
-    })
+        return {
+          ...user,
+          role,
+          isAdminOrGlobalBuilder,
+          isAppBuilder,
+        }
+      })
+      .sort(sortRoles)
+  }
+
+  const sortInviteRoles = (a, b) => {
+    const aAppsEmpty = !a.info?.apps?.length && !a.info?.builder?.apps?.length
+    const bAppsEmpty = !b.info?.apps?.length && !b.info?.builder?.apps?.length
+
+    return aAppsEmpty && !bAppsEmpty ? 1 : !aAppsEmpty && bAppsEmpty ? -1 : 0
+  }
+
+  const sortRoles = (a, b) => {
+    const roleA = a.role
+    const roleB = b.role
+
+    const priorityA = RoleUtils.getRolePriority(roleA)
+    const priorityB = RoleUtils.getRolePriority(roleB)
+
+    if (roleA === undefined && roleB !== undefined) {
+      return 1
+    } else if (roleA !== undefined && roleB === undefined) {
+      return -1
+    }
+
+    if (priorityA < priorityB) {
+      return 1
+    } else if (priorityA > priorityB) {
+      return -1
+    }
+
+    return 0
   }
 
   const debouncedUpdateFetch = Utils.debounce(searchUsers, 250)
@@ -160,6 +211,12 @@
       if (user.role === role) {
         return
       }
+      if (user.isAppBuilder) {
+        await removeAppBuilder(user._id, prodAppId)
+      }
+      if (role === Constants.Roles.CREATOR) {
+        await removeAppBuilder(user._id, prodAppId)
+      }
       await updateAppUser(user, role)
     } catch (error) {
       console.error(error)
@@ -189,6 +246,9 @@
       return
     }
     try {
+      if (group?.builder?.apps.includes(prodAppId)) {
+        await removeGroupAppBuilder(group._id)
+      }
       await updateAppGroup(group, role)
     } catch {
       notifications.error("Group update failed")
@@ -225,14 +285,17 @@
         return nameMatch
       })
       .map(enrichGroupRole)
+      .sort(sortRoles)
   }
 
   const enrichGroupRole = group => {
     return {
       ...group,
-      role: group.roles?.[
-        groups.actions.getGroupAppIds(group).find(x => x === prodAppId)
-      ],
+      role: group?.builder?.apps.includes(prodAppId)
+        ? Constants.Roles.CREATOR
+        : group.roles?.[
+            groups.actions.getGroupAppIds(group).find(x => x === prodAppId)
+          ],
     }
   }
 
@@ -245,8 +308,7 @@
   $: filteredGroups = searchGroups(enrichedGroups, query)
   $: groupUsers = buildGroupUsers(filteredGroups, filteredUsers)
   $: allUsers = [...filteredUsers, ...groupUsers]
-
-  /*
+  /*  
     Create pseudo users from the "users" attribute on app groups.
     These users will appear muted in the UI and show the ROLE
     inherited from their parent group. The users allow assigning of user 
@@ -291,21 +353,29 @@
   }
 
   async function inviteUser() {
-    if (!queryIsEmail) {
+    if (!validEmail) {
       notifications.error("Email is not valid")
       return
     }
-    const newUserEmail = query + ""
+    const newUserEmail = email + ""
     inviting = true
 
     const payload = [
       {
         email: newUserEmail,
-        builder: false,
-        admin: false,
-        apps: { [prodAppId]: Constants.Roles.BASIC },
+        builder: { global: creationRoleType === Constants.BudibaseRoles.Admin },
+        admin: { global: creationRoleType === Constants.BudibaseRoles.Admin },
       },
     ]
+
+    const notCreatingAdmin = creationRoleType !== Constants.BudibaseRoles.Admin
+    const isCreator = creationAccessType === Constants.Roles.CREATOR
+    if (notCreatingAdmin && isCreator) {
+      payload[0].builder.apps = [prodAppId]
+    } else if (notCreatingAdmin && !isCreator) {
+      payload[0].apps = { [prodAppId]: creationAccessType }
+    }
+
     let userInviteResponse
     try {
       userInviteResponse = await users.onboard(payload)
@@ -317,16 +387,23 @@
     return userInviteResponse
   }
 
+  const openInviteFlow = () => {
+    $licensing.userLimitReached
+      ? userLimitReachedModal.show()
+      : (invitingFlow = true)
+  }
+
   const onInviteUser = async () => {
+    form.validate()
     userOnboardResponse = await inviteUser()
-    const originalQuery = query + ""
-    query = null
+    const originalQuery = email + ""
+    email = null
 
     const newUser = userOnboardResponse?.successful.find(
       user => user.email === originalQuery
     )
     if (newUser) {
-      query = originalQuery
+      email = originalQuery
       notifications.success(
         userOnboardResponse.created
           ? "User created successfully"
@@ -344,16 +421,28 @@
       notifications.error(inviteFailureResponse)
     }
     userOnboardResponse = null
+    invitingFlow = false
+    // trigger reload of the users
+    query = ""
   }
 
   const onUpdateUserInvite = async (invite, role) => {
-    await users.updateInvite({
+    let updateBody = {
       code: invite.code,
       apps: {
         ...invite.apps,
         [prodAppId]: role,
       },
-    })
+    }
+
+    if (role === Constants.Roles.CREATOR) {
+      updateBody.builder = updateBody.builder || {}
+      updateBody.builder.apps = [...(updateBody.builder.apps ?? []), prodAppId]
+      delete updateBody?.apps?.[prodAppId]
+    } else if (role !== Constants.Roles.CREATOR && invite?.builder?.apps) {
+      invite.builder.apps = []
+    }
+    await users.updateInvite(updateBody)
     await filterInvites(query)
   }
 
@@ -373,6 +462,22 @@
     })
   }
 
+  const addAppBuilder = async userId => {
+    await users.addAppBuilder(userId, prodAppId)
+  }
+
+  const removeAppBuilder = async userId => {
+    await users.removeAppBuilder(userId, prodAppId)
+  }
+
+  const addGroupAppBuilder = async groupId => {
+    await groups.actions.addGroupAppBuilder(groupId, prodAppId)
+  }
+
+  const removeGroupAppBuilder = async groupId => {
+    await groups.actions.removeGroupAppBuilder(groupId, prodAppId)
+  }
+
   const initSidePanel = async sidePaneOpen => {
     if (sidePaneOpen === true) {
       await groups.actions.init()
@@ -383,19 +488,21 @@
   $: initSidePanel($store.builderSidePanel)
 
   function handleKeyDown(evt) {
-    if (evt.key === "Enter" && queryIsEmail && !inviting) {
+    if (evt.key === "Enter" && validEmail && !inviting) {
       onInviteUser()
     }
   }
 
-  const userTitle = user => {
-    if (sdk.users.isAdmin(user)) {
-      return "Admin"
-    } else if (sdk.users.isBuilder(user, prodAppId)) {
-      return "Developer"
-    } else {
-      return "App user"
+  const getInviteRoleValue = invite => {
+    if (invite.info?.admin?.global && invite.info?.builder?.global) {
+      return Constants.Roles.ADMIN
     }
+
+    if (invite.info?.builder?.apps?.includes(prodAppId)) {
+      return Constants.Roles.CREATOR
+    }
+
+    return invite.info.apps?.[prodAppId]
   }
 
   const getRoleFooter = user => {
@@ -403,7 +510,7 @@
       const role = $roles.find(role => role._id === user.role)
       return `This user has been given ${role?.name} access from the ${user.group} group`
     }
-    if (user.isAdminOrBuilder) {
+    if (user.isAdminOrGlobalBuilder) {
       return "This user's role grants admin access to all apps"
     }
     return null
@@ -423,227 +530,309 @@
   }}
 >
   <div class="builder-side-panel-header">
-    <Heading size="S">Users</Heading>
-    <Icon
-      color="var(--spectrum-global-color-gray-600)"
-      name="RailRightClose"
-      hoverable
+    <div
       on:click={() => {
-        store.update(state => {
-          state.builderSidePanel = false
-          return state
-        })
-      }}
-    />
-  </div>
-  <div class="search" class:focused={searchFocus}>
-    <span class="search-input">
-      <Input
-        placeholder={"Add users and groups to your app"}
-        autocomplete="off"
-        disabled={inviting}
-        value={query}
-        on:input={e => {
-          query = e.target.value.trim()
-        }}
-        on:focus={() => (searchFocus = true)}
-        on:blur={() => (searchFocus = false)}
-      />
-    </span>
-
-    <span
-      class="search-input-icon"
-      class:searching={query || !filterByAppAccess}
-      on:click={() => {
-        if (!filterByAppAccess) {
-          filterByAppAccess = true
-        }
-        if (!query) {
-          return
-        }
-        query = null
-        userOnboardResponse = null
-        filterByAppAccess = true
+        invitingFlow = false
       }}
+      class="header"
     >
-      <Icon name={!filterByAppAccess || query ? "Close" : "Search"} />
-    </span>
+      {#if invitingFlow}
+        <Icon name="BackAndroid" />
+      {/if}
+      <Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading>
+    </div>
+    <div class="header">
+      {#if !invitingFlow}
+        <Button on:click={openInviteFlow} size="S" cta>Invite user</Button>
+      {/if}
+      <Icon
+        color="var(--spectrum-global-color-gray-600)"
+        name="RailRightClose"
+        hoverable
+        on:click={() => {
+          store.update(state => {
+            state.builderSidePanel = false
+            return state
+          })
+        }}
+      />
+    </div>
   </div>
+  {#if !invitingFlow}
+    <div class="search" class:focused={searchFocus}>
+      <span class="search-input">
+        <Input
+          placeholder={"Add users and groups to your app"}
+          autocomplete="off"
+          disabled={inviting}
+          value={query}
+          on:input={e => {
+            query = e.target.value.trim()
+          }}
+          on:focus={() => (searchFocus = true)}
+          on:blur={() => (searchFocus = false)}
+        />
+      </span>
 
-  <div class="body">
-    {#if promptInvite && !userOnboardResponse}
-      <Layout gap="S" paddingX="XL">
-        <div class="invite-header">
-          <Heading size="XS">No user found</Heading>
-          <div class="invite-directions">
-            Add a valid email to invite a new user
-          </div>
-        </div>
-        <div class="invite-form">
-          <span>{query || ""}</span>
-          <ActionButton
-            icon="UserAdd"
-            disabled={!queryIsEmail || inviting}
-            on:click={$licensing.userLimitReached
-              ? userLimitReachedModal.show
-              : onInviteUser}
-          >
-            Add user
-          </ActionButton>
-        </div>
-      </Layout>
-    {/if}
+      <span
+        class="search-input-icon"
+        class:searching={query || !filterByAppAccess}
+        on:click={() => {
+          if (!query) {
+            return
+          }
+          query = null
+          userOnboardResponse = null
+        }}
+      >
+        <Icon name={!filterByAppAccess || query ? "Close" : "Search"} />
+      </span>
+    </div>
 
-    {#if !promptInvite}
-      <Layout gap="L" noPadding>
-        {#if filteredInvites?.length}
-          <Layout noPadding gap="XS">
-            <div class="auth-entity-header">
-              <div class="auth-entity-title">Pending invites</div>
-              <div class="auth-entity-access-title">Access</div>
-            </div>
-            {#each filteredInvites as invite}
-              <div class="auth-entity">
-                <div class="details">
-                  <div class="user-email" title={invite.email}>
-                    {invite.email}
-                  </div>
-                </div>
-                <div class="auth-entity-access">
-                  <RoleSelect
-                    placeholder={false}
-                    value={invite.info.apps?.[prodAppId]}
-                    allowRemove={invite.info.apps?.[prodAppId]}
-                    allowPublic={false}
-                    quiet={true}
-                    on:change={e => {
-                      onUpdateUserInvite(invite, e.detail)
-                    }}
-                    on:remove={() => {
-                      onUninviteAppUser(invite)
-                    }}
-                    autoWidth
-                    align="right"
-                  />
-                </div>
-              </div>
-            {/each}
-          </Layout>
-        {/if}
-
-        {#if $licensing.groupsEnabled && filteredGroups?.length}
-          <Layout noPadding gap="XS">
-            <div class="auth-entity-header">
-              <div class="auth-entity-title">Groups</div>
-              <div class="auth-entity-access-title">Access</div>
-            </div>
-            {#each filteredGroups as group}
-              <div
-                class="auth-entity group"
-                on:click={() => {
-                  if (selectedGroup != group._id) {
-                    selectedGroup = group._id
-                  } else {
-                    selectedGroup = null
-                  }
-                }}
-                on:keydown={() => {}}
+    <div class="body">
+      {#if promptInvite && !userOnboardResponse}
+        <Layout gap="S" paddingX="XL">
+          <div class="invite-header">
+            <Heading size="XS">No user found</Heading>
+            <div class="invite-directions">
+              Try searching a different email or <span
+                class="underlined"
+                on:click={openInviteFlow}>invite a new user</span
               >
-                <div class="details">
-                  <GroupIcon {group} size="S" />
-                  <div>
-                    {group.name}
-                  </div>
-                  <div class="auth-entity-meta">
-                    {`${group.users?.length} user${
-                      group.users?.length != 1 ? "s" : ""
-                    }`}
-                  </div>
-                </div>
-                <div class="auth-entity-access">
-                  <RoleSelect
-                    placeholder={false}
-                    value={group.role}
-                    allowRemove={group.role}
-                    allowPublic={false}
-                    quiet={true}
-                    on:change={e => {
-                      onUpdateGroup(group, e.detail)
-                    }}
-                    on:remove={() => {
-                      onUpdateGroup(group)
-                    }}
-                    autoWidth
-                    align="right"
-                  />
-                </div>
-              </div>
-            {/each}
-          </Layout>
-        {/if}
-
-        {#if filteredUsers?.length}
-          <div class="auth-entity-section">
-            <div class="auth-entity-header">
-              <div class="auth-entity-title">Users</div>
-              <div class="auth-entity-access-title">Access</div>
             </div>
-            {#each allUsers as user}
-              <div class="auth-entity">
-                <div class="details">
-                  <div class="user-email" title={user.email}>
-                    {user.email}
-                  </div>
-                  <div class="auth-entity-meta">
-                    {userTitle(user)}
-                  </div>
-                </div>
-                <div class="auth-entity-access" class:muted={user.group}>
-                  <RoleSelect
-                    footer={getRoleFooter(user)}
-                    placeholder={false}
-                    value={user.role}
-                    allowRemove={user.role && !user.group}
-                    allowPublic={false}
-                    quiet={true}
-                    on:change={e => {
-                      onUpdateUser(user, e.detail)
-                    }}
-                    on:remove={() => {
-                      onUpdateUser(user)
-                    }}
-                    autoWidth
-                    align="right"
-                    allowedRoles={user.isAdminOrBuilder
-                      ? [Constants.Roles.ADMIN]
-                      : null}
-                  />
-                </div>
-              </div>
-            {/each}
           </div>
-        {/if}
-      </Layout>
-    {/if}
+        </Layout>
+      {/if}
 
-    {#if userOnboardResponse?.created}
-      <Layout gap="S" paddingX="XL">
-        <div class="invite-header">
-          <Heading size="XS">User added!</Heading>
-          <div class="invite-directions">
-            Email invites are not available without SMTP configuration. Here is
-            the password that has been generated for this user.
+      {#if !promptInvite}
+        <Layout gap="L" noPadding>
+          {#if filteredInvites?.length}
+            <Layout noPadding gap="XS">
+              <div class="auth-entity-header">
+                <div class="auth-entity-title">Pending invites</div>
+                <div class="auth-entity-access-title">Access</div>
+              </div>
+              {#each filteredInvites as invite}
+                {@const user = {
+                  isAdminOrGlobalBuilder:
+                    invite.info?.admin?.global && invite.info?.builder?.global,
+                }}
+
+                <div class="auth-entity">
+                  <div class="details">
+                    <div class="user-email" title={invite.email}>
+                      {invite.email}
+                    </div>
+                  </div>
+                  <div class="auth-entity-access">
+                    <RoleSelect
+                      footer={getRoleFooter(user)}
+                      placeholder={false}
+                      value={getInviteRoleValue(invite)}
+                      allowRemove={invite.info.apps?.[prodAppId]}
+                      allowPublic={false}
+                      allowCreator={true}
+                      quiet={true}
+                      on:change={e => {
+                        onUpdateUserInvite(invite, e.detail)
+                      }}
+                      on:remove={() => {
+                        onUninviteAppUser(invite)
+                      }}
+                      autoWidth
+                      align="right"
+                      allowedRoles={user.isAdminOrGlobalBuilder
+                        ? [Constants.Roles.ADMIN]
+                        : null}
+                    />
+                  </div>
+                </div>
+              {/each}
+            </Layout>
+          {/if}
+
+          {#if $licensing.groupsEnabled && filteredGroups?.length}
+            <Layout noPadding gap="XS">
+              <div class="auth-entity-header">
+                <div class="auth-entity-title">Groups</div>
+                <div class="auth-entity-access-title">Access</div>
+              </div>
+              {#each filteredGroups as group}
+                <div
+                  class="auth-entity group"
+                  on:click={() => {
+                    if (selectedGroup != group._id) {
+                      selectedGroup = group._id
+                    } else {
+                      selectedGroup = null
+                    }
+                  }}
+                  on:keydown={() => {}}
+                >
+                  <div class="details">
+                    <GroupIcon {group} size="S" />
+                    <div>
+                      {group.name}
+                    </div>
+                    <div class="auth-entity-meta">
+                      {`${group.users?.length} user${
+                        group.users?.length != 1 ? "s" : ""
+                      }`}
+                    </div>
+                  </div>
+                  <div class="auth-entity-access">
+                    <RoleSelect
+                      placeholder={false}
+                      value={group.role}
+                      allowRemove={group.role}
+                      allowPublic={false}
+                      quiet={true}
+                      allowCreator={true}
+                      on:change={e => {
+                        if (e.detail === Constants.Roles.CREATOR) {
+                          addGroupAppBuilder(group._id)
+                        } else {
+                          onUpdateGroup(group, e.detail)
+                        }
+                      }}
+                      on:remove={() => {
+                        onUpdateGroup(group)
+                      }}
+                      autoWidth
+                      align="right"
+                    />
+                  </div>
+                </div>
+              {/each}
+            </Layout>
+          {/if}
+
+          {#if filteredUsers?.length}
+            <div class="auth-entity-section">
+              <div class="auth-entity-header">
+                <div class="auth-entity-title">Users</div>
+                <div class="auth-entity-access-title">Access</div>
+              </div>
+              {#each allUsers as user}
+                <div class="auth-entity">
+                  <div class="details">
+                    <div class="user-email" title={user.email}>
+                      {user.email}
+                    </div>
+                  </div>
+                  <div class="auth-entity-access" class:muted={user.group}>
+                    <RoleSelect
+                      footer={getRoleFooter(user)}
+                      placeholder={false}
+                      value={user.role}
+                      allowRemove={user.role && !user.group}
+                      allowPublic={false}
+                      allowCreator={true}
+                      quiet={true}
+                      on:addcreator={() => {}}
+                      on:change={e => {
+                        if (e.detail === Constants.Roles.CREATOR) {
+                          addAppBuilder(user._id)
+                        } else {
+                          onUpdateUser(user, e.detail)
+                        }
+                      }}
+                      on:remove={() => {
+                        onUpdateUser(user)
+                      }}
+                      autoWidth
+                      align="right"
+                      allowedRoles={user.isAdminOrGlobalBuilder
+                        ? [Constants.Roles.ADMIN]
+                        : null}
+                    />
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </Layout>
+      {/if}
+
+      {#if userOnboardResponse?.created}
+        <Layout gap="S" paddingX="XL">
+          <div class="invite-header">
+            <Heading size="XS">User added!</Heading>
+            <div class="invite-directions">
+              Email invites are not available without SMTP configuration. Here
+              is the password that has been generated for this user.
+            </div>
           </div>
-        </div>
-        <div>
-          <CopyInput
-            value={userOnboardResponse.successful[0]?.password}
-            label="Password"
-          />
+          <div>
+            <CopyInput
+              value={userOnboardResponse.successful[0]?.password}
+              label="Password"
+            />
+          </div>
+        </Layout>
+      {/if}
+    </div>
+  {:else}
+    <Divider />
+    <div class="body">
+      <Layout gap="L" noPadding>
+        <div class="user-invite-form">
+          <FancyForm bind:this={form}>
+            <FancyInput
+              disabled={false}
+              label="Email"
+              value={email}
+              on:change={e => {
+                email = e.detail
+              }}
+              validate={() => {
+                if (!email) {
+                  return "Please enter an email"
+                }
+                return null
+              }}
+              {error}
+            />
+            <FancySelect
+              bind:value={creationRoleType}
+              options={sdk.users.isAdmin($auth.user)
+                ? Constants.BudibaseRoleOptionsNew
+                : Constants.BudibaseRoleOptionsNew.filter(
+                    option => option.value !== Constants.BudibaseRoles.Admin
+                  )}
+              label="Role"
+            />
+            {#if creationRoleType !== Constants.BudibaseRoles.Admin}
+              <RoleSelect
+                placeholder={false}
+                bind:value={creationAccessType}
+                allowPublic={false}
+                allowCreator={true}
+                quiet={true}
+                autoWidth
+                align="right"
+                fancySelect
+              />
+            {/if}
+          </FancyForm>
+          {#if creationRoleType === Constants.BudibaseRoles.Admin}
+            <div class="admin-info">
+              <Icon name="Info" />
+              Admins will get full access to all apps and settings
+            </div>
+          {/if}
+          <span class="add-user">
+            <Button
+              newStyles
+              cta
+              disabled={!email?.length}
+              on:click={onInviteUser}>Add user</Button
+            >
+          </span>
         </div>
       </Layout>
-    {/if}
-  </div>
+    </div>
+  {/if}
   <Modal bind:this={userLimitReachedModal}>
     <UpgradeModal {isOwner} />
   </Modal>
@@ -659,6 +848,27 @@
     align-items: center;
   }
 
+  .add-user {
+    padding-top: var(--spacing-xl);
+    width: 100%;
+    display: grid;
+  }
+
+  .admin-info {
+    margin-top: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--spacing-l);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xl);
+    height: 30px;
+    background-color: var(--background-alt);
+  }
+
+  .underlined {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
   .search-input {
     flex: 1;
   }
@@ -746,12 +956,6 @@
     box-sizing: border-box;
   }
 
-  .invite-form {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
   #builder-side-panel-container .search {
     padding-top: var(--spacing-m);
     padding-bottom: var(--spacing-m);
@@ -798,6 +1002,16 @@
     flex-direction: column;
   }
 
+  .header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+
+  .user-invite-form {
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  }
+
   .body {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
index 20b1b0ce7d..414722a177 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import TableDataTable from "components/backend/DataTable/DataTable.svelte"
+  import TableDataTable from "components/backend/DataTable/TableDataTable.svelte"
   import { tables, database } from "stores/backend"
   import { Banner } from "@budibase/bbui"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
index 7c0483fe1a..0a2fc3c32d 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/index.svelte
@@ -1,14 +1,17 @@
 <script>
   import { onMount } from "svelte"
-  import { views } from "stores/backend"
+  import { views, viewsV2 } from "stores/backend"
   import { redirect } from "@roxi/routify"
 
   onMount(async () => {
-    const { list, selected } = $views
-    if (selected) {
-      $redirect(`./${encodeURIComponent(selected?.name)}`)
-    } else if (list?.length) {
-      $redirect(`./${encodeURIComponent(list[0].name)}`)
+    if ($viewsV2.selected) {
+      $redirect(`./v2/${$viewsV2.selected.id}`)
+    } else if ($viewsV2.list?.length) {
+      $redirect(`./v2/${$viewsV2.list[0].id}`)
+    } else if ($views.selected) {
+      $redirect(`./${encodeURIComponent($views.selected?.name)}`)
+    } else if ($views.list?.length) {
+      $redirect(`./${encodeURIComponent($views.list[0].name)}`)
     } else {
       $redirect("../")
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/_layout.svelte
similarity index 81%
rename from packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/_layout.svelte
rename to packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/_layout.svelte
index f2e0aee868..7f4fc9c597 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/_layout.svelte
@@ -5,15 +5,15 @@
   import { onDestroy } from "svelte"
   import { store } from "builderStore"
 
-  $: viewName = $views.selectedViewName
-  $: store.actions.websocket.selectResource(viewName)
+  $: name = $views.selectedViewName
+  $: store.actions.websocket.selectResource(name)
 
   const stopSyncing = syncURLToState({
     urlParam: "viewName",
     stateKey: "selectedViewName",
     validate: name => $views.list?.some(view => view.name === name),
     update: views.select,
-    fallbackUrl: "../",
+    fallbackUrl: "../../",
     store: views,
     routify,
     decode: decodeURIComponent,
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/data/view/[viewName]/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/data/view/v1/[viewName]/index.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v1/index.svelte
similarity index 70%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
rename to packages/builder/src/pages/builder/app/[application]/data/view/v1/index.svelte
index 00165e4ee9..c11ca87023 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/v1/index.svelte
@@ -1,5 +1,5 @@
 <script>
   import { redirect } from "@roxi/routify"
 
-  $redirect("../screens")
+  $redirect("../")
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/_layout.svelte
new file mode 100644
index 0000000000..8ddd6adbd0
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/_layout.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { viewsV2 } from "stores/backend"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+  import { store } from "builderStore"
+
+  $: id = $viewsV2.selectedViewId
+  $: store.actions.websocket.selectResource(id)
+
+  const stopSyncing = syncURLToState({
+    urlParam: "viewId",
+    stateKey: "selectedViewId",
+    validate: id => $viewsV2.list?.some(view => view.id === id),
+    update: viewsV2.select,
+    fallbackUrl: "../../",
+    store: viewsV2,
+    routify,
+    decode: decodeURIComponent,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/index.svelte
new file mode 100644
index 0000000000..c2281710ba
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewId]/index.svelte
@@ -0,0 +1,5 @@
+<script>
+  import ViewV2DataTable from "components/backend/DataTable/ViewV2DataTable.svelte"
+</script>
+
+<ViewV2DataTable />
diff --git a/packages/builder/src/pages/builder/app/[application]/data/view/v2/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/view/v2/index.svelte
new file mode 100644
index 0000000000..c11ca87023
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/view/v2/index.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { redirect } from "@roxi/routify"
+
+  $redirect("../")
+</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
new file mode 100644
index 0000000000..e73e6d7841
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { DetailSummary } from "@budibase/bbui"
+  import InfoDisplay from "./InfoDisplay.svelte"
+  export let componentDefinition
+</script>
+
+<DetailSummary collapsible={false} noPadding={true}>
+  <InfoDisplay
+    title={componentDefinition.name}
+    body={componentDefinition.info}
+  />
+</DetailSummary>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
similarity index 93%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 2ff605cc77..581e69cfaf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -5,7 +5,7 @@
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
-  import ComponentInfoSection from "./ComponentInfoSection.svelte"
+
   import {
     getBindableProperties,
     getComponentBindableProperties,
@@ -55,9 +55,6 @@
         </div>
       </span>
       {#if section == "settings"}
-        {#if componentDefinition?.info}
-          <ComponentInfoSection {componentDefinition} />
-        {/if}
         <ComponentSettingsSection
           {componentInstance}
           {componentDefinition}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
similarity index 85%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 78eecea76e..b4ed8995a0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -6,6 +6,7 @@
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
   import { getComponentForSetting } from "components/design/settings/componentSettings"
+  import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
 
   export let componentDefinition
@@ -13,6 +14,9 @@
   export let bindings
   export let componentBindings
   export let isScreen = false
+  export let onUpdateSetting
+  export let showSectionTitle = true
+  export let showInstanceName = true
 
   $: sections = getSections(componentInstance, componentDefinition, isScreen)
 
@@ -47,8 +51,11 @@
 
   const updateSetting = async (setting, value) => {
     try {
-      await store.actions.components.updateSetting(setting.key, value)
-
+      if (typeof onUpdateSetting === "function") {
+        await onUpdateSetting(setting, value)
+      } else {
+        await store.actions.components.updateSetting(setting.key, value)
+      }
       // Send event if required
       if (setting.sendEvents) {
         analytics.captureEvent(Events.COMPONENT_UPDATED, {
@@ -97,7 +104,7 @@
       }
     }
 
-    return true
+    return typeof setting.visible == "boolean" ? setting.visible : true
   }
 
   const canRenderControl = (instance, setting, isScreen) => {
@@ -116,9 +123,22 @@
 
 {#each sections as section, idx (section.name)}
   {#if section.visible}
-    <DetailSummary name={section.name} collapsible={false}>
+    <DetailSummary
+      name={showSectionTitle ? section.name : ""}
+      collapsible={false}
+    >
+      {#if section.info}
+        <div class="section-info">
+          <InfoDisplay body={section.info} />
+        </div>
+      {:else if idx === 0 && section.name === "General" && componentDefinition.info}
+        <InfoDisplay
+          title={componentDefinition.name}
+          body={componentDefinition.info}
+        />
+      {/if}
       <div class="settings">
-        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
+        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen && showInstanceName}
           <PropertyControl
             control={Input}
             label="Name"
@@ -157,6 +177,8 @@
               {componentBindings}
               {componentInstance}
               {componentDefinition}
+              on:drawerShow
+              on:drawerHide
             />
           {/if}
         {/each}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
new file mode 100644
index 0000000000..03bf771beb
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let title
+  export let body
+  export let icon = "HelpOutline"
+</script>
+
+<div class="info" class:noTitle={!title}>
+  {#if title}
+    <div class="title">
+      <Icon name={icon} />
+      {title || ""}
+    </div>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html body}
+  {:else}
+    <span class="icon">
+      <Icon name={icon} />
+    </span>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html body}
+  {/if}
+</div>
+
+<style>
+  .title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: var(--spacing-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .title,
+  .icon {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .info {
+    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l) var(--spacing-l);
+    background-color: var(--background-alt);
+    border-radius: var(--border-radius-s);
+    font-size: 13px;
+  }
+  .noTitle {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .info :global(a) {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .info :global(a:hover) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .info :global(a) {
+    text-decoration: underline;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
similarity index 75%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
index 895c82495d..b081ea6d72 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Button, Drawer } from "@budibase/bbui"
-  import NavigationLinksDrawer from "./NavigationLinksDrawer.svelte"
+  import NavigationLinksDrawer from "./LinksDrawer.svelte"
   import { cloneDeep } from "lodash/fp"
   import { store } from "builderStore"
 
@@ -20,12 +20,8 @@
   }
 </script>
 
-<Button cta on:click={openDrawer}>Configure links</Button>
-<Drawer
-  bind:this={drawer}
-  title={"Navigation Links"}
-  width="calc(100% - 334px)"
->
+<Button cta on:click={openDrawer}>Configure Links</Button>
+<Drawer bind:this={drawer} title={"Navigation Links"}>
   <svelte:fragment slot="description">
     Configure the links in your navigation bar.
   </svelte:fragment>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
new file mode 100644
index 0000000000..383026c4f8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -0,0 +1,225 @@
+<script>
+  import LinksEditor from "./LinksEditor.svelte"
+  import { get } from "svelte/store"
+  import Panel from "components/design/Panel.svelte"
+  import {
+    Detail,
+    Toggle,
+    Body,
+    Icon,
+    ColorPicker,
+    Input,
+    Label,
+    ActionGroup,
+    ActionButton,
+    Checkbox,
+    notifications,
+    Select,
+  } from "@budibase/bbui"
+  import { selectedScreen, store } from "builderStore"
+  import { DefaultAppTheme } from "constants"
+
+  const updateShowNavigation = async e => {
+    await store.actions.screens.updateSetting(
+      get(selectedScreen),
+      "showNavigation",
+      e.detail
+    )
+  }
+
+  const update = async (key, value) => {
+    try {
+      let navigation = $store.navigation
+      navigation[key] = value
+      await store.actions.navigation.save(navigation)
+    } catch (error) {
+      notifications.error("Error updating navigation settings")
+    }
+  }
+</script>
+
+<Panel
+  title="Navigation"
+  icon={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
+  borderLeft
+  wide
+>
+  <div class="generalSection">
+    <div class="subheading">
+      <Detail>General</Detail>
+    </div>
+    <div class="toggle">
+      <Toggle
+        on:change={updateShowNavigation}
+        value={$selectedScreen.showNavigation}
+      />
+      <Body size="S">Show nav on this screen</Body>
+    </div>
+  </div>
+
+  {#if $selectedScreen.showNavigation}
+    <div class="divider" />
+    <div class="customizeSection">
+      <div class="subheading">
+        <Detail>Customize</Detail>
+      </div>
+      <div class="info">
+        <Icon name="InfoOutline" size="S" />
+        <Body size="S">These settings apply to all screens</Body>
+      </div>
+      <div class="configureLinks">
+        <LinksEditor />
+      </div>
+      <div class="controls">
+        <div class="label">
+          <Label size="M">Position</Label>
+        </div>
+        <ActionGroup quiet>
+          <ActionButton
+            selected={$store.navigation.navigation === "Top"}
+            quiet={$store.navigation.navigation !== "Top"}
+            icon="PaddingTop"
+            on:click={() => update("navigation", "Top")}
+          />
+          <ActionButton
+            selected={$store.navigation.navigation === "Left"}
+            quiet={$store.navigation.navigation !== "Left"}
+            icon="PaddingLeft"
+            on:click={() => update("navigation", "Left")}
+          />
+        </ActionGroup>
+
+        {#if $store.navigation.navigation === "Top"}
+          <div class="label">
+            <Label size="M">Sticky header</Label>
+          </div>
+          <Checkbox
+            value={$store.navigation.sticky}
+            on:change={e => update("sticky", e.detail)}
+          />
+          <div class="label">
+            <Label size="M">Width</Label>
+          </div>
+          <Select
+            options={["Max", "Large", "Medium", "Small"]}
+            plaveholder={null}
+            value={$store.navigation.navWidth}
+            on:change={e => update("navWidth", e.detail)}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show logo</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideLogo}
+          on:change={e => update("hideLogo", !e.detail)}
+        />
+        {#if !$store.navigation.hideLogo}
+          <div class="label">
+            <Label size="M">Logo URL</Label>
+          </div>
+          <Input
+            value={$store.navigation.logoUrl}
+            on:change={e => update("logoUrl", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show title</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideTitle}
+          on:change={e => update("hideTitle", !e.detail)}
+        />
+        {#if !$store.navigation.hideTitle}
+          <div class="label">
+            <Label size="M">Title</Label>
+          </div>
+          <Input
+            value={$store.navigation.title}
+            on:change={e => update("title", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label>Background</Label>
+        </div>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navBackground ||
+            DefaultAppTheme.navBackground}
+          on:change={e => update("navBackground", e.detail)}
+        />
+        <div class="label">
+          <Label>Text</Label>
+        </div>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
+          on:change={e => update("navTextColor", e.detail)}
+        />
+      </div>
+    </div>
+  {/if}
+</Panel>
+
+<style>
+  .generalSection {
+    padding: 13px 13px 25px;
+  }
+
+  .customizeSection {
+    padding: 13px 13px 25px;
+  }
+  .subheading {
+    margin-bottom: 10px;
+  }
+
+  .subheading :global(p) {
+    color: var(--grey-6);
+  }
+
+  .toggle {
+    display: flex;
+    align-items: center;
+  }
+
+  .divider {
+    border-top: 1px solid var(--grey-3);
+  }
+
+  .controls {
+    position: relative;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    align-items: start;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    border-left: 4px solid transparent;
+    margin: 0 calc(-1 * var(--spacing-xl));
+    padding: 0 var(--spacing-xl) 0 calc(var(--spacing-xl) - 4px);
+    gap: 12px;
+  }
+
+  .label {
+    margin-top: 16px;
+    transform: translateY(-50%);
+  }
+
+  .info {
+    background-color: var(--background-alt);
+    padding: 12px;
+    display: flex;
+    border-radius: 4px;
+    gap: 4px;
+    margin-bottom: 16px;
+  }
+  .info :global(svg) {
+    margin-right: 5px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .configureLinks :global(button) {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ButtonRoundnessSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ButtonRoundnessSelect.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
similarity index 72%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 8982cd20de..a08ded8eee 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -1,12 +1,8 @@
 <script>
-  import Panel from "components/design/Panel.svelte"
   import { get } from "svelte/store"
   import { Helpers } from "@budibase/bbui"
   import {
     Input,
-    Layout,
-    Button,
-    Toggle,
     Checkbox,
     Banner,
     Select,
@@ -16,7 +12,6 @@
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { goto } from "@roxi/routify"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "builderStore/dataBinding"
 
@@ -119,15 +114,6 @@
       label: "On screen load",
       control: ButtonActionEditor,
     },
-    {
-      key: "showNavigation",
-      label: "Navigation",
-      control: Toggle,
-      props: {
-        text: "Show nav",
-        disabled: !!$selectedScreen.layoutId,
-      },
-    },
     {
       key: "width",
       label: "Width",
@@ -145,36 +131,24 @@
   }
 </script>
 
-<Panel
-  title={$selectedScreen.routing.route}
-  icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
-  borderLeft
-  wide
->
-  <Layout gap="S" paddingX="L" paddingY="XL">
-    {#if $selectedScreen.layoutId}
-      <Banner
-        type="warning"
-        extraButtonText="Detach custom layout"
-        extraButtonAction={removeCustomLayout}
-        showCloseButton={false}
-      >
-        This screen uses a custom layout, which is deprecated
-      </Banner>
-    {/if}
-    {#each screenSettings as setting (setting.key)}
-      <PropertyControl
-        control={setting.control}
-        label={setting.label}
-        key={setting.key}
-        value={Helpers.deepGet($selectedScreen, setting.key)}
-        onChange={val => setScreenSetting(setting, val)}
-        props={{ ...setting.props, error: errors[setting.key] }}
-        {bindings}
-      />
-    {/each}
-    <Button secondary on:click={() => $goto("../components")}>
-      View components
-    </Button>
-  </Layout>
-</Panel>
+{#if $selectedScreen.layoutId}
+  <Banner
+    type="warning"
+    extraButtonText="Detach custom layout"
+    extraButtonAction={removeCustomLayout}
+    showCloseButton={false}
+  >
+    This screen uses a custom layout, which is deprecated
+  </Banner>
+{/if}
+{#each screenSettings as setting (setting.key)}
+  <PropertyControl
+    control={setting.control}
+    label={setting.label}
+    key={setting.key}
+    value={Helpers.deepGet($selectedScreen, setting.key)}
+    onChange={val => setScreenSetting(setting, val)}
+    props={{ ...setting.props, error: errors[setting.key] }}
+    {bindings}
+  />
+{/each}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
new file mode 100644
index 0000000000..13a008fae0
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
@@ -0,0 +1,78 @@
+<script>
+  import {
+    Layout,
+    Label,
+    ColorPicker,
+    notifications,
+    Icon,
+    Body,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { get } from "svelte/store"
+  import { DefaultAppTheme } from "constants"
+  import AppThemeSelect from "./AppThemeSelect.svelte"
+  import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
+  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+
+  $: customTheme = $store.customTheme || {}
+
+  const update = async (property, value) => {
+    try {
+      store.actions.customTheme.save({
+        ...get(store).customTheme,
+        [property]: value,
+      })
+    } catch (error) {
+      notifications.error("Error updating custom theme")
+    }
+  }
+</script>
+
+<div class="info">
+  <Icon name="InfoOutline" size="S" />
+  <Body size="S">These settings apply to all screens</Body>
+</div>
+<Layout noPadding gap="S">
+  <Layout noPadding gap="XS">
+    <AppThemeSelect />
+  </Layout>
+  <Layout noPadding gap="XS">
+    <Label>Button roundness</Label>
+    <ButtonRoundnessSelect
+      {customTheme}
+      on:change={e => update("buttonBorderRadius", e.detail)}
+    />
+  </Layout>
+  <PropertyControl
+    label="Accent color"
+    control={ColorPicker}
+    value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
+    onChange={val => update("primaryColor", val)}
+    props={{
+      spectrumTheme: $store.theme,
+    }}
+  />
+  <PropertyControl
+    label="Hover"
+    control={ColorPicker}
+    value={customTheme.primaryColorHover || DefaultAppTheme.primaryColorHover}
+    onChange={val => update("primaryColorHover", val)}
+    props={{
+      spectrumTheme: $store.theme,
+    }}
+  />
+</Layout>
+
+<style>
+  .info {
+    background-color: var(--background-alt);
+    padding: 12px;
+    display: flex;
+    border-radius: 4px;
+    gap: 4px;
+  }
+  .info :global(svg) {
+    margin-right: 5px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
new file mode 100644
index 0000000000..778fa303cc
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
@@ -0,0 +1,51 @@
+<script>
+  import GeneralPanel from "./GeneralPanel.svelte"
+  import ThemePanel from "./ThemePanel.svelte"
+  import { selectedScreen } from "builderStore"
+  import Panel from "components/design/Panel.svelte"
+  import { capitalise } from "helpers"
+  import { ActionButton, Layout } from "@budibase/bbui"
+
+  let activeTab = "general"
+  const tabs = ["general", "theme"]
+</script>
+
+<Panel
+  title={$selectedScreen.routing.route}
+  icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
+  borderLeft
+  wide
+>
+  <div slot="panel-header-content">
+    <div class="settings-tabs">
+      {#each tabs as tab}
+        <ActionButton
+          size="M"
+          quiet
+          selected={activeTab === tab}
+          on:click={() => {
+            activeTab = tab
+          }}
+        >
+          {capitalise(tab)}
+        </ActionButton>
+      {/each}
+    </div>
+  </div>
+  <Layout gap="S" paddingX="L" paddingY="XL">
+    {#if activeTab === "theme"}
+      <ThemePanel />
+    {:else}
+      <GeneralPanel />
+    {/if}
+  </Layout>
+</Panel>
+
+<style>
+  .settings-tabs {
+    display: flex;
+    gap: var(--spacing-s);
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
new file mode 100644
index 0000000000..19cb1d8dff
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { syncURLToState } from "helpers/urlStateSync"
+  import { store, selectedScreen } from "builderStore"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+  import { findComponent } from "builderStore/componentUtils"
+  import ComponentSettingsPanel from "./_components/Component/ComponentSettingsPanel.svelte"
+  import NavigationPanel from "./_components/Navigation/index.svelte"
+  import ScreenSettingsPanel from "./_components/Screen/index.svelte"
+
+  $: componentId = $store.selectedComponentId
+  $: store.actions.websocket.selectResource(componentId)
+  $: params = routify.params
+  $: routeComponentId = $params.componentId
+
+  // Hide new component panel whenever component ID changes
+  const closeNewComponentPanel = url => {
+    if (url?.endsWith("/new")) {
+      url = url.replace("/new", "")
+    }
+    return { url }
+  }
+
+  const validate = id => {
+    if (id === `${$store.selectedScreenId}-screen`) return true
+    if (id === `${$store.selectedScreenId}-navigation`) return true
+
+    return !!findComponent($selectedScreen.props, id)
+  }
+
+  // Keep URL and state in sync for selected component ID
+  const stopSyncing = syncURLToState({
+    urlParam: "componentId",
+    stateKey: "selectedComponentId",
+    validate,
+    fallbackUrl: "../",
+    store,
+    routify,
+    beforeNavigate: closeNewComponentPanel,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+{#if routeComponentId === `${$store.selectedScreenId}-screen`}
+  <ScreenSettingsPanel />
+{:else if routeComponentId === `${$store.selectedScreenId}-navigation`}
+  <NavigationPanel />
+{:else}
+  <ComponentSettingsPanel />
+{/if}
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
new file mode 100644
index 0000000000..0ff63d1ead
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
@@ -0,0 +1 @@
+<!-- Required to make Routify happy -->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
similarity index 98%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index 7dca5b792b..248bbc8141 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -31,6 +31,10 @@
   $: orderMap = createComponentOrderMap(componentList)
 
   const getAllowedComponents = (allComponents, screen, component) => {
+    // Default to using the root screen container if no component specified
+    if (!component) {
+      component = screen.props
+    }
     const path = findComponentPath(screen?.props, component?._id)
     if (!path?.length) {
       return []
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 785b221239..09f97302fd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -1,32 +1,16 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store, sortedScreens, screenHistoryStore } from "builderStore"
-  import { Select } from "@budibase/bbui"
-  import { RoleUtils } from "@budibase/frontend-core"
+  import { store, screenHistoryStore } from "builderStore"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
-  import { isActive } from "@roxi/routify"
 </script>
 
 <div class="app-panel">
   <div class="header">
     <div class="header-left">
-      <Select
-        placeholder={null}
-        options={$sortedScreens}
-        getOptionLabel={x => x.routing.route}
-        getOptionValue={x => x._id}
-        getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
-        value={$store.selectedScreenId}
-        on:change={e => store.actions.screens.select(e.detail)}
-        quiet
-        autoWidth
-      />
+      <UndoRedoControl store={screenHistoryStore} />
     </div>
     <div class="header-right">
-      {#if $isActive("./screens") || $isActive("./components")}
-        <UndoRedoControl store={screenHistoryStore} />
-      {/if}
       {#if $store.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
@@ -47,37 +31,24 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
-    padding: var(--spacing-l) var(--spacing-xl);
+    padding: 9px var(--spacing-m);
   }
   .header {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-l);
-    margin: 0 2px;
-    z-index: 1;
+    margin-bottom: 9px;
+  }
+
+  .header-left :global(div) {
+    border-right: none;
   }
-  .header-left,
   .header-right {
+    margin-left: auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
   }
-  .header-left {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .header-left :global(> *) {
-    max-width: 100%;
-  }
-  .header-left :global(.spectrum-Picker) {
-    font-weight: 600;
-    color: var(--spectrum-global-color-gray-900);
-  }
   .content {
     flex: 1 1 auto;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 23b6ff5586..45fe005ceb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,13 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import {
-    store,
-    selectedComponent,
-    selectedScreen,
-    selectedLayout,
-    currentAsset,
-  } from "builderStore"
+  import { store, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -20,12 +14,10 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
-  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
 
   let iframe
   let layout
   let screen
-  let selectedComponentId
   let confirmDeleteDialog
   let idToDelete
   let loading = true
@@ -39,36 +31,11 @@
     BUDIBASE: "type",
   }
 
-  const placeholderScreen = new Screen()
-    .name("Screen Placeholder")
-    .route("/")
-    .component("@budibase/standard-components/screenslot")
-    .instanceName("Content Placeholder")
-    .normalStyle({ flex: "1 1 auto" })
-    .json()
-
   // Extract data to pass to the iframe
-  $: {
-    // If viewing legacy layouts, always show the custom layout
-    if ($isActive("./layouts")) {
-      screen = placeholderScreen
-      layout = $selectedLayout
-    } else {
-      screen = $selectedScreen
-      layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
-    }
-  }
+  $: screen = $selectedScreen
 
   // Determine selected component ID
-  $: {
-    if ($isActive("./components")) {
-      selectedComponentId = $store.selectedComponentId
-    } else if ($isActive("./navigation")) {
-      selectedComponentId = "navigation"
-    } else {
-      selectedComponentId = null
-    }
-  }
+  $: selectedComponentId = $store.selectedComponentId
 
   $: previewData = {
     appId: $store.appId,
@@ -98,9 +65,7 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(
-    `./components/${$selectedComponent?._id}/new`
-  )
+  $: isAddingComponent = $isActive(`./${selectedComponentId}/new`)
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -152,9 +117,6 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
-      if (!$isActive("./components")) {
-        $goto("./components")
-      }
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {
@@ -194,10 +156,6 @@
         store.actions.components.copy(source, true, false)
         await store.actions.components.paste(destination, data.mode)
       }
-    } else if (type === "click-nav") {
-      if (!$isActive("./navigation")) {
-        $goto("./navigation")
-      }
     } else if (type === "request-add-component") {
       toggleAddComponent()
     } else if (type === "highlight-setting") {
@@ -247,11 +205,10 @@
   }
 
   const toggleAddComponent = () => {
-    if (isAddingComponent) {
-      $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
+    if ($isActive(`./:componentId/new`)) {
+      $goto(`./:componentId`)
     } else {
-      const id = $selectedComponent?._id || $selectedScreen?.props?._id
-      $goto(`../${$selectedScreen._id}/components/${id}/new`)
+      $goto(`./:componentId/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
similarity index 90%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index 4813757727..b6957f64f3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -5,7 +5,6 @@
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { isBuilderInputFocused } from "helpers"
 
   let confirmDeleteDialog
   let confirmEjectDialog
@@ -37,7 +36,7 @@
       confirmEjectDialog.show()
     },
     ["Ctrl+Enter"]: () => {
-      $goto("./new")
+      $goto(`./:componentId/new`)
     },
     ["Delete"]: component => {
       // Don't show confirmation for the screen itself
@@ -54,8 +53,8 @@
       store.actions.components.selectNext()
     },
     ["Escape"]: () => {
-      if ($isActive("./new")) {
-        $goto("./")
+      if ($isActive(`./:componentId/new`)) {
+        $goto(`./${$store.selectedComponentId}`)
       }
     },
   }
@@ -85,10 +84,13 @@
       const handler = keyHandlers[key]
       if (!handler) {
         return false
-      } else if (event) {
+      }
+
+      if (event && key !== "Escape") {
         event.preventDefault()
         event.stopPropagation()
       }
+
       return await handler(component)
     } catch (error) {
       notifications.error(error || "Error handling key press")
@@ -101,7 +103,13 @@
       return
     }
     // Ignore events when typing
-    if (isBuilderInputFocused(e)) {
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    const inCodeEditor =
+      document.activeElement?.classList?.contains("cm-content")
+    if (
+      (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
+      e.key !== "Escape"
+    ) {
       return
     }
     // Key events are always for the selected component
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
similarity index 93%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
index 15ba7acecf..484b56f21c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
@@ -9,14 +9,14 @@
     if (!bounds) {
       return
     }
-    const sidebarWidth = 259
+    const sidebarWidth = 310
     const navItemHeight = 32
     const { scrollLeft, scrollTop, offsetHeight } = scrollRef
     let scrollBounds = scrollRef.getBoundingClientRect()
     let newOffsets = {}
 
     // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft - 36
+    const offsetX = bounds.left + bounds.width + scrollLeft + 16
     if (offsetX > sidebarWidth) {
       newOffsets.left = offsetX - sidebarWidth
     } else {
@@ -64,6 +64,7 @@
 </script>
 
 <div
+  on:scroll
   bind:this={scrollRef}
   on:drop={onDrop}
   ondragover="return false"
@@ -74,7 +75,6 @@
 
 <style>
   div {
-    padding: var(--spacing-xl) 0;
     flex: 1 1 auto;
     overflow: auto;
     height: 0;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
similarity index 98%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 18319e4b33..0e23f82946 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -107,6 +107,7 @@
       id={`component-${component._id}`}
     >
       <NavItem
+        compact
         scrollable
         draggable
         on:dragend={dndStore.actions.reset}
@@ -117,7 +118,7 @@
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
         withArrow={componentHasChildren(component)}
-        indentLevel={level + 1}
+        indentLevel={level}
         selected={$store.selectedComponentId === component._id}
         {opened}
         highlighted={isChildOfSelectedComponent(component)}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
new file mode 100644
index 0000000000..7851fe61f8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -0,0 +1,163 @@
+<script>
+  import { notifications, Icon, Body } from "@budibase/bbui"
+  import { isActive, goto } from "@roxi/routify"
+  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import ComponentTree from "./ComponentTree.svelte"
+  import { dndStore } from "./dndStore.js"
+  import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
+  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
+  import { DropPosition } from "./dndStore"
+  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
+  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
+
+  let scrolling = false
+
+  const toNewComponentRoute = () => {
+    if ($isActive(`./:componentId/new`)) {
+      $goto(`./:componentId`)
+    } else {
+      $goto(`./:componentId/new`)
+    }
+  }
+
+  const onDrop = async () => {
+    try {
+      await dndStore.actions.drop()
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error saving component")
+    }
+  }
+
+  const handleScroll = e => {
+    scrolling = e.target.scrollTop !== 0
+  }
+</script>
+
+<div class="components">
+  <div class="header" class:scrolling>
+    <Body size="S">Components</Body>
+    <div on:click={toNewComponentRoute} class="addButton">
+      <Icon name="Add" />
+    </div>
+  </div>
+  <div class="list-panel">
+    <ComponentScrollWrapper on:scroll={handleScroll}>
+      <ul>
+        <li>
+          <NavItem
+            text="Screen"
+            indentLevel={0}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-screen`}
+            opened
+            scrollable
+            icon="WebPage"
+            on:drop={onDrop}
+            on:click={() => {
+              $store.selectedComponentId = `${$store.selectedScreenId}-screen`
+            }}
+            id={`component-screen`}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-screen`
+            ]}
+          >
+            <ScreenslotDropdownMenu component={$selectedScreen?.props} />
+          </NavItem>
+          <NavItem
+            text="Navigation"
+            indentLevel={0}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-navigation`}
+            opened
+            scrollable
+            icon={$selectedScreen.showNavigation
+              ? "Visibility"
+              : "VisibilityOff"}
+            on:drop={onDrop}
+            on:click={() => {
+              $store.selectedComponentId = `${$store.selectedScreenId}-navigation`
+            }}
+            id={`component-nav`}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-navigation`
+            ]}
+          />
+          <ComponentTree
+            level={0}
+            components={$selectedScreen?.props._children}
+          />
+
+          <!-- Show drop indicators for the target and the parent -->
+          {#if $dndStore.dragging && $dndStore.valid}
+            <DNDPositionIndicator
+              component={$dndStore.target}
+              position={$dndStore.dropPosition}
+            />
+            {#if $dndStore.dropPosition !== DropPosition.INSIDE}
+              <DNDPositionIndicator
+                component={$dndStore.targetParent}
+                position={DropPosition.INSIDE}
+              />
+            {/if}
+          {/if}
+        </li>
+      </ul>
+    </ComponentScrollWrapper>
+  </div>
+  <ComponentKeyHandler />
+</div>
+
+<style>
+  .components {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .header {
+    height: 50px;
+    box-sizing: border-box;
+    padding: var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 130ms ease-out;
+  }
+  .header.scrolling {
+    border-bottom: var(--border-light);
+  }
+
+  .components :global(.nav-item) {
+    padding-right: 8px !important;
+  }
+
+  .addButton {
+    margin-left: auto;
+    color: var(--grey-7);
+    cursor: pointer;
+  }
+
+  .addButton:hover {
+    color: var(--ink);
+  }
+
+  .list-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    position: relative;
+  }
+  ul,
+  li {
+    min-width: max-content;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
new file mode 100644
index 0000000000..96d4579eeb
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -0,0 +1,21 @@
+<script>
+  import ScreenList from "./ScreenList/index.svelte"
+  import ComponentList from "./ComponentList/index.svelte"
+</script>
+
+<div class="panel">
+  <ScreenList />
+  <ComponentList />
+</div>
+
+<style>
+  .panel {
+    width: 310px;
+    height: 100%;
+    border-right: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    position: relative;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
similarity index 97%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
index fd5ddd9459..c117c7e9dd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
@@ -56,7 +56,7 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      notifications.success("Deleted screen successfully.")
+      notifications.success("Deleted screen successfully")
     } catch (err) {
       notifications.error("Error deleting screen")
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
similarity index 87%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
index 2555b0b2a2..694abe444a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
@@ -26,7 +26,7 @@
   <StatusLight square {color} />
   {#if showTooltip}
     <div class="tooltip">
-      <Tooltip textWrapping text={tooltip} direction="left" />
+      <Tooltip textWrapping text={tooltip} direction="right" />
     </div>
   {/if}
 </div>
@@ -38,13 +38,11 @@
   .tooltip {
     z-index: 1;
     position: absolute;
-    top: 50%;
-    left: calc(50% - 8px);
-    transform: translateX(-100%) translateY(-50%);
+    bottom: -5px;
+    left: 13px;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    width: 200px;
     pointer-events: none;
   }
   .tooltip :global(.spectrum-Tooltip) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
new file mode 100644
index 0000000000..ef5911c0f8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -0,0 +1,308 @@
+<script>
+  import { Icon, Layout, Body } from "@budibase/bbui"
+  import {
+    store,
+    sortedScreens,
+    userSelectedResourceMap,
+    screensHeight,
+  } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import RoleIndicator from "./RoleIndicator.svelte"
+  import DropdownMenu from "./DropdownMenu.svelte"
+  import { onMount, tick } from "svelte"
+  import { goto } from "@roxi/routify"
+
+  let search = false
+  let resizing = false
+  let searchValue = ""
+  let searchInput
+  let container
+  let screensContainer
+  let scrolling = false
+  let previousHeight = null
+  let dragOffset
+
+  $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
+
+  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+  const openSearch = async () => {
+    search = true
+    await tick()
+    searchInput.focus()
+    screensContainer.scroll({ top: 0, behavior: "smooth" })
+    previousHeight = $screensHeight
+    $screensHeight = "calc(100% + 1px)"
+  }
+
+  const closeSearch = async () => {
+    if (previousHeight) {
+      // Restore previous height and wait for animation
+      $screensHeight = previousHeight
+      previousHeight = null
+      await sleep(300)
+    }
+    search = false
+    searchValue = ""
+  }
+
+  const getFilteredScreens = (screens, search) => {
+    return screens.filter(screen => {
+      return !search || screen.routing.route.includes(search)
+    })
+  }
+
+  const handleAddButton = () => {
+    if (search) {
+      closeSearch()
+    } else {
+      $goto("../new")
+    }
+  }
+
+  const onKeyDown = e => {
+    if (e.key === "Escape") {
+      closeSearch()
+    }
+  }
+
+  const handleScroll = e => {
+    scrolling = e.target.scrollTop !== 0
+  }
+
+  const startResizing = e => {
+    // Reset the height store to match the true height
+    $screensHeight = `${container.getBoundingClientRect().height}px`
+
+    // Store an offset to easily compute new height when moving the mouse
+    dragOffset = parseInt($screensHeight) - e.clientY
+
+    // Add event listeners
+    resizing = true
+    document.addEventListener("mousemove", resize)
+    document.addEventListener("mouseup", stopResizing)
+  }
+
+  const resize = e => {
+    // Prevent negative heights as this screws with layout
+    const newHeight = Math.max(0, e.clientY + dragOffset)
+    if (newHeight == null || isNaN(newHeight)) {
+      return
+    }
+    $screensHeight = `${newHeight}px`
+  }
+
+  const stopResizing = () => {
+    resizing = false
+    document.removeEventListener("mousemove", resize)
+  }
+
+  onMount(() => {
+    // Ensure we aren't stuck at 100% height from leaving while searching
+    if ($screensHeight == null || isNaN(parseInt($screensHeight))) {
+      $screensHeight = "210px"
+    }
+  })
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<div
+  class="screens"
+  class:search
+  class:resizing
+  style={`height:${$screensHeight};`}
+  bind:this={container}
+>
+  <div class="header" class:scrolling>
+    <input
+      readonly={!search}
+      bind:value={searchValue}
+      bind:this={searchInput}
+      class="input"
+      placeholder="Search for screens"
+    />
+    <div class="title" class:hide={search}>
+      <Body size="S">Screens</Body>
+    </div>
+    <div on:click={openSearch} class="searchButton" class:hide={search}>
+      <Icon size="S" name="Search" />
+    </div>
+    <div
+      on:click={handleAddButton}
+      class="addButton"
+      class:closeButton={search}
+    >
+      <Icon name="Add" />
+    </div>
+  </div>
+  <div on:scroll={handleScroll} bind:this={screensContainer} class="content">
+    {#if filteredScreens?.length}
+      {#each filteredScreens as screen (screen._id)}
+        <NavItem
+          icon={screen.routing.homeScreen ? "Home" : null}
+          indentLevel={0}
+          selected={$store.selectedScreenId === screen._id}
+          text={screen.routing.route}
+          on:click={() => store.actions.screens.select(screen._id)}
+          rightAlignIcon
+          showTooltip
+          selectedBy={$userSelectedResourceMap[screen._id]}
+        >
+          <DropdownMenu screenId={screen._id} />
+          <div slot="icon" class="icon">
+            <RoleIndicator roleId={screen.routing.roleId} />
+          </div>
+        </NavItem>
+      {/each}
+    {:else}
+      <Layout paddingY="none" paddingX="L">
+        <div class="no-results">
+          There aren't any screens matching that route
+        </div>
+      </Layout>
+    {/if}
+  </div>
+
+  <div
+    class="divider"
+    on:mousedown={startResizing}
+    on:dblclick={() => screensHeight.set("210px")}
+  />
+</div>
+
+<style>
+  .screens {
+    display: flex;
+    flex-direction: column;
+    min-height: 147px;
+    max-height: calc(100% - 147px);
+    position: relative;
+  }
+  .screens.search {
+    transition: height 300ms ease-out;
+    max-height: none;
+  }
+  .screens.resizing {
+    user-select: none;
+    cursor: row-resize;
+  }
+
+  .header {
+    flex-shrink: 0;
+    position: relative;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 0 var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 130ms ease-out;
+  }
+  .header.scrolling {
+    border-bottom: var(--border-light);
+  }
+
+  .input {
+    font-family: var(--font-sans);
+    position: absolute;
+    color: var(--ink);
+    background-color: transparent;
+    border: none;
+    font-size: var(--spectrum-alias-font-size-default);
+    width: 260px;
+    box-sizing: border-box;
+    display: none;
+  }
+  .input:focus {
+    outline: none;
+  }
+  .input::placeholder {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .screens.search input {
+    display: block;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+    flex: 1;
+    opacity: 1;
+    z-index: 1;
+  }
+
+  .content {
+    overflow: auto;
+    flex-grow: 1;
+  }
+  .screens.resizing .content {
+    pointer-events: none;
+  }
+
+  .screens :global(.nav-item) {
+    padding-right: 8px !important;
+  }
+
+  .searchButton {
+    color: var(--grey-7);
+    cursor: pointer;
+    margin-right: 10px;
+    opacity: 1;
+  }
+  .searchButton:hover {
+    color: var(--ink);
+  }
+
+  .hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .addButton {
+    color: var(--grey-7);
+    cursor: pointer;
+    transition: transform 300ms ease-out;
+  }
+  .addButton:hover {
+    color: var(--ink);
+  }
+
+  .closeButton {
+    transform: rotate(45deg);
+  }
+
+  .icon {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .no-results {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .divider {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    height: 16px;
+    width: 100%;
+  }
+  .divider:after {
+    content: "";
+    position: absolute;
+    background: var(--spectrum-global-color-gray-200);
+    height: 2px;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: background 130ms ease-out;
+  }
+  .divider:hover {
+    cursor: row-resize;
+  }
+  .divider:hover:after {
+    background: var(--spectrum-global-color-gray-300);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 8bc0dcc3e5..0e630b4f39 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -1,14 +1,10 @@
 <script>
-  import { IconSideNav, IconSideNavItem } from "@budibase/bbui"
-  import * as routify from "@roxi/routify"
   import AppPanel from "./_components/AppPanel.svelte"
+  import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import { onDestroy } from "svelte"
-  const { isActive, goto } = routify
-
-  $: screenId = $store.selectedScreenId
-  $: store.actions.websocket.selectResource(screenId)
+  import LeftPanel from "./_components/LeftPanel.svelte"
 
   // Keep URL and state in sync for selected screen ID
   const stopSyncing = syncURLToState({
@@ -23,51 +19,15 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
-  <div class="icon-nav">
-    <IconSideNav>
-      <IconSideNavItem
-        icon="WebPage"
-        tooltip="Screens"
-        active={$isActive("./screens")}
-        on:click={() => $goto("./screens")}
-      />
-      <IconSideNavItem
-        icon="ViewList"
-        tooltip="Components"
-        active={$isActive("./components")}
-        on:click={() => $goto("./components")}
-      />
-      <IconSideNavItem
-        icon="Brush"
-        tooltip="Theme"
-        active={$isActive("./theme")}
-        on:click={() => $goto("./theme")}
-      />
-      <IconSideNavItem
-        icon="Link"
-        tooltip="Navigation"
-        active={$isActive("./navigation")}
-        on:click={() => $goto("./navigation")}
-      />
-      {#if $store.layouts?.length}
-        <IconSideNavItem
-          icon="Experience"
-          tooltip="Layouts"
-          active={$isActive("./layouts")}
-          on:click={() => $goto("./layouts")}
-        />
-      {/if}
-    </IconSideNav>
-  </div>
-
-  <div class="content">
-    {#if $selectedScreen}
-      <slot />
+{#if $selectedScreen}
+  <div class="design">
+    <div class="content">
+      <LeftPanel />
       <AppPanel />
-    {/if}
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .design {
@@ -78,10 +38,7 @@
     align-items: stretch;
     height: 0;
   }
-  .icon-nav {
-    background: var(--background);
-    border-right: var(--border-light);
-  }
+
   .content {
     display: flex;
     flex-direction: row;
@@ -89,17 +46,4 @@
     align-items: stretch;
     flex: 1 1 auto;
   }
-  /*
-    This is hacky, yes, but it's the only way to prevent routify from
-    remounting the iframe on route changes.
-  */
-  .content :global(> *:last-child) {
-    order: 1;
-  }
-  .content :global(> *:first-child) {
-    order: 0;
-  }
-  .content :global(> *:nth-child(2)) {
-    order: 2;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
deleted file mode 100644
index 9513753d76..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import ComponentTree from "./ComponentTree.svelte"
-  import { dndStore } from "./dndStore.js"
-  import { goto } from "@roxi/routify"
-  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
-  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import { DropPosition } from "./dndStore"
-  import { notifications, Button } from "@budibase/bbui"
-  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
-  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
-
-  const onDrop = async () => {
-    try {
-      await dndStore.actions.drop()
-    } catch (error) {
-      console.error(error)
-      notifications.error("Error saving component")
-    }
-  }
-</script>
-
-<Panel title="Components" showExpandIcon borderRight>
-  <div class="add-component">
-    <Button on:click={() => $goto("./new")} cta>Add component</Button>
-  </div>
-  <ComponentScrollWrapper>
-    <ul>
-      <li>
-        <NavItem
-          text="Screen"
-          indentLevel={0}
-          selected={$store.selectedComponentId === $selectedScreen?.props._id}
-          opened
-          scrollable
-          icon="WebPage"
-          on:drop={onDrop}
-          on:click={() => {
-            $store.selectedComponentId = $selectedScreen?.props._id
-          }}
-          id={`component-${$selectedScreen?.props._id}`}
-          selectedBy={$userSelectedResourceMap[$selectedScreen?.props._id]}
-        >
-          <ScreenslotDropdownMenu component={$selectedScreen?.props} />
-        </NavItem>
-        <ComponentTree
-          level={0}
-          components={$selectedScreen?.props._children}
-        />
-
-        <!-- Show drop indicators for the target and the parent -->
-        {#if $dndStore.dragging && $dndStore.valid}
-          <DNDPositionIndicator
-            component={$dndStore.target}
-            position={$dndStore.dropPosition}
-          />
-          {#if $dndStore.dropPosition !== DropPosition.INSIDE}
-            <DNDPositionIndicator
-              component={$dndStore.targetParent}
-              position={DropPosition.INSIDE}
-            />
-          {/if}
-        {/if}
-      </li>
-    </ul>
-  </ComponentScrollWrapper>
-</Panel>
-<ComponentKeyHandler />
-
-<style>
-  .add-component {
-    padding: var(--spacing-xl) var(--spacing-l);
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    position: relative;
-  }
-  ul,
-  li {
-    min-width: max-content;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
deleted file mode 100644
index f0288f0059..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import { DetailSummary, Icon } from "@budibase/bbui"
-
-  export let componentDefinition
-</script>
-
-<DetailSummary collapsible={false}>
-  <div class="info">
-    <div class="title">
-      <Icon name="HelpOutline" />
-      {componentDefinition.name}
-    </div>
-    {componentDefinition.info}
-  </div>
-</DetailSummary>
-
-<style>
-  .title {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    margin-bottom: var(--spacing-m);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .info {
-    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l) var(--spacing-l);
-    background-color: var(--background-alt);
-    border-radius: var(--border-radius-s);
-    font-size: 13px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
deleted file mode 100644
index 860258c940..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { store, selectedScreen } from "builderStore"
-  import * as routify from "@roxi/routify"
-  import { onDestroy } from "svelte"
-  import { findComponent } from "builderStore/componentUtils"
-  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
-
-  $: componentId = $store.selectedComponentId
-  $: store.actions.websocket.selectResource(componentId)
-
-  const cleanUrl = url => {
-    // Strip trailing slashes
-    if (url?.endsWith("/index")) {
-      url = url.replace("/index", "")
-    }
-    // Hide new component panel whenever component ID changes
-    if (url?.endsWith("/new")) {
-      url = url.replace("/new", "")
-    }
-    return { url }
-  }
-
-  // Keep URL and state in sync for selected component ID
-  const stopSyncing = syncURLToState({
-    urlParam: "componentId",
-    stateKey: "selectedComponentId",
-    validate: id => !!findComponent($selectedScreen.props, id),
-    fallbackUrl: "../",
-    store,
-    routify,
-    beforeNavigate: cleanUrl,
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<ComponentListPanel />
-<ComponentSettingsPanel />
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
deleted file mode 100644
index 9b5d05fe57..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--
-  Placeholder file so that routify works.
-  No unique content is needed in this index page.
--->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
deleted file mode 100644
index f8c4cc0868..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { selectedScreen, selectedComponent } from "builderStore"
-  import { onMount } from "svelte"
-  import { redirect } from "@roxi/routify"
-
-  onMount(() => {
-    if ($selectedComponent) {
-      // Navigate to the selected component if one exists
-      $redirect(`./${$selectedComponent._id}`)
-    } else if ($selectedScreen) {
-      // Otherwise the screen slot if a screen exists
-      $redirect(`./${$selectedScreen.props._id}`)
-    } else {
-      // Otherwise go up so we can select a new valid screen
-      $redirect("../")
-    }
-  })
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
index f5e3806bd6..c4ed7d949c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
+  import { store } from "builderStore"
 
-  $redirect("./screens")
+  $redirect(`./${$store.selectedScreenId}-screen`)
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
deleted file mode 100644
index cba68f899d..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { notifications } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
-
-  export let layout
-
-  let confirmDeleteDialog
-
-  const deleteLayout = async () => {
-    try {
-      await store.actions.layouts.delete(layout)
-      notifications.success("Layout deleted successfully")
-    } catch (err) {
-      notifications.error(err?.message || "Error deleting layout")
-    }
-  }
-</script>
-
-<ActionMenu>
-  <div slot="control" class="icon">
-    <Icon size="S" hoverable name="MoreSmallList" />
-  </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
-</ActionMenu>
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={"Are you sure you wish to delete this layout?"}
-  okText="Delete layout"
-  onOk={deleteLayout}
-/>
-
-<style>
-  .icon {
-    display: grid;
-    place-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
deleted file mode 100644
index cc895317fd..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import NavItem from "components/common/NavItem.svelte"
-  import { store } from "builderStore"
-  import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
-</script>
-
-<Panel title="Layouts" borderRight>
-  <div class="layouts">
-    {#each $store.layouts as layout (layout._id)}
-      <NavItem
-        icon="Experience"
-        indentLevel={0}
-        selected={$store.selectedLayoutId === layout._id}
-        text={layout.name}
-        on:click={() => store.actions.layouts.select(layout._id)}
-      >
-        <LayoutDropdownMenu {layout} />
-      </NavItem>
-    {/each}
-  </div>
-</Panel>
-
-<style>
-  .layouts {
-    margin-top: var(--spacing-xl);
-    overflow: hidden;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
deleted file mode 100644
index bfc2f94f43..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { store, selectedLayout } from "builderStore"
-  import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
-  import { Component } from "builderStore/store/screenTemplates/utils/Component"
-
-  const copyLayout = () => {
-    // Build an outer container component to put layout contents inside
-    let container = new Component("@budibase/standard-components/container")
-      .instanceName($selectedLayout.name)
-      .customProps({
-        gap: "M",
-        direction: "column",
-        hAlign: "stretch",
-        vAlign: "top",
-        size: "shrink",
-      })
-      .json()
-
-    // Attach layout components
-    container._children = $selectedLayout.props._children
-
-    // Replace the screenslot component with a container. This is better than
-    // simply removing it as it still shows its position.
-    container = JSON.parse(
-      JSON.stringify(container).replace(
-        "@budibase/standard-components/screenslot",
-        "@budibase/standard-components/container"
-      )
-    )
-
-    // Copy new component structure
-    store.actions.components.copy(container)
-    notifications.success("Components copied successfully")
-  }
-</script>
-
-<Panel title={$selectedLayout?.name} icon="Experience" borderLeft wide>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Banner type="warning" showCloseButton={false}>
-      Custom layouts are being deprecated. They will be removed in a future
-      release.
-    </Banner>
-    <Body size="S">
-      You can save the content of this layout by pressing the button below.
-    </Body>
-    <Body size="S">
-      This will copy all components inside your layout, which you can then paste
-      into a screen.
-    </Body>
-    <Button cta on:click={copyLayout}>Copy components</Button>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
deleted file mode 100644
index c82fefab3e..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { store } from "builderStore"
-  import * as routify from "@roxi/routify"
-  import { onDestroy } from "svelte"
-
-  // Keep URL and state in sync for selected component ID
-  const stopSyncing = syncURLToState({
-    urlParam: "layoutId",
-    stateKey: "selectedLayoutId",
-    validate: id => $store.layouts?.some(layout => layout._id === id),
-    fallbackUrl: "../",
-    store,
-    routify,
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
deleted file mode 100644
index 4d39403bc3..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import LayoutListPanel from "./_components/LayoutListPanel.svelte"
-  import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
-</script>
-
-<LayoutListPanel />
-<LayoutSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
deleted file mode 100644
index 1333c6afe3..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  $: {
-    if (!$store.layouts?.length) {
-      $redirect("../")
-    }
-  }
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
deleted file mode 100644
index 09d45f8fde..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { onMount } from "svelte"
-  import { redirect } from "@roxi/routify"
-
-  onMount(() => {
-    if ($store.layouts?.length) {
-      $redirect(`./${$store.layouts[0]._id}`)
-    }
-    // The redirection when no layouts exist is handled by the routify layout
-  })
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
deleted file mode 100644
index 614e1eed80..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout, Banner } from "@budibase/bbui"
-  import { selectedScreen, store } from "builderStore"
-  import { get } from "svelte/store"
-
-  const removeCustomLayout = async () => {
-    return store.actions.screens.removeCustomLayout(get(selectedScreen))
-  }
-</script>
-
-<Panel borderLeft title="Navigation" icon="InfoOutline" wide>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    {#if $selectedScreen.layoutId}
-      <Banner
-        type="warning"
-        extraButtonText="Detach custom layout"
-        extraButtonAction={removeCustomLayout}
-        showCloseButton={false}
-      >
-        You can't preview your navigation settings using this screen as it uses
-        a custom layout, which is deprecated
-      </Banner>
-    {/if}
-    <Body size="S">
-      Your navigation is configured for all the screens within your app.
-    </Body>
-    <Body size="S">
-      You can hide and show your navigation for each screen in the screen
-      settings.
-    </Body>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
deleted file mode 100644
index c6d43984b2..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import {
-    Layout,
-    Label,
-    ActionGroup,
-    ActionButton,
-    Checkbox,
-    Select,
-    ColorPicker,
-    Input,
-    notifications,
-  } from "@budibase/bbui"
-  import NavigationLinksEditor from "./NavigationLinksEditor.svelte"
-  import { store } from "builderStore"
-  import { DefaultAppTheme } from "constants"
-
-  const update = async (key, value) => {
-    try {
-      let navigation = $store.navigation
-      navigation[key] = value
-      await store.actions.navigation.save(navigation)
-    } catch (error) {
-      notifications.error("Error updating navigation settings")
-    }
-  }
-</script>
-
-<Panel title="Navigation" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <NavigationLinksEditor />
-    <Layout noPadding gap="XS">
-      <Label>Position</Label>
-      <ActionGroup quiet>
-        <ActionButton
-          selected={$store.navigation.navigation === "Top"}
-          quiet={$store.navigation.navigation !== "Top"}
-          icon="PaddingTop"
-          on:click={() => update("navigation", "Top")}
-        />
-        <ActionButton
-          selected={$store.navigation.navigation === "Left"}
-          quiet={$store.navigation.navigation !== "Left"}
-          icon="PaddingLeft"
-          on:click={() => update("navigation", "Left")}
-        />
-      </ActionGroup>
-    </Layout>
-    {#if $store.navigation.navigation === "Top"}
-      <Checkbox
-        text="Sticky header"
-        value={$store.navigation.sticky}
-        on:change={e => update("sticky", e.detail)}
-      />
-      <Select
-        label="Width"
-        options={["Max", "Large", "Medium", "Small"]}
-        plaveholder={null}
-        value={$store.navigation.navWidth}
-        on:change={e => update("navWidth", e.detail)}
-      />
-    {/if}
-    <Layout noPadding gap="XS">
-      <Checkbox
-        text="Logo"
-        value={!$store.navigation.hideLogo}
-        on:change={e => update("hideLogo", !e.detail)}
-      />
-      {#if !$store.navigation.hideLogo}
-        <Input
-          value={$store.navigation.logoUrl}
-          on:change={e => update("logoUrl", e.detail)}
-          placeholder="Add logo URL"
-          updateOnChange={false}
-        />
-      {/if}
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Checkbox
-        text="Title"
-        value={!$store.navigation.hideTitle}
-        on:change={e => update("hideTitle", !e.detail)}
-      />
-      {#if !$store.navigation.hideTitle}
-        <Input
-          value={$store.navigation.title}
-          on:change={e => update("title", e.detail)}
-          placeholder="Add title"
-          updateOnChange={false}
-        />
-      {/if}
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Background color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
-        on:change={e => update("navBackground", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Text color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
-        on:change={e => update("navTextColor", e.detail)}
-      />
-    </Layout>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
deleted file mode 100644
index fc2e03d8e8..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import NavigationSettingsPanel from "./_components/NavigationSettingsPanel.svelte"
-  import NavigationInfoPanel from "./_components/NavigationInfoPanel.svelte"
-</script>
-
-<NavigationSettingsPanel />
-<NavigationInfoPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
deleted file mode 100644
index 6362af3073..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-  import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
-  import Panel from "components/design/Panel.svelte"
-  import { goto } from "@roxi/routify"
-  import { roles } from "stores/backend"
-  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import RoleIndicator from "./RoleIndicator.svelte"
-  import { RoleUtils } from "@budibase/frontend-core"
-
-  let searchString
-  let accessRole = "all"
-
-  $: filteredScreens = getFilteredScreens(
-    $sortedScreens,
-    searchString,
-    accessRole
-  )
-
-  const getFilteredScreens = (screens, search, role) => {
-    return screens.filter(screen => {
-      const searchMatch = !search || screen.routing.route.includes(search)
-      const roleMatch =
-        !role || role === "all" || screen.routing.roleId === role
-      return searchMatch && roleMatch
-    })
-  }
-</script>
-
-<Panel title="Screens" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button on:click={() => $goto("../../new")} cta>Add screen</Button>
-    <Search
-      placeholder="Search"
-      value={searchString}
-      on:change={e => (searchString = e.detail)}
-    />
-    <Select
-      bind:value={accessRole}
-      placeholder={null}
-      getOptionLabel={role => role.name}
-      getOptionValue={role => role._id}
-      getOptionColour={role => {
-        if (role?._id === "all") {
-          return null
-        }
-        return RoleUtils.getRoleColour(role._id)
-      }}
-      options={[{ name: "All screens", _id: "all" }, ...$roles]}
-    />
-  </Layout>
-  {#each filteredScreens as screen (screen._id)}
-    <NavItem
-      icon={screen.routing.homeScreen ? "Home" : null}
-      indentLevel={0}
-      selected={$store.selectedScreenId === screen._id}
-      text={screen.routing.route}
-      on:click={() => store.actions.screens.select(screen._id)}
-      rightAlignIcon
-      showTooltip
-      selectedBy={$userSelectedResourceMap[screen._id]}
-    >
-      <ScreenDropdownMenu screenId={screen._id} />
-      <RoleIndicator slot="right" roleId={screen.routing.roleId} />
-    </NavItem>
-  {/each}
-  {#if !filteredScreens?.length}
-    <Layout paddingY="" paddingX="L">
-      <Body size="S">
-        There aren't any screens matching the current filters
-      </Body>
-    </Layout>
-  {/if}
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
deleted file mode 100644
index 6236721e1a..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { selectedScreen } from "builderStore"
-  import ScreenListPanel from "./_components/ScreenListPanel.svelte"
-  import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
-</script>
-
-<ScreenListPanel />
-{#if $selectedScreen}
-  {#key $selectedScreen._id}
-    <ScreenSettingsPanel />
-  {/key}
-{/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
deleted file mode 100644
index c3325852c8..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-</script>
-
-<Panel borderLeft title="Theme" icon="InfoOutline" wide>
-  <Layout paddingX="L" paddingY="XL">
-    <Body size="S">
-      Your theme is set across all the screens within your app.
-    </Body>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
deleted file mode 100644
index 1c86a51f67..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Layout, Label, ColorPicker, notifications } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { get } from "svelte/store"
-  import { DefaultAppTheme } from "constants"
-  import AppThemeSelect from "./AppThemeSelect.svelte"
-  import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
-
-  $: customTheme = $store.customTheme || {}
-
-  const update = async (property, value) => {
-    try {
-      store.actions.customTheme.save({
-        ...get(store).customTheme,
-        [property]: value,
-      })
-    } catch (error) {
-      notifications.error("Error updating custom theme")
-    }
-  }
-</script>
-
-<Panel title="Theme" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Layout noPadding gap="XS">
-      <Label>Theme</Label>
-      <AppThemeSelect />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Button roundness</Label>
-      <ButtonRoundnessSelect
-        {customTheme}
-        on:change={e => update("buttonBorderRadius", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Accent color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
-        on:change={e => update("primaryColor", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Accent color (hover)</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={customTheme.primaryColorHover ||
-          DefaultAppTheme.primaryColorHover}
-        on:change={e => update("primaryColorHover", e.detail)}
-      />
-    </Layout>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
deleted file mode 100644
index 013257d8e1..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import ThemeSettingsPanel from "./_components/ThemeSettingsPanel.svelte"
-  import ThemeInfoPanel from "./_components/ThemeInfoPanel.svelte"
-</script>
-
-<ThemeSettingsPanel />
-<ThemeInfoPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
deleted file mode 100644
index 26e44ca1d0..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
+++ /dev/null
@@ -1,201 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import {
-    ModalContent,
-    Layout,
-    notifications,
-    Icon,
-    Body,
-  } from "@budibase/bbui"
-  import { tables, datasources } from "stores/backend"
-  import getTemplates from "builderStore/store/screenTemplates"
-  import ICONS from "components/backend/DatasourceNavigator/icons"
-  import { IntegrationNames } from "constants"
-  import { onMount } from "svelte"
-
-  export let onCancel
-  export let onConfirm
-  export let initalScreens = []
-
-  let selectedScreens = [...initalScreens]
-
-  const toggleScreenSelection = (table, datasource) => {
-    if (selectedScreens.find(s => s.table === table._id)) {
-      selectedScreens = selectedScreens.filter(
-        screen => screen.table !== table._id
-      )
-    } else {
-      let partialTemplates = getTemplates($store, $tables.list).reduce(
-        (acc, template) => {
-          if (template.table === table._id) {
-            template.datasource = datasource.name
-            acc.push(template)
-          }
-          return acc
-        },
-        []
-      )
-      selectedScreens = [...partialTemplates, ...selectedScreens]
-    }
-  }
-
-  const confirmDatasourceSelection = async () => {
-    await onConfirm({
-      templates: selectedScreens,
-    })
-  }
-
-  $: filteredSources = Array.isArray($datasources.list)
-    ? $datasources.list.reduce((acc, datasource) => {
-        if (
-          datasource.source !== IntegrationNames.REST &&
-          datasource["entities"]
-        ) {
-          acc.push(datasource)
-        }
-        return acc
-      }, [])
-    : []
-
-  onMount(async () => {
-    try {
-      await datasources.fetch()
-    } catch (error) {
-      notifications.error("Error fetching datasources")
-    }
-  })
-</script>
-
-<span>
-  <ModalContent
-    title="Autogenerated screens"
-    confirmText="Confirm"
-    cancelText="Back"
-    onConfirm={confirmDatasourceSelection}
-    {onCancel}
-    disabled={!selectedScreens.length}
-    size="L"
-  >
-    <Body size="S">
-      Select which datasources you would like to use to create your screens
-    </Body>
-    <Layout noPadding gap="S">
-      {#each filteredSources as datasource}
-        <div class="data-source-wrap">
-          <div class="data-source-header">
-            <svelte:component
-              this={ICONS[datasource.source]}
-              height="24"
-              width="24"
-            />
-            <div class="data-source-name">{datasource.name}</div>
-          </div>
-          {#if Array.isArray(datasource.entities)}
-            {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
-              <div
-                class="data-source-entry"
-                class:selected={selectedScreens.find(
-                  x => x.table === table._id
-                )}
-                on:click={() => toggleScreenSelection(table, datasource)}
-              >
-                <svg
-                  width="16px"
-                  height="16px"
-                  class="spectrum-Icon"
-                  style="color: white"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-Table" />
-                </svg>
-                {table.name}
-                {#if selectedScreens.find(x => x.table === table._id)}
-                  <span class="data-source-check">
-                    <Icon size="S" name="CheckmarkCircle" />
-                  </span>
-                {/if}
-              </div>
-            {/each}
-          {/if}
-          {#if datasource["entities"] && !Array.isArray(datasource.entities)}
-            {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
-              <div
-                class="data-source-entry"
-                class:selected={selectedScreens.find(
-                  x => x.table === datasource.entities[table_key]._id
-                )}
-                on:click={() =>
-                  toggleScreenSelection(
-                    datasource.entities[table_key],
-                    datasource
-                  )}
-              >
-                <svg
-                  width="16px"
-                  height="16px"
-                  class="spectrum-Icon"
-                  style="color: white"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-Table" />
-                </svg>
-                {datasource.entities[table_key].name}
-                {#if selectedScreens.find(x => x.table === datasource.entities[table_key]._id)}
-                  <span class="data-source-check">
-                    <Icon size="S" name="CheckmarkCircle" />
-                  </span>
-                {/if}
-              </div>
-            {/each}
-          {/if}
-        </div>
-      {/each}
-    </Layout>
-  </ModalContent>
-</span>
-
-<style>
-  .data-source-wrap {
-    padding-bottom: var(--spectrum-alias-item-padding-s);
-    display: grid;
-    grid-gap: var(--spacing-s);
-  }
-
-  .data-source-header {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-m);
-    padding-bottom: var(--spacing-xs);
-  }
-
-  .data-source-entry {
-    cursor: pointer;
-    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    padding: var(--spectrum-alias-item-padding-s);
-    background: var(--spectrum-alias-background-color-secondary);
-    transition: 0.3s all;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    border-width: 1px;
-    display: flex;
-    align-items: center;
-  }
-
-  .data-source-entry:hover,
-  .selected {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
-
-  .data-source-entry .data-source-check {
-    margin-left: auto;
-  }
-
-  .data-source-entry :global(.spectrum-Icon) {
-    min-width: 16px;
-  }
-
-  .data-source-entry .data-source-check :global(.spectrum-Icon) {
-    color: var(--spectrum-global-color-green-600);
-    display: block;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
similarity index 90%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index 3ca3e6b419..9a96242b30 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -58,16 +58,17 @@
         const response = await store.actions.screens.save(screen)
         screenId = response._id
 
-        // Add link in layout for list screens
-        if (screen.props._instanceName.endsWith("List")) {
-          await store.actions.links.save(
-            screen.routing.route,
-            capitalise(screen.routing.route.split("/")[1])
-          )
-        }
+        // Add link in layout. We only ever actually create 1 screen now, even
+        // for autoscreens, so it's always safe to do this.
+        await store.actions.links.save(
+          screen.routing.route,
+          capitalise(screen.routing.route.split("/")[1])
+        )
       }
 
+      // Go to new screen
       $goto(`./${screenId}`)
+      store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
       notifications.error("Error creating screens")
@@ -109,7 +110,7 @@
     if (mode === "table") {
       datasourceModal.show()
     } else if (mode === "blank") {
-      let templates = getTemplates($store, $tables.list)
+      let templates = getTemplates($tables.list)
       const blankScreenTemplate = templates.find(
         t => t.id === "createFromScratch"
       )
@@ -130,8 +131,7 @@
   const completeDatasourceScreenCreation = async () => {
     const screens = selectedTemplates.map(template => {
       let screenTemplate = template.create()
-      screenTemplate.datasource = template.datasource
-      screenTemplate.autoTableId = template.table
+      screenTemplate.autoTableId = template.resourceId
       return screenTemplate
     })
     await createScreens({ screens, screenAccessRole })
@@ -175,10 +175,10 @@
   }
 </script>
 
-<Modal bind:this={datasourceModal}>
+<Modal bind:this={datasourceModal} autoFocus={false}>
   <DatasourceModal
     onConfirm={confirmScreenDatasources}
-    initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
+    initialScreens={!selectedTemplates ? [] : [...selectedTemplates]}
   />
 </Modal>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
new file mode 100644
index 0000000000..a866cd23d4
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
@@ -0,0 +1,130 @@
+<script>
+  import { ModalContent, Layout, notifications, Body } from "@budibase/bbui"
+  import { datasources } from "stores/backend"
+  import ICONS from "components/backend/DatasourceNavigator/icons"
+  import { IntegrationNames } from "constants"
+  import { onMount } from "svelte"
+  import rowListScreen from "builderStore/store/screenTemplates/rowListScreen"
+  import DatasourceTemplateRow from "./DatasourceTemplateRow.svelte"
+
+  export let onCancel
+  export let onConfirm
+  export let initialScreens = []
+
+  let selectedScreens = [...initialScreens]
+
+  $: filteredSources = $datasources.list?.filter(datasource => {
+    return datasource.source !== IntegrationNames.REST && datasource["entities"]
+  })
+
+  const toggleSelection = datasource => {
+    const { resourceId } = datasource
+    if (selectedScreens.find(s => s.resourceId === resourceId)) {
+      selectedScreens = selectedScreens.filter(
+        screen => screen.resourceId !== resourceId
+      )
+    } else {
+      selectedScreens = [...selectedScreens, rowListScreen([datasource])[0]]
+    }
+  }
+
+  const confirmDatasourceSelection = async () => {
+    await onConfirm({
+      templates: selectedScreens,
+    })
+  }
+
+  onMount(async () => {
+    try {
+      await datasources.fetch()
+    } catch (error) {
+      notifications.error("Error fetching datasources")
+    }
+  })
+</script>
+
+<span>
+  <ModalContent
+    title="Autogenerated screens"
+    confirmText="Confirm"
+    cancelText="Back"
+    onConfirm={confirmDatasourceSelection}
+    {onCancel}
+    disabled={!selectedScreens.length}
+    size="L"
+  >
+    <Body size="S">
+      Select which datasources you would like to use to create your screens
+    </Body>
+    <Layout noPadding gap="S">
+      {#each filteredSources as datasource}
+        {@const entities = Array.isArray(datasource.entities)
+          ? datasource.entities
+          : Object.values(datasource.entities || {})}
+        <div class="data-source-wrap">
+          <div class="data-source-header">
+            <svelte:component
+              this={ICONS[datasource.source]}
+              height="24"
+              width="24"
+            />
+            <div class="data-source-name">{datasource.name}</div>
+          </div>
+          <!-- List all tables -->
+          {#each entities.filter(table => table._id !== "ta_users") as table}
+            {@const views = Object.values(table.views || {}).filter(
+              view => view.version === 2
+            )}
+            {@const tableDS = {
+              tableId: table._id,
+              label: table.name,
+              resourceId: table._id,
+              type: "table",
+            }}
+            {@const selected = selectedScreens.find(
+              screen => screen.resourceId === tableDS.resourceId
+            )}
+            <DatasourceTemplateRow
+              on:click={() => toggleSelection(tableDS)}
+              {selected}
+              datasource={tableDS}
+            />
+
+            <!-- List all views inside this table -->
+            {#each views as view}
+              {@const viewDS = {
+                label: view.name,
+                id: view.id,
+                resourceId: view.id,
+                tableId: view.tableId,
+                type: "viewV2",
+              }}
+              {@const selected = selectedScreens.find(
+                x => x.resourceId === viewDS.resourceId
+              )}
+              <DatasourceTemplateRow
+                on:click={() => toggleSelection(viewDS)}
+                {selected}
+                datasource={viewDS}
+              />
+            {/each}
+          {/each}
+        </div>
+      {/each}
+    </Layout>
+  </ModalContent>
+</span>
+
+<style>
+  .data-source-wrap {
+    padding-bottom: var(--spectrum-alias-item-padding-s);
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
+  .data-source-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding-bottom: var(--spacing-xs);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceTemplateRow.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceTemplateRow.svelte
new file mode 100644
index 0000000000..dac0aaed6e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceTemplateRow.svelte
@@ -0,0 +1,42 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  export let datasource
+  export let selected = false
+
+  $: icon = datasource.type === "viewV2" ? "Remove" : "Table"
+</script>
+
+<div class="data-source-entry" class:selected on:click>
+  <Icon name={icon} color="var(--spectrum-global-color-gray-600)" />
+  {datasource.label}
+  {#if selected}
+    <span class="data-source-check">
+      <Icon size="S" name="CheckmarkCircle" />
+    </span>
+  {/if}
+</div>
+
+<style>
+  .data-source-entry {
+    cursor: pointer;
+    grid-gap: var(--spacing-m);
+    padding: var(--spectrum-alias-item-padding-s);
+    background: var(--spectrum-alias-background-color-secondary);
+    transition: 0.3s all;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+  }
+  .data-source-entry:hover,
+  .selected {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
+
+  .data-source-check {
+    margin-left: auto;
+  }
+  .data-source-check :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-green-600);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/blank.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/blank.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
new file mode 100644
index 0000000000..b504940ca7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
@@ -0,0 +1,105 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import CreationPage from "components/common/CreationPage.svelte"
+  import blankImage from "./blank.png"
+  import tableImage from "./table.png"
+  import CreateScreenModal from "./CreateScreenModal.svelte"
+  import { store } from "builderStore"
+
+  export let onClose = null
+
+  let createScreenModal
+
+  $: hasScreens = $store.screens?.length
+</script>
+
+<div class="page">
+  <CreationPage
+    showClose={!!onClose}
+    {onClose}
+    heading={hasScreens ? "Create new screen" : "Create your first screen"}
+  >
+    <div class="subHeading">
+      <Body>Start from scratch or create screens from your data</Body>
+    </div>
+
+    <div class="cards">
+      <div class="card" on:click={() => createScreenModal.show("blank")}>
+        <div class="image">
+          <img alt="" src={blankImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Blank screen</Body>
+          <Body size="XS">Add an empty blank screen</Body>
+        </div>
+      </div>
+
+      <div class="card" on:click={() => createScreenModal.show("table")}>
+        <div class="image">
+          <img alt="" src={tableImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Table</Body>
+          <Body size="XS">View, edit and delete rows on a table</Body>
+        </div>
+      </div>
+    </div>
+  </CreationPage>
+</div>
+
+<CreateScreenModal bind:this={createScreenModal} />
+
+<style>
+  .page {
+    padding: 28px 40px 40px 40px;
+  }
+
+  .subHeading :global(p) {
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 36px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  .card {
+    max-width: 235px;
+    transition: filter 150ms;
+  }
+
+  .card:hover {
+    filter: brightness(1.1);
+    cursor: pointer;
+  }
+
+  .image {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    max-height: 127px;
+    overflow: hidden;
+  }
+
+  .image img {
+    width: 100%;
+  }
+
+  .text {
+    border: 1px solid var(--grey-4);
+    border-radius: 0 0 4px 4px;
+    padding: 8px 16px 13px 16px;
+  }
+
+  .text :global(p:nth-child(1)) {
+    margin-bottom: 6px;
+  }
+
+  .text :global(p:nth-child(2)) {
+    color: var(--grey-6);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/table.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/table.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
index ab9c8eb91d..6fd08447b2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -1,104 +1,23 @@
 <script>
-  import { Body } from "@budibase/bbui"
-  import CreationPage from "components/common/CreationPage.svelte"
-  import blankImage from "./blank.png"
-  import tableImage from "./table.png"
-  import CreateScreenModal from "./_components/CreateScreenModal.svelte"
+  import NewScreen from "./_components/NewScreen/index.svelte"
   import { store } from "builderStore"
   import { goto } from "@roxi/routify"
 
-  let createScreenModal
+  $: onClose = getOnClose($store)
 
-  $: hasScreens = $store.screens?.length
+  const getOnClose = ({ screens, selectedScreenId }) => {
+    if (!screens?.length) {
+      return null
+    }
+    if (selectedScreenId) {
+      return () => {
+        $goto(`./${selectedScreenId}`)
+      }
+    }
+    return () => {
+      $goto(`./${screens[0]._id}`)
+    }
+  }
 </script>
 
-<div class="page">
-  <CreationPage
-    showClose={$store.screens.length > 0}
-    onClose={() => $goto(`./${$store.screens[0]._id}`)}
-    heading={hasScreens ? "Create new screen" : "Create your first screen"}
-  >
-    <div class="subHeading">
-      <Body>Start from scratch or create screens from your data</Body>
-    </div>
-
-    <div class="cards">
-      <div class="card" on:click={() => createScreenModal.show("blank")}>
-        <div class="image">
-          <img alt="" src={blankImage} />
-        </div>
-        <div class="text">
-          <Body size="S">Blank screen</Body>
-          <Body size="XS">Add an empty blank screen</Body>
-        </div>
-      </div>
-
-      <div class="card" on:click={() => createScreenModal.show("table")}>
-        <div class="image">
-          <img alt="" src={tableImage} />
-        </div>
-        <div class="text">
-          <Body size="S">Table</Body>
-          <Body size="XS">View, edit and delete rows on a table</Body>
-        </div>
-      </div>
-    </div>
-  </CreationPage>
-</div>
-
-<CreateScreenModal bind:this={createScreenModal} />
-
-<style>
-  .page {
-    padding: 28px 40px 40px 40px;
-  }
-
-  .subHeading :global(p) {
-    text-align: center;
-    margin-top: 12px;
-    margin-bottom: 36px;
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .cards {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 24px;
-  }
-
-  .card {
-    max-width: 235px;
-    transition: filter 150ms;
-  }
-
-  .card:hover {
-    filter: brightness(1.1);
-    cursor: pointer;
-  }
-
-  .image {
-    border-radius: 4px 4px 0 0;
-    width: 100%;
-    max-height: 127px;
-    overflow: hidden;
-  }
-
-  .image img {
-    width: 100%;
-  }
-
-  .text {
-    border: 1px solid var(--grey-4);
-    border-radius: 0 0 4px 4px;
-    padding: 8px 16px 13px 16px;
-  }
-
-  .text :global(p:nth-child(1)) {
-    margin-bottom: 6px;
-  }
-
-  .text :global(p:nth-child(2)) {
-    color: var(--grey-6);
-  }
-</style>
+<NewScreen {onClose} />
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
index f041faa349..fd289163b4 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/_components/StatusRenderer.svelte
@@ -4,11 +4,13 @@
 
   $: isError = !value || value.toLowerCase() === "error"
   $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: info = getInfo(isError, isStopped)
+  $: isStopped = value?.toLowerCase() === "stopped"
+  $: info = getInfo(isError, isStopped, isStoppedError)
 
-  const getInfo = (error, stopped) => {
-    if (error) {
+  function getInfo(error, stopped, stoppedError) {
+    if (stoppedError) {
+      return { color: "red", message: "Stopped - Error" }
+    } else if (error) {
       return { color: "red", message: "Error" }
     } else if (stopped) {
       return { color: "yellow", message: "Stopped" }
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
index 190ced4b36..373a47aa2e 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automation-history/index.svelte
@@ -22,7 +22,8 @@
 
   const ERROR = "error",
     SUCCESS = "success",
-    STOPPED = "stopped"
+    STOPPED = "stopped",
+    STOPPED_ERROR = "stopped_error"
   const sidePanel = getContext("side-panel")
 
   let pageInfo = createPaginationStore()
@@ -52,6 +53,7 @@
     { value: SUCCESS, label: "Success" },
     { value: ERROR, label: "Error" },
     { value: STOPPED, label: "Stopped" },
+    { value: STOPPED_ERROR, label: "Stopped - Error" },
   ]
 
   const runHistorySchema = {
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index ca3617b589..7ccc98d78a 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -39,7 +39,7 @@
       return publishedApps
     }
     return publishedApps.filter(app => {
-      if (sdk.users.isBuilder(user, app.appId)) {
+      if (sdk.users.isBuilder(user, app.prodId)) {
         return true
       }
       if (!Object.keys(user?.roles).length && user?.userGroups) {
@@ -142,7 +142,12 @@
             <div class="group">
               <Layout gap="S" noPadding>
                 {#each userApps as app (app.appId)}
-                  <a class="app" target="_blank" href={getUrl(app)}>
+                  <a
+                    class="app"
+                    target="_blank"
+                    rel="noreferrer"
+                    href={getUrl(app)}
+                  >
                     <div class="preview" use:gradient={{ seed: app.name }} />
                     <div class="app-info">
                       <Heading size="XS">{app.name}</Heading>
diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
index 6a4364c414..4c1bb661fd 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@@ -21,6 +21,7 @@
   import GroupIcon from "./_components/GroupIcon.svelte"
   import GroupUsers from "./_components/GroupUsers.svelte"
   import { sdk } from "@budibase/shared-core"
+  import { Constants } from "@budibase/frontend-core"
 
   export let groupId
 
@@ -57,8 +58,11 @@
     )
     .map(app => ({
       ...app,
-      role: group?.roles?.[apps.getProdAppID(app.devId)],
+      role: group?.builder?.apps.includes(apps.getProdAppID(app.devId))
+        ? Constants.Roles.CREATOR
+        : group?.roles?.[apps.getProdAppID(app.devId)],
     }))
+
   $: {
     if (loaded && !group?._id) {
       $goto("./")
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/GroupAppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupAppsTableRenderer.svelte
index 51f4d7f77c..48b1bfbce6 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/GroupAppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupAppsTableRenderer.svelte
@@ -1,9 +1,19 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { sdk } from "@budibase/shared-core"
 
   export let value
+  export let row
+  $: count = getCount(Object.keys(value || {}).length)
 
-  $: count = Object.keys(value || {}).length
+  const getCount = () => {
+    return sdk.users.hasAppBuilderPermissions(row)
+      ? row.builder.apps.length +
+          Object.keys(row.roles || {}).filter(appId =>
+            row.builder.apps.includes(appId)
+          ).length
+      : value?.length || 0
+  }
 </script>
 
 <div class="align">
diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
index 904dd7d430..2a74cd9de5 100644
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@@ -89,7 +89,7 @@
   $: scimEnabled = $features.isScimEnabled
   $: isSSO = !!user?.provider
   $: readonly = !sdk.users.isAdmin($auth.user) || scimEnabled
-  $: privileged = sdk.users.isAdminOrBuilder(user)
+  $: privileged = sdk.users.isAdminOrGlobalBuilder(user)
   $: nameLabel = getNameLabel(user)
   $: filteredGroups = getFilteredGroups($groups, searchTerm)
   $: availableApps = getAvailableApps($apps, privileged, user?.roles)
@@ -98,17 +98,14 @@
       return y._id === userId
     })
   })
-  $: globalRole = sdk.users.isAdmin(user)
-    ? "admin"
-    : sdk.users.isBuilder(user)
-    ? "developer"
-    : "appUser"
+  $: globalRole = sdk.users.isAdmin(user) ? "admin" : "appUser"
 
   const getAvailableApps = (appList, privileged, roles) => {
     let availableApps = appList.slice()
     if (!privileged) {
       availableApps = availableApps.filter(x => {
-        return Object.keys(roles || {}).find(y => {
+        let roleKeys = Object.keys(roles || {})
+        return roleKeys.concat(user?.builder?.apps).find(y => {
           return x.appId === apps.extractAppId(y)
         })
       })
@@ -119,7 +116,7 @@
         name: app.name,
         devId: app.devId,
         icon: app.icon,
-        role: privileged ? Constants.Roles.ADMIN : roles[prodAppId],
+        role: getRole(prodAppId, roles),
       }
     })
   }
@@ -132,6 +129,18 @@
     return groups.filter(group => group.name?.toLowerCase().includes(search))
   }
 
+  const getRole = (prodAppId, roles) => {
+    if (privileged) {
+      return Constants.Roles.ADMIN
+    }
+
+    if (user?.builder?.apps?.includes(prodAppId)) {
+      return Constants.Roles.CREATOR
+    }
+
+    return roles[prodAppId]
+  }
+
   const getNameLabel = user => {
     const { firstName, lastName, email } = user || {}
     if (!firstName && !lastName) {
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
index 5664a95045..e6821cba37 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte
@@ -2,12 +2,16 @@
   import { StatusLight } from "@budibase/bbui"
   import { RoleUtils } from "@budibase/frontend-core"
   import { roles } from "stores/backend"
+  import { Constants } from "@budibase/frontend-core"
+  import { capitalise } from "helpers"
 
   export let value
 
   const getRoleLabel = roleId => {
     const role = $roles.find(x => x._id === roleId)
-    return role?.name || "Custom role"
+    return roleId === Constants.Roles.CREATOR
+      ? capitalise(Constants.Roles.CREATOR.toLowerCase())
+      : role?.name || "Custom role"
   }
 </script>
 
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
index 55cad9b93b..32e50ef05f 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
@@ -5,9 +5,21 @@
 
   export let value
   export let row
-
   $: priviliged = sdk.users.isAdminOrBuilder(row)
-  $: count = priviliged ? $apps.length : value?.length || 0
+  $: count = getCount(row)
+
+  const getCount = () => {
+    if (priviliged) {
+      return $apps.length
+    } else {
+      return sdk.users.hasAppBuilderPermissions(row)
+        ? row?.builder?.apps?.length +
+            Object.keys(row.roles || {}).filter(appId => {
+              row?.builder?.apps?.includes(appId)
+            }).length
+        : value?.length || 0
+    }
+  }
 </script>
 
 <div class="align">
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/RoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/RoleTableRenderer.svelte
index fe7acee6c4..43fe8cc1cc 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/RoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/RoleTableRenderer.svelte
@@ -5,12 +5,12 @@
   export let row
 
   const TooltipMap = {
-    appUser: "Only has access to published apps",
+    appUser: "Only has access to assigned apps",
     developer: "Access to the app builder",
     admin: "Full access",
   }
 
-  $: role = Constants.BudibaseRoleOptions.find(
+  $: role = Constants.BudibaseRoleOptionsOld.find(
     x => x.value === users.getUserRole(row)
   )
   $: value = role?.label || "Not available"
diff --git a/packages/builder/src/stores/backend/index.js b/packages/builder/src/stores/backend/index.js
index 6fbc9f82c7..278e43c1ed 100644
--- a/packages/builder/src/stores/backend/index.js
+++ b/packages/builder/src/stores/backend/index.js
@@ -1,6 +1,7 @@
 export { database } from "./database"
 export { tables } from "./tables"
 export { views } from "./views"
+export { viewsV2 } from "./viewsV2"
 export { permissions } from "./permissions"
 export { roles } from "./roles"
 export { datasources, ImportTableError } from "./datasources"
diff --git a/packages/builder/src/stores/backend/permissions.js b/packages/builder/src/stores/backend/permissions.js
index aaab406bc9..0113f221c0 100644
--- a/packages/builder/src/stores/backend/permissions.js
+++ b/packages/builder/src/stores/backend/permissions.js
@@ -13,9 +13,22 @@ export function createPermissionStore() {
         level,
       })
     },
+    remove: async ({ level, role, resource }) => {
+      return await API.removePermissionFromResource({
+        resourceId: resource,
+        roleId: role,
+        level,
+      })
+    },
     forResource: async resourceId => {
+      return (await API.getPermissionForResource(resourceId)).permissions
+    },
+    forResourceDetailed: async resourceId => {
       return await API.getPermissionForResource(resourceId)
     },
+    getDependantsInfo: async resourceId => {
+      return await API.getDependants(resourceId)
+    },
   }
 }
 
diff --git a/packages/builder/src/stores/backend/views.js b/packages/builder/src/stores/backend/views.js
index b01f31c4bd..603b0830fc 100644
--- a/packages/builder/src/stores/backend/views.js
+++ b/packages/builder/src/stores/backend/views.js
@@ -9,7 +9,10 @@ export function createViewsStore() {
   const derivedStore = derived([store, tables], ([$store, $tables]) => {
     let list = []
     $tables.list?.forEach(table => {
-      list = list.concat(Object.values(table?.views || {}))
+      const views = Object.values(table?.views || {}).filter(view => {
+        return view.version !== 2
+      })
+      list = list.concat(views)
     })
     return {
       ...$store,
diff --git a/packages/builder/src/stores/backend/viewsV2.js b/packages/builder/src/stores/backend/viewsV2.js
new file mode 100644
index 0000000000..dcc2c27152
--- /dev/null
+++ b/packages/builder/src/stores/backend/viewsV2.js
@@ -0,0 +1,102 @@
+import { writable, derived, get } from "svelte/store"
+import { tables } from "./"
+import { API } from "api"
+
+export function createViewsV2Store() {
+  const store = writable({
+    selectedViewId: null,
+  })
+  const derivedStore = derived([store, tables], ([$store, $tables]) => {
+    let list = []
+    $tables.list?.forEach(table => {
+      const views = Object.values(table?.views || {}).filter(view => {
+        return view.version === 2
+      })
+      list = list.concat(views)
+    })
+    return {
+      ...$store,
+      list,
+      selected: list.find(view => view.id === $store.selectedViewId),
+    }
+  })
+
+  const select = id => {
+    store.update(state => ({
+      ...state,
+      selectedViewId: id,
+    }))
+  }
+
+  const deleteView = async view => {
+    await API.viewV2.delete(view.id)
+    replaceView(view.id, null)
+  }
+
+  const create = async view => {
+    const savedViewResponse = await API.viewV2.create(view)
+    const savedView = savedViewResponse.data
+    replaceView(savedView.id, savedView)
+    return savedView
+  }
+
+  const save = async view => {
+    const res = await API.viewV2.update(view)
+    const savedView = res?.data
+    replaceView(view.id, savedView)
+  }
+
+  // Handles external updates of tables
+  const replaceView = (viewId, view) => {
+    if (!viewId) {
+      return
+    }
+    const existingView = get(derivedStore).list.find(view => view.id === viewId)
+    const tableIndex = get(tables).list.findIndex(table => {
+      return table._id === view?.tableId || table._id === existingView?.tableId
+    })
+    if (tableIndex === -1) {
+      return
+    }
+
+    // Handle deletion
+    if (!view) {
+      tables.update(state => {
+        delete state.list[tableIndex].views[existingView.name]
+        return state
+      })
+      return
+    }
+
+    // Add new view
+    if (!existingView) {
+      tables.update(state => {
+        state.list[tableIndex].views[view.name] = view
+        return state
+      })
+    }
+
+    // Update existing view
+    else {
+      tables.update(state => {
+        // Remove old view
+        delete state.list[tableIndex].views[existingView.name]
+
+        // Add new view
+        state.list[tableIndex].views[view.name] = view
+        return state
+      })
+    }
+  }
+
+  return {
+    subscribe: derivedStore.subscribe,
+    select,
+    delete: deleteView,
+    create,
+    save,
+    replaceView,
+  }
+}
+
+export const viewsV2 = createViewsV2Store()
diff --git a/packages/builder/src/stores/portal/groups.js b/packages/builder/src/stores/portal/groups.js
index c7a54c7e6d..a505029627 100644
--- a/packages/builder/src/stores/portal/groups.js
+++ b/packages/builder/src/stores/portal/groups.js
@@ -78,7 +78,19 @@ export function createGroupsStore() {
     },
 
     getGroupAppIds: group => {
-      return Object.keys(group?.roles || {})
+      let groupAppIds = Object.keys(group?.roles || {})
+      if (group?.builder?.apps) {
+        groupAppIds = groupAppIds.concat(group.builder.apps)
+      }
+      return groupAppIds
+    },
+
+    addGroupAppBuilder: async (groupId, appId) => {
+      return await API.addGroupAppBuilder({ groupId, appId })
+    },
+
+    removeGroupAppBuilder: async (groupId, appId) => {
+      return await API.removeGroupAppBuilder({ groupId, appId })
     },
   }
 
diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index 4a59f29f52..795616add1 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -125,6 +125,13 @@ export const createLicensingStore = () => {
       const syncAutomationsEnabled = license.features.includes(
         Constants.Features.SYNC_AUTOMATIONS
       )
+      const perAppBuildersEnabled = license.features.includes(
+        Constants.Features.APP_BUILDERS
+      )
+
+      const isViewPermissionsEnabled = license.features.includes(
+        Constants.Features.VIEW_PERMISSIONS
+      )
       store.update(state => {
         return {
           ...state,
@@ -140,6 +147,8 @@ export const createLicensingStore = () => {
           auditLogsEnabled,
           enforceableSSO,
           syncAutomationsEnabled,
+          isViewPermissionsEnabled,
+          perAppBuildersEnabled,
         }
       })
     },
diff --git a/packages/builder/src/stores/portal/users.js b/packages/builder/src/stores/portal/users.js
index 992f6a5418..3ee0516544 100644
--- a/packages/builder/src/stores/portal/users.js
+++ b/packages/builder/src/stores/portal/users.js
@@ -112,13 +112,20 @@ export function createUsersStore() {
     return await API.saveUser(user)
   }
 
+  async function addAppBuilder(userId, appId) {
+    return await API.addAppBuilder({ userId, appId })
+  }
+
+  async function removeAppBuilder(userId, appId) {
+    return await API.removeAppBuilder({ userId, appId })
+  }
+
   const getUserRole = user =>
     sdk.users.isAdmin(user)
       ? "admin"
       : sdk.users.isBuilder(user)
       ? "developer"
       : "appUser"
-
   const refreshUsage =
     fn =>
     async (...args) => {
@@ -139,6 +146,8 @@ export function createUsersStore() {
     getInvites,
     updateInvite,
     getUserCountByApp,
+    addAppBuilder,
+    removeAppBuilder,
     // any operation that adds or deletes users
     acceptInvite,
     create: refreshUsage(create),
diff --git a/packages/cli/src/constants.ts b/packages/cli/src/constants.ts
index 6fa5822986..62ce0dc4d9 100644
--- a/packages/cli/src/constants.ts
+++ b/packages/cli/src/constants.ts
@@ -1,4 +1,4 @@
 export { CommandWord, InitType, AnalyticsEvent } from "@budibase/types"
 
-export const POSTHOG_TOKEN = "phc_yGOn4i7jWKaCTapdGR6lfA4AvmuEQ2ijn5zAVSFYPlS"
+export const POSTHOG_TOKEN = "phc_bIjZL7oh2GEUd2vqvTBH8WvrX0fWTFQMs6H5KQxiUxU"
 export const GENERATED_USER_EMAIL = "admin@admin.com"
diff --git a/packages/cli/tsconfig.build.json b/packages/cli/tsconfig.build.json
index 34a89f54c3..9fbccadd31 100644
--- a/packages/cli/tsconfig.build.json
+++ b/packages/cli/tsconfig.build.json
@@ -8,22 +8,16 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "incremental": true,
-    "types": [ "node", "jest" ],
+    "types": ["node", "jest"],
     "outDir": "dist",
     "skipLibCheck": true,
     "paths": {
       "@budibase/types": ["../types/src"],
       "@budibase/backend-core": ["../backend-core/src"],
-      "@budibase/backend-core/*": ["../backend-core/*"]
+      "@budibase/backend-core/*": ["../backend-core/*"],
+      "@budibase/shared-core": ["../shared-core/src"]
     }
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.spec.ts",
-    "**/*.spec.js"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.spec.js"]
 }
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b6a231917c..229d344d55 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2408,6 +2408,13 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+
+      {
+        "type": "text",
+        "label": "Initial form step",
+        "key": "initialFormStep",
+        "defaultValue": 1
       }
     ],
     "context": [
@@ -2445,6 +2452,7 @@
     "name": "Form Step",
     "icon": "AssetsAdded",
     "hasChildren": true,
+    "requiredAncestors": ["form"],
     "illegalChildren": ["section", "form", "formstep", "formblock"],
     "styles": ["size"],
     "size": {
@@ -2464,6 +2472,7 @@
   "fieldgroup": {
     "name": "Field Group",
     "icon": "Group",
+    "requiredAncestors": ["form"],
     "illegalChildren": ["section"],
     "styles": ["size"],
     "hasChildren": true,
@@ -3638,9 +3647,9 @@
       },
       {
         "type": "boolean",
-        "label": "Autocomplete",
+        "label": "Search",
         "key": "autocomplete",
-        "defaultValue": false
+        "defaultValue": true
       },
       {
         "type": "boolean",
@@ -4613,14 +4622,15 @@
             "type": "field/sortable",
             "label": "Sort by",
             "key": "sortColumn",
-            "placeholder": "None"
+            "placeholder": "Default"
           },
           {
             "type": "select",
             "label": "Sort order",
             "key": "sortOrder",
             "options": ["Ascending", "Descending"],
-            "defaultValue": "Ascending"
+            "defaultValue": "Ascending",
+            "dependsOn": "sortColumn"
           },
           {
             "type": "select",
@@ -4728,27 +4738,18 @@
             ]
           },
           {
-            "label": "Fields",
+            "label": "",
             "type": "fieldConfiguration",
             "key": "sidePanelFields",
             "nested": true,
             "dependsOn": {
               "setting": "clickBehaviour",
               "value": "details"
-            }
+            },
+            "resetOn": "dataSource"
           },
           {
-            "label": "Show delete",
-            "type": "boolean",
-            "key": "sidePanelShowDelete",
-            "nested": true,
-            "dependsOn": {
-              "setting": "clickBehaviour",
-              "value": "details"
-            }
-          },
-          {
-            "label": "Save label",
+            "label": "Save button",
             "type": "text",
             "key": "sidePanelSaveLabel",
             "defaultValue": "Save",
@@ -4759,7 +4760,7 @@
             }
           },
           {
-            "label": "Delete label",
+            "label": "Delete button",
             "type": "text",
             "key": "sidePanelDeleteLabel",
             "defaultValue": "Delete",
@@ -5272,20 +5273,9 @@
       },
       {
         "type": "table",
-        "label": "Table",
+        "label": "Data",
         "key": "dataSource"
       },
-      {
-        "type": "text",
-        "label": "Row ID",
-        "key": "rowId",
-        "nested": true,
-        "dependsOn": {
-          "setting": "actionType",
-          "value": "Create",
-          "invert": true
-        }
-      },
       {
         "type": "text",
         "label": "Title",
@@ -5293,116 +5283,55 @@
         "nested": true
       },
       {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ],
-        "defaultValue": "spectrum--medium"
-      },
-      {
-        "type": "text",
-        "label": "Empty text",
-        "key": "noRowsMessage",
-        "defaultValue": "We couldn't find a row to display",
+        "section": true,
         "dependsOn": {
           "setting": "actionType",
           "value": "Create",
           "invert": true
-        }
-      },
-      {
-        "section": true,
-        "name": "Fields",
+        },
+        "name": "Row details",
+        "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
         "settings": [
           {
-            "type": "fieldConfiguration",
-            "label": "Fields",
-            "key": "fields",
-            "selectAllFields": true
+            "type": "text",
+            "label": "Row ID",
+            "key": "rowId",
+            "nested": true
           },
           {
-            "type": "select",
-            "label": "Field labels",
-            "key": "labelPosition",
-            "defaultValue": "left",
-            "options": [
-              {
-                "label": "Left",
-                "value": "left"
-              },
-              {
-                "label": "Above",
-                "value": "above"
-              }
-            ]
-          },
-          {
-            "type": "boolean",
-            "label": "Disabled",
-            "key": "disabled",
-            "defaultValue": false,
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "View",
-              "invert": true
-            }
+            "type": "text",
+            "label": "Empty text",
+            "key": "noRowsMessage",
+            "defaultValue": "We couldn't find a row to display",
+            "nested": true
           }
         ]
       },
       {
         "section": true,
         "name": "Buttons",
+        "dependsOn": {
+          "setting": "actionType",
+          "value": "View",
+          "invert": true
+        },
         "settings": [
-          {
-            "type": "boolean",
-            "label": "Show save button",
-            "key": "showSaveButton",
-            "defaultValue": true,
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "View",
-              "invert": true
-            }
-          },
           {
             "type": "text",
             "key": "saveButtonLabel",
-            "label": "Save button label",
+            "label": "Save button",
             "nested": true,
-            "defaultValue": "Save",
-            "dependsOn": {
-              "setting": "showSaveButton",
-              "value": true
-            }
-          },
-          {
-            "type": "boolean",
-            "label": "Allow delete",
-            "key": "showDeleteButton",
-            "defaultValue": false,
-            "dependsOn": {
-              "setting": "actionType",
-              "value": "Update"
-            }
+            "defaultValue": "Save"
           },
           {
             "type": "text",
             "key": "deleteButtonLabel",
-            "label": "Delete button label",
+            "label": "Delete button",
             "nested": true,
             "defaultValue": "Delete",
             "dependsOn": {
-              "setting": "showDeleteButton",
-              "value": true
+              "setting": "actionType",
+              "value": "Update"
             }
           },
           {
@@ -5420,7 +5349,68 @@
             "type": "boolean",
             "label": "Hide notifications",
             "key": "notificationOverride",
-            "defaultValue": false
+            "defaultValue": false,
+            "dependsOn": {
+              "setting": "actionType",
+              "value": "View",
+              "invert": true
+            }
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Fields",
+        "settings": [
+          {
+            "type": "select",
+            "label": "Align labels",
+            "key": "labelPosition",
+            "defaultValue": "left",
+            "options": [
+              {
+                "label": "Left",
+                "value": "left"
+              },
+              {
+                "label": "Above",
+                "value": "above"
+              }
+            ]
+          },
+          {
+            "type": "select",
+            "label": "Size",
+            "key": "size",
+            "options": [
+              {
+                "label": "Medium",
+                "value": "spectrum--medium"
+              },
+              {
+                "label": "Large",
+                "value": "spectrum--large"
+              }
+            ],
+            "defaultValue": "spectrum--medium"
+          },
+          {
+            "type": "fieldConfiguration",
+            "key": "fields",
+            "nested": true,
+            "resetOn": "dataSource",
+            "selectAllFields": true
+          },
+          {
+            "type": "boolean",
+            "label": "Disabled",
+            "key": "disabled",
+            "defaultValue": false,
+            "dependsOn": {
+              "setting": "actionType",
+              "value": "View",
+              "invert": true
+            }
           }
         ]
       }
@@ -5456,7 +5446,7 @@
     "settings": [
       {
         "type": "table",
-        "label": "Table",
+        "label": "Data",
         "key": "dataSource",
         "required": true
       },
@@ -5547,7 +5537,7 @@
     "settings": [
       {
         "type": "table",
-        "label": "Table",
+        "label": "Data",
         "key": "table",
         "required": true
       },
@@ -5573,7 +5563,8 @@
         "label": "Sort order",
         "key": "initialSortOrder",
         "options": ["Ascending", "Descending"],
-        "defaultValue": "Ascending"
+        "defaultValue": "Ascending",
+        "dependsOn": "initialSortColumn"
       },
       {
         "type": "select",
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index ff9f58691e..4efa8af4e6 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -16,7 +16,6 @@
     themeStore,
     appStore,
     devToolsStore,
-    environmentStore,
     devToolsEnabled,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
@@ -206,7 +205,7 @@
                     {/if}
                   </div>
 
-                  {#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud}
+                  {#if !$builderStore.inBuilder && licensing.logoEnabled()}
                     <FreeFooter />
                   {/if}
                 </div>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f17a8db0c9..03aab21d38 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -33,7 +33,7 @@
 
   export let instance = {}
   export let isLayout = false
-  export let isScreen = false
+  export let isRoot = false
   export let isBlock = false
 
   // Get parent contexts
@@ -104,7 +104,7 @@
   // Extract component instance info
   $: children = instance._children || []
   $: id = instance._id
-  $: name = isScreen ? "Screen" : instance._instanceName
+  $: name = isRoot ? "Screen" : instance._instanceName
   $: icon = definition?.icon
 
   // Determine if the component is selected or is part of the critical path
@@ -133,13 +133,13 @@
   $: builderInteractive =
     $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
-  $: interactive = builderInteractive || devToolsInteractive
+  $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
   $: editing = editable && selected && $builderStore.editMode
   $: draggable =
     !inDragPath &&
     interactive &&
     !isLayout &&
-    !isScreen &&
+    !isRoot &&
     definition?.draggable !== false
   $: droppable = interactive
   $: builderHidden =
@@ -272,12 +272,36 @@
       return missing
     })
 
+    // Run any migrations
+    runMigrations(instance, settingsDefinition)
+
     // Force an initial enrichment of the new settings
     enrichComponentSettings(get(context), settingsDefinitionMap, {
       force: true,
     })
   }
 
+  const runMigrations = (instance, settingsDefinition) => {
+    settingsDefinition.forEach(setting => {
+      // Migrate "table" settings to ensure they have a type and resource ID
+      if (setting.type === "table") {
+        const val = instance[setting.key]
+        if (val) {
+          if (!val.type) {
+            val.type = "table"
+          }
+          if (!val.resourceId) {
+            if (val.type === "viewV2") {
+              val.resourceId = val.id
+            } else {
+              val.resourceId = val.tableId
+            }
+          }
+        }
+      }
+    })
+  }
+
   const getSettingsDefinitionMap = settingsDefinition => {
     let map = {}
     settingsDefinition?.forEach(setting => {
@@ -475,7 +499,7 @@
     node.style.scrollMargin = "100px"
     node.scrollIntoView({
       behavior: "smooth",
-      block: "start",
+      block: "nearest",
       inline: "start",
     })
   }
@@ -538,7 +562,7 @@
             <svelte:self instance={child} />
           {/each}
         {:else if emptyState}
-          {#if isScreen}
+          {#if isRoot}
             <ScreenPlaceholder />
           {:else}
             <EmptyPlaceholder />
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index f6f9a932f0..4b3acb2019 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -44,7 +44,7 @@
 {#if $routeStore.routerLoaded}
   {#key screenDefinition?._id}
     <Provider key="url" data={params}>
-      <Component isScreen instance={screenDefinition} />
+      <Component isRoot instance={screenDefinition} />
     </Provider>
   {/key}
 {/if}
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 62a0588172..2639c77edd 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -29,6 +29,9 @@
     paginate,
   })
 
+  // Sanitize schema to remove hidden fields
+  $: schema = sanitizeSchema($fetch.schema)
+
   // Build our action context
   $: actions = [
     {
@@ -66,7 +69,7 @@
     rows: $fetch.rows,
     info: $fetch.info,
     datasource: dataSource || {},
-    schema: $fetch.schema,
+    schema,
     rowsLength: $fetch.rows.length,
 
     // Undocumented properties. These aren't supposed to be used in builder
@@ -94,6 +97,19 @@
     })
   }
 
+  const sanitizeSchema = schema => {
+    if (!schema) {
+      return schema
+    }
+    let cloned = { ...schema }
+    Object.entries(cloned).forEach(([field, fieldSchema]) => {
+      if (fieldSchema.visible === false) {
+        delete cloned[field]
+      }
+    })
+    return cloned
+  }
+
   const addQueryExtension = (key, extension) => {
     if (!key || !extension) {
       return
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index dd67a5657b..9bdea52124 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -38,11 +38,8 @@
   class:in-builder={$builderStore.inBuilder}
 >
   <Grid
-    tableId={table?.tableId}
+    datasource={table}
     {API}
-    {allowAddRows}
-    {allowEditRows}
-    {allowDeleteRows}
     {stripeRows}
     {initialFilter}
     {initialSortColumn}
@@ -50,9 +47,13 @@
     {fixedRowHeight}
     {columnWhitelist}
     {schemaOverrides}
+    canAddRows={allowAddRows}
+    canEditRows={allowEditRows}
+    canDeleteRows={allowDeleteRows}
+    canEditColumns={false}
+    canExpandRows={false}
+    canSaveSchema={false}
     showControls={false}
-    allowExpandRows={false}
-    allowSchemaChanges={false}
     notifySuccess={notificationStore.actions.success}
     notifyError={notificationStore.actions.error}
   />
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index c1dec0b119..e557874edb 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -72,19 +72,27 @@
     $context.device.height
   )
   $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
+  $: screenId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-screen`
+    : "screen"
+  $: navigationId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-navigation`
+    : "navigation"
 
-  // Scroll navigation into view if selected
+  // Scroll navigation into view if selected.
+  // Memoize into a primitive to avoid spamming this whenever builder store
+  // changes.
+  $: selected =
+    $builderStore.inBuilder &&
+    $builderStore.selectedComponentId?.endsWith("-navigation")
   $: {
-    if (
-      $builderStore.inBuilder &&
-      $builderStore.selectedComponentId === "navigation"
-    ) {
+    if (selected) {
       const node = document.getElementsByClassName("nav-wrapper")?.[0]
       if (node) {
         node.style.scrollMargin = "100px"
         node.scrollIntoView({
           behavior: "smooth",
-          block: "start",
+          block: "nearest",
           inline: "start",
         })
       }
@@ -146,26 +154,29 @@
 </script>
 
 <div
-  class="layout layout--{typeClass}"
+  class="component {screenId} layout layout--{typeClass}"
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
+  data-id={screenId}
+  data-name="Screen"
+  data-icon="WebPage"
 >
-  <div class="layout-body">
+  <div class="{screenId}-dom screen-wrapper layout-body">
     {#if typeClass !== "none"}
       <div
-        class="interactive component navigation"
-        data-id="navigation"
+        class="interactive component {navigationId}"
+        data-id={navigationId}
         data-name="Navigation"
-        data-icon="Link"
+        data-icon="Visibility"
       >
         <div
-          class="nav-wrapper"
+          class="nav-wrapper {navigationId}-dom"
           class:sticky
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}
           on:click={$builderStore.inBuilder
-            ? builderStore.actions.clickNav
+            ? builderStore.actions.selectComponent(navigationId)
             : null}
           style={navStyle}
         >
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index efc83fd5ac..5d8f1b71ae 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -45,6 +45,9 @@
   let enrichedSearchColumns
   let schemaLoaded = false
 
+  // Accommodate old config to ensure delete button does not reappear
+  $: deleteLabel = sidePanelShowDelete === false ? "" : sidePanelDeleteLabel
+  $: isDSPlus = dataSource?.type === "table" || dataSource?.type === "viewV2"
   $: fetchSchema(dataSource)
   $: enrichSearchColumns(searchColumns, schema).then(
     val => (enrichedSearchColumns = val)
@@ -53,7 +56,7 @@
   $: editTitle = getEditTitle(detailsFormBlockId, primaryDisplay)
   $: normalFields = getNormalFields(schema)
   $: rowClickActions =
-    clickBehaviour === "actions" || dataSource?.type !== "table"
+    clickBehaviour === "actions" || !isDSPlus
       ? onClick
       : [
           {
@@ -75,7 +78,7 @@
           },
         ]
   $: buttonClickActions =
-    titleButtonClickBehaviour === "actions" || dataSource?.type !== "table"
+    titleButtonClickBehaviour === "actions" || !isDSPlus
       ? onClickTitleButton
       : [
           {
@@ -245,10 +248,8 @@
             bind:id={detailsFormBlockId}
             props={{
               dataSource,
-              showSaveButton: true,
-              showDeleteButton: sidePanelShowDelete,
-              saveButtonLabel: sidePanelSaveLabel,
-              deleteButtonLabel: sidePanelDeleteLabel,
+              saveButtonLabel: sidePanelSaveLabel || "Save", //always show
+              deleteButtonLabel: deleteLabel, //respect config
               actionType: "Update",
               rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
               fields: sidePanelFields || normalFields,
@@ -274,7 +275,7 @@
               dataSource,
               showSaveButton: true,
               showDeleteButton: false,
-              saveButtonLabel: sidePanelSaveLabel,
+              saveButtonLabel: sidePanelSaveLabel || "Save", //always show
               actionType: "Create",
               fields: sidePanelFields || normalFields,
               title: "Create Row",
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index 20faee9013..5d57d10ab6 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -12,42 +12,59 @@
   export let fields
   export let labelPosition
   export let title
+  export let showDeleteButton
+  export let showSaveButton
   export let saveButtonLabel
   export let deleteButtonLabel
-  export let showSaveButton
-  export let showDeleteButton
   export let rowId
   export let actionUrl
   export let noRowsMessage
   export let notificationOverride
 
+  // Accommodate old config to ensure delete button does not reappear
+  $: deleteLabel = showDeleteButton === false ? "" : deleteButtonLabel?.trim()
+  $: saveLabel = showSaveButton === false ? "" : saveButtonLabel?.trim()
+
   const { fetchDatasourceSchema } = getContext("sdk")
 
   const convertOldFieldFormat = fields => {
-    if (typeof fields?.[0] === "string") {
-      return fields.map(field => ({ name: field, displayName: field }))
+    if (!fields) {
+      return []
     }
-
-    return fields
+    return fields.map(field => {
+      if (typeof field === "string") {
+        // existed but was a string
+        return {
+          name: field,
+          active: true,
+        }
+      } else {
+        // existed but had no state
+        return {
+          ...field,
+          active: typeof field?.active != "boolean" ? true : field?.active,
+        }
+      }
+    })
   }
 
   const getDefaultFields = (fields, schema) => {
-    if (schema && (!fields || fields.length === 0)) {
-      const defaultFields = []
-
-      Object.values(schema).forEach(field => {
-        if (field.autocolumn) return
-
-        defaultFields.push({
-          name: field.name,
-          displayName: field.name,
-        })
-      })
-
-      return defaultFields
+    if (!schema) {
+      return []
     }
+    let defaultFields = []
 
-    return fields
+    if (!fields || fields.length === 0) {
+      Object.values(schema)
+        .filter(field => !field.autocolumn)
+        .forEach(field => {
+          defaultFields.push({
+            name: field.name,
+            active: true,
+          })
+        })
+    }
+    return [...fields, ...defaultFields].filter(field => field.active)
   }
 
   let schema
@@ -56,7 +73,6 @@
 
   $: formattedFields = convertOldFieldFormat(fields)
   $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
-
   $: fetchSchema(dataSource)
   $: dataProvider = `{{ literal ${safe(providerId)} }}`
   $: filter = [
@@ -82,15 +98,12 @@
     fields: fieldsOrDefault,
     labelPosition,
     title,
-    saveButtonLabel,
-    deleteButtonLabel,
-    showSaveButton,
-    showDeleteButton,
+    saveButtonLabel: saveLabel,
+    deleteButtonLabel: deleteLabel,
     schema,
     repeaterId,
     notificationOverride,
   }
-
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index c638d58737..f2887e97ad 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -13,8 +13,6 @@
   export let title
   export let saveButtonLabel
   export let deleteButtonLabel
-  export let showSaveButton
-  export let showDeleteButton
   export let schema
   export let repeaterId
   export let notificationOverride
@@ -47,7 +45,7 @@
       "##eventHandlerType": "Save Row",
       parameters: {
         providerId: formId,
-        tableId: dataSource?.tableId,
+        tableId: dataSource?.resourceId,
         notificationOverride,
       },
     },
@@ -80,7 +78,7 @@
       "##eventHandlerType": "Delete Row",
       parameters: {
         confirm: true,
-        tableId: dataSource?.tableId,
+        tableId: dataSource?.resourceId,
         rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
         revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
         notificationOverride,
@@ -100,18 +98,33 @@
     },
   ]
 
-  $: renderDeleteButton = showDeleteButton && actionType === "Update"
-  $: renderSaveButton = showSaveButton && actionType !== "View"
+  $: renderDeleteButton = deleteButtonLabel && actionType === "Update"
+  $: renderSaveButton = saveButtonLabel && actionType !== "View"
   $: renderButtons = renderDeleteButton || renderSaveButton
   $: renderHeader = renderButtons || title
 
   const getComponentForField = field => {
-    if (!field || !schema?.[field]) {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
       return null
     }
-    const type = schema[field].type
+    const type = schema[fieldSchemaName].type
     return FieldTypeToComponentMap[type]
   }
+
+  const getPropsForField = field => {
+    let fieldProps = field._component
+      ? {
+          ...field,
+        }
+      : {
+          field: field.name,
+          label: field.name,
+          placeholder: field.name,
+          _instanceName: field.name,
+        }
+    return fieldProps
+  }
 </script>
 
 {#if fields?.length}
@@ -175,7 +188,7 @@
                 <BlockComponent
                   type="button"
                   props={{
-                    text: deleteButtonLabel || "Delete",
+                    text: deleteButtonLabel,
                     onClick: onDelete,
                     quiet: true,
                     type: "secondary",
@@ -187,7 +200,7 @@
                 <BlockComponent
                   type="button"
                   props={{
-                    text: saveButtonLabel || "Save",
+                    text: saveButtonLabel,
                     onClick: onSave,
                     type: "cta",
                   }}
@@ -198,22 +211,19 @@
           {/if}
         </BlockComponent>
       {/if}
-      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-        {#each fields as field, idx}
-          {#if getComponentForField(field.name)}
-            <BlockComponent
-              type={getComponentForField(field.name)}
-              props={{
-                validation: field.validation,
-                field: field.name,
-                label: field.displayName,
-                placeholder: field.displayName,
-              }}
-              order={idx}
-            />
-          {/if}
-        {/each}
-      </BlockComponent>
+      {#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>
+      {/key}
     </BlockComponent>
   </BlockComponent>
 {:else}
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 39c9bf4b59..87883fe4b6 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -9,6 +9,7 @@
   export let size
   export let disabled = false
   export let actionType = "Create"
+  export let initialFormStep = 1
 
   // Not exposed as a builder setting. Used internally to disable validation
   // for fields rendered in things like search blocks.
@@ -21,10 +22,18 @@
   const context = getContext("context")
   const { API, fetchDatasourceSchema } = getContext("sdk")
 
+  const getInitialFormStep = () => {
+    const parsedFormStep = parseInt(initialFormStep)
+    if (isNaN(parsedFormStep)) {
+      return 1
+    }
+    return parsedFormStep
+  }
+
   let loaded = false
   let schema
   let table
-  let currentStep = writable(1)
+  let currentStep = writable(getInitialFormStep())
 
   $: fetchSchema(dataSource)
   $: schemaKey = generateSchemaKey(schema)
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 233ea79812..d9c335e8ce 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -250,7 +250,7 @@
       } else if (type === "first") {
         currentStep.set(1)
       } else if (type === "specific" && number && !isNaN(number)) {
-        currentStep.set(number)
+        currentStep.set(parseInt(number))
       }
     },
     setStep: step => {
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 0c8b076a67..ecbbfcde6a 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -1,6 +1,11 @@
 <script>
-  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
-  import { fetchData } from "@budibase/frontend-core"
+  import {
+    CoreSelect,
+    CoreMultiselect,
+    Input,
+    ProgressCircle,
+  } from "@budibase/bbui"
+  import { fetchData, Utils } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
   import { FieldTypes } from "../../../constants"
@@ -12,7 +17,7 @@
   export let placeholder
   export let disabled = false
   export let validation
-  export let autocomplete = false
+  export let autocomplete = true
   export let defaultValue
   export let onChange
   export let filter
@@ -21,6 +26,16 @@
   let fieldApi
   let fieldSchema
   let tableDefinition
+  let primaryDisplay
+  let options
+  let selectedOptions = []
+  let isOpen = false
+  let hasFilter
+
+  let searchResults
+  let searchString
+  let searching = false
+  let lastSearchId
 
   $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
   $: linkedTableId = fieldSchema?.tableId
@@ -35,13 +50,57 @@
       limit: 100,
     },
   })
+  $: hasFilter = !!filter?.filter(f => !!f.field)?.length
   $: fetch.update({ filter })
-  $: options = $fetch.rows
+  $: {
+    options = searchResults ? searchResults : $fetch.rows
+    const nonMatchingOptions = selectedOptions.filter(
+      option => !options.map(opt => opt._id).includes(option._id)
+    )
+    // Append initially selected options if there is no filter
+    // and hasn't already been appended
+    if (!hasFilter) {
+      options = [...options, ...nonMatchingOptions]
+    }
+  }
   $: tableDefinition = $fetch.definition
+  $: primaryDisplay = tableDefinition?.primaryDisplay || "_id"
   $: singleValue = flatten(fieldState?.value)?.[0]
   $: multiValue = flatten(fieldState?.value) ?? []
   $: component = multiselect ? CoreMultiselect : CoreSelect
   $: expandedDefaultValue = expand(defaultValue)
+  $: debouncedSearch(searchString)
+  $: {
+    if (searching) {
+      isOpen = true
+    }
+  }
+
+  // Fetch the initially selected values
+  // as they may not be within the first 100 records
+  $: {
+    if (
+      primaryDisplay !== "_id" &&
+      fieldState?.value?.length &&
+      !selectedOptions?.length
+    ) {
+      API.searchTable({
+        paginate: false,
+        tableId: linkedTableId,
+        limit: 100,
+        query: {
+          oneOf: {
+            [`1:${primaryDisplay}`]: fieldState?.value?.map(
+              value => value.primaryDisplay
+            ),
+          },
+        },
+      }).then(response => {
+        const value = multiselect ? multiValue : singleValue
+        selectedOptions = response.rows.filter(row => value.includes(row._id))
+      })
+    }
+  }
 
   const flatten = values => {
     if (!values) {
@@ -77,10 +136,66 @@
 
   const handleChange = value => {
     const changed = fieldApi.setValue(value)
+    selectedOptions = value.map(val => ({
+      _id: val,
+      [primaryDisplay]: options.find(option => option._id === val)[
+        primaryDisplay
+      ],
+    }))
     if (onChange && changed) {
       onChange({ value })
     }
   }
+
+  // Search for rows based on the search string
+  const search = async searchString => {
+    // Reset state if this search is invalid
+    if (!linkedTableId || !searchString) {
+      searchResults = null
+      return
+    }
+
+    // If a filter exists, then do a client side search
+    if (hasFilter) {
+      searchResults = $fetch.rows.filter(option =>
+        option[primaryDisplay].startsWith(searchString)
+      )
+      isOpen = true
+      return
+    }
+
+    // Search for results, using IDs to track invocations and ensure we're
+    // handling the latest update
+    lastSearchId = Math.random()
+    searching = true
+    const thisSearchId = lastSearchId
+    const results = await API.searchTable({
+      paginate: false,
+      tableId: linkedTableId,
+      limit: 100,
+      query: {
+        string: {
+          [`1:${primaryDisplay}`]: searchString || "",
+        },
+      },
+    })
+    searching = false
+
+    // In case searching takes longer than our debounced update, abandon these
+    // results
+    if (thisSearchId !== lastSearchId) {
+      return
+    }
+
+    // Process results
+    searchResults = results.rows?.map(row => ({
+      ...row,
+      primaryDisplay: row[primaryDisplay],
+    }))
+  }
+
+  // Debounced version of searching
+  const debouncedSearch = Utils.debounce(search, 250)
 </script>
 
 <Field
@@ -95,19 +210,63 @@
   bind:fieldSchema
 >
   {#if fieldState}
-    <svelte:component
-      this={component}
-      {options}
-      {autocomplete}
-      value={multiselect ? multiValue : singleValue}
-      on:change={multiselect ? multiHandler : singleHandler}
-      id={fieldState.fieldId}
-      disabled={fieldState.disabled}
-      error={fieldState.error}
-      getOptionLabel={getDisplayName}
-      getOptionValue={option => option._id}
-      {placeholder}
-      sort={true}
-    />
+    <div class={autocomplete ? "field-with-search" : ""}>
+      <svelte:component
+        this={component}
+        bind:open={isOpen}
+        {options}
+        autocomplete={false}
+        value={multiselect ? multiValue : singleValue}
+        on:change={multiselect ? multiHandler : singleHandler}
+        id={fieldState.fieldId}
+        disabled={fieldState.disabled}
+        error={fieldState.error}
+        getOptionLabel={getDisplayName}
+        getOptionValue={option => option._id}
+        {placeholder}
+        customPopoverOffsetBelow={autocomplete ? 32 : null}
+        customPopoverMaxHeight={autocomplete ? 240 : null}
+        sort={true}
+      />
+      {#if autocomplete}
+        <div class="search">
+          <Input
+            autofocus
+            quiet
+            type="text"
+            bind:value={searchString}
+            placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
+          />
+          {#if searching}
+            <div>
+              <ProgressCircle size="S" />
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
   {/if}
 </Field>
+
+<style>
+  .search {
+    flex: 0 0 calc(var(--default-row-height) - 1px);
+    display: flex;
+    align-items: center;
+    margin: 4px var(--cell-padding);
+    width: calc(100% - 2 * var(--cell-padding));
+  }
+  .search :global(.spectrum-Textfield) {
+    min-width: 0;
+    width: 100%;
+  }
+  .search :global(.spectrum-Textfield-input) {
+    font-size: 13px;
+  }
+  .search :global(.spectrum-Form-item) {
+    flex: 1 1 auto;
+  }
+  .field-with-search {
+    min-height: 80px;
+  }
+</style>
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 053523aa12..84966a561d 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -45,7 +45,7 @@
       return
     }
     nextIndicators[idx].visible =
-      nextIndicators[idx].isSidePanel || entries[0].isIntersecting
+      nextIndicators[idx].insideSidePanel || entries[0].isIntersecting
     if (++callbackCount === observers.length) {
       indicators = nextIndicators
       updating = false
@@ -125,7 +125,7 @@
         width: elBounds.width + 4,
         height: elBounds.height + 4,
         visible: false,
-        isSidePanel: child.classList.contains("side-panel"),
+        insideSidePanel: !!child.closest(".side-panel"),
       })
     })
   }
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index e1bfe4f7e5..b69b8ce050 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -30,7 +30,7 @@
     }
   }
   $: settings = getBarSettings(definition)
-  $: isScreen = id === $builderStore.screen?.props?._id
+  $: isRoot = id === $builderStore.screen?.props?._id
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -160,11 +160,11 @@
       {:else if setting.type === "color"}
         <SettingsColorPicker prop={setting.key} />
       {/if}
-      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isScreen)}
+      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />
       {/if}
     {/each}
-    {#if !isScreen}
+    {#if !isRoot}
       <SettingsButton
         icon="Duplicate"
         on:click={() => {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 23d789dc2c..036558e8b2 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -80,9 +80,6 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
-    clickNav: () => {
-      eventStore.actions.dispatchEvent("click-nav")
-    },
     requestAddComponent: () => {
       eventStore.actions.dispatchEvent("request-add-component")
     },
diff --git a/packages/client/src/stores/dataSource.js b/packages/client/src/stores/dataSource.js
index 6288cbc072..2e99a55aa3 100644
--- a/packages/client/src/stores/dataSource.js
+++ b/packages/client/src/stores/dataSource.js
@@ -18,6 +18,8 @@ export const createDataSourceStore = () => {
     // Extract table ID
     if (dataSource.type === "table" || dataSource.type === "view") {
       dataSourceId = dataSource.tableId
+    } else if (dataSource.type === "viewV2") {
+      dataSourceId = dataSource.id
     }
 
     // Only one side of the relationship is required as a trigger, as it will
@@ -79,7 +81,7 @@ export const createDataSourceStore = () => {
 
     // Fetch related table IDs from table schema
     let schema
-    if (options.invalidateRelationships) {
+    if (options.invalidateRelationships && !dataSourceId?.includes("view_")) {
       try {
         const definition = await API.fetchTableDefinition(dataSourceId)
         schema = definition?.schema
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 4fdda2a076..18d6b3de3c 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -42,7 +42,7 @@ const saveRowHandler = async (action, context) => {
     }
 
     // Refresh related datasources
-    await dataSourceStore.actions.invalidateDataSource(row.tableId, {
+    await dataSourceStore.actions.invalidateDataSource(tableId, {
       invalidateRelationships: true,
     })
 
@@ -75,7 +75,7 @@ const duplicateRowHandler = async (action, context) => {
       }
 
       // Refresh related datasources
-      await dataSourceStore.actions.invalidateDataSource(row.tableId, {
+      await dataSourceStore.actions.invalidateDataSource(tableId, {
         invalidateRelationships: true,
       })
 
diff --git a/packages/client/src/utils/schema.js b/packages/client/src/utils/schema.js
index e450c516d7..f20e724a6e 100644
--- a/packages/client/src/utils/schema.js
+++ b/packages/client/src/utils/schema.js
@@ -6,6 +6,7 @@ import RelationshipFetch from "@budibase/frontend-core/src/fetch/RelationshipFet
 import NestedProviderFetch from "@budibase/frontend-core/src/fetch/NestedProviderFetch.js"
 import FieldFetch from "@budibase/frontend-core/src/fetch/FieldFetch.js"
 import JSONArrayFetch from "@budibase/frontend-core/src/fetch/JSONArrayFetch.js"
+import ViewV2Fetch from "@budibase/frontend-core/src/fetch/ViewV2Fetch.js"
 
 /**
  * Fetches the schema of any kind of datasource.
@@ -21,6 +22,7 @@ export const fetchDatasourceSchema = async (
   const handler = {
     table: TableFetch,
     view: ViewFetch,
+    viewV2: ViewV2Fetch,
     query: QueryFetch,
     link: RelationshipFetch,
     provider: NestedProviderFetch,
@@ -49,6 +51,15 @@ export const fetchDatasourceSchema = async (
     return null
   }
 
+  // Strip hidden fields from views
+  if (datasource.type === "viewV2") {
+    Object.keys(schema).forEach(field => {
+      if (!schema[field].visible) {
+        delete schema[field]
+      }
+    })
+  }
+
   // Enrich schema with relationships if required
   if (definition?.sql && options?.enrichRelationships) {
     const relationshipAdditions = await getRelationshipSchemaAdditions(schema)
diff --git a/packages/frontend-core/src/api/groups.js b/packages/frontend-core/src/api/groups.js
index 72cbe30718..b1be230ac6 100644
--- a/packages/frontend-core/src/api/groups.js
+++ b/packages/frontend-core/src/api/groups.js
@@ -104,5 +104,27 @@ export const buildGroupsEndpoints = API => {
     removeAppsFromGroup: async (groupId, appArray) => {
       return updateGroupResource(groupId, "apps", "remove", appArray)
     },
+
+    /**
+     * Add app builder to group
+     * @param groupId The group to update
+     * @param appId The app id where the builder will be added
+     */
+    addGroupAppBuilder: async ({ groupId, appId }) => {
+      return await API.post({
+        url: `/api/global/groups/${groupId}/app/${appId}/builder`,
+      })
+    },
+
+    /**
+     * Remove app builder from group
+     * @param groupId The group to update
+     * @param appId The app id where the builder will be removed
+     */
+    removeGroupAppBuilder: async ({ groupId, appId }) => {
+      return await API.delete({
+        url: `/api/global/groups/${groupId}/app/${appId}/builder`,
+      })
+    },
   }
 }
diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js
index 5bffb82f4d..aefc3522a7 100644
--- a/packages/frontend-core/src/api/index.js
+++ b/packages/frontend-core/src/api/index.js
@@ -23,6 +23,7 @@ import { buildTemplateEndpoints } from "./templates"
 import { buildUserEndpoints } from "./user"
 import { buildSelfEndpoints } from "./self"
 import { buildViewEndpoints } from "./views"
+import { buildViewV2Endpoints } from "./viewsV2"
 import { buildLicensingEndpoints } from "./licensing"
 import { buildGroupsEndpoints } from "./groups"
 import { buildPluginEndpoints } from "./plugins"
@@ -279,5 +280,6 @@ export const createAPIClient = config => {
     ...buildEventEndpoints(API),
     ...buildAuditLogsEndpoints(API),
     ...buildLogsEndpoints(API),
+    viewV2: buildViewV2Endpoints(API),
   }
 }
diff --git a/packages/frontend-core/src/api/permissions.js b/packages/frontend-core/src/api/permissions.js
index 5407cb3ce5..dd0005aaf2 100644
--- a/packages/frontend-core/src/api/permissions.js
+++ b/packages/frontend-core/src/api/permissions.js
@@ -21,4 +21,27 @@ export const buildPermissionsEndpoints = API => ({
       url: `/api/permission/${roleId}/${resourceId}/${level}`,
     })
   },
+
+  /**
+   * Remove the the permissions for a certain resource
+   * @param resourceId the ID of the resource to update
+   * @param roleId the ID of the role to update the permissions of
+   * @param level the level to remove the role for this resource
+   * @return {Promise<*>}
+   */
+  removePermissionFromResource: async ({ resourceId, roleId, level }) => {
+    return await API.delete({
+      url: `/api/permission/${roleId}/${resourceId}/${level}`,
+    })
+  },
+
+  /**
+   * Gets info about the resources that depend on this resource permissions
+   * @param resourceId the resource ID to check
+   */
+  getDependants: async resourceId => {
+    return await API.get({
+      url: `/api/permission/${resourceId}/dependants`,
+    })
+  },
 })
diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js
index 8e8570ea2a..475ef0e2a4 100644
--- a/packages/frontend-core/src/api/rows.js
+++ b/packages/frontend-core/src/api/rows.js
@@ -23,7 +23,23 @@ export const buildRowEndpoints = API => ({
       return
     }
     return await API.post({
-      url: `/api/${row.tableId}/rows`,
+      url: `/api/${row._viewId || row.tableId}/rows`,
+      body: row,
+      suppressErrors,
+    })
+  },
+
+  /**
+   * Patches a row in a table.
+   * @param row the row to patch
+   * @param suppressErrors whether or not to suppress error notifications
+   */
+  patchRow: async (row, suppressErrors = false) => {
+    if (!row?.tableId && !row?._viewId) {
+      return
+    }
+    return await API.patch({
+      url: `/api/${row._viewId || row.tableId}/rows`,
       body: row,
       suppressErrors,
     })
@@ -31,7 +47,7 @@ export const buildRowEndpoints = API => ({
 
   /**
    * Deletes a row from a table.
-   * @param tableId the ID of the table to delete from
+   * @param tableId the ID of the table or view to delete from
    * @param rowId the ID of the row to delete
    * @param revId the rev of the row to delete
    */
@@ -50,10 +66,13 @@ export const buildRowEndpoints = API => ({
 
   /**
    * Deletes multiple rows from a table.
-   * @param tableId the table ID to delete the rows from
+   * @param tableId the table or view ID to delete the rows from
    * @param rows the array of rows to delete
    */
   deleteRows: async ({ tableId, rows }) => {
+    rows?.forEach(row => {
+      delete row?._viewId
+    })
     return await API.delete({
       url: `/api/${tableId}/rows`,
       body: {
diff --git a/packages/frontend-core/src/api/user.js b/packages/frontend-core/src/api/user.js
index d8723a649c..6c616d7baf 100644
--- a/packages/frontend-core/src/api/user.js
+++ b/packages/frontend-core/src/api/user.js
@@ -144,8 +144,8 @@ export const buildUserEndpoints = API => ({
       body: {
         email,
         userInfo: {
-          admin: admin ? { global: true } : undefined,
-          builder: builder ? { global: true } : undefined,
+          admin: admin?.global ? { global: true } : undefined,
+          builder: builder?.global ? { global: true } : undefined,
           apps: apps ? apps : undefined,
         },
       },
@@ -160,8 +160,8 @@ export const buildUserEndpoints = API => ({
         return {
           email,
           userInfo: {
-            admin: admin ? { global: true } : undefined,
-            builder: builder ? { global: true } : undefined,
+            admin,
+            builder,
             apps: apps ? apps : undefined,
           },
         }
@@ -179,6 +179,7 @@ export const buildUserEndpoints = API => ({
       url: `/api/global/users/invite/update/${invite.code}`,
       body: {
         apps: invite.apps,
+        builder: invite.builder,
       },
     })
   },
@@ -250,4 +251,26 @@ export const buildUserEndpoints = API => ({
       url: `/api/global/users/count/${appId}`,
     })
   },
+
+  /**
+   * Adds a per app builder to the selected app
+   * @param appId the applications id
+   * @param userId The id of the user to add as a builder
+   */
+  addAppBuilder: async ({ userId, appId }) => {
+    return await API.post({
+      url: `/api/global/users/${userId}/app/${appId}/builder`,
+    })
+  },
+
+  /**
+   * Removes a per app builder to the selected app
+   * @param appId the applications id
+   * @param userId The id of the user to remove as a builder
+   */
+  removeAppBuilder: async ({ userId, appId }) => {
+    return await API.delete({
+      url: `/api/global/users/${userId}/app/${appId}/builder`,
+    })
+  },
 })
diff --git a/packages/frontend-core/src/api/viewsV2.js b/packages/frontend-core/src/api/viewsV2.js
new file mode 100644
index 0000000000..3580d08229
--- /dev/null
+++ b/packages/frontend-core/src/api/viewsV2.js
@@ -0,0 +1,72 @@
+export const buildViewV2Endpoints = API => ({
+  /**
+   * Fetches the definition of a view
+   * @param viewId the ID of the view to fetch
+   */
+  fetchDefinition: async viewId => {
+    return await API.get({
+      url: `/api/v2/views/${viewId}`,
+    })
+  },
+  /**
+   * Create a new view
+   * @param view the view object
+   */
+  create: async view => {
+    return await API.post({
+      url: `/api/v2/views`,
+      body: view,
+    })
+  },
+  /**
+   * Updates a view
+   * @param view the view object
+   */
+  update: async view => {
+    return await API.put({
+      url: `/api/v2/views/${view.id}`,
+      body: view,
+    })
+  },
+  /**
+   * Fetches all rows in a view
+   * @param viewId the id of the view
+   * @param query the search query
+   * @param paginate whether to paginate or not
+   * @param limit page size
+   * @param bookmark pagination cursor
+   * @param sort sort column
+   * @param sortOrder sort order
+   * @param sortType sort type (text or numeric)
+   */
+  fetch: async ({
+    viewId,
+    query,
+    paginate,
+    limit,
+    bookmark,
+    sort,
+    sortOrder,
+    sortType,
+  }) => {
+    return await API.post({
+      url: `/api/v2/views/${viewId}/search`,
+      body: {
+        query,
+        paginate,
+        limit,
+        bookmark,
+        sort,
+        sortOrder,
+        sortType,
+      },
+    })
+  },
+  /**
+   * Delete a view
+   * @param viewId the id of the view
+   */
+  delete: async viewId => {
+    return await API.delete({ url: `/api/v2/views/${viewId}` })
+  },
+})
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index cb8616a735..19bdf1bd74 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -34,7 +34,7 @@
     column.schema.autocolumn ||
     column.schema.disabled ||
     column.schema.type === "formula" ||
-    (!$config.allowEditRows && row._id)
+    (!$config.canEditRows && row._id)
 
   // Register this cell API if the row is focused
   $: {
@@ -58,9 +58,14 @@
     isReadonly: () => readonly,
     getType: () => column.schema.type,
     getValue: () => row[column.name],
-    setValue: value => {
+    setValue: (value, options = { save: true }) => {
       validation.actions.setError(cellId, null)
-      updateValue(row._id, column.name, value)
+      updateValue({
+        rowId: row._id,
+        column: column.name,
+        value,
+        save: options?.save,
+      })
     },
   }
 </script>
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index dd11066b98..5357d4b5cf 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -40,7 +40,7 @@
       <div
         on:click={select}
         class="checkbox"
-        class:visible={$config.allowDeleteRows &&
+        class:visible={$config.canDeleteRows &&
           (disableNumber || rowSelected || rowHovered || rowFocused)}
       >
         <Checkbox value={rowSelected} {disabled} />
@@ -48,14 +48,14 @@
       {#if !disableNumber}
         <div
           class="number"
-          class:visible={!$config.allowDeleteRows ||
+          class:visible={!$config.canDeleteRows ||
             !(rowSelected || rowHovered || rowFocused)}
         >
           {row.__idx + 1}
         </div>
       {/if}
     {/if}
-    {#if rowSelected && $config.allowDeleteRows}
+    {#if rowSelected && $config.canDeleteRows}
       <div class="delete" on:click={() => dispatch("request-bulk-delete")}>
         <Icon
           name="Delete"
@@ -64,7 +64,7 @@
         />
       </div>
     {:else}
-      <div class="expand" class:visible={$config.allowExpandRows && expandable}>
+      <div class="expand" class:visible={$config.canExpandRows && expandable}>
         <Icon
           size="S"
           name="Maximize"
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 575a216c6f..c5f1f7896a 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -56,6 +56,7 @@
     popover.hide()
     editIsOpen = false
   }
+
   const onMouseDown = e => {
     if (e.button === 0 && orderable) {
       timeout = setTimeout(() => {
@@ -116,6 +117,7 @@
     columns.actions.saveChanges()
     open = false
   }
+
   onMount(() => subscribe("close-edit-column", cancelEdit))
 </script>
 
@@ -170,7 +172,6 @@
   align="right"
   offset={0}
   popoverTarget={document.getElementById(`grid-${rand}`)}
-  animate={false}
   customZindex={100}
 >
   {#if editIsOpen}
@@ -187,7 +188,7 @@
       <MenuItem
         icon="Edit"
         on:click={editColumn}
-        disabled={!$config.allowSchemaChanges || column.schema.disabled}
+        disabled={!$config.canEditColumns || column.schema.disabled}
       >
         Edit column
       </MenuItem>
@@ -195,7 +196,6 @@
         icon="Label"
         on:click={makeDisplayColumn}
         disabled={idx === "sticky" ||
-          !$config.allowSchemaChanges ||
           bannedDisplayColumnTypes.includes(column.schema.type)}
       >
         Use as display column
diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
index b8728156db..01c9dc648b 100644
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -3,7 +3,7 @@
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
-  const { columns, stickyColumn } = getContext("grid")
+  const { columns, stickyColumn, dispatch } = getContext("grid")
 
   let open = false
   let anchor
@@ -11,33 +11,36 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleVisibility = (column, visible) => {
+  const toggleVisibility = async (column, visible) => {
     columns.update(state => {
       const index = state.findIndex(col => col.name === column.name)
       state[index].visible = visible
       return state.slice()
     })
-    columns.actions.saveChanges()
+    await columns.actions.saveChanges()
+    dispatch(visible ? "show-column" : "hide-column")
   }
 
-  const showAll = () => {
+  const showAll = async () => {
     columns.update(state => {
       return state.map(col => ({
         ...col,
         visible: true,
       }))
     })
-    columns.actions.saveChanges()
+    await columns.actions.saveChanges()
+    dispatch("show-column")
   }
 
-  const hideAll = () => {
+  const hideAll = async () => {
     columns.update(state => {
       return state.map(col => ({
         ...col,
         visible: false,
       }))
     })
-    columns.actions.saveChanges()
+    await columns.actions.saveChanges()
+    dispatch("hide-column")
   }
 
   const getText = columns => {
diff --git a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
index 22e0c6c2e9..c2797ce537 100644
--- a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
@@ -8,8 +8,14 @@
     SmallRowHeight,
   } from "../lib/constants"
 
-  const { stickyColumn, columns, rowHeight, table, fixedRowHeight } =
-    getContext("grid")
+  const {
+    stickyColumn,
+    columns,
+    rowHeight,
+    definition,
+    fixedRowHeight,
+    datasource,
+  } = getContext("grid")
 
   // Some constants for column width options
   const smallColSize = 120
@@ -60,8 +66,8 @@
   ]
 
   const changeRowHeight = height => {
-    columns.actions.saveTable({
-      ...$table,
+    datasource.actions.saveDefinition({
+      ...$definition,
       rowHeight: height,
     })
   }
diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
index bd75249216..60e3c8e514 100644
--- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
@@ -8,7 +8,6 @@
   let anchor
 
   $: columnOptions = getColumnOptions($stickyColumn, $columns)
-  $: checkValidSortColumn($sort.column, $stickyColumn, $columns)
   $: orderOptions = getOrderOptions($sort.column, columnOptions)
 
   const getColumnOptions = (stickyColumn, columns) => {
@@ -46,8 +45,8 @@
 
   const updateSortColumn = e => {
     sort.update(state => ({
-      ...state,
       column: e.detail,
+      order: e.detail ? state.order : "ascending",
     }))
   }
 
@@ -57,29 +56,6 @@
       order: e.detail,
     }))
   }
-
-  // Ensure we never have a sort column selected that is not visible
-  const checkValidSortColumn = (sortColumn, stickyColumn, columns) => {
-    if (!sortColumn) {
-      return
-    }
-    if (
-      sortColumn !== stickyColumn?.name &&
-      !columns.some(col => col.name === sortColumn)
-    ) {
-      if (stickyColumn) {
-        sort.update(state => ({
-          ...state,
-          column: stickyColumn.name,
-        }))
-      } else {
-        sort.update(state => ({
-          ...state,
-          column: columns[0]?.name,
-        }))
-      }
-    }
-  }
 </script>
 
 <div bind:this={anchor}>
@@ -98,21 +74,23 @@
 <Popover bind:open {anchor} align="left">
   <div class="content">
     <Select
-      placeholder={null}
+      placeholder="Default"
       value={$sort.column}
       options={columnOptions}
       autoWidth
       on:change={updateSortColumn}
       label="Column"
     />
-    <Select
-      placeholder={null}
-      value={$sort.order}
-      options={orderOptions}
-      autoWidth
-      on:change={updateSortOrder}
-      label="Order"
-    />
+    {#if $sort.column}
+      <Select
+        placeholder={null}
+        value={$sort.order || "ascending"}
+        options={orderOptions}
+        autoWidth
+        on:change={updateSortOrder}
+        label="Order"
+      />
+    {/if}
   </div>
 </Popover>
 
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 509c91c7dc..44e0a972f1 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -1,5 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
+  import { writable } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
@@ -28,14 +29,15 @@
   } from "../lib/constants"
 
   export let API = null
-  export let tableId = null
+  export let datasource = null
   export let schemaOverrides = null
   export let columnWhitelist = null
-  export let allowAddRows = true
-  export let allowExpandRows = true
-  export let allowEditRows = true
-  export let allowDeleteRows = true
-  export let allowSchemaChanges = true
+  export let canAddRows = true
+  export let canExpandRows = true
+  export let canEditRows = true
+  export let canDeleteRows = true
+  export let canEditColumns = true
+  export let canSaveSchema = true
   export let stripeRows = false
   export let collaboration = true
   export let showAvatars = true
@@ -50,11 +52,14 @@
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
 
+  // Store props in a store for reference in other stores
+  const props = writable($$props)
+
   // Build up context
   let context = {
     API: API || createAPIClient(),
     rand,
-    props: $$props,
+    props,
   }
   context = { ...context, ...createEventManagers() }
   context = attachStores(context)
@@ -71,19 +76,19 @@
     contentLines,
     gridFocused,
     error,
-    canAddRows,
   } = context
 
   // Keep config store up to date with props
-  $: config.set({
-    tableId,
+  $: props.set({
+    datasource,
     schemaOverrides,
     columnWhitelist,
-    allowAddRows,
-    allowExpandRows,
-    allowEditRows,
-    allowDeleteRows,
-    allowSchemaChanges,
+    canAddRows,
+    canExpandRows,
+    canEditRows,
+    canDeleteRows,
+    canEditColumns,
+    canSaveSchema,
     stripeRows,
     collaboration,
     showAvatars,
@@ -155,7 +160,7 @@
           </HeaderRow>
           <GridBody />
         </div>
-        {#if $canAddRows}
+        {#if $config.canAddRows}
           <NewRow />
         {/if}
         <div class="overlays">
@@ -179,7 +184,7 @@
       <ProgressCircle />
     </div>
   {/if}
-  {#if allowDeleteRows}
+  {#if $config.canDeleteRows}
     <BulkDeleteHandler />
   {/if}
   <KeyboardManager />
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index e8a721b2a7..bbd36a0e6d 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -9,10 +9,10 @@
     renderedRows,
     renderedColumns,
     rowVerticalInversionIndex,
-    canAddRows,
     hoveredRowId,
     dispatch,
     isDragging,
+    config,
   } = getContext("grid")
 
   let body
@@ -43,7 +43,7 @@
         invertY={idx >= $rowVerticalInversionIndex}
       />
     {/each}
-    {#if $canAddRows}
+    {#if $config.canAddRows}
       <div
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index 3536b2ca79..97b7d054f3 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -1,12 +1,11 @@
 <script>
   import NewColumnButton from "./NewColumnButton.svelte"
-
   import { getContext } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
   import { TempTooltip, TooltipType } from "@budibase/bbui"
 
-  const { renderedColumns, config, hasNonAutoColumn, tableId, loading } =
+  const { renderedColumns, config, hasNonAutoColumn, datasource, loading } =
     getContext("grid")
 </script>
 
@@ -20,8 +19,8 @@
       {/each}
     </div>
   </GridScrollWrapper>
-  {#if $config.allowSchemaChanges}
-    {#key $tableId}
+  {#if $config.canEditColumns}
+    {#key $datasource}
       <TempTooltip
         text="Click here to create your first column"
         type={TooltipType.Info}
diff --git a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
index 069e2ce1af..d131df26e5 100644
--- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
@@ -7,6 +7,7 @@
 
   let anchor
   let open = false
+
   $: columnsWidth = $renderedColumns.reduce(
     (total, col) => (total += col.width),
     0
@@ -17,6 +18,7 @@
   const close = () => {
     open = false
   }
+
   onMount(() => subscribe("close-edit-column", close))
 </script>
 
@@ -32,10 +34,9 @@
 <Popover
   bind:open
   {anchor}
-  align="right"
+  align={$renderedColumns.length ? "right" : "left"}
   offset={0}
   popoverTarget={document.getElementById(`add-column-button`)}
-  animate={false}
   customZindex={100}
 >
   <div
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index dc6e0cb971..6a926ca02c 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -17,7 +17,7 @@
     dispatch,
     rows,
     focusedCellAPI,
-    tableId,
+    datasource,
     subscribe,
     renderedRows,
     renderedColumns,
@@ -28,7 +28,7 @@
     columnHorizontalInversionIndex,
     selectedRows,
     loading,
-    canAddRows,
+    config,
   } = getContext("grid")
 
   let visible = false
@@ -38,7 +38,7 @@
 
   $: firstColumn = $stickyColumn || $renderedColumns[0]
   $: width = GutterWidth + ($stickyColumn?.width || 0)
-  $: $tableId, (visible = false)
+  $: $datasource, (visible = false)
   $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
   $: selectedRowCount = Object.values($selectedRows).length
   $: hasNoRows = !$rows.length
@@ -120,8 +120,8 @@
     document.addEventListener("keydown", handleKeyPress)
   }
 
-  const updateValue = (rowId, columnName, val) => {
-    newRow[columnName] = val
+  const updateValue = ({ column, value }) => {
+    newRow[column] = value
   }
 
   const addViaModal = () => {
@@ -154,7 +154,7 @@
   condition={hasNoRows && !$loading}
   type={TooltipType.Info}
 >
-  {#if !visible && !selectedRowCount && $canAddRows}
+  {#if !visible && !selectedRowCount && $config.canAddRows}
     <div
       class="new-row-fab"
       on:click={() => dispatch("add-row-inline")}
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 587d25a20c..f3af0d9362 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -16,7 +16,7 @@
     renderedRows,
     focusedCellId,
     hoveredRowId,
-    canAddRows,
+    config,
     selectedCellMap,
     focusedRow,
     scrollLeft,
@@ -94,7 +94,7 @@
           {/if}
         </div>
       {/each}
-      {#if $canAddRows}
+      {#if $config.canAddRows}
         <div
           class="row new"
           on:mouseenter={$isDragging
diff --git a/packages/frontend-core/src/components/grid/lib/websocket.js b/packages/frontend-core/src/components/grid/lib/websocket.js
index 66863ca1f2..af34acd530 100644
--- a/packages/frontend-core/src/components/grid/lib/websocket.js
+++ b/packages/frontend-core/src/components/grid/lib/websocket.js
@@ -3,18 +3,21 @@ import { createWebsocket } from "../../../utils"
 import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
 
 export const createGridWebsocket = context => {
-  const { rows, tableId, users, focusedCellId, table, API } = context
+  const { rows, datasource, users, focusedCellId, definition, API } = context
   const socket = createWebsocket("/socket/grid")
 
-  const connectToTable = tableId => {
+  const connectToDatasource = datasource => {
     if (!socket.connected) {
       return
     }
     // Identify which table we are editing
     const appId = API.getAppID()
     socket.emit(
-      GridSocketEvent.SelectTable,
-      { tableId, appId },
+      GridSocketEvent.SelectDatasource,
+      {
+        datasource,
+        appId,
+      },
       ({ users: gridUsers }) => {
         users.set(gridUsers)
       }
@@ -23,7 +26,7 @@ export const createGridWebsocket = context => {
 
   // Built-in events
   socket.on("connect", () => {
-    connectToTable(get(tableId))
+    connectToDatasource(get(datasource))
   })
   socket.on("connect_error", err => {
     console.log("Failed to connect to grid websocket:", err.message)
@@ -48,16 +51,19 @@ export const createGridWebsocket = context => {
   })
 
   // Table events
-  socket.onOther(GridSocketEvent.TableChange, ({ table: newTable }) => {
-    // Only update table if one exists. If the table was deleted then we don't
-    // want to know - let the builder navigate away
-    if (newTable) {
-      table.set(newTable)
+  socket.onOther(
+    GridSocketEvent.DatasourceChange,
+    ({ datasource: newDatasource }) => {
+      // Only update definition if one exists. If the datasource was deleted
+      // then we don't want to know - let the builder navigate away
+      if (newDatasource) {
+        definition.set(newDatasource)
+      }
     }
-  })
+  )
 
   // Change websocket connection when table changes
-  tableId.subscribe(connectToTable)
+  datasource.subscribe(connectToDatasource)
 
   // Notify selected cell changes
   focusedCellId.subscribe($focusedCellId => {
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index df3b93d9c9..cd23f154b5 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -4,7 +4,7 @@
   import { NewRowID } from "../lib/constants"
 
   const {
-    enrichedRows,
+    rows,
     focusedCellId,
     visibleColumns,
     focusedRow,
@@ -16,7 +16,6 @@
     config,
     menu,
     gridFocused,
-    canAddRows,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -46,12 +45,12 @@
         e.preventDefault()
         focusFirstCell()
       } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if ($canAddRows) {
+        if ($config.canAddRows) {
           e.preventDefault()
           dispatch("add-row-inline")
         }
       } else if (e.key === "Delete" || e.key === "Backspace") {
-        if (Object.keys($selectedRows).length && $config.allowDeleteRows) {
+        if (Object.keys($selectedRows).length && $config.canDeleteRows) {
           dispatch("request-bulk-delete")
         }
       }
@@ -100,7 +99,7 @@
           }
           break
         case "Enter":
-          if ($canAddRows) {
+          if ($config.canAddRows) {
             dispatch("add-row-inline")
           }
       }
@@ -120,7 +119,7 @@
           break
         case "Delete":
         case "Backspace":
-          if (Object.keys($selectedRows).length && $config.allowDeleteRows) {
+          if (Object.keys($selectedRows).length && $config.canDeleteRows) {
             dispatch("request-bulk-delete")
           } else {
             deleteSelectedCell()
@@ -131,7 +130,7 @@
           break
         case " ":
         case "Space":
-          if ($config.allowDeleteRows) {
+          if ($config.canDeleteRows) {
             toggleSelectRow()
           }
           break
@@ -143,7 +142,7 @@
 
   // Focuses the first cell in the grid
   const focusFirstCell = () => {
-    const firstRow = $enrichedRows[0]
+    const firstRow = $rows[0]
     if (!firstRow) {
       return
     }
@@ -184,7 +183,7 @@
     if (!$focusedRow) {
       return
     }
-    const newRow = $enrichedRows[$focusedRow.__idx + delta]
+    const newRow = $rows[$focusedRow.__idx + delta]
     if (newRow) {
       const split = $focusedCellId.split("-")
       $focusedCellId = `${newRow._id}-${split[1]}`
@@ -216,13 +215,15 @@
     if ($focusedCellAPI && !$focusedCellAPI.isReadonly()) {
       const type = $focusedCellAPI.getType()
       if (type === "number" && keyCodeIsNumber(keyCode)) {
-        $focusedCellAPI.setValue(parseInt(key))
+        // Update the value locally but don't save it yet
+        $focusedCellAPI.setValue(parseInt(key), { save: false })
         $focusedCellAPI.focus()
       } else if (
         ["string", "barcodeqr", "longform"].includes(type) &&
         (keyCodeIsLetter(keyCode) || keyCodeIsNumber(keyCode))
       ) {
-        $focusedCellAPI.setValue(key)
+        // Update the value locally but don't save it yet
+        $focusedCellAPI.setValue(key, { save: false })
         $focusedCellAPI.focus()
       }
     }
diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
index 56f97c48d6..cbf2c6ee4e 100644
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
@@ -17,7 +17,6 @@
     focusedCellAPI,
     focusedRowId,
     notifications,
-    canAddRows,
   } = getContext("grid")
 
   $: style = makeStyle($menu)
@@ -68,9 +67,7 @@
       </MenuItem>
       <MenuItem
         icon="Maximize"
-        disabled={isNewRow ||
-          !$config.allowEditRows ||
-          !$config.allowExpandRows}
+        disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
         on:click={() => dispatch("edit-row", $focusedRow)}
         on:click={menu.actions.close}
       >
@@ -94,14 +91,14 @@
       </MenuItem>
       <MenuItem
         icon="Duplicate"
-        disabled={isNewRow || !$canAddRows}
+        disabled={isNewRow || !$config.canAddRows}
         on:click={duplicate}
       >
         Duplicate row
       </MenuItem>
       <MenuItem
         icon="Delete"
-        disabled={isNewRow || !$config.allowDeleteRows}
+        disabled={isNewRow || !$config.canDeleteRows}
         on:click={deleteRow}
       >
         Delete row
diff --git a/packages/frontend-core/src/components/grid/stores/clipboard.js b/packages/frontend-core/src/components/grid/stores/clipboard.js
index cf59dafc54..71db36de9b 100644
--- a/packages/frontend-core/src/components/grid/stores/clipboard.js
+++ b/packages/frontend-core/src/components/grid/stores/clipboard.js
@@ -8,7 +8,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const { copiedCell, focusedCellAPI } = context
 
   const copy = () => {
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index 6ca8704c1c..629d5dd893 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -35,20 +35,10 @@ export const createStores = () => {
     []
   )
 
-  // Checks if we have a certain column by name
-  const hasColumn = column => {
-    const $columns = get(columns)
-    const $sticky = get(stickyColumn)
-    return $columns.some(col => col.name === column) || $sticky?.name === column
-  }
-
   return {
     columns: {
       ...columns,
       subscribe: enrichedColumns.subscribe,
-      actions: {
-        hasColumn,
-      },
     },
     stickyColumn,
     visibleColumns,
@@ -56,12 +46,35 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { table, columns, stickyColumn, API, dispatch, config } = context
+  const { columns, stickyColumn } = context
 
-  // Updates the tables primary display column
+  // Derive if we have any normal columns
+  const hasNonAutoColumn = derived(
+    [columns, stickyColumn],
+    ([$columns, $stickyColumn]) => {
+      let allCols = $columns || []
+      if ($stickyColumn) {
+        allCols = [...allCols, $stickyColumn]
+      }
+      const normalCols = allCols.filter(column => {
+        return !column.schema?.autocolumn
+      })
+      return normalCols.length > 0
+    }
+  )
+
+  return {
+    hasNonAutoColumn,
+  }
+}
+
+export const createActions = context => {
+  const { columns, stickyColumn, datasource, definition } = context
+
+  // Updates the datasources primary display column
   const changePrimaryDisplay = async column => {
-    return await saveTable({
-      ...get(table),
+    return await datasource.actions.saveDefinition({
+      ...get(definition),
       primaryDisplay: column,
     })
   }
@@ -83,29 +96,14 @@ export const deriveStores = context => {
     await saveChanges()
   }
 
-  // Derive if we have any normal columns
-  const hasNonAutoColumn = derived(
-    [columns, stickyColumn],
-    ([$columns, $stickyColumn]) => {
-      let allCols = $columns || []
-      if ($stickyColumn) {
-        allCols = [...allCols, $stickyColumn]
-      }
-      const normalCols = allCols.filter(column => {
-        return !column.schema?.autocolumn
-      })
-      return normalCols.length > 0
-    }
-  )
-
-  // Persists column changes by saving metadata against table schema
+  // Persists column changes by saving metadata against datasource schema
   const saveChanges = async () => {
     const $columns = get(columns)
-    const $table = get(table)
+    const $definition = get(definition)
     const $stickyColumn = get(stickyColumn)
-    const newSchema = cloneDeep($table.schema)
+    const newSchema = cloneDeep($definition.schema)
 
-    // Build new updated table schema
+    // Build new updated datasource schema
     Object.keys(newSchema).forEach(column => {
       // Respect order specified by columns
       const index = $columns.findIndex(x => x.name === column)
@@ -125,31 +123,17 @@ export const deriveStores = context => {
       }
     })
 
-    await saveTable({ ...$table, schema: newSchema })
-  }
-
-  const saveTable = async newTable => {
-    // Update local state
-    table.set(newTable)
-
-    // Update server
-    if (get(config).allowSchemaChanges) {
-      await API.saveTable(newTable)
-    }
-
-    // Broadcast change to external state can be updated, as this change
-    // will not be received by the builder websocket because we caused it ourselves
-    dispatch("updatetable", newTable)
+    await datasource.actions.saveDefinition({
+      ...$definition,
+      schema: newSchema,
+    })
   }
 
   return {
-    hasNonAutoColumn,
     columns: {
       ...columns,
       actions: {
-        ...columns.actions,
         saveChanges,
-        saveTable,
         changePrimaryDisplay,
         changeAllColumnWidths,
       },
@@ -158,51 +142,7 @@ export const deriveStores = context => {
 }
 
 export const initialise = context => {
-  const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } =
-    context
-
-  const schema = derived(
-    [table, schemaOverrides, columnWhitelist],
-    ([$table, $schemaOverrides, $columnWhitelist]) => {
-      if (!$table?.schema) {
-        return null
-      }
-      let newSchema = { ...$table?.schema }
-
-      // Edge case to temporarily allow deletion of duplicated user
-      // fields that were saved with the "disabled" flag set.
-      // By overriding the saved schema we ensure only overrides can
-      // set the disabled flag.
-      // TODO: remove in future
-      Object.keys(newSchema).forEach(field => {
-        newSchema[field] = {
-          ...newSchema[field],
-          disabled: false,
-        }
-      })
-
-      // Apply schema overrides
-      Object.keys($schemaOverrides || {}).forEach(field => {
-        if (newSchema[field]) {
-          newSchema[field] = {
-            ...newSchema[field],
-            ...$schemaOverrides[field],
-          }
-        }
-      })
-
-      // Apply whitelist if specified
-      if ($columnWhitelist?.length) {
-        Object.keys(newSchema).forEach(key => {
-          if (!$columnWhitelist.includes(key)) {
-            delete newSchema[key]
-          }
-        })
-      }
-
-      return newSchema
-    }
-  )
+  const { definition, columns, stickyColumn, schema } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
   schema.subscribe($schema => {
@@ -211,12 +151,12 @@ export const initialise = context => {
       stickyColumn.set(null)
       return
     }
-    const $table = get(table)
+    const $definition = get(definition)
 
     // Find primary display
     let primaryDisplay
-    if ($table.primaryDisplay && $schema[$table.primaryDisplay]) {
-      primaryDisplay = $table.primaryDisplay
+    if ($definition.primaryDisplay && $schema[$definition.primaryDisplay]) {
+      primaryDisplay = $definition.primaryDisplay
     }
 
     // Get field list
diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js
index fc9decc1ef..ae995b4ac7 100644
--- a/packages/frontend-core/src/components/grid/stores/config.js
+++ b/packages/frontend-core/src/components/grid/stores/config.js
@@ -1,12 +1,12 @@
-import { writable } from "svelte/store"
 import { derivedMemo } from "../../../utils"
+import { derived } from "svelte/store"
 
 export const createStores = context => {
-  const config = writable(context.props)
-  const getProp = prop => derivedMemo(config, $config => $config[prop])
+  const { props } = context
+  const getProp = prop => derivedMemo(props, $props => $props[prop])
 
   // Derive and memoize some props so that we can react to them in isolation
-  const tableId = getProp("tableId")
+  const datasource = getProp("datasource")
   const initialSortColumn = getProp("initialSortColumn")
   const initialSortOrder = getProp("initialSortOrder")
   const initialFilter = getProp("initialFilter")
@@ -17,8 +17,7 @@ export const createStores = context => {
   const notifyError = getProp("notifyError")
 
   return {
-    config,
-    tableId,
+    datasource,
     initialSortColumn,
     initialSortOrder,
     initialFilter,
@@ -29,3 +28,31 @@ export const createStores = context => {
     notifyError,
   }
 }
+
+export const deriveStores = context => {
+  const { props, hasNonAutoColumn } = context
+
+  // Derive features
+  const config = derived(
+    [props, hasNonAutoColumn],
+    ([$props, $hasNonAutoColumn]) => {
+      let config = { ...$props }
+
+      // Disable some features if we're editing a view
+      if ($props.datasource?.type === "viewV2") {
+        config.canEditColumns = false
+      }
+
+      // Disable adding rows if we don't have any valid columns
+      if (!$hasNonAutoColumn) {
+        config.canAddRows = false
+      }
+
+      return config
+    }
+  )
+
+  return {
+    config,
+  }
+}
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
new file mode 100644
index 0000000000..3f4347953e
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -0,0 +1,131 @@
+import { derived, get, writable } from "svelte/store"
+
+export const createStores = () => {
+  const definition = writable(null)
+
+  return {
+    definition,
+  }
+}
+
+export const deriveStores = context => {
+  const { definition, schemaOverrides, columnWhitelist } = context
+
+  const schema = derived(
+    [definition, schemaOverrides, columnWhitelist],
+    ([$definition, $schemaOverrides, $columnWhitelist]) => {
+      if (!$definition?.schema) {
+        return null
+      }
+      let newSchema = { ...$definition?.schema }
+
+      // Apply schema overrides
+      Object.keys($schemaOverrides || {}).forEach(field => {
+        if (newSchema[field]) {
+          newSchema[field] = {
+            ...newSchema[field],
+            ...$schemaOverrides[field],
+          }
+        }
+      })
+
+      // Apply whitelist if specified
+      if ($columnWhitelist?.length) {
+        Object.keys(newSchema).forEach(key => {
+          if (!$columnWhitelist.includes(key)) {
+            delete newSchema[key]
+          }
+        })
+      }
+
+      return newSchema
+    }
+  )
+
+  return {
+    schema,
+  }
+}
+
+export const createActions = context => {
+  const { datasource, definition, config, dispatch, table, viewV2 } = context
+
+  // Gets the appropriate API for the configured datasource type
+  const getAPI = () => {
+    const $datasource = get(datasource)
+    switch ($datasource?.type) {
+      case "table":
+        return table
+      case "viewV2":
+        return viewV2
+      default:
+        return null
+    }
+  }
+
+  // Refreshes the datasource definition
+  const refreshDefinition = async () => {
+    return await getAPI()?.actions.refreshDefinition()
+  }
+
+  // Saves the datasource definition
+  const saveDefinition = async newDefinition => {
+    // Update local state
+    definition.set(newDefinition)
+
+    // Update server
+    if (get(config).canSaveSchema) {
+      await getAPI()?.actions.saveDefinition(newDefinition)
+    }
+
+    // Broadcast change to external state can be updated, as this change
+    // will not be received by the builder websocket because we caused it ourselves
+    dispatch("updatedatasource", newDefinition)
+  }
+
+  // Adds a row to the datasource
+  const addRow = async row => {
+    return await getAPI()?.actions.addRow(row)
+  }
+
+  // Updates an existing row in the datasource
+  const updateRow = async row => {
+    return await getAPI()?.actions.updateRow(row)
+  }
+
+  // Deletes rows from the datasource
+  const deleteRows = async rows => {
+    return await getAPI()?.actions.deleteRows(rows)
+  }
+
+  // Gets a single row from a datasource
+  const getRow = async id => {
+    return await getAPI()?.actions.getRow(id)
+  }
+
+  // Checks if a certain datasource config is valid
+  const isDatasourceValid = datasource => {
+    return getAPI()?.actions.isDatasourceValid(datasource)
+  }
+
+  // Checks if this datasource can use a specific column by name
+  const canUseColumn = name => {
+    return getAPI()?.actions.canUseColumn(name)
+  }
+
+  return {
+    datasource: {
+      ...datasource,
+      actions: {
+        refreshDefinition,
+        saveDefinition,
+        addRow,
+        updateRow,
+        deleteRows,
+        getRow,
+        isDatasourceValid,
+        canUseColumn,
+      },
+    },
+  }
+}
diff --git a/packages/frontend-core/src/components/grid/stores/filter.js b/packages/frontend-core/src/components/grid/stores/filter.js
index 76c6a86c21..a59c98ccdd 100644
--- a/packages/frontend-core/src/components/grid/stores/filter.js
+++ b/packages/frontend-core/src/components/grid/stores/filter.js
@@ -1,10 +1,10 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 
 export const createStores = context => {
   const { props } = context
 
   // Initialise to default props
-  const filter = writable(props.initialFilter)
+  const filter = writable(get(props).initialFilter)
 
   return {
     filter,
diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js
index 2a52b55f59..7b73ea8be6 100644
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ b/packages/frontend-core/src/components/grid/stores/index.js
@@ -15,16 +15,20 @@ import * as Config from "./config"
 import * as Sort from "./sort"
 import * as Filter from "./filter"
 import * as Notifications from "./notifications"
+import * as Table from "./table"
+import * as ViewV2 from "./viewV2"
+import * as Datasource from "./datasource"
 
 const DependencyOrderedStores = [
-  Config,
-  Notifications,
   Sort,
   Filter,
   Bounds,
   Scroll,
-  Rows,
+  Table,
+  ViewV2,
+  Datasource,
   Columns,
+  Rows,
   UI,
   Validation,
   Resize,
@@ -34,6 +38,8 @@ const DependencyOrderedStores = [
   Menu,
   Pagination,
   Clipboard,
+  Config,
+  Notifications,
 ]
 
 export const attachStores = context => {
@@ -47,6 +53,11 @@ export const attachStores = context => {
     context = { ...context, ...store.deriveStores?.(context) }
   }
 
+  // Action creation
+  for (let store of DependencyOrderedStores) {
+    context = { ...context, ...store.createActions?.(context) }
+  }
+
   // Initialise any store logic
   for (let store of DependencyOrderedStores) {
     store.initialise?.(context)
diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.js
index f1d822aeaf..2d11b65bd4 100644
--- a/packages/frontend-core/src/components/grid/stores/menu.js
+++ b/packages/frontend-core/src/components/grid/stores/menu.js
@@ -12,7 +12,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const { menu, focusedCellId, rand } = context
 
   const open = (cellId, e) => {
diff --git a/packages/frontend-core/src/components/grid/stores/pagination.js b/packages/frontend-core/src/components/grid/stores/pagination.js
index c6a856e229..1dbea6e0d2 100644
--- a/packages/frontend-core/src/components/grid/stores/pagination.js
+++ b/packages/frontend-core/src/components/grid/stores/pagination.js
@@ -1,4 +1,4 @@
-import { derived } from "svelte/store"
+import { derived, get } from "svelte/store"
 
 export const initialise = context => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
@@ -11,13 +11,12 @@ export const initialise = context => {
     [scrolledRowCount, rowCount, visualRowCapacity],
     ([$scrolledRowCount, $rowCount, $visualRowCapacity]) => {
       return Math.max(0, $rowCount - $scrolledRowCount - $visualRowCapacity)
-    },
-    100
+    }
   )
 
   // Fetch next page when fewer than 25 remaining rows to scroll
   remainingRows.subscribe(remaining => {
-    if (remaining < 25) {
+    if (remaining < 25 && get(rowCount)) {
       rows.actions.loadNextPage()
     }
   })
diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.js
index a99c1b1ab2..f820593174 100644
--- a/packages/frontend-core/src/components/grid/stores/reorder.js
+++ b/packages/frontend-core/src/components/grid/stores/reorder.js
@@ -23,7 +23,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const {
     reorder,
     columns,
diff --git a/packages/frontend-core/src/components/grid/stores/resize.js b/packages/frontend-core/src/components/grid/stores/resize.js
index d007e70c4e..2dc9e0784c 100644
--- a/packages/frontend-core/src/components/grid/stores/resize.js
+++ b/packages/frontend-core/src/components/grid/stores/resize.js
@@ -19,7 +19,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const { resize, columns, stickyColumn, ui } = context
 
   // Starts resizing a certain column
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 59d7c633d6..392bf392e8 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -3,30 +3,24 @@ import { fetchData } from "../../../fetch/fetchData"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import { tick } from "svelte"
 
-const SuppressErrors = true
-
 export const createStores = () => {
   const rows = writable([])
-  const table = writable(null)
   const loading = writable(false)
   const loaded = writable(false)
   const rowChangeCache = writable({})
   const inProgressChanges = writable({})
   const hasNextPage = writable(false)
   const error = writable(null)
+  const fetch = writable(null)
 
   // Generate a lookup map to quick find a row by ID
-  const rowLookupMap = derived(
-    rows,
-    $rows => {
-      let map = {}
-      for (let i = 0; i < $rows.length; i++) {
-        map[$rows[i]._id] = i
-      }
-      return map
-    },
-    {}
-  )
+  const rowLookupMap = derived(rows, $rows => {
+    let map = {}
+    for (let i = 0; i < $rows.length; i++) {
+      map[$rows[i]._id] = i
+    }
+    return map
+  })
 
   // Mark loaded as true if we've ever stopped loading
   let hasStartedLoading = false
@@ -38,10 +32,25 @@ export const createStores = () => {
     }
   })
 
+  // Enrich rows with an index property and any pending changes
+  const enrichedRows = derived(
+    [rows, rowChangeCache],
+    ([$rows, $rowChangeCache]) => {
+      return $rows.map((row, idx) => ({
+        ...row,
+        ...$rowChangeCache[row._id],
+        __idx: idx,
+      }))
+    }
+  )
+
   return {
-    rows,
+    rows: {
+      ...rows,
+      subscribe: enrichedRows.subscribe,
+    },
+    fetch,
     rowLookupMap,
-    table,
     loaded,
     loading,
     rowChangeCache,
@@ -51,15 +60,15 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const createActions = context => {
   const {
     rows,
     rowLookupMap,
-    table,
+    definition,
     filter,
     loading,
     sort,
-    tableId,
+    datasource,
     API,
     scroll,
     validation,
@@ -71,37 +80,29 @@ export const deriveStores = context => {
     hasNextPage,
     error,
     notifications,
+    fetch,
   } = context
   const instanceLoaded = writable(false)
-  const fetch = writable(null)
 
   // Local cache of row IDs to speed up checking if a row exists
   let rowCacheMap = {}
 
-  // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(
-    [rows, rowChangeCache],
-    ([$rows, $rowChangeCache]) => {
-      return $rows.map((row, idx) => ({
-        ...row,
-        ...$rowChangeCache[row._id],
-        __idx: idx,
-      }))
-    },
-    []
-  )
-
-  // Reset everything when table ID changes
+  // Reset everything when datasource changes
   let unsubscribe = null
   let lastResetKey = null
-  tableId.subscribe(async $tableId => {
+  datasource.subscribe(async $datasource => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
     fetch.set(null)
     instanceLoaded.set(false)
     loading.set(true)
 
-    // Tick to allow other reactive logic to update stores when table ID changes
+    // Abandon if we don't have a valid datasource
+    if (!datasource.actions.isDatasourceValid($datasource)) {
+      return
+    }
+
+    // Tick to allow other reactive logic to update stores when datasource changes
     // before proceeding. This allows us to wipe filters etc if needed.
     await tick()
     const $filter = get(filter)
@@ -110,10 +111,7 @@ export const deriveStores = context => {
     // Create new fetch model
     const newFetch = fetchData({
       API,
-      datasource: {
-        type: "table",
-        tableId: $tableId,
-      },
+      datasource: $datasource,
       options: {
         filter: $filter,
         sortColumn: $sort.column,
@@ -142,7 +140,7 @@ export const deriveStores = context => {
         const previousResetKey = lastResetKey
         lastResetKey = $fetch.resetKey
 
-        // If resetting rows due to a table change, wipe data and wait for
+        // If resetting rows due to a datasource change, wipe data and wait for
         // derived stores to compute. This prevents stale data being passed
         // to cells when we save the new schema.
         if (!$instanceLoaded && previousResetKey) {
@@ -152,16 +150,12 @@ export const deriveStores = context => {
 
         // Reset state properties when dataset changes
         if (!$instanceLoaded || resetRows) {
-          table.set($fetch.definition)
-          sort.set({
-            column: $fetch.sortColumn,
-            order: $fetch.sortOrder,
-          })
+          definition.set($fetch.definition)
         }
 
         // Reset scroll state when data changes
         if (!$instanceLoaded) {
-          // Reset both top and left for a new table ID
+          // Reset both top and left for a new datasource ID
           instanceLoaded.set(true)
           scroll.set({ top: 0, left: 0 })
         } else if (resetRows) {
@@ -180,19 +174,6 @@ export const deriveStores = context => {
     fetch.set(newFetch)
   })
 
-  // Update fetch when filter or sort config changes
-  filter.subscribe($filter => {
-    get(fetch)?.update({
-      filter: $filter,
-    })
-  })
-  sort.subscribe($sort => {
-    get(fetch)?.update({
-      sortOrder: $sort.order,
-      sortColumn: $sort.column,
-    })
-  })
-
   // Gets a row by ID
   const getRow = id => {
     const index = get(rowLookupMap)[id]
@@ -211,7 +192,7 @@ export const deriveStores = context => {
       let erroredColumns = []
       let missingColumns = []
       for (let column of keys) {
-        if (columns.actions.hasColumn(column)) {
+        if (datasource.actions.canUseColumn(column)) {
           erroredColumns.push(column)
         } else {
           missingColumns.push(column)
@@ -252,11 +233,9 @@ export const deriveStores = context => {
   // Adds a new row
   const addRow = async (row, idx, bubble = false) => {
     try {
-      // Create row
-      const newRow = await API.saveRow(
-        { ...row, tableId: get(tableId) },
-        SuppressErrors
-      )
+      // Create row. Spread row so we can mutate and enrich safely.
+      let newRow = { ...row }
+      newRow = await datasource.actions.addRow(newRow)
 
       // Update state
       if (idx != null) {
@@ -294,21 +273,6 @@ export const deriveStores = context => {
     }
   }
 
-  // Fetches a row by ID using the search endpoint
-  const fetchRow = async id => {
-    const res = await API.searchTable({
-      tableId: get(tableId),
-      limit: 1,
-      query: {
-        equal: {
-          _id: id,
-        },
-      },
-      paginate: false,
-    })
-    return res?.rows?.[0]
-  }
-
   // Replaces a row in state with the newly defined row, handling updates,
   // addition and deletion
   const replaceRow = (id, row) => {
@@ -337,7 +301,7 @@ export const deriveStores = context => {
 
   // Refreshes a specific row
   const refreshRow = async id => {
-    const row = await fetchRow(id)
+    const row = await datasource.actions.getRow(id)
     replaceRow(id, row)
   }
 
@@ -347,7 +311,7 @@ export const deriveStores = context => {
   }
 
   // Patches a row with some changes
-  const updateRow = async (rowId, changes) => {
+  const updateRow = async (rowId, changes, options = { save: true }) => {
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
     const index = $rowLookupMap[rowId]
@@ -377,16 +341,23 @@ export const deriveStores = context => {
       },
     }))
 
+    // Stop here if we don't want to persist the change
+    if (!options?.save) {
+      return
+    }
+
     // Save change
     try {
       inProgressChanges.update(state => ({
         ...state,
         [rowId]: true,
       }))
-      const saved = await API.saveRow(
-        { ...row, ...get(rowChangeCache)[rowId] },
-        SuppressErrors
-      )
+
+      // Update row
+      const saved = await datasource.actions.updateRow({
+        ...row,
+        ...get(rowChangeCache)[rowId],
+      })
 
       // Update state after a successful change
       if (saved?._id) {
@@ -412,8 +383,8 @@ export const deriveStores = context => {
   }
 
   // Updates a value of a row
-  const updateValue = async (rowId, column, value) => {
-    return await updateRow(rowId, { [column]: value })
+  const updateValue = async ({ rowId, column, value, save = true }) => {
+    return await updateRow(rowId, { [column]: value }, { save })
   }
 
   // Deletes an array of rows
@@ -426,10 +397,7 @@ export const deriveStores = context => {
     rowsToDelete.forEach(row => {
       delete row.__idx
     })
-    await API.deleteRows({
-      tableId: get(tableId),
-      rows: rowsToDelete,
-    })
+    await datasource.actions.deleteRows(rowsToDelete)
 
     // Update state
     handleRemoveRows(rowsToDelete)
@@ -473,12 +441,6 @@ export const deriveStores = context => {
     get(fetch)?.nextPage()
   }
 
-  // Refreshes the schema of the data fetch subscription
-  const refreshTableDefinition = async () => {
-    const definition = await API.fetchTableDefinition(get(tableId))
-    table.set(definition)
-  }
-
   // Checks if we have a row with a certain ID
   const hasRow = id => {
     if (id === NewRowID) {
@@ -498,7 +460,6 @@ export const deriveStores = context => {
   })
 
   return {
-    enrichedRows,
     rows: {
       ...rows,
       actions: {
@@ -513,7 +474,6 @@ export const deriveStores = context => {
         refreshRow,
         replaceRow,
         refreshData,
-        refreshTableDefinition,
       },
     },
   }
diff --git a/packages/frontend-core/src/components/grid/stores/sort.js b/packages/frontend-core/src/components/grid/stores/sort.js
index 211124f640..734a876eed 100644
--- a/packages/frontend-core/src/components/grid/stores/sort.js
+++ b/packages/frontend-core/src/components/grid/stores/sort.js
@@ -1,12 +1,14 @@
-import { writable } from "svelte/store"
+import { derived, get } from "svelte/store"
+import { memo } from "../../../utils"
 
 export const createStores = context => {
   const { props } = context
+  const $props = get(props)
 
   // Initialise to default props
-  const sort = writable({
-    column: props.initialSortColumn,
-    order: props.initialSortOrder || "ascending",
+  const sort = memo({
+    column: $props.initialSortColumn,
+    order: $props.initialSortOrder || "ascending",
   })
 
   return {
@@ -15,13 +17,34 @@ export const createStores = context => {
 }
 
 export const initialise = context => {
-  const { sort, initialSortColumn, initialSortOrder } = context
+  const { sort, initialSortColumn, initialSortOrder, definition } = context
 
   // Reset sort when initial sort props change
   initialSortColumn.subscribe(newSortColumn => {
     sort.update(state => ({ ...state, column: newSortColumn }))
   })
   initialSortOrder.subscribe(newSortOrder => {
-    sort.update(state => ({ ...state, order: newSortOrder }))
+    sort.update(state => ({ ...state, order: newSortOrder || "ascending" }))
+  })
+
+  // Derive if the current sort column exists in the schema
+  const sortColumnExists = derived(
+    [sort, definition],
+    ([$sort, $definition]) => {
+      if (!$sort?.column || !$definition) {
+        return true
+      }
+      return $definition.schema?.[$sort.column] != null
+    }
+  )
+
+  // Clear sort state if our sort column does not exist
+  sortColumnExists.subscribe(exists => {
+    if (!exists) {
+      sort.set({
+        column: null,
+        order: "ascending",
+      })
+    }
   })
 }
diff --git a/packages/frontend-core/src/components/grid/stores/table.js b/packages/frontend-core/src/components/grid/stores/table.js
new file mode 100644
index 0000000000..ed13609f45
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/table.js
@@ -0,0 +1,129 @@
+import { get } from "svelte/store"
+
+const SuppressErrors = true
+
+export const createActions = context => {
+  const { definition, API, datasource, columns, stickyColumn } = context
+
+  const refreshDefinition = async () => {
+    definition.set(await API.fetchTableDefinition(get(datasource).tableId))
+  }
+
+  const saveDefinition = async newDefinition => {
+    await API.saveTable(newDefinition)
+  }
+
+  const saveRow = async row => {
+    row.tableId = get(datasource)?.tableId
+    return await API.saveRow(row, SuppressErrors)
+  }
+
+  const deleteRows = async rows => {
+    await API.deleteRows({
+      tableId: get(datasource).tableId,
+      rows,
+    })
+  }
+
+  const isDatasourceValid = datasource => {
+    return datasource?.type === "table" && datasource?.tableId
+  }
+
+  const getRow = async id => {
+    const res = await API.searchTable({
+      tableId: get(datasource).tableId,
+      limit: 1,
+      query: {
+        equal: {
+          _id: id,
+        },
+      },
+      paginate: false,
+    })
+    return res?.rows?.[0]
+  }
+
+  const canUseColumn = name => {
+    const $columns = get(columns)
+    const $sticky = get(stickyColumn)
+    return $columns.some(col => col.name === name) || $sticky?.name === name
+  }
+
+  return {
+    table: {
+      actions: {
+        refreshDefinition,
+        saveDefinition,
+        addRow: saveRow,
+        updateRow: saveRow,
+        deleteRows,
+        getRow,
+        isDatasourceValid,
+        canUseColumn,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const {
+    datasource,
+    fetch,
+    filter,
+    sort,
+    table,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+  } = context
+
+  // Keep a list of subscriptions so that we can clear them when the datasource
+  // config changes
+  let unsubscribers = []
+
+  // Observe datasource changes and apply logic for table datasources
+  datasource.subscribe($datasource => {
+    // Clear previous subscriptions
+    unsubscribers?.forEach(unsubscribe => unsubscribe())
+    unsubscribers = []
+    if (!table.actions.isDatasourceValid($datasource)) {
+      return
+    }
+
+    // Wipe state
+    filter.set(get(initialFilter))
+    sort.set({
+      column: get(initialSortColumn),
+      order: get(initialSortOrder) || "ascending",
+    })
+
+    // Update fetch when filter changes
+    unsubscribers.push(
+      filter.subscribe($filter => {
+        // Ensure we're updating the correct fetch
+        const $fetch = get(fetch)
+        if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+          return
+        }
+        $fetch.update({
+          filter: $filter,
+        })
+      })
+    )
+
+    // Update fetch when sorting changes
+    unsubscribers.push(
+      sort.subscribe($sort => {
+        // Ensure we're updating the correct fetch
+        const $fetch = get(fetch)
+        if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+          return
+        }
+        $fetch.update({
+          sortOrder: $sort.order || "ascending",
+          sortColumn: $sort.column,
+        })
+      })
+    )
+  })
+}
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index 2f16265273..e10e96a722 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -14,7 +14,7 @@ export const createStores = context => {
   const focusedCellAPI = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
-  const rowHeight = writable(props.fixedRowHeight || DefaultRowHeight)
+  const rowHeight = writable(get(props).fixedRowHeight || DefaultRowHeight)
   const previousFocusedRowId = writable(null)
   const gridFocused = writable(false)
   const isDragging = writable(false)
@@ -61,23 +61,13 @@ export const createStores = context => {
 }
 
 export const deriveStores = context => {
-  const {
-    focusedCellId,
-    selectedRows,
-    hoveredRowId,
-    enrichedRows,
-    rowLookupMap,
-    rowHeight,
-    stickyColumn,
-    width,
-    hasNonAutoColumn,
-    config,
-  } = context
+  const { focusedCellId, rows, rowLookupMap, rowHeight, stickyColumn, width } =
+    context
 
   // Derive the row that contains the selected cell
   const focusedRow = derived(
-    [focusedCellId, rowLookupMap, enrichedRows],
-    ([$focusedCellId, $rowLookupMap, $enrichedRows]) => {
+    [focusedCellId, rowLookupMap, rows],
+    ([$focusedCellId, $rowLookupMap, $rows]) => {
       const rowId = $focusedCellId?.split("-")[0]
 
       // Edge case for new rows
@@ -87,18 +77,11 @@ export const deriveStores = context => {
 
       // All normal rows
       const index = $rowLookupMap[rowId]
-      return $enrichedRows[index]
+      return $rows[index]
     },
     null
   )
 
-  // Callback when leaving the grid, deselecting all focussed or selected items
-  const blur = () => {
-    focusedCellId.set(null)
-    selectedRows.set({})
-    hoveredRowId.set(null)
-  }
-
   // Derive the amount of content lines to show in cells depending on row height
   const contentLines = derived(rowHeight, $rowHeight => {
     if ($rowHeight >= LargeRowHeight) {
@@ -114,19 +97,24 @@ export const deriveStores = context => {
     return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
   })
 
-  // Derive if we're able to add rows
-  const canAddRows = derived(
-    [config, hasNonAutoColumn],
-    ([$config, $hasNonAutoColumn]) => {
-      return $config.allowAddRows && $hasNonAutoColumn
-    }
-  )
-
   return {
-    canAddRows,
     focusedRow,
     contentLines,
     compact,
+  }
+}
+
+export const createActions = context => {
+  const { focusedCellId, selectedRows, hoveredRowId } = context
+
+  // Callback when leaving the grid, deselecting all focussed or selected items
+  const blur = () => {
+    focusedCellId.set(null)
+    selectedRows.set({})
+    hoveredRowId.set(null)
+  }
+
+  return {
     ui: {
       actions: {
         blur,
@@ -143,7 +131,7 @@ export const initialise = context => {
     focusedCellId,
     selectedRows,
     hoveredRowId,
-    table,
+    definition,
     rowHeight,
     fixedRowHeight,
   } = context
@@ -199,9 +187,9 @@ export const initialise = context => {
   })
 
   // Pull row height from table as long as we don't have a fixed height
-  table.subscribe($table => {
+  definition.subscribe($definition => {
     if (!get(fixedRowHeight)) {
-      rowHeight.set($table?.rowHeight || DefaultRowHeight)
+      rowHeight.set($definition?.rowHeight || DefaultRowHeight)
     }
   })
 
@@ -210,7 +198,7 @@ export const initialise = context => {
     if (height) {
       rowHeight.set(height)
     } else {
-      rowHeight.set(get(table)?.rowHeight || DefaultRowHeight)
+      rowHeight.set(get(definition)?.rowHeight || DefaultRowHeight)
     }
   })
 }
diff --git a/packages/frontend-core/src/components/grid/stores/users.js b/packages/frontend-core/src/components/grid/stores/users.js
index 5a39f3769a..7dd7a69592 100644
--- a/packages/frontend-core/src/components/grid/stores/users.js
+++ b/packages/frontend-core/src/components/grid/stores/users.js
@@ -39,6 +39,14 @@ export const deriveStores = context => {
     }
   )
 
+  return {
+    selectedCellMap,
+  }
+}
+
+export const createActions = context => {
+  const { users } = context
+
   const updateUser = user => {
     const $users = get(users)
     if (!$users.some(x => x.sessionId === user.sessionId)) {
@@ -66,6 +74,5 @@ export const deriveStores = context => {
         removeUser,
       },
     },
-    selectedCellMap,
   }
 }
diff --git a/packages/frontend-core/src/components/grid/stores/viewV2.js b/packages/frontend-core/src/components/grid/stores/viewV2.js
new file mode 100644
index 0000000000..b9a4bc099b
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/viewV2.js
@@ -0,0 +1,212 @@
+import { get } from "svelte/store"
+
+const SuppressErrors = true
+
+export const createActions = context => {
+  const { definition, API, datasource, columns, stickyColumn } = context
+
+  const refreshDefinition = async () => {
+    const $datasource = get(datasource)
+    if (!$datasource) {
+      definition.set(null)
+      return
+    }
+    const table = await API.fetchTableDefinition($datasource.tableId)
+    const view = Object.values(table?.views || {}).find(
+      view => view.id === $datasource.id
+    )
+    definition.set(view)
+  }
+
+  const saveDefinition = async newDefinition => {
+    await API.viewV2.update(newDefinition)
+  }
+
+  const saveRow = async row => {
+    const $datasource = get(datasource)
+    row.tableId = $datasource?.tableId
+    row._viewId = $datasource?.id
+    return {
+      ...(await API.saveRow(row, SuppressErrors)),
+      _viewId: row._viewId,
+    }
+  }
+
+  const deleteRows = async rows => {
+    await API.deleteRows({
+      tableId: get(datasource).id,
+      rows,
+    })
+  }
+
+  const getRow = () => {
+    throw "Views don't support fetching individual rows"
+  }
+
+  const isDatasourceValid = datasource => {
+    return (
+      datasource?.type === "viewV2" && datasource?.id && datasource?.tableId
+    )
+  }
+
+  const canUseColumn = name => {
+    const $columns = get(columns)
+    const $sticky = get(stickyColumn)
+    return (
+      $columns.some(col => col.name === name && col.visible) ||
+      $sticky?.name === name
+    )
+  }
+
+  return {
+    viewV2: {
+      actions: {
+        refreshDefinition,
+        saveDefinition,
+        addRow: saveRow,
+        updateRow: saveRow,
+        deleteRows,
+        getRow,
+        isDatasourceValid,
+        canUseColumn,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const {
+    definition,
+    datasource,
+    sort,
+    rows,
+    filter,
+    subscribe,
+    viewV2,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+    config,
+    fetch,
+  } = context
+
+  // Keep a list of subscriptions so that we can clear them when the datasource
+  // config changes
+  let unsubscribers = []
+
+  // Observe datasource changes and apply logic for view V2 datasources
+  datasource.subscribe($datasource => {
+    // Clear previous subscriptions
+    unsubscribers?.forEach(unsubscribe => unsubscribe())
+    unsubscribers = []
+    if (!viewV2.actions.isDatasourceValid($datasource)) {
+      return
+    }
+
+    // Reset state for new view
+    filter.set(get(initialFilter))
+    sort.set({
+      column: get(initialSortColumn),
+      order: get(initialSortOrder) || "ascending",
+    })
+
+    // Keep sort and filter state in line with the view definition
+    unsubscribers.push(
+      definition.subscribe($definition => {
+        if ($definition?.id !== $datasource.id) {
+          return
+        }
+        // Only override sorting if we don't have an initial sort column
+        if (!get(initialSortColumn)) {
+          sort.set({
+            column: $definition.sort?.field,
+            order: $definition.sort?.order || "ascending",
+          })
+        }
+        // Only override filter state if we don't have an initial filter
+        if (!get(initialFilter)) {
+          filter.set($definition.query)
+        }
+      })
+    )
+
+    // When sorting changes, ensure view definition is kept up to date
+    unsubscribers.push(
+      sort.subscribe(async $sort => {
+        // If we can mutate schema then update the view definition
+        if (get(config).canSaveSchema) {
+          // Ensure we're updating the correct view
+          const $view = get(definition)
+          if ($view?.id !== $datasource.id) {
+            return
+          }
+          if (
+            $sort?.column !== $view.sort?.field ||
+            $sort?.order !== $view.sort?.order
+          ) {
+            await datasource.actions.saveDefinition({
+              ...$view,
+              sort: {
+                field: $sort.column,
+                order: $sort.order || "ascending",
+              },
+            })
+            await rows.actions.refreshData()
+          }
+        }
+        // Otherwise just update the fetch
+        else {
+          // Ensure we're updating the correct fetch
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            sortOrder: $sort.order || "ascending",
+            sortColumn: $sort.column,
+          })
+        }
+      })
+    )
+
+    // When filters change, ensure view definition is kept up to date
+    unsubscribers?.push(
+      filter.subscribe(async $filter => {
+        // If we can mutate schema then update the view definition
+        if (get(config).canSaveSchema) {
+          // Ensure we're updating the correct view
+          const $view = get(definition)
+          if ($view?.id !== $datasource.id) {
+            return
+          }
+          if (JSON.stringify($filter) !== JSON.stringify($view.query)) {
+            await datasource.actions.saveDefinition({
+              ...$view,
+              query: $filter,
+            })
+            await rows.actions.refreshData()
+          }
+        }
+        // Otherwise just update the fetch
+        else {
+          // Ensure we're updating the correct fetch
+          const $fetch = get(fetch)
+          if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
+            return
+          }
+          $fetch.update({
+            filter: $filter,
+          })
+        }
+      })
+    )
+
+    // When hidden we show columns, we need to refresh data in order to fetch
+    // values for those columns
+    unsubscribers.push(
+      subscribe("show-column", async () => {
+        await rows.actions.refreshData()
+      })
+    )
+  })
+}
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index b03f10f8fa..6c0c4708b9 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -10,7 +10,7 @@ export const deriveStores = context => {
   const {
     rowHeight,
     visibleColumns,
-    enrichedRows,
+    rows,
     scrollTop,
     scrollLeft,
     width,
@@ -35,9 +35,9 @@ export const deriveStores = context => {
     0
   )
   const renderedRows = derived(
-    [enrichedRows, scrolledRowCount, visualRowCapacity],
-    ([$enrichedRows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $enrichedRows.slice(
+    [rows, scrolledRowCount, visualRowCapacity],
+    ([$rows, $scrolledRowCount, $visualRowCapacity]) => {
+      return $rows.slice(
         $scrolledRowCount,
         $scrolledRowCount + $visualRowCapacity
       )
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 0497a392f3..cfaaaea81b 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -2,6 +2,7 @@
  * Operator options for lucene queries
  */
 export { OperatorOptions, SqlNumberTypeRangeMap } from "@budibase/shared-core"
+export { Feature as Features } from "@budibase/types"
 
 // Cookie names
 export const Cookies = {
@@ -22,11 +23,28 @@ export const BudibaseRoles = {
   Admin: "admin",
 }
 
-export const BudibaseRoleOptions = [
-  { label: "App User", value: BudibaseRoles.AppUser },
+export const BudibaseRoleOptionsOld = [
   { label: "Developer", value: BudibaseRoles.Developer },
+  { label: "Member", value: BudibaseRoles.AppUser },
   { label: "Admin", value: BudibaseRoles.Admin },
 ]
+export const BudibaseRoleOptions = [
+  { label: "Member", value: BudibaseRoles.AppUser },
+  { label: "Admin", value: BudibaseRoles.Admin },
+]
+
+export const BudibaseRoleOptionsNew = [
+  {
+    label: "Admin",
+    value: "admin",
+    subtitle: "Has full access to all apps and settings in your account",
+  },
+  {
+    label: "Member",
+    value: "appUser",
+    subtitle: "Can only view apps they have access to",
+  },
+]
 
 export const BuilderRoleDescriptions = [
   {
@@ -62,17 +80,6 @@ export const PlanType = {
  */
 export const ApiVersion = "1"
 
-export const Features = {
-  USER_GROUPS: "userGroups",
-  BACKUPS: "appBackups",
-  ENVIRONMENT_VARIABLES: "environmentVariables",
-  AUDIT_LOGS: "auditLogs",
-  ENFORCEABLE_SSO: "enforceableSSO",
-  BRANDING: "branding",
-  SCIM: "scim",
-  SYNC_AUTOMATIONS: "syncAutomations",
-}
-
 // Role IDs
 export const Roles = {
   ADMIN: "ADMIN",
@@ -80,6 +87,7 @@ export const Roles = {
   BASIC: "BASIC",
   PUBLIC: "PUBLIC",
   BUILDER: "BUILDER",
+  CREATOR: "CREATOR",
 }
 
 export const Themes = [
diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js
index ea1cfdde77..857072601e 100644
--- a/packages/frontend-core/src/fetch/DataFetch.js
+++ b/packages/frontend-core/src/fetch/DataFetch.js
@@ -110,14 +110,27 @@ export default class DataFetch {
     return this.derivedStore.subscribe
   }
 
+  /**
+   * Gets the default sort column for this datasource
+   */
+  getDefaultSortColumn(definition, schema) {
+    if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
+      return definition.primaryDisplay
+    } else {
+      return Object.keys(schema)[0]
+    }
+  }
+
   /**
    * Fetches a fresh set of data from the server, resetting pagination
    */
   async getInitialData() {
     const { datasource, filter, paginate } = this.options
 
-    // Fetch datasource definition and determine feature flags
+    // Fetch datasource definition and extract sort properties if configured
     const definition = await this.getDefinition(datasource)
+
+    // Determine feature flags
     const features = this.determineFeatureFlags(definition)
     this.features = {
       supportsSearch: !!features?.supportsSearch,
@@ -132,32 +145,32 @@ export default class DataFetch {
       return
     }
 
-    // If no sort order, default to descending
-    if (!this.options.sortOrder) {
+    // If an invalid sort column is specified, delete it
+    if (this.options.sortColumn && !schema[this.options.sortColumn]) {
+      this.options.sortColumn = null
+    }
+
+    // If no sort column, get the default column for this datasource
+    if (!this.options.sortColumn) {
+      this.options.sortColumn = this.getDefaultSortColumn(definition, schema)
+    }
+
+    // If we don't have a sort column specified then just ensure we don't set
+    // any sorting params
+    if (!this.options.sortColumn) {
       this.options.sortOrder = "ascending"
-    }
+      this.options.sortType = null
+    } else {
+      // Otherwise determine what sort type to use base on sort column
+      const type = schema?.[this.options.sortColumn]?.type
+      this.options.sortType =
+        type === "number" || type === "bigint" ? "number" : "string"
 
-    // If no sort column, or an invalid sort column is provided, use the primary
-    // display and fallback to first column
-    const sortValid = this.options.sortColumn && schema[this.options.sortColumn]
-    if (!sortValid) {
-      let newSortColumn
-      if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
-        newSortColumn = definition.primaryDisplay
-      } else {
-        newSortColumn = Object.keys(schema)[0]
+      // If no sort order, default to ascending
+      if (!this.options.sortOrder) {
+        this.options.sortOrder = "ascending"
       }
-      this.options.sortColumn = newSortColumn
     }
-    const { sortOrder, sortColumn } = this.options
-
-    // Determine what sort type to use
-    let sortType = "string"
-    if (sortColumn) {
-      const type = schema?.[sortColumn]?.type
-      sortType = type === "number" || type === "bigint" ? "number" : "string"
-    }
-    this.options.sortType = sortType
 
     // Build the lucene query
     let query = this.options.query
@@ -174,8 +187,6 @@ export default class DataFetch {
       loading: true,
       cursors: [],
       cursor: null,
-      sortOrder,
-      sortColumn,
     }))
 
     // Actually fetch data
diff --git a/packages/frontend-core/src/fetch/QueryFetch.js b/packages/frontend-core/src/fetch/QueryFetch.js
index 456abaec79..6420893515 100644
--- a/packages/frontend-core/src/fetch/QueryFetch.js
+++ b/packages/frontend-core/src/fetch/QueryFetch.js
@@ -29,6 +29,10 @@ export default class QueryFetch extends DataFetch {
     }
   }
 
+  getDefaultSortColumn() {
+    return null
+  }
+
   async getData() {
     const { datasource, limit, paginate } = this.options
     const { supportsPagination } = this.features
diff --git a/packages/frontend-core/src/fetch/ViewV2Fetch.js b/packages/frontend-core/src/fetch/ViewV2Fetch.js
new file mode 100644
index 0000000000..b9eaf4bdf7
--- /dev/null
+++ b/packages/frontend-core/src/fetch/ViewV2Fetch.js
@@ -0,0 +1,65 @@
+import DataFetch from "./DataFetch.js"
+import { get } from "svelte/store"
+
+export default class ViewV2Fetch extends DataFetch {
+  determineFeatureFlags() {
+    return {
+      supportsSearch: true,
+      supportsSort: true,
+      supportsPagination: true,
+    }
+  }
+
+  getSchema(datasource, definition) {
+    return definition?.schema
+  }
+
+  async getDefinition(datasource) {
+    if (!datasource?.id) {
+      return null
+    }
+    try {
+      const res = await this.API.viewV2.fetchDefinition(datasource.id)
+      return res?.data
+    } catch (error) {
+      this.store.update(state => ({
+        ...state,
+        error,
+      }))
+      return null
+    }
+  }
+
+  getDefaultSortColumn() {
+    return null
+  }
+
+  async getData() {
+    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
+      this.options
+    const { cursor, query } = get(this.store)
+    try {
+      const res = await this.API.viewV2.fetch({
+        viewId: datasource.id,
+        query,
+        paginate,
+        limit,
+        bookmark: cursor,
+        sort: sortColumn,
+        sortOrder: sortOrder?.toLowerCase(),
+        sortType,
+      })
+      return {
+        rows: res?.rows || [],
+        hasNextPage: res?.hasNextPage || false,
+        cursor: res?.bookmark || null,
+      }
+    } catch (error) {
+      return {
+        rows: [],
+        hasNextPage: false,
+        error,
+      }
+    }
+  }
+}
diff --git a/packages/frontend-core/src/fetch/fetchData.js b/packages/frontend-core/src/fetch/fetchData.js
index c4968eabc0..063dd02cbf 100644
--- a/packages/frontend-core/src/fetch/fetchData.js
+++ b/packages/frontend-core/src/fetch/fetchData.js
@@ -1,5 +1,6 @@
 import TableFetch from "./TableFetch.js"
 import ViewFetch from "./ViewFetch.js"
+import ViewV2Fetch from "./ViewV2Fetch.js"
 import QueryFetch from "./QueryFetch.js"
 import RelationshipFetch from "./RelationshipFetch.js"
 import NestedProviderFetch from "./NestedProviderFetch.js"
@@ -11,6 +12,7 @@ import GroupUserFetch from "./GroupUserFetch.js"
 const DataFetchMap = {
   table: TableFetch,
   view: ViewFetch,
+  viewV2: ViewV2Fetch,
   query: QueryFetch,
   link: RelationshipFetch,
   user: UserFetch,
diff --git a/packages/frontend-core/src/index.js b/packages/frontend-core/src/index.js
index 01bf05c69e..b0afc0c25d 100644
--- a/packages/frontend-core/src/index.js
+++ b/packages/frontend-core/src/index.js
@@ -1,5 +1,6 @@
 export { createAPIClient } from "./api"
 export { fetchData } from "./fetch/fetchData"
+export { Utils } from "./utils"
 export * as Constants from "./constants"
 export * from "./stores"
 export * from "./utils"
diff --git a/packages/frontend-core/src/utils/roles.js b/packages/frontend-core/src/utils/roles.js
index dc9138455d..1ae9d3ac14 100644
--- a/packages/frontend-core/src/utils/roles.js
+++ b/packages/frontend-core/src/utils/roles.js
@@ -1,20 +1,22 @@
 import { Roles } from "../constants"
 
 const RolePriorities = {
-  [Roles.ADMIN]: 4,
+  [Roles.ADMIN]: 5,
+  [Roles.CREATOR]: 4,
   [Roles.POWER]: 3,
   [Roles.BASIC]: 2,
   [Roles.PUBLIC]: 1,
 }
 const RoleColours = {
   [Roles.ADMIN]: "var(--spectrum-global-color-static-red-400)",
+  [Roles.CREATOR]: "var(--spectrum-global-color-static-magenta-600)",
   [Roles.POWER]: "var(--spectrum-global-color-static-orange-400)",
   [Roles.BASIC]: "var(--spectrum-global-color-static-green-400)",
   [Roles.PUBLIC]: "var(--spectrum-global-color-static-blue-400)",
 }
 
-export const getRolePriority = roleId => {
-  return RolePriorities[roleId] ?? 0
+export const getRolePriority = role => {
+  return RolePriorities[role] ?? 0
 }
 
 export const getRoleColour = roleId => {
diff --git a/packages/pro b/packages/pro
index 02626390cd..961d683794 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 02626390cde905a248cb60729968667c9e49fae9
+Subproject commit 961d683794442f615468d44b684e5a94633109eb
diff --git a/packages/server/Dockerfile b/packages/server/Dockerfile
index a526538b71..e1b3b208c7 100644
--- a/packages/server/Dockerfile
+++ b/packages/server/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14-slim
+FROM node:18-slim
 
 LABEL com.centurylinklabs.watchtower.lifecycle.pre-check="scripts/watchtower-hooks/pre-check.sh"
 LABEL com.centurylinklabs.watchtower.lifecycle.pre-update="scripts/watchtower-hooks/pre-update.sh"
@@ -18,7 +18,7 @@ ENV TOP_LEVEL_PATH=/
 
 # handle node-gyp
 RUN apt-get update \
-    && apt-get install -y --no-install-recommends g++ make python
+    && apt-get install -y --no-install-recommends g++ make python3
 RUN yarn global add pm2
 
 # Install client for oracle datasource
diff --git a/packages/server/jest.config.ts b/packages/server/jest.config.ts
index f36864f999..21bb92388f 100644
--- a/packages/server/jest.config.ts
+++ b/packages/server/jest.config.ts
@@ -12,6 +12,7 @@ const baseConfig: Config.InitialProjectOptions = {
   },
   moduleNameMapper: {
     "@budibase/backend-core/(.*)": "<rootDir>/../backend-core/$1",
+    "@budibase/shared-core/(.*)": "<rootDir>/../shared-core/$1",
     "@budibase/backend-core": "<rootDir>/../backend-core/src",
     "@budibase/shared-core": "<rootDir>/../shared-core/src",
     "@budibase/types": "<rootDir>/../types/src",
diff --git a/packages/server/package.json b/packages/server/package.json
index 7d0d8f5feb..ecf31175dc 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -100,7 +100,7 @@
     "memorystream": "0.3.1",
     "mongodb": "5.7",
     "mssql": "9.1.1",
-    "mysql2": "2.3.3",
+    "mysql2": "3.5.2",
     "node-fetch": "2.6.7",
     "object-sizeof": "2.6.1",
     "open": "8.4.0",
@@ -179,5 +179,20 @@
   },
   "optionalDependencies": {
     "oracledb": "5.3.0"
+  },
+  "nx": {
+    "targets": {
+      "dev:builder": {
+        "dependsOn": [
+          {
+            "comment": "Required for pro usage when submodule not loaded",
+            "projects": [
+              "@budibase/backend-core"
+            ],
+            "target": "build"
+          }
+        ]
+      }
+    }
   }
 }
diff --git a/packages/server/scripts/test.sh b/packages/server/scripts/test.sh
index bc21ec53ed..990d534d8c 100644
--- a/packages/server/scripts/test.sh
+++ b/packages/server/scripts/test.sh
@@ -5,8 +5,9 @@ if [[ -n $CI ]]
 then
   # --runInBand performs better in ci where resources are limited
   export NODE_OPTIONS="--max-old-space-size=4096"
-  echo "jest --coverage --runInBand --forceExit --bail"
-  jest --coverage --runInBand --forceExit --bail
+  node ../../node_modules/jest/bin/jest.js --version
+  echo "jest --coverage --maxWorkers=2 --forceExit --workerIdleMemoryLimit=2000MB --bail"
+  jest --coverage --maxWorkers=2 --forceExit --workerIdleMemoryLimit=2000MB --bail
 else
   # --maxWorkers performs better in development
   echo "jest --coverage --maxWorkers=2 --forceExit"
diff --git a/packages/server/specs/openapi.json b/packages/server/specs/openapi.json
index d97b09568c..1e5718c5b5 100644
--- a/packages/server/specs/openapi.json
+++ b/packages/server/specs/openapi.json
@@ -1521,7 +1521,7 @@
             "type": "boolean"
           },
           "builder": {
-            "description": "Describes if the user is a builder user or not.",
+            "description": "Describes if the user is a builder user or not. This field can only be set on a business or enterprise license.",
             "type": "object",
             "properties": {
               "global": {
@@ -1531,7 +1531,7 @@
             }
           },
           "admin": {
-            "description": "Describes if the user is an admin user or not.",
+            "description": "Describes if the user is an admin user or not. This field can only be set on a business or enterprise license.",
             "type": "object",
             "properties": {
               "global": {
@@ -1541,7 +1541,7 @@
             }
           },
           "roles": {
-            "description": "Contains the roles of the user per app (assuming they are not a builder user).",
+            "description": "Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license.",
             "type": "object",
             "additionalProperties": {
               "type": "string",
@@ -1588,7 +1588,7 @@
                 "type": "boolean"
               },
               "builder": {
-                "description": "Describes if the user is a builder user or not.",
+                "description": "Describes if the user is a builder user or not. This field can only be set on a business or enterprise license.",
                 "type": "object",
                 "properties": {
                   "global": {
@@ -1598,7 +1598,7 @@
                 }
               },
               "admin": {
-                "description": "Describes if the user is an admin user or not.",
+                "description": "Describes if the user is an admin user or not. This field can only be set on a business or enterprise license.",
                 "type": "object",
                 "properties": {
                   "global": {
@@ -1608,7 +1608,7 @@
                 }
               },
               "roles": {
-                "description": "Contains the roles of the user per app (assuming they are not a builder user).",
+                "description": "Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license.",
                 "type": "object",
                 "additionalProperties": {
                   "type": "string",
@@ -1667,7 +1667,7 @@
                   "type": "boolean"
                 },
                 "builder": {
-                  "description": "Describes if the user is a builder user or not.",
+                  "description": "Describes if the user is a builder user or not. This field can only be set on a business or enterprise license.",
                   "type": "object",
                   "properties": {
                     "global": {
@@ -1677,7 +1677,7 @@
                   }
                 },
                 "admin": {
-                  "description": "Describes if the user is an admin user or not.",
+                  "description": "Describes if the user is an admin user or not. This field can only be set on a business or enterprise license.",
                   "type": "object",
                   "properties": {
                     "global": {
@@ -1687,7 +1687,7 @@
                   }
                 },
                 "roles": {
-                  "description": "Contains the roles of the user per app (assuming they are not a builder user).",
+                  "description": "Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license.",
                   "type": "object",
                   "additionalProperties": {
                     "type": "string",
@@ -1833,6 +1833,137 @@
         "required": [
           "name"
         ]
+      },
+      "rolesAssign": {
+        "type": "object",
+        "properties": {
+          "appBuilder": {
+            "type": "object",
+            "properties": {
+              "appId": {
+                "description": "The app that the users should have app builder privileges granted for.",
+                "type": "string"
+              }
+            },
+            "description": "Allow setting users to builders per app.",
+            "required": [
+              "appId"
+            ]
+          },
+          "builder": {
+            "type": "boolean",
+            "description": "Add/remove global builder permissions from the list of users."
+          },
+          "admin": {
+            "type": "boolean",
+            "description": "Add/remove global admin permissions from the list of users."
+          },
+          "role": {
+            "type": "object",
+            "properties": {
+              "roleId": {
+                "description": "The role ID, such as BASIC, ADMIN or a custom role ID.",
+                "type": "string"
+              },
+              "appId": {
+                "description": "The app that the role relates to.",
+                "type": "string"
+              }
+            },
+            "description": "Add/remove a per-app role, such as BASIC, ADMIN etc.",
+            "required": [
+              "roleId",
+              "appId"
+            ]
+          },
+          "userIds": {
+            "description": "The user IDs to be updated to add/remove the specified roles.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "required": [
+          "userIds"
+        ]
+      },
+      "rolesUnAssign": {
+        "type": "object",
+        "properties": {
+          "appBuilder": {
+            "type": "object",
+            "properties": {
+              "appId": {
+                "description": "The app that the users should have app builder privileges granted for.",
+                "type": "string"
+              }
+            },
+            "description": "Allow setting users to builders per app.",
+            "required": [
+              "appId"
+            ]
+          },
+          "builder": {
+            "type": "boolean",
+            "description": "Add/remove global builder permissions from the list of users."
+          },
+          "admin": {
+            "type": "boolean",
+            "description": "Add/remove global admin permissions from the list of users."
+          },
+          "role": {
+            "type": "object",
+            "properties": {
+              "roleId": {
+                "description": "The role ID, such as BASIC, ADMIN or a custom role ID.",
+                "type": "string"
+              },
+              "appId": {
+                "description": "The app that the role relates to.",
+                "type": "string"
+              }
+            },
+            "description": "Add/remove a per-app role, such as BASIC, ADMIN etc.",
+            "required": [
+              "roleId",
+              "appId"
+            ]
+          },
+          "userIds": {
+            "description": "The user IDs to be updated to add/remove the specified roles.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "required": [
+          "userIds"
+        ]
+      },
+      "rolesOutput": {
+        "type": "object",
+        "properties": {
+          "data": {
+            "type": "object",
+            "properties": {
+              "userIds": {
+                "description": "The updated users' IDs",
+                "type": "array",
+                "items": {
+                  "type": "string"
+                }
+              }
+            },
+            "required": [
+              "userIds"
+            ]
+          }
+        },
+        "required": [
+          "data"
+        ]
       }
     }
   },
@@ -2186,6 +2317,70 @@
         }
       }
     },
+    "/roles/assign": {
+      "post": {
+        "operationId": "roleAssign",
+        "summary": "Assign a role to a list of users",
+        "description": "This is a business/enterprise only endpoint",
+        "tags": [
+          "roles"
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/rolesAssign"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Returns a list of updated user IDs",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/rolesOutput"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/roles/unassign": {
+      "post": {
+        "operationId": "roleUnAssign",
+        "summary": "Un-assign a role from a list of users",
+        "description": "This is a business/enterprise only endpoint",
+        "tags": [
+          "roles"
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/rolesUnAssign"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Returns a list of updated user IDs",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/rolesOutput"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/tables/{tableId}/rows": {
       "post": {
         "operationId": "rowCreate",
diff --git a/packages/server/specs/openapi.yaml b/packages/server/specs/openapi.yaml
index 86807c9981..07320917b8 100644
--- a/packages/server/specs/openapi.yaml
+++ b/packages/server/specs/openapi.yaml
@@ -1297,7 +1297,8 @@ components:
             login.
           type: boolean
         builder:
-          description: Describes if the user is a builder user or not.
+          description: Describes if the user is a builder user or not. This field can only
+            be set on a business or enterprise license.
           type: object
           properties:
             global:
@@ -1305,7 +1306,8 @@ components:
                 system.
               type: boolean
         admin:
-          description: Describes if the user is an admin user or not.
+          description: Describes if the user is an admin user or not. This field can only
+            be set on a business or enterprise license.
           type: object
           properties:
             global:
@@ -1313,7 +1315,8 @@ components:
               type: boolean
         roles:
           description: Contains the roles of the user per app (assuming they are not a
-            builder user).
+            builder user). This field can only be set on a business or
+            enterprise license.
           type: object
           additionalProperties:
             type: string
@@ -1352,7 +1355,8 @@ components:
                 login.
               type: boolean
             builder:
-              description: Describes if the user is a builder user or not.
+              description: Describes if the user is a builder user or not. This field can only
+                be set on a business or enterprise license.
               type: object
               properties:
                 global:
@@ -1360,7 +1364,8 @@ components:
                     system.
                   type: boolean
             admin:
-              description: Describes if the user is an admin user or not.
+              description: Describes if the user is an admin user or not. This field can only
+                be set on a business or enterprise license.
               type: object
               properties:
                 global:
@@ -1368,7 +1373,8 @@ components:
                   type: boolean
             roles:
               description: Contains the roles of the user per app (assuming they are not a
-                builder user).
+                builder user). This field can only be set on a business or
+                enterprise license.
               type: object
               additionalProperties:
                 type: string
@@ -1415,7 +1421,8 @@ components:
                   login.
                 type: boolean
               builder:
-                description: Describes if the user is a builder user or not.
+                description: Describes if the user is a builder user or not. This field can only
+                  be set on a business or enterprise license.
                 type: object
                 properties:
                   global:
@@ -1423,7 +1430,8 @@ components:
                       system.
                     type: boolean
               admin:
-                description: Describes if the user is an admin user or not.
+                description: Describes if the user is an admin user or not. This field can only
+                  be set on a business or enterprise license.
                 type: object
                 properties:
                   global:
@@ -1431,7 +1439,8 @@ components:
                     type: boolean
               roles:
                 description: Contains the roles of the user per app (assuming they are not a
-                  builder user).
+                  builder user). This field can only be set on a business or
+                  enterprise license.
                 type: object
                 additionalProperties:
                   type: string
@@ -1547,6 +1556,99 @@ components:
             insensitive starts with match.
       required:
         - name
+    rolesAssign:
+      type: object
+      properties:
+        appBuilder:
+          type: object
+          properties:
+            appId:
+              description: The app that the users should have app builder privileges granted
+                for.
+              type: string
+          description: Allow setting users to builders per app.
+          required:
+            - appId
+        builder:
+          type: boolean
+          description: Add/remove global builder permissions from the list of users.
+        admin:
+          type: boolean
+          description: Add/remove global admin permissions from the list of users.
+        role:
+          type: object
+          properties:
+            roleId:
+              description: The role ID, such as BASIC, ADMIN or a custom role ID.
+              type: string
+            appId:
+              description: The app that the role relates to.
+              type: string
+          description: Add/remove a per-app role, such as BASIC, ADMIN etc.
+          required:
+            - roleId
+            - appId
+        userIds:
+          description: The user IDs to be updated to add/remove the specified roles.
+          type: array
+          items:
+            type: string
+      required:
+        - userIds
+    rolesUnAssign:
+      type: object
+      properties:
+        appBuilder:
+          type: object
+          properties:
+            appId:
+              description: The app that the users should have app builder privileges granted
+                for.
+              type: string
+          description: Allow setting users to builders per app.
+          required:
+            - appId
+        builder:
+          type: boolean
+          description: Add/remove global builder permissions from the list of users.
+        admin:
+          type: boolean
+          description: Add/remove global admin permissions from the list of users.
+        role:
+          type: object
+          properties:
+            roleId:
+              description: The role ID, such as BASIC, ADMIN or a custom role ID.
+              type: string
+            appId:
+              description: The app that the role relates to.
+              type: string
+          description: Add/remove a per-app role, such as BASIC, ADMIN etc.
+          required:
+            - roleId
+            - appId
+        userIds:
+          description: The user IDs to be updated to add/remove the specified roles.
+          type: array
+          items:
+            type: string
+      required:
+        - userIds
+    rolesOutput:
+      type: object
+      properties:
+        data:
+          type: object
+          properties:
+            userIds:
+              description: The updated users' IDs
+              type: array
+              items:
+                type: string
+          required:
+            - userIds
+      required:
+        - data
 security:
   - ApiKeyAuth: []
 paths:
@@ -1757,6 +1859,46 @@ paths:
               examples:
                 queries:
                   $ref: "#/components/examples/queries"
+  /roles/assign:
+    post:
+      operationId: roleAssign
+      summary: Assign a role to a list of users
+      description: This is a business/enterprise only endpoint
+      tags:
+        - roles
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/rolesAssign"
+      responses:
+        "200":
+          description: Returns a list of updated user IDs
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/rolesOutput"
+  /roles/unassign:
+    post:
+      operationId: roleUnAssign
+      summary: Un-assign a role from a list of users
+      description: This is a business/enterprise only endpoint
+      tags:
+        - roles
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/rolesUnAssign"
+      responses:
+        "200":
+          description: Returns a list of updated user IDs
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/rolesOutput"
   "/tables/{tableId}/rows":
     post:
       operationId: rowCreate
diff --git a/packages/server/specs/resources/index.ts b/packages/server/specs/resources/index.ts
index 6b8a1aa437..c06148b7de 100644
--- a/packages/server/specs/resources/index.ts
+++ b/packages/server/specs/resources/index.ts
@@ -5,6 +5,7 @@ import query from "./query"
 import user from "./user"
 import metrics from "./metrics"
 import misc from "./misc"
+import roles from "./roles"
 
 export const examples = {
   ...application.getExamples(),
@@ -23,4 +24,5 @@ export const schemas = {
   ...query.getSchemas(),
   ...user.getSchemas(),
   ...misc.getSchemas(),
+  ...roles.getSchemas(),
 }
diff --git a/packages/server/specs/resources/roles.ts b/packages/server/specs/resources/roles.ts
new file mode 100644
index 0000000000..1033d640ce
--- /dev/null
+++ b/packages/server/specs/resources/roles.ts
@@ -0,0 +1,65 @@
+import { object } from "./utils"
+import Resource from "./utils/Resource"
+
+const roleSchema = object(
+  {
+    appBuilder: object(
+      {
+        appId: {
+          description:
+            "The app that the users should have app builder privileges granted for.",
+          type: "string",
+        },
+      },
+      { description: "Allow setting users to builders per app." }
+    ),
+    builder: {
+      type: "boolean",
+      description:
+        "Add/remove global builder permissions from the list of users.",
+    },
+    admin: {
+      type: "boolean",
+      description:
+        "Add/remove global admin permissions from the list of users.",
+    },
+    role: object(
+      {
+        roleId: {
+          description: "The role ID, such as BASIC, ADMIN or a custom role ID.",
+          type: "string",
+        },
+        appId: {
+          description: "The app that the role relates to.",
+          type: "string",
+        },
+      },
+      { description: "Add/remove a per-app role, such as BASIC, ADMIN etc." }
+    ),
+    userIds: {
+      description:
+        "The user IDs to be updated to add/remove the specified roles.",
+      type: "array",
+      items: {
+        type: "string",
+      },
+    },
+  },
+  { required: ["userIds"] }
+)
+
+export default new Resource().setSchemas({
+  rolesAssign: roleSchema,
+  rolesUnAssign: roleSchema,
+  rolesOutput: object({
+    data: object({
+      userIds: {
+        description: "The updated users' IDs",
+        type: "array",
+        items: {
+          type: "string",
+        },
+      },
+    }),
+  }),
+})
diff --git a/packages/server/specs/resources/user.ts b/packages/server/specs/resources/user.ts
index a7b9f1ddb9..d00ed02f81 100644
--- a/packages/server/specs/resources/user.ts
+++ b/packages/server/specs/resources/user.ts
@@ -58,7 +58,8 @@ const userSchema = object(
       type: "boolean",
     },
     builder: {
-      description: "Describes if the user is a builder user or not.",
+      description:
+        "Describes if the user is a builder user or not. This field can only be set on a business or enterprise license.",
       type: "object",
       properties: {
         global: {
@@ -69,7 +70,8 @@ const userSchema = object(
       },
     },
     admin: {
-      description: "Describes if the user is an admin user or not.",
+      description:
+        "Describes if the user is an admin user or not. This field can only be set on a business or enterprise license.",
       type: "object",
       properties: {
         global: {
@@ -81,7 +83,7 @@ const userSchema = object(
     },
     roles: {
       description:
-        "Contains the roles of the user per app (assuming they are not a builder user).",
+        "Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license.",
       type: "object",
       additionalProperties: {
         type: "string",
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index c5556479fe..012aa7c66d 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -283,12 +283,7 @@ async function performAppCreate(ctx: UserCtx) {
         title: name,
         navWidth: "Large",
         navBackground: "var(--spectrum-global-color-gray-100)",
-        links: [
-          {
-            url: "/home",
-            text: "Home",
-          },
-        ],
+        links: [],
       },
       theme: "spectrum--light",
       customTheme: {
diff --git a/packages/server/src/api/controllers/auth.ts b/packages/server/src/api/controllers/auth.ts
index bca6c4e64e..eabfe10bab 100644
--- a/packages/server/src/api/controllers/auth.ts
+++ b/packages/server/src/api/controllers/auth.ts
@@ -2,9 +2,9 @@ import { outputProcessing } from "../../utilities/rowProcessor"
 import { InternalTables } from "../../db/utils"
 import { getFullUser } from "../../utilities/users"
 import { roles, context } from "@budibase/backend-core"
-import { groups } from "@budibase/pro"
-import { ContextUser, User, Row, UserCtx } from "@budibase/types"
+import { ContextUser, Row, UserCtx } from "@budibase/types"
 import sdk from "../../sdk"
+import { processUser } from "../../utilities/global"
 
 const PUBLIC_ROLE = roles.BUILTIN_ROLE_IDS.PUBLIC
 
@@ -26,7 +26,7 @@ export async function fetchSelf(ctx: UserCtx) {
   }
 
   const appId = context.getAppId()
-  const user: ContextUser = await getFullUser(ctx, userId)
+  let user: ContextUser = await getFullUser(ctx, userId)
   // this shouldn't be returned by the app self
   delete user.roles
   // forward the csrf token from the session
@@ -36,8 +36,7 @@ export async function fetchSelf(ctx: UserCtx) {
     const db = context.getAppDB()
     // check for group permissions
     if (!user.roleId || user.roleId === PUBLIC_ROLE) {
-      const groupRoleId = await groups.getGroupRoleId(user as User, appId)
-      user.roleId = groupRoleId || user.roleId
+      user = await processUser(user, { appId })
     }
     // remove the full roles structure
     delete user.roles
diff --git a/packages/server/src/api/controllers/datasource.ts b/packages/server/src/api/controllers/datasource.ts
index 19a38206dc..399d5f1d0c 100644
--- a/packages/server/src/api/controllers/datasource.ts
+++ b/packages/server/src/api/controllers/datasource.ts
@@ -17,7 +17,6 @@ import {
   FetchDatasourceInfoRequest,
   FetchDatasourceInfoResponse,
   IntegrationBase,
-  RestConfig,
   SourceName,
   UpdateDatasourceResponse,
   UserCtx,
@@ -27,7 +26,6 @@ import {
 import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
 import { setupCreationAuth as googleSetupCreationAuth } from "../../integrations/googlesheets"
-import { areRESTVariablesValid } from "../../sdk/app/datasources/datasources"
 
 function getErrorTables(errors: any, errorType: string) {
   return Object.entries(errors)
diff --git a/packages/server/src/api/controllers/deploy/index.ts b/packages/server/src/api/controllers/deploy/index.ts
index a2b164ffc6..66439d3411 100644
--- a/packages/server/src/api/controllers/deploy/index.ts
+++ b/packages/server/src/api/controllers/deploy/index.ts
@@ -77,18 +77,19 @@ async function initDeployedApp(prodAppId: any) {
     )
   ).rows.map((row: any) => row.doc)
   await clearMetadata()
-  console.log("You have " + automations.length + " automations")
+  const { count } = await disableAllCrons(prodAppId)
   const promises = []
-  console.log("Disabling prod crons..")
-  await disableAllCrons(prodAppId)
-  console.log("Prod Cron triggers disabled..")
-  console.log("Enabling cron triggers for deployed app..")
   for (let automation of automations) {
     promises.push(enableCronTrigger(prodAppId, automation))
   }
-  await Promise.all(promises)
-  console.log("Enabled cron triggers for deployed app..")
-  // sync the automations back to the dev DB - since there is now cron
+  const results = await Promise.all(promises)
+  const enabledCount = results
+    .map(result => result.enabled)
+    .filter(result => result).length
+  console.log(
+    `Cleared ${count} old CRON, enabled ${enabledCount} new CRON triggers for app deployment`
+  )
+  // sync the automations back to the dev DB - since there is now CRON
   // information attached
   await sdk.applications.syncApp(dbCore.getDevAppID(prodAppId), {
     automationOnly: true,
diff --git a/packages/server/src/api/controllers/permission.ts b/packages/server/src/api/controllers/permission.ts
index 20e64d2cfb..a9cd686674 100644
--- a/packages/server/src/api/controllers/permission.ts
+++ b/packages/server/src/api/controllers/permission.ts
@@ -1,11 +1,20 @@
-import { permissions, roles, context } from "@budibase/backend-core"
+import { permissions, roles, context, HTTPError } from "@budibase/backend-core"
+import {
+  UserCtx,
+  Database,
+  Role,
+  PermissionLevel,
+  GetResourcePermsResponse,
+  ResourcePermissionInfo,
+  GetDependantResourcesResponse,
+} from "@budibase/types"
 import { getRoleParams } from "../../db/utils"
 import {
   CURRENTLY_SUPPORTED_LEVELS,
   getBasePermissions,
 } from "../../utilities/security"
 import { removeFromArray } from "../../utilities"
-import { UserCtx, Database, Role } from "@budibase/types"
+import sdk from "../../sdk"
 
 const PermissionUpdateType = {
   REMOVE: "remove",
@@ -25,14 +34,25 @@ async function getAllDBRoles(db: Database) {
 }
 
 async function updatePermissionOnRole(
-  appId: string,
   {
     roleId,
     resourceId,
     level,
-  }: { roleId: string; resourceId: string; level: string },
+  }: { roleId: string; resourceId: string; level: PermissionLevel },
   updateType: string
 ) {
+  const allowedAction = await sdk.permissions.resourceActionAllowed({
+    resourceId,
+    level,
+  })
+
+  if (!allowedAction.allowed) {
+    throw new HTTPError(
+      `You are not allowed to '${allowedAction.level}' the resource type '${allowedAction.resourceType}'`,
+      403
+    )
+  }
+
   const db = context.getAppDB()
   const remove = updateType === PermissionUpdateType.REMOVE
   const isABuiltin = roles.isBuiltin(roleId)
@@ -133,46 +153,48 @@ export async function fetch(ctx: UserCtx) {
   ctx.body = finalPermissions
 }
 
-export async function getResourcePerms(ctx: UserCtx) {
+export async function getResourcePerms(
+  ctx: UserCtx<void, GetResourcePermsResponse>
+) {
   const resourceId = ctx.params.resourceId
-  const db = context.getAppDB()
-  const body = await db.allDocs(
-    getRoleParams(null, {
-      include_docs: true,
-    })
-  )
-  const rolesList = body.rows.map(row => row.doc)
-  let permissions: Record<string, string> = {}
-  for (let level of SUPPORTED_LEVELS) {
-    // update the various roleIds in the resource permissions
-    for (let role of rolesList) {
-      const rolePerms = roles.checkForRoleResourceArray(
-        role.permissions,
-        resourceId
-      )
-      if (
-        rolePerms &&
-        rolePerms[resourceId] &&
-        rolePerms[resourceId].indexOf(level) !== -1
-      ) {
-        permissions[level] = roles.getExternalRoleID(role._id, role.version)!
-      }
-    }
+  const resourcePermissions = await sdk.permissions.getResourcePerms(resourceId)
+  const inheritablePermissions =
+    await sdk.permissions.getInheritablePermissions(resourceId)
+
+  ctx.body = {
+    permissions: Object.entries(resourcePermissions).reduce(
+      (p, [level, role]) => {
+        p[level] = {
+          role: role.role,
+          permissionType: role.type,
+          inheritablePermission:
+            inheritablePermissions && inheritablePermissions[level].role,
+        }
+        return p
+      },
+      {} as Record<string, ResourcePermissionInfo>
+    ),
+    requiresPlanToModify: (
+      await sdk.permissions.allowsExplicitPermissions(resourceId)
+    ).minPlan,
+  }
+}
+
+export async function getDependantResources(
+  ctx: UserCtx<void, GetDependantResourcesResponse>
+) {
+  const resourceId = ctx.params.resourceId
+  ctx.body = {
+    resourceByType: await sdk.permissions.getDependantResources(resourceId),
   }
-  ctx.body = Object.assign(getBasePermissions(resourceId), permissions)
 }
 
 export async function addPermission(ctx: UserCtx) {
-  ctx.body = await updatePermissionOnRole(
-    ctx.appId,
-    ctx.params,
-    PermissionUpdateType.ADD
-  )
+  ctx.body = await updatePermissionOnRole(ctx.params, PermissionUpdateType.ADD)
 }
 
 export async function removePermission(ctx: UserCtx) {
   ctx.body = await updatePermissionOnRole(
-    ctx.appId,
     ctx.params,
     PermissionUpdateType.REMOVE
   )
diff --git a/packages/server/src/api/controllers/public/applications.ts b/packages/server/src/api/controllers/public/applications.ts
index c4041bedcf..fd72db95d3 100644
--- a/packages/server/src/api/controllers/public/applications.ts
+++ b/packages/server/src/api/controllers/public/applications.ts
@@ -3,6 +3,8 @@ import { search as stringSearch, addRev } from "./utils"
 import * as controller from "../application"
 import * as deployController from "../deploy"
 import { Application } from "../../../definitions/common"
+import { UserCtx } from "@budibase/types"
+import { Next } from "koa"
 
 function fixAppID(app: Application, params: any) {
   if (!params) {
@@ -14,7 +16,7 @@ function fixAppID(app: Application, params: any) {
   return app
 }
 
-async function setResponseApp(ctx: any) {
+async function setResponseApp(ctx: UserCtx) {
   const appId = ctx.body?.appId
   if (appId && (!ctx.params || !ctx.params.appId)) {
     ctx.params = { appId }
@@ -28,14 +30,14 @@ async function setResponseApp(ctx: any) {
   }
 }
 
-export async function search(ctx: any, next: any) {
+export async function search(ctx: UserCtx, next: Next) {
   const { name } = ctx.request.body
   const apps = await dbCore.getAllApps({ all: true })
   ctx.body = stringSearch(apps, name)
   await next()
 }
 
-export async function create(ctx: any, next: any) {
+export async function create(ctx: UserCtx, next: Next) {
   if (!ctx.request.body || !ctx.request.body.useTemplate) {
     ctx.request.body = {
       useTemplate: false,
@@ -47,14 +49,14 @@ export async function create(ctx: any, next: any) {
   await next()
 }
 
-export async function read(ctx: any, next: any) {
+export async function read(ctx: UserCtx, next: Next) {
   await context.doInAppContext(ctx.params.appId, async () => {
     await setResponseApp(ctx)
     await next()
   })
 }
 
-export async function update(ctx: any, next: any) {
+export async function update(ctx: UserCtx, next: Next) {
   ctx.request.body = await addRev(fixAppID(ctx.request.body, ctx.params))
   await context.doInAppContext(ctx.params.appId, async () => {
     await controller.update(ctx)
@@ -63,7 +65,7 @@ export async function update(ctx: any, next: any) {
   })
 }
 
-export async function destroy(ctx: any, next: any) {
+export async function destroy(ctx: UserCtx, next: Next) {
   await context.doInAppContext(ctx.params.appId, async () => {
     // get the app before deleting it
     await setResponseApp(ctx)
@@ -75,14 +77,14 @@ export async function destroy(ctx: any, next: any) {
   })
 }
 
-export async function unpublish(ctx: any, next: any) {
+export async function unpublish(ctx: UserCtx, next: Next) {
   await context.doInAppContext(ctx.params.appId, async () => {
     await controller.unpublish(ctx)
     await next()
   })
 }
 
-export async function publish(ctx: any, next: any) {
+export async function publish(ctx: UserCtx, next: Next) {
   await context.doInAppContext(ctx.params.appId, async () => {
     await deployController.publishApp(ctx)
     await next()
diff --git a/packages/server/src/api/controllers/public/mapping/types.ts b/packages/server/src/api/controllers/public/mapping/types.ts
index e3c8719d87..9fea9b7213 100644
--- a/packages/server/src/api/controllers/public/mapping/types.ts
+++ b/packages/server/src/api/controllers/public/mapping/types.ts
@@ -16,6 +16,10 @@ export type CreateRowParams = components["schemas"]["row"]
 export type User = components["schemas"]["userOutput"]["data"]
 export type CreateUserParams = components["schemas"]["user"]
 
+export type RoleAssignRequest = components["schemas"]["rolesAssign"]
+export type RoleUnAssignRequest = components["schemas"]["rolesUnAssign"]
+export type RoleAssignmentResponse = components["schemas"]["rolesOutput"]
+
 export type SearchInputParams =
   | components["schemas"]["nameSearch"]
   | components["schemas"]["rowSearch"]
diff --git a/packages/server/src/api/controllers/public/queries.ts b/packages/server/src/api/controllers/public/queries.ts
index 57ec608379..3cb1ab3812 100644
--- a/packages/server/src/api/controllers/public/queries.ts
+++ b/packages/server/src/api/controllers/public/queries.ts
@@ -1,14 +1,16 @@
 import { search as stringSearch } from "./utils"
 import * as queryController from "../query"
+import { UserCtx } from "@budibase/types"
+import { Next } from "koa"
 
-export async function search(ctx: any, next: any) {
+export async function search(ctx: UserCtx, next: Next) {
   await queryController.fetch(ctx)
   const { name } = ctx.request.body
   ctx.body = stringSearch(ctx.body, name)
   await next()
 }
 
-export async function execute(ctx: any, next: any) {
+export async function execute(ctx: UserCtx, next: Next) {
   // don't wrap this, already returns "data"
   await queryController.executeV2(ctx)
   await next()
diff --git a/packages/server/src/api/controllers/public/roles.ts b/packages/server/src/api/controllers/public/roles.ts
new file mode 100644
index 0000000000..362f25da58
--- /dev/null
+++ b/packages/server/src/api/controllers/public/roles.ts
@@ -0,0 +1,33 @@
+import { UserCtx } from "@budibase/types"
+import { Next } from "koa"
+import { sdk } from "@budibase/pro"
+import {
+  RoleAssignmentResponse,
+  RoleUnAssignRequest,
+  RoleAssignRequest,
+} from "./mapping/types"
+
+async function assign(
+  ctx: UserCtx<RoleAssignRequest, RoleAssignmentResponse>,
+  next: Next
+) {
+  const { userIds, ...assignmentProps } = ctx.request.body
+  await sdk.publicApi.roles.assign(userIds, assignmentProps)
+  ctx.body = { data: { userIds } }
+  await next()
+}
+
+async function unAssign(
+  ctx: UserCtx<RoleUnAssignRequest, RoleAssignmentResponse>,
+  next: Next
+) {
+  const { userIds, ...unAssignmentProps } = ctx.request.body
+  await sdk.publicApi.roles.unAssign(userIds, unAssignmentProps)
+  ctx.body = { data: { userIds } }
+  await next()
+}
+
+export default {
+  assign,
+  unAssign,
+}
diff --git a/packages/server/src/api/controllers/public/rows.ts b/packages/server/src/api/controllers/public/rows.ts
index 39cf85a2a3..16403b06c9 100644
--- a/packages/server/src/api/controllers/public/rows.ts
+++ b/packages/server/src/api/controllers/public/rows.ts
@@ -1,7 +1,8 @@
 import * as rowController from "../row"
 import { addRev } from "./utils"
-import { Row } from "@budibase/types"
+import { Row, UserCtx } from "@budibase/types"
 import { convertBookmark } from "../../../utilities"
+import { Next } from "koa"
 
 // makes sure that the user doesn't need to pass in the type, tableId or _id params for
 // the call to be correct
@@ -21,7 +22,7 @@ export function fixRow(row: Row, params: any) {
   return row
 }
 
-export async function search(ctx: any, next: any) {
+export async function search(ctx: UserCtx, next: Next) {
   let { sort, paginate, bookmark, limit, query } = ctx.request.body
   // update the body to the correct format of the internal search
   if (!sort) {
@@ -40,25 +41,25 @@ export async function search(ctx: any, next: any) {
   await next()
 }
 
-export async function create(ctx: any, next: any) {
+export async function create(ctx: UserCtx, next: Next) {
   ctx.request.body = fixRow(ctx.request.body, ctx.params)
   await rowController.save(ctx)
   await next()
 }
 
-export async function read(ctx: any, next: any) {
+export async function read(ctx: UserCtx, next: Next) {
   await rowController.fetchEnrichedRow(ctx)
   await next()
 }
 
-export async function update(ctx: any, next: any) {
+export async function update(ctx: UserCtx, next: Next) {
   const { tableId } = ctx.params
   ctx.request.body = await addRev(fixRow(ctx.request.body, ctx.params), tableId)
   await rowController.save(ctx)
   await next()
 }
 
-export async function destroy(ctx: any, next: any) {
+export async function destroy(ctx: UserCtx, next: Next) {
   const { tableId } = ctx.params
   // set the body as expected, with the _id and _rev fields
   ctx.request.body = await addRev(
diff --git a/packages/server/src/api/controllers/public/tables.ts b/packages/server/src/api/controllers/public/tables.ts
index a346a750da..7486172fa3 100644
--- a/packages/server/src/api/controllers/public/tables.ts
+++ b/packages/server/src/api/controllers/public/tables.ts
@@ -1,6 +1,7 @@
 import { search as stringSearch, addRev } from "./utils"
 import * as controller from "../table"
-import { Table } from "@budibase/types"
+import { Table, UserCtx } from "@budibase/types"
+import { Next } from "koa"
 
 function fixTable(table: Table, params: any) {
   if (!params || !table) {
@@ -15,24 +16,24 @@ function fixTable(table: Table, params: any) {
   return table
 }
 
-export async function search(ctx: any, next: any) {
+export async function search(ctx: UserCtx, next: Next) {
   const { name } = ctx.request.body
   await controller.fetch(ctx)
   ctx.body = stringSearch(ctx.body, name)
   await next()
 }
 
-export async function create(ctx: any, next: any) {
+export async function create(ctx: UserCtx, next: Next) {
   await controller.save(ctx)
   await next()
 }
 
-export async function read(ctx: any, next: any) {
+export async function read(ctx: UserCtx, next: Next) {
   await controller.find(ctx)
   await next()
 }
 
-export async function update(ctx: any, next: any) {
+export async function update(ctx: UserCtx, next: Next) {
   ctx.request.body = await addRev(
     fixTable(ctx.request.body, ctx.params),
     ctx.params.tableId
@@ -41,7 +42,7 @@ export async function update(ctx: any, next: any) {
   await next()
 }
 
-export async function destroy(ctx: any, next: any) {
+export async function destroy(ctx: UserCtx, next: Next) {
   await controller.destroy(ctx)
   ctx.body = ctx.table
   await next()
diff --git a/packages/server/src/api/controllers/public/users.ts b/packages/server/src/api/controllers/public/users.ts
index 7192077d04..bb6fc3a6e7 100644
--- a/packages/server/src/api/controllers/public/users.ts
+++ b/packages/server/src/api/controllers/public/users.ts
@@ -7,16 +7,18 @@ import {
 import { publicApiUserFix } from "../../../utilities/users"
 import { db as dbCore } from "@budibase/backend-core"
 import { search as stringSearch } from "./utils"
-import { BBContext, User } from "@budibase/types"
+import { UserCtx, User } from "@budibase/types"
+import { Next } from "koa"
+import { sdk } from "@budibase/pro"
 
-function isLoggedInUser(ctx: BBContext, user: User) {
+function isLoggedInUser(ctx: UserCtx, user: User) {
   const loggedInId = ctx.user?._id
   const globalUserId = dbCore.getGlobalIDFromUserMetadataID(loggedInId!)
   // check both just incase
   return globalUserId === user._id || loggedInId === user._id
 }
 
-function getUser(ctx: BBContext, userId?: string) {
+function getUser(ctx: UserCtx, userId?: string) {
   if (userId) {
     ctx.params = { userId }
   } else if (!ctx.params?.userId) {
@@ -25,42 +27,38 @@ function getUser(ctx: BBContext, userId?: string) {
   return readGlobalUser(ctx)
 }
 
-export async function search(ctx: BBContext, next: any) {
+export async function search(ctx: UserCtx, next: Next) {
   const { name } = ctx.request.body
   const users = await allGlobalUsers(ctx)
   ctx.body = stringSearch(users, name, "email")
   await next()
 }
 
-export async function create(ctx: BBContext, next: any) {
-  const response = await saveGlobalUser(publicApiUserFix(ctx))
+export async function create(ctx: UserCtx, next: Next) {
+  ctx = publicApiUserFix(await sdk.publicApi.users.roleCheck(ctx))
+  const response = await saveGlobalUser(ctx)
   ctx.body = await getUser(ctx, response._id)
   await next()
 }
 
-export async function read(ctx: BBContext, next: any) {
+export async function read(ctx: UserCtx, next: Next) {
   ctx.body = await readGlobalUser(ctx)
   await next()
 }
 
-export async function update(ctx: BBContext, next: any) {
+export async function update(ctx: UserCtx, next: Next) {
   const user = await readGlobalUser(ctx)
   ctx.request.body = {
     ...ctx.request.body,
     _rev: user._rev,
   }
-  // disallow updating your own role - always overwrite with DB roles
-  if (isLoggedInUser(ctx, user)) {
-    ctx.request.body.builder = user.builder
-    ctx.request.body.admin = user.admin
-    ctx.request.body.roles = user.roles
-  }
-  const response = await saveGlobalUser(publicApiUserFix(ctx))
+  ctx = publicApiUserFix(await sdk.publicApi.users.roleCheck(ctx, user))
+  const response = await saveGlobalUser(ctx)
   ctx.body = await getUser(ctx, response._id)
   await next()
 }
 
-export async function destroy(ctx: BBContext, next: any) {
+export async function destroy(ctx: UserCtx, next: Next) {
   const user = await getUser(ctx)
   // disallow deleting yourself
   if (isLoggedInUser(ctx, user)) {
diff --git a/packages/server/src/api/controllers/query/index.ts b/packages/server/src/api/controllers/query/index.ts
index ee8e1bb022..b9a69f3988 100644
--- a/packages/server/src/api/controllers/query/index.ts
+++ b/packages/server/src/api/controllers/query/index.ts
@@ -127,7 +127,7 @@ export async function preview(ctx: any) {
   const query = ctx.request.body
   // preview may not have a queryId as it hasn't been saved, but if it does
   // this stops dynamic variables from calling the same query
-  const { fields, parameters, queryVerb, transformer, queryId } = query
+  const { fields, parameters, queryVerb, transformer, queryId, schema } = query
 
   const authConfigCtx: any = getAuthConfig(ctx)
 
@@ -140,6 +140,7 @@ export async function preview(ctx: any) {
       parameters,
       transformer,
       queryId,
+      schema,
       // have to pass down to the thread runner - can't put into context now
       environmentVariables: envVars,
       ctx: {
@@ -235,6 +236,7 @@ async function execute(
         user: ctx.user,
         auth: { ...authConfigCtx },
       },
+      schema: query.schema,
     }
     const runFn = () => Runner.run(inputs)
 
diff --git a/packages/server/src/api/controllers/row/external.ts b/packages/server/src/api/controllers/row/external.ts
index 3ee4ca6edd..491cbfa8f9 100644
--- a/packages/server/src/api/controllers/row/external.ts
+++ b/packages/server/src/api/controllers/row/external.ts
@@ -13,8 +13,11 @@ import {
   Row,
   Table,
   UserCtx,
+  EmptyFilterOption,
 } from "@budibase/types"
 import sdk from "../../../sdk"
+import * as utils from "./utils"
+import { dataFilters } from "@budibase/shared-core"
 
 export async function handleRequest(
   operation: Operation,
@@ -37,13 +40,20 @@ export async function handleRequest(
     }
   }
 
+  if (
+    !dataFilters.hasFilters(opts?.filters) &&
+    opts?.filters?.onEmptyFilter === EmptyFilterOption.RETURN_NONE
+  ) {
+    return []
+  }
+
   return new ExternalRequest(operation, tableId, opts?.datasource).run(
     opts || {}
   )
 }
 
 export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   const { _id, ...rowData } = ctx.request.body
 
   const validateResult = await sdk.rows.utils.validate({
@@ -70,7 +80,7 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
 
 export async function save(ctx: UserCtx) {
   const inputs = ctx.request.body
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   const validateResult = await sdk.rows.utils.validate({
     row: inputs,
     tableId,
@@ -98,12 +108,12 @@ export async function save(ctx: UserCtx) {
 
 export async function find(ctx: UserCtx) {
   const id = ctx.params.rowId
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   return sdk.rows.external.getRow(tableId, id)
 }
 
 export async function destroy(ctx: UserCtx) {
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   const _id = ctx.request.body._id
   const { row } = (await handleRequest(Operation.DELETE, tableId, {
     id: breakRowIdField(_id),
@@ -114,7 +124,7 @@ export async function destroy(ctx: UserCtx) {
 
 export async function bulkDestroy(ctx: UserCtx) {
   const { rows } = ctx.request.body
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   let promises: Promise<Row[] | { row: Row; table: Table }>[] = []
   for (let row of rows) {
     promises.push(
@@ -130,7 +140,7 @@ export async function bulkDestroy(ctx: UserCtx) {
 
 export async function fetchEnrichedRow(ctx: UserCtx) {
   const id = ctx.params.rowId
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   const { datasourceId, tableName } = breakExternalTableId(tableId)
   const datasource: Datasource = await sdk.datasources.get(datasourceId!)
   if (!tableName) {
diff --git a/packages/server/src/api/controllers/row/index.ts b/packages/server/src/api/controllers/row/index.ts
index a3e8d55661..88d3f50dbe 100644
--- a/packages/server/src/api/controllers/row/index.ts
+++ b/packages/server/src/api/controllers/row/index.ts
@@ -11,6 +11,9 @@ import {
   Row,
   PatchRowRequest,
   PatchRowResponse,
+  SearchRowResponse,
+  SearchRowRequest,
+  SearchParams,
 } from "@budibase/types"
 import * as utils from "./utils"
 import { gridSocket } from "../../../websockets"
@@ -156,7 +159,7 @@ async function deleteRows(ctx: UserCtx<DeleteRowRequest>) {
 
   for (let row of rows) {
     ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
-    gridSocket?.emitRowDeletion(ctx, row._id!)
+    gridSocket?.emitRowDeletion(ctx, row)
   }
 
   return rows
@@ -172,7 +175,7 @@ async function deleteRow(ctx: UserCtx<DeleteRowRequest>) {
   await quotas.removeRow()
 
   ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, resp.row)
-  gridSocket?.emitRowDeletion(ctx, resp.row._id!)
+  gridSocket?.emitRowDeletion(ctx, resp.row)
 
   return resp
 }
@@ -197,10 +200,10 @@ export async function destroy(ctx: UserCtx<DeleteRowRequest>) {
   ctx.body = response
 }
 
-export async function search(ctx: any) {
+export async function search(ctx: Ctx<SearchRowRequest, SearchRowResponse>) {
   const tableId = utils.getTableId(ctx)
 
-  const searchParams = {
+  const searchParams: SearchParams = {
     ...ctx.request.body,
     tableId,
   }
diff --git a/packages/server/src/api/controllers/row/internal.ts b/packages/server/src/api/controllers/row/internal.ts
index 2ff1df0933..4a412c42eb 100644
--- a/packages/server/src/api/controllers/row/internal.ts
+++ b/packages/server/src/api/controllers/row/internal.ts
@@ -6,28 +6,28 @@ import {
 } from "../../../db/utils"
 import * as userController from "../user"
 import {
+  cleanupAttachments,
   inputProcessing,
   outputProcessing,
-  cleanupAttachments,
 } from "../../../utilities/rowProcessor"
 import { FieldTypes } from "../../../constants"
 import * as utils from "./utils"
 import { cloneDeep } from "lodash/fp"
-import { context, db as dbCore } from "@budibase/backend-core"
+import { context } from "@budibase/backend-core"
 import { finaliseRow, updateRelatedFormula } from "./staticFormula"
 import {
-  UserCtx,
   LinkDocumentValue,
-  Row,
-  Table,
   PatchRowRequest,
   PatchRowResponse,
+  Row,
+  Table,
+  UserCtx,
 } from "@budibase/types"
 import sdk from "../../../sdk"
 
 export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
+  const tableId = utils.getTableId(ctx)
   const inputs = ctx.request.body
-  const tableId = inputs.tableId
   const isUserTable = tableId === InternalTables.USER_METADATA
   let oldRow
   const dbTable = await sdk.tables.getTable(tableId)
@@ -94,7 +94,7 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
 
 export async function save(ctx: UserCtx) {
   let inputs = ctx.request.body
-  inputs.tableId = ctx.params.tableId
+  inputs.tableId = utils.getTableId(ctx)
 
   if (!inputs._rev && !inputs._id) {
     inputs._id = generateRowID(inputs.tableId)
@@ -132,20 +132,22 @@ export async function save(ctx: UserCtx) {
 }
 
 export async function find(ctx: UserCtx) {
-  const db = dbCore.getDB(ctx.appId)
-  const table = await sdk.tables.getTable(ctx.params.tableId)
-  let row = await utils.findRow(ctx, ctx.params.tableId, ctx.params.rowId)
+  const tableId = utils.getTableId(ctx),
+    rowId = ctx.params.rowId
+  const table = await sdk.tables.getTable(tableId)
+  let row = await utils.findRow(ctx, tableId, rowId)
   row = await outputProcessing(table, row)
   return row
 }
 
 export async function destroy(ctx: UserCtx) {
   const db = context.getAppDB()
+  const tableId = utils.getTableId(ctx)
   const { _id } = ctx.request.body
   let row = await db.get<Row>(_id)
   let _rev = ctx.request.body._rev || row._rev
 
-  if (row.tableId !== ctx.params.tableId) {
+  if (row.tableId !== tableId) {
     throw "Supplied tableId doesn't match the row's tableId"
   }
   const table = await sdk.tables.getTable(row.tableId)
@@ -163,7 +165,7 @@ export async function destroy(ctx: UserCtx) {
   await updateRelatedFormula(table, row)
 
   let response
-  if (ctx.params.tableId === InternalTables.USER_METADATA) {
+  if (tableId === InternalTables.USER_METADATA) {
     ctx.params = {
       id: _id,
     }
@@ -176,7 +178,7 @@ export async function destroy(ctx: UserCtx) {
 }
 
 export async function bulkDestroy(ctx: UserCtx) {
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   const table = await sdk.tables.getTable(tableId)
   let { rows } = ctx.request.body
 
@@ -216,7 +218,7 @@ export async function bulkDestroy(ctx: UserCtx) {
 
 export async function fetchEnrichedRow(ctx: UserCtx) {
   const db = context.getAppDB()
-  const tableId = ctx.params.tableId
+  const tableId = utils.getTableId(ctx)
   const rowId = ctx.params.rowId
   // need table to work out where links go in row
   let [table, row] = await Promise.all([
diff --git a/packages/server/src/api/controllers/row/utils.ts b/packages/server/src/api/controllers/row/utils.ts
index 6ff90f2b25..e85ec4553c 100644
--- a/packages/server/src/api/controllers/row/utils.ts
+++ b/packages/server/src/api/controllers/row/utils.ts
@@ -45,13 +45,20 @@ export async function findRow(ctx: UserCtx, tableId: string, rowId: string) {
 }
 
 export function getTableId(ctx: Ctx) {
-  if (ctx.request.body && ctx.request.body.tableId) {
-    return ctx.request.body.tableId
+  // top priority, use the URL first
+  if (ctx.params?.sourceId) {
+    return ctx.params.sourceId
   }
-  if (ctx.params && ctx.params.tableId) {
+  // now check for old way of specifying table ID
+  if (ctx.params?.tableId) {
     return ctx.params.tableId
   }
-  if (ctx.params && ctx.params.viewName) {
+  // check body for a table ID
+  if (ctx.request.body?.tableId) {
+    return ctx.request.body.tableId
+  }
+  // now check if a specific view name
+  if (ctx.params?.viewName) {
     return ctx.params.viewName
   }
 }
diff --git a/packages/server/src/api/controllers/row/views.ts b/packages/server/src/api/controllers/row/views.ts
index c38b7fe56e..36a0b588b6 100644
--- a/packages/server/src/api/controllers/row/views.ts
+++ b/packages/server/src/api/controllers/row/views.ts
@@ -1,77 +1,87 @@
 import { quotas } from "@budibase/pro"
 import {
   UserCtx,
-  SearchResponse,
-  SortOrder,
-  SortType,
   ViewV2,
+  SearchRowResponse,
+  SearchViewRowRequest,
+  RequiredKeys,
+  SearchParams,
+  SearchFilters,
 } from "@budibase/types"
+import { dataFilters } from "@budibase/shared-core"
 import sdk from "../../../sdk"
+import { db } from "@budibase/backend-core"
 
-export async function searchView(ctx: UserCtx<void, SearchResponse>) {
+export async function searchView(
+  ctx: UserCtx<SearchViewRowRequest, SearchRowResponse>
+) {
   const { viewId } = ctx.params
 
   const view = await sdk.views.get(viewId)
   if (!view) {
     ctx.throw(404, `View ${viewId} not found`)
   }
-
   if (view.version !== 2) {
     ctx.throw(400, `This method only supports viewsV2`)
   }
 
-  const table = await sdk.tables.getTable(view?.tableId)
+  const viewFields = Object.keys(view.schema || {})
+  const { body } = ctx.request
 
-  const viewFields =
-    (view.columns &&
-      Object.entries(view.columns).length &&
-      Object.keys(sdk.views.enrichSchema(view, table.schema).schema)) ||
-    undefined
+  // Enrich saved query with ephemeral query params.
+  // We prevent searching on any fields that are saved as part of the query, as
+  // that could let users find rows they should not be allowed to access.
+  let query = dataFilters.buildLuceneQuery(view.query || [])
+  if (body.query) {
+    // Extract existing fields
+    const existingFields =
+      view.query
+        ?.filter(filter => filter.field)
+        .map(filter => db.removeKeyNumbering(filter.field)) || []
 
-  ctx.status = 200
-  const result = await quotas.addQuery(
-    () =>
-      sdk.rows.search({
-        tableId: view.tableId,
-        query: view.query || {},
-        fields: viewFields,
-        ...getSortOptions(ctx, view),
-      }),
-    {
-      datasourceId: view.tableId,
-    }
-  )
+    // Delete extraneous search params that cannot be overridden
+    delete body.query.allOr
+    delete body.query.onEmptyFilter
+
+    // Carry over filters for unused fields
+    Object.keys(body.query).forEach(key => {
+      const operator = key as keyof Omit<
+        SearchFilters,
+        "allOr" | "onEmptyFilter"
+      >
+      Object.keys(body.query[operator] || {}).forEach(field => {
+        if (!existingFields.includes(db.removeKeyNumbering(field))) {
+          query[operator]![field] = body.query[operator]![field]
+        }
+      })
+    })
+  }
+
+  const searchOptions: RequiredKeys<SearchViewRowRequest> &
+    RequiredKeys<Pick<SearchParams, "tableId" | "query" | "fields">> = {
+    tableId: view.tableId,
+    query,
+    fields: viewFields,
+    ...getSortOptions(body, view),
+    limit: body.limit,
+    bookmark: body.bookmark,
+    paginate: body.paginate,
+  }
+
+  const result = await quotas.addQuery(() => sdk.rows.search(searchOptions), {
+    datasourceId: view.tableId,
+  })
 
   result.rows.forEach(r => (r._viewId = view.id))
   ctx.body = result
 }
 
-function getSortOptions(
-  ctx: UserCtx,
-  view: ViewV2
-):
-  | {
-      sort: string
-      sortOrder?: SortOrder
-      sortType?: SortType
-    }
-  | undefined {
-  const { sort_column, sort_order, sort_type } = ctx.query
-  if (Array.isArray(sort_column)) {
-    ctx.throw(400, "sort_column cannot be an array")
-  }
-  if (Array.isArray(sort_order)) {
-    ctx.throw(400, "sort_order cannot be an array")
-  }
-  if (Array.isArray(sort_type)) {
-    ctx.throw(400, "sort_type cannot be an array")
-  }
-
-  if (sort_column) {
+function getSortOptions(request: SearchViewRowRequest, view: ViewV2) {
+  if (request.sort) {
     return {
-      sort: sort_column,
-      sortOrder: sort_order as SortOrder,
-      sortType: sort_type as SortType,
+      sort: request.sort,
+      sortOrder: request.sortOrder,
+      sortType: request.sortType,
     }
   }
   if (view.sort) {
@@ -82,5 +92,9 @@ function getSortOptions(
     }
   }
 
-  return
+  return {
+    sort: undefined,
+    sortOrder: undefined,
+    sortType: undefined,
+  }
 }
diff --git a/packages/server/src/api/controllers/table/external.ts b/packages/server/src/api/controllers/table/external.ts
index eb1eeb7256..327904666d 100644
--- a/packages/server/src/api/controllers/table/external.ts
+++ b/packages/server/src/api/controllers/table/external.ts
@@ -22,9 +22,12 @@ import {
   QueryJson,
   RelationshipType,
   RenameColumn,
+  SaveTableRequest,
+  SaveTableResponse,
   Table,
   TableRequest,
   UserCtx,
+  ViewV2,
 } from "@budibase/types"
 import sdk from "../../../sdk"
 import { builderSocket } from "../../../websockets"
@@ -198,8 +201,8 @@ function isRelationshipSetup(column: FieldSchema) {
   return column.foreignKey || column.through
 }
 
-export async function save(ctx: UserCtx) {
-  const inputs: TableRequest = ctx.request.body
+export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
+  const inputs = ctx.request.body
   const renamed = inputs?._rename
   // can't do this right now
   delete inputs.rows
@@ -215,7 +218,7 @@ export async function save(ctx: UserCtx) {
     ...inputs,
   }
 
-  let oldTable
+  let oldTable: Table | undefined
   if (ctx.request.body && ctx.request.body._id) {
     oldTable = await sdk.tables.getTable(ctx.request.body._id)
   }
@@ -224,6 +227,17 @@ export async function save(ctx: UserCtx) {
     ctx.throw(400, "A column type has changed.")
   }
 
+  for (let view in tableToSave.views) {
+    const tableView = tableToSave.views[view]
+    if (!tableView || !sdk.views.isV2(tableView)) continue
+
+    tableToSave.views[view] = sdk.views.syncSchema(
+      oldTable!.views![view] as ViewV2,
+      tableToSave.schema,
+      renamed
+    )
+  }
+
   const db = context.getAppDB()
   const datasource = await sdk.datasources.get(datasourceId)
   if (!datasource.entities) {
diff --git a/packages/server/src/api/controllers/table/index.ts b/packages/server/src/api/controllers/table/index.ts
index 53202d6878..759974d6a7 100644
--- a/packages/server/src/api/controllers/table/index.ts
+++ b/packages/server/src/api/controllers/table/index.ts
@@ -1,14 +1,16 @@
 import * as internal from "./internal"
 import * as external from "./external"
 import {
-  validate as validateSchema,
-  isSchema,
   isRows,
+  isSchema,
+  validate as validateSchema,
 } from "../../../utilities/schema"
 import { isExternalTable, isSQL } from "../../../integrations/utils"
 import { events } from "@budibase/backend-core"
 import {
   FetchTablesResponse,
+  SaveTableRequest,
+  SaveTableResponse,
   Table,
   TableResponse,
   UserCtx,
@@ -49,8 +51,7 @@ export async function fetch(ctx: UserCtx<void, FetchTablesResponse>) {
     }
   })
 
-  const response = [...internal, ...external].map(sdk.tables.enrichViewSchemas)
-  ctx.body = response
+  ctx.body = [...internal, ...external].map(sdk.tables.enrichViewSchemas)
 }
 
 export async function find(ctx: UserCtx<void, TableResponse>) {
@@ -60,7 +61,7 @@ export async function find(ctx: UserCtx<void, TableResponse>) {
   ctx.body = sdk.tables.enrichViewSchemas(table)
 }
 
-export async function save(ctx: UserCtx) {
+export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
   const appId = ctx.appId
   const table = ctx.request.body
   const isImport = table.rows
@@ -92,7 +93,7 @@ export async function destroy(ctx: UserCtx) {
   ctx.status = 200
   ctx.table = deletedTable
   ctx.body = { message: `Table ${tableId} deleted.` }
-  builderSocket?.emitTableDeletion(ctx, tableId)
+  builderSocket?.emitTableDeletion(ctx, deletedTable)
 }
 
 export async function bulkImport(ctx: UserCtx) {
diff --git a/packages/server/src/api/controllers/table/internal.ts b/packages/server/src/api/controllers/table/internal.ts
index 7317d11e18..e468848c57 100644
--- a/packages/server/src/api/controllers/table/internal.ts
+++ b/packages/server/src/api/controllers/table/internal.ts
@@ -9,7 +9,15 @@ import {
   fixAutoColumnSubType,
 } from "../../../utilities/rowProcessor"
 import { runStaticFormulaChecks } from "./bulkFormula"
-import { Table } from "@budibase/types"
+import {
+  RenameColumn,
+  SaveTableRequest,
+  SaveTableResponse,
+  Table,
+  UserCtx,
+  ViewStatisticsSchema,
+  ViewV2,
+} from "@budibase/types"
 import { quotas } from "@budibase/pro"
 import isEqual from "lodash/isEqual"
 import { cloneDeep } from "lodash/fp"
@@ -33,10 +41,12 @@ function checkAutoColumns(table: Table, oldTable?: Table) {
   return table
 }
 
-export async function save(ctx: any) {
+export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
   const db = context.getAppDB()
   const { rows, ...rest } = ctx.request.body
-  let tableToSave = {
+  let tableToSave: Table & {
+    _rename?: { old: string; updated: string } | undefined
+  } = {
     type: "table",
     _id: generateTableID(),
     views: {},
@@ -44,7 +54,7 @@ export async function save(ctx: any) {
   }
 
   // if the table obj had an _id then it will have been retrieved
-  let oldTable
+  let oldTable: Table | undefined
   if (ctx.request.body && ctx.request.body._id) {
     oldTable = await sdk.tables.getTable(ctx.request.body._id)
   }
@@ -77,10 +87,10 @@ export async function save(ctx: any) {
   }
 
   // Don't rename if the name is the same
-  let { _rename } = tableToSave
+  let _rename: RenameColumn | undefined = tableToSave._rename
   /* istanbul ignore next */
   if (_rename && _rename.old === _rename.updated) {
-    _rename = null
+    _rename = undefined
     delete tableToSave._rename
   }
 
@@ -97,7 +107,20 @@ export async function save(ctx: any) {
     const tableView = tableToSave.views[view]
     if (!tableView) continue
 
-    if (tableView.schema.group || tableView.schema.field) continue
+    if (sdk.views.isV2(tableView)) {
+      tableToSave.views[view] = sdk.views.syncSchema(
+        oldTable!.views![view] as ViewV2,
+        tableToSave.schema,
+        _rename
+      )
+      continue
+    }
+
+    if (
+      (tableView.schema as ViewStatisticsSchema).group ||
+      tableView.schema.field
+    )
+      continue
     tableView.schema = tableToSave.schema
   }
 
@@ -112,7 +135,7 @@ export async function save(ctx: any) {
       tableToSave._rev = linkResp._rev
     }
   } catch (err) {
-    ctx.throw(400, err)
+    ctx.throw(400, err as string)
   }
 
   // don't perform any updates until relationships have been
diff --git a/packages/server/src/api/controllers/table/utils.ts b/packages/server/src/api/controllers/table/utils.ts
index e1469bb267..0e5b784c66 100644
--- a/packages/server/src/api/controllers/table/utils.ts
+++ b/packages/server/src/api/controllers/table/utils.ts
@@ -418,7 +418,7 @@ export function areSwitchableTypes(type1: any, type2: any) {
   return false
 }
 
-export function hasTypeChanged(table: any, oldTable: any) {
+export function hasTypeChanged(table: Table, oldTable: Table | undefined) {
   if (!oldTable) {
     return false
   }
diff --git a/packages/server/src/api/controllers/view/viewsV2.ts b/packages/server/src/api/controllers/view/viewsV2.ts
index 80a115e365..f4f969622a 100644
--- a/packages/server/src/api/controllers/view/viewsV2.ts
+++ b/packages/server/src/api/controllers/view/viewsV2.ts
@@ -2,51 +2,19 @@ import sdk from "../../../sdk"
 import {
   CreateViewRequest,
   Ctx,
+  RequiredKeys,
   UIFieldMetadata,
   UpdateViewRequest,
   ViewResponse,
   ViewV2,
-  RequiredKeys,
 } from "@budibase/types"
+import { builderSocket, gridSocket } from "../../../websockets"
 
-async function parseSchemaUI(ctx: Ctx, view: CreateViewRequest) {
+async function parseSchema(view: CreateViewRequest) {
   if (!view.schema) {
     return
   }
-
-  function hasOverrides(
-    newObj: Record<string, any>,
-    existingObj: Record<string, any>
-  ) {
-    const result = Object.entries(newObj).some(([key, value]) => {
-      const isObject = typeof value === "object"
-      const existing = existingObj[key]
-      if (isObject && hasOverrides(value, existing || {})) {
-        return true
-      }
-      if (!isObject && value !== existing) {
-        return true
-      }
-    })
-
-    return result
-  }
-
-  const table = await sdk.tables.getTable(view.tableId)
-  for (const [
-    fieldName,
-    { order, width, visible, icon, ...schemaNonUI },
-  ] of Object.entries(view.schema)) {
-    const overrides = hasOverrides(schemaNonUI, table.schema[fieldName])
-    if (overrides) {
-      ctx.throw(
-        400,
-        "This endpoint does not support overriding non UI fields in the schema"
-      )
-    }
-  }
-
-  const schemaUI =
+  const finalViewSchema =
     view.schema &&
     Object.entries(view.schema).reduce((p, [fieldName, schemaValue]) => {
       const fieldSchema: RequiredKeys<UIFieldMetadata> = {
@@ -63,22 +31,32 @@ async function parseSchemaUI(ctx: Ctx, view: CreateViewRequest) {
       p[fieldName] = fieldSchema
       return p
     }, {} as Record<string, RequiredKeys<UIFieldMetadata>>)
-  return schemaUI
+  for (let [key, column] of Object.entries(finalViewSchema)) {
+    if (!column.visible) {
+      delete finalViewSchema[key]
+    }
+  }
+  return finalViewSchema
+}
+
+export async function get(ctx: Ctx<void, ViewResponse>) {
+  ctx.body = {
+    data: await sdk.views.get(ctx.params.viewId, { enriched: true }),
+  }
 }
 
 export async function create(ctx: Ctx<CreateViewRequest, ViewResponse>) {
   const view = ctx.request.body
   const { tableId } = view
 
-  const schemaUI = await parseSchemaUI(ctx, view)
+  const schema = await parseSchema(view)
 
   const parsedView: Omit<RequiredKeys<ViewV2>, "id" | "version"> = {
     name: view.name,
     tableId: view.tableId,
     query: view.query,
     sort: view.sort,
-    columns: view.schema && Object.keys(view.schema),
-    schemaUI,
+    schema,
     primaryDisplay: view.primaryDisplay,
   }
   const result = await sdk.views.create(tableId, parsedView)
@@ -86,6 +64,10 @@ export async function create(ctx: Ctx<CreateViewRequest, ViewResponse>) {
   ctx.body = {
     data: result,
   }
+
+  const table = await sdk.tables.getTable(tableId)
+  builderSocket?.emitTableUpdate(ctx, table)
+  gridSocket?.emitViewUpdate(ctx, result)
 }
 
 export async function update(ctx: Ctx<UpdateViewRequest, ViewResponse>) {
@@ -101,7 +83,7 @@ export async function update(ctx: Ctx<UpdateViewRequest, ViewResponse>) {
 
   const { tableId } = view
 
-  const schemaUI = await parseSchemaUI(ctx, view)
+  const schema = await parseSchema(view)
   const parsedView: RequiredKeys<ViewV2> = {
     id: view.id,
     name: view.name,
@@ -109,8 +91,7 @@ export async function update(ctx: Ctx<UpdateViewRequest, ViewResponse>) {
     tableId: view.tableId,
     query: view.query,
     sort: view.sort,
-    columns: view.schema && Object.keys(view.schema),
-    schemaUI,
+    schema,
     primaryDisplay: view.primaryDisplay,
   }
 
@@ -118,11 +99,19 @@ export async function update(ctx: Ctx<UpdateViewRequest, ViewResponse>) {
   ctx.body = {
     data: result,
   }
+
+  const table = await sdk.tables.getTable(tableId)
+  builderSocket?.emitTableUpdate(ctx, table)
+  gridSocket?.emitViewUpdate(ctx, result)
 }
 
 export async function remove(ctx: Ctx) {
   const { viewId } = ctx.params
 
-  await sdk.views.remove(viewId)
+  const view = await sdk.views.remove(viewId)
   ctx.status = 204
+
+  const table = await sdk.tables.getTable(view.tableId)
+  builderSocket?.emitTableUpdate(ctx, table)
+  gridSocket?.emitViewDeletion(ctx, view)
 }
diff --git a/packages/server/src/api/routes/permission.ts b/packages/server/src/api/routes/permission.ts
index 7f82d34052..119853e066 100644
--- a/packages/server/src/api/routes/permission.ts
+++ b/packages/server/src/api/routes/permission.ts
@@ -23,6 +23,11 @@ router
     authorized(permissions.BUILDER),
     controller.getResourcePerms
   )
+  .get(
+    "/api/permission/:resourceId/dependants",
+    authorized(permissions.BUILDER),
+    controller.getDependantResources
+  )
   // adding a specific role/level for the resource overrides the underlying access control
   .post(
     "/api/permission/:roleId/:resourceId/:level",
diff --git a/packages/server/src/api/routes/public/roles.ts b/packages/server/src/api/routes/public/roles.ts
new file mode 100644
index 0000000000..905f364cbe
--- /dev/null
+++ b/packages/server/src/api/routes/public/roles.ts
@@ -0,0 +1,56 @@
+import controller from "../../controllers/public/roles"
+import Endpoint from "./utils/Endpoint"
+
+const write = []
+
+/**
+ * @openapi
+ * /roles/assign:
+ *   post:
+ *     operationId: roleAssign
+ *     summary: Assign a role to a list of users
+ *     description: This is a business/enterprise only endpoint
+ *     tags:
+ *       - roles
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             $ref: '#/components/schemas/rolesAssign'
+ *     responses:
+ *       200:
+ *         description: Returns a list of updated user IDs
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/rolesOutput'
+ */
+write.push(new Endpoint("post", "/roles/assign", controller.assign))
+
+/**
+ * @openapi
+ * /roles/unassign:
+ *   post:
+ *     operationId: roleUnAssign
+ *     summary: Un-assign a role from a list of users
+ *     description: This is a business/enterprise only endpoint
+ *     tags:
+ *       - roles
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             $ref: '#/components/schemas/rolesUnAssign'
+ *     responses:
+ *       200:
+ *         description: Returns a list of updated user IDs
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/rolesOutput'
+ */
+write.push(new Endpoint("post", "/roles/unassign", controller.unAssign))
+
+export default { write, read: [] }
diff --git a/packages/server/src/api/routes/public/tests/users.spec.js b/packages/server/src/api/routes/public/tests/users.spec.js
deleted file mode 100644
index 1daa611df8..0000000000
--- a/packages/server/src/api/routes/public/tests/users.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const setup = require("../../tests/utilities")
-const { generateMakeRequest } = require("./utils")
-
-const workerRequests = require("../../../../utilities/workerRequests")
-
-let config = setup.getConfig()
-let apiKey, globalUser, makeRequest
-
-beforeAll(async () => {
-  await config.init()
-  globalUser = await config.globalUser()
-  apiKey = await config.generateApiKey(globalUser._id)
-  makeRequest = generateMakeRequest(apiKey)
-  workerRequests.readGlobalUser.mockReturnValue(globalUser)
-})
-
-afterAll(setup.afterAll)
-
-describe("check user endpoints", () => {
-  it("should not allow a user to update their own roles", async () => {
-    const res = await makeRequest("put", `/users/${globalUser._id}`, {
-      ...globalUser,
-      roles: {
-        "app_1": "ADMIN",
-      }
-    })
-    expect(workerRequests.saveGlobalUser.mock.lastCall[0].body.data.roles["app_1"]).toBeUndefined()
-    expect(res.status).toBe(200)
-    expect(res.body.data.roles["app_1"]).toBeUndefined()
-  })
-
-  it("should not allow a user to delete themselves", async () => {
-    const res = await makeRequest("delete", `/users/${globalUser._id}`)
-    expect(res.status).toBe(405)
-    expect(workerRequests.deleteGlobalUser.mock.lastCall).toBeUndefined()
-  })
-})
-
diff --git a/packages/server/src/api/routes/public/tests/users.spec.ts b/packages/server/src/api/routes/public/tests/users.spec.ts
new file mode 100644
index 0000000000..c81acca1df
--- /dev/null
+++ b/packages/server/src/api/routes/public/tests/users.spec.ts
@@ -0,0 +1,126 @@
+import * as setup from "../../tests/utilities"
+import { generateMakeRequest, MakeRequestResponse } from "./utils"
+import { User } from "@budibase/types"
+import { mocks } from "@budibase/backend-core/tests"
+
+import * as workerRequests from "../../../../utilities/workerRequests"
+
+const mockedWorkerReq = jest.mocked(workerRequests)
+
+let config = setup.getConfig()
+let apiKey: string, globalUser: User, makeRequest: MakeRequestResponse
+
+beforeAll(async () => {
+  await config.init()
+  globalUser = await config.globalUser()
+  apiKey = await config.generateApiKey(globalUser._id)
+  makeRequest = generateMakeRequest(apiKey)
+  mockedWorkerReq.readGlobalUser.mockImplementation(() =>
+    Promise.resolve(globalUser)
+  )
+})
+
+afterAll(setup.afterAll)
+
+function base() {
+  return {
+    tenantId: config.getTenantId(),
+    firstName: "Test",
+    lastName: "Test",
+  }
+}
+
+function updateMock() {
+  mockedWorkerReq.readGlobalUser.mockImplementation(ctx => ctx.request.body)
+}
+
+describe("check user endpoints", () => {
+  it("should not allow a user to update their own roles", async () => {
+    const res = await makeRequest("put", `/users/${globalUser._id}`, {
+      ...globalUser,
+      roles: {
+        app_1: "ADMIN",
+      },
+    })
+    expect(
+      mockedWorkerReq.saveGlobalUser.mock.lastCall?.[0].body.data.roles["app_1"]
+    ).toBeUndefined()
+    expect(res.status).toBe(200)
+    expect(res.body.data.roles["app_1"]).toBeUndefined()
+  })
+
+  it("should not allow a user to delete themselves", async () => {
+    const res = await makeRequest("delete", `/users/${globalUser._id}`)
+    expect(res.status).toBe(405)
+    expect(mockedWorkerReq.deleteGlobalUser.mock.lastCall).toBeUndefined()
+  })
+})
+
+describe("no user role update in free", () => {
+  beforeAll(() => {
+    updateMock()
+  })
+
+  it("should not allow 'roles' to be updated", async () => {
+    const res = await makeRequest("post", "/users", {
+      ...base(),
+      roles: { app_a: "BASIC" },
+    })
+    expect(res.status).toBe(200)
+    expect(res.body.data.roles["app_a"]).toBeUndefined()
+  })
+
+  it("should not allow 'admin' to be updated", async () => {
+    const res = await makeRequest("post", "/users", {
+      ...base(),
+      admin: { global: true },
+    })
+    expect(res.status).toBe(200)
+    expect(res.body.data.admin).toBeUndefined()
+  })
+
+  it("should not allow 'builder' to be updated", async () => {
+    const res = await makeRequest("post", "/users", {
+      ...base(),
+      builder: { global: true },
+    })
+    expect(res.status).toBe(200)
+    expect(res.body.data.builder).toBeUndefined()
+  })
+})
+
+describe("no user role update in business", () => {
+  beforeAll(() => {
+    updateMock()
+    mocks.licenses.usePublicApiUserRoles()
+  })
+
+  it("should allow 'roles' to be updated", async () => {
+    const res = await makeRequest("post", "/users", {
+      ...base(),
+      roles: { app_a: "BASIC" },
+    })
+    expect(res.status).toBe(200)
+    expect(res.body.data.roles["app_a"]).toBe("BASIC")
+  })
+
+  it("should allow 'admin' to be updated", async () => {
+    mocks.licenses.usePublicApiUserRoles()
+    const res = await makeRequest("post", "/users", {
+      ...base(),
+      admin: { global: true },
+    })
+    expect(res.status).toBe(200)
+    expect(res.body.data.admin.global).toBe(true)
+  })
+
+  it("should allow 'builder' to be updated", async () => {
+    mocks.licenses.usePublicApiUserRoles()
+    const res = await makeRequest("post", "/users", {
+      ...base(),
+      builder: { global: true },
+    })
+    expect(res.status).toBe(200)
+    expect(res.body.data.builder.global).toBe(true)
+  })
+})
diff --git a/packages/server/src/api/routes/row.ts b/packages/server/src/api/routes/row.ts
index ac0cd2b4a4..c29cb65eac 100644
--- a/packages/server/src/api/routes/row.ts
+++ b/packages/server/src/api/routes/row.ts
@@ -1,19 +1,18 @@
 import Router from "@koa/router"
 import * as rowController from "../controllers/row"
-import authorized from "../../middleware/authorized"
+import authorized, { authorizedResource } from "../../middleware/authorized"
 import { paramResource, paramSubResource } from "../../middleware/resourceId"
 import { permissions } from "@budibase/backend-core"
 import { internalSearchValidator } from "./utils/validators"
-import noViewData from "../../middleware/noViewData"
 import trimViewRowInfo from "../../middleware/trimViewRowInfo"
-import * as utils from "../../db/utils"
+
 const { PermissionType, PermissionLevel } = permissions
 
 const router: Router = new Router()
 
 router
   /**
-   * @api {get} /api/:tableId/:rowId/enrich Get an enriched row
+   * @api {get} /api/:sourceId/:rowId/enrich Get an enriched row
    * @apiName Get an enriched row
    * @apiGroup rows
    * @apiPermission table read access
@@ -27,13 +26,13 @@ router
    * @apiSuccess {object} row The response body will be the enriched row.
    */
   .get(
-    "/api/:tableId/:rowId/enrich",
-    paramSubResource("tableId", "rowId"),
+    "/api/:sourceId/:rowId/enrich",
+    paramSubResource("sourceId", "rowId"),
     authorized(PermissionType.TABLE, PermissionLevel.READ),
     rowController.fetchEnrichedRow
   )
   /**
-   * @api {get} /api/:tableId/rows Get all rows in a table
+   * @api {get} /api/:sourceId/rows Get all rows in a table
    * @apiName Get all rows in a table
    * @apiGroup rows
    * @apiPermission table read access
@@ -42,37 +41,37 @@ router
    * due to its lack of support for pagination. With SQL tables this will retrieve up to a limit and then
    * will simply stop.
    *
-   * @apiParam {string} tableId The ID of the table to retrieve all rows within.
+   * @apiParam {string} sourceId The ID of the table to retrieve all rows within.
    *
    * @apiSuccess {object[]} rows The response body will be an array of all rows found.
    */
   .get(
-    "/api/:tableId/rows",
-    paramResource("tableId"),
+    "/api/:sourceId/rows",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.READ),
     rowController.fetch
   )
   /**
-   * @api {get} /api/:tableId/rows/:rowId Retrieve a single row
+   * @api {get} /api/:sourceId/rows/:rowId Retrieve a single row
    * @apiName Retrieve a single row
    * @apiGroup rows
    * @apiPermission table read access
    * @apiDescription This endpoint retrieves only the specified row. If you wish to retrieve
    * a row by anything other than its _id field, use the search endpoint.
    *
-   * @apiParam {string} tableId The ID of the table to retrieve a row from.
+   * @apiParam {string} sourceId The ID of the table to retrieve a row from.
    * @apiParam {string} rowId The ID of the row to retrieve.
    *
    * @apiSuccess {object} body The response body will be the row that was found.
    */
   .get(
-    "/api/:tableId/rows/:rowId",
-    paramSubResource("tableId", "rowId"),
+    "/api/:sourceId/rows/:rowId",
+    paramSubResource("sourceId", "rowId"),
     authorized(PermissionType.TABLE, PermissionLevel.READ),
     rowController.find
   )
   /**
-   * @api {post} /api/:tableId/search Search for rows in a table
+   * @api {post} /api/:sourceId/search Search for rows in a table
    * @apiName Search for rows in a table
    * @apiGroup rows
    * @apiPermission table read access
@@ -80,7 +79,7 @@ router
    * and data UI in the builder are built atop this. All filtering, sorting and pagination is
    * handled through this, for internal and external (datasource plus, e.g. SQL) tables.
    *
-   * @apiParam {string} tableId The ID of the table to retrieve rows from.
+   * @apiParam {string} sourceId The ID of the table to retrieve rows from.
    *
    * @apiParam (Body) {boolean} [paginate] If pagination is required then this should be set to true,
    * defaults to false.
@@ -135,22 +134,22 @@ router
    * page.
    */
   .post(
-    "/api/:tableId/search",
+    "/api/:sourceId/search",
     internalSearchValidator(),
-    paramResource("tableId"),
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.READ),
     rowController.search
   )
   // DEPRECATED - this is an old API, but for backwards compat it needs to be
   // supported still
   .post(
-    "/api/search/:tableId/rows",
-    paramResource("tableId"),
+    "/api/search/:sourceId/rows",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.READ),
     rowController.search
   )
   /**
-   * @api {post} /api/:tableId/rows Creates a new row
+   * @api {post} /api/:sourceId/rows Creates a new row
    * @apiName Creates a new row
    * @apiGroup rows
    * @apiPermission table write access
@@ -159,7 +158,7 @@ router
    * links to one. Please note that "_id", "_rev" and "tableId" are fields that are
    * already used by Budibase tables and cannot be used for columns.
    *
-   * @apiParam {string} tableId The ID of the table to save a row to.
+   * @apiParam {string} sourceId The ID of the table to save a row to.
    *
    * @apiParam (Body) {string} [_id] If the row exists already then an ID for the row must be provided.
    * @apiParam (Body) {string} [_rev] If working with an existing row for an internal table its revision
@@ -174,14 +173,14 @@ router
    * @apiSuccess {object} body The contents of the row that was saved will be returned as well.
    */
   .post(
-    "/api/:tableId/rows",
-    paramResource("tableId"),
+    "/api/:sourceId/rows",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.WRITE),
-    noViewData,
+    trimViewRowInfo,
     rowController.save
   )
   /**
-   * @api {patch} /api/:tableId/rows Updates a row
+   * @api {patch} /api/:sourceId/rows Updates a row
    * @apiName Update a row
    * @apiGroup rows
    * @apiPermission table write access
@@ -189,14 +188,14 @@ router
    * error if an _id isn't provided, it will only function for existing rows.
    */
   .patch(
-    "/api/:tableId/rows",
-    paramResource("tableId"),
+    "/api/:sourceId/rows",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.WRITE),
-    noViewData,
+    trimViewRowInfo,
     rowController.patch
   )
   /**
-   * @api {post} /api/:tableId/rows/validate Validate inputs for a row
+   * @api {post} /api/:sourceId/rows/validate Validate inputs for a row
    * @apiName Validate inputs for a row
    * @apiGroup rows
    * @apiPermission table write access
@@ -204,7 +203,7 @@ router
    * given the table schema, this will iterate through all the constraints on the table and
    * check if the request body is valid.
    *
-   * @apiParam {string} tableId The ID of the table the row is to be validated for.
+   * @apiParam {string} sourceId The ID of the table the row is to be validated for.
    *
    * @apiParam (Body) {any} [any] Any fields provided in the request body will be tested
    * against the table schema and constraints.
@@ -216,20 +215,20 @@ router
    * the schema.
    */
   .post(
-    "/api/:tableId/rows/validate",
-    paramResource("tableId"),
+    "/api/:sourceId/rows/validate",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.WRITE),
     rowController.validate
   )
   /**
-   * @api {delete} /api/:tableId/rows Delete rows
+   * @api {delete} /api/:sourceId/rows Delete rows
    * @apiName Delete rows
    * @apiGroup rows
    * @apiPermission table write access
    * @apiDescription This endpoint can delete a single row, or delete them in a bulk
    * fashion.
    *
-   * @apiParam {string} tableId The ID of the table the row is to be deleted from.
+   * @apiParam {string} sourceId The ID of the table the row is to be deleted from.
    *
    * @apiParam (Body) {object[]} [rows] If bulk deletion is desired then provide the rows in this
    * key of the request body that are to be deleted.
@@ -242,117 +241,37 @@ router
    * is the deleted row.
    */
   .delete(
-    "/api/:tableId/rows",
-    paramResource("tableId"),
+    "/api/:sourceId/rows",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.WRITE),
+    trimViewRowInfo,
     rowController.destroy
   )
 
   /**
-   * @api {post} /api/:tableId/rows/exportRows Export Rows
+   * @api {post} /api/:sourceId/rows/exportRows Export Rows
    * @apiName Export rows
    * @apiGroup rows
    * @apiPermission table write access
    * @apiDescription This API can export a number of provided rows
    *
-   * @apiParam {string} tableId The ID of the table the row is to be deleted from.
+   * @apiParam {string} sourceId The ID of the table the row is to be deleted from.
    *
    * @apiParam (Body) {object[]} [rows] The row IDs which are to be exported
    *
    * @apiSuccess {object[]|object}
    */
   .post(
-    "/api/:tableId/rows/exportRows",
-    paramResource("tableId"),
+    "/api/:sourceId/rows/exportRows",
+    paramResource("sourceId"),
     authorized(PermissionType.TABLE, PermissionLevel.WRITE),
     rowController.exportRows
   )
 
-router
-  .get(
-    "/api/v2/views/:viewId/search",
-    authorized(PermissionType.VIEW, PermissionLevel.READ),
-    rowController.views.searchView
-  )
-  /**
-   * @api {post} /api/:tableId/rows Creates a new row
-   * @apiName Creates a new row
-   * @apiGroup rows
-   * @apiPermission table write access
-   * @apiDescription This API will create a new row based on the supplied body. If the
-   * body includes an "_id" field then it will update an existing row if the field
-   * links to one. Please note that "_id", "_rev" and "tableId" are fields that are
-   * already used by Budibase tables and cannot be used for columns.
-   *
-   * @apiParam {string} tableId The ID of the table to save a row to.
-   *
-   * @apiParam (Body) {string} [_id] If the row exists already then an ID for the row must be provided.
-   * @apiParam (Body) {string} [_rev] If working with an existing row for an internal table its revision
-   * must also be provided.
-   * @apiParam (Body) {string} _viewId The ID of the view should be specified in the row body itself.
-   * @apiParam (Body) {string} tableId The ID of the table should also be specified in the row body itself.
-   * @apiParam (Body) {any} [any] Any field supplied in the body will be assessed to see if it matches
-   * a column in the specified table. All other fields will be dropped and not stored.
-   *
-   * @apiSuccess {string} _id The ID of the row that was just saved, if it was just created this
-   * is the rows new ID.
-   * @apiSuccess {string} [_rev] If saving to an internal table a revision will also be returned.
-   * @apiSuccess {object} body The contents of the row that was saved will be returned as well.
-   */
-  .post(
-    "/api/v2/views/:viewId/rows",
-    paramResource("viewId"),
-    authorized(PermissionType.VIEW, PermissionLevel.WRITE),
-    trimViewRowInfo,
-    rowController.save
-  )
-  /**
-   * @api {patch} /api/v2/views/:viewId/rows/:rowId Updates a row
-   * @apiName Update a row
-   * @apiGroup rows
-   * @apiPermission table write access
-   * @apiDescription This endpoint is identical to the row creation endpoint but instead it will
-   * error if an _id isn't provided, it will only function for existing rows.
-   */
-  .patch(
-    "/api/v2/views/:viewId/rows/:rowId",
-    paramResource("viewId"),
-    authorized(PermissionType.VIEW, PermissionLevel.WRITE),
-    trimViewRowInfo,
-    rowController.patch
-  )
-  /**
-   * @api {delete} /api/v2/views/:viewId/rows Delete rows for a view
-   * @apiName Delete rows for a view
-   * @apiGroup rows
-   * @apiPermission table write access
-   * @apiDescription This endpoint can delete a single row, or delete them in a bulk
-   * fashion.
-   *
-   * @apiParam {string} tableId The ID of the table the row is to be deleted from.
-   *
-   * @apiParam (Body) {object[]} [rows] If bulk deletion is desired then provide the rows in this
-   * key of the request body that are to be deleted.
-   * @apiParam (Body) {string} [_id] If deleting a single row then provide its ID in this field.
-   * @apiParam (Body) {string} [_rev] If deleting a single row from an internal table then provide its
-   * revision here.
-   *
-   * @apiSuccess {object[]|object} body If deleting bulk then the response body will be an array
-   * of the deleted rows, if deleting a single row then the body will contain a "row" property which
-   * is the deleted row.
-   */
-  .delete(
-    "/api/v2/views/:viewId/rows",
-    paramResource("viewId"),
-    authorized(PermissionType.VIEW, PermissionLevel.WRITE),
-    // This is required as the implementation relies on the table id
-    (ctx, next) => {
-      ctx.params.tableId = utils.extractViewInfoFromID(
-        ctx.params.viewId
-      ).tableId
-      return next()
-    },
-    rowController.destroy
-  )
+router.post(
+  "/api/v2/views/:viewId/search",
+  authorizedResource(PermissionType.VIEW, PermissionLevel.READ, "viewId"),
+  rowController.views.searchView
+)
 
 export default router
diff --git a/packages/server/src/api/routes/tests/permissions.spec.js b/packages/server/src/api/routes/tests/permissions.spec.js
deleted file mode 100644
index ed131aed80..0000000000
--- a/packages/server/src/api/routes/tests/permissions.spec.js
+++ /dev/null
@@ -1,133 +0,0 @@
-const { roles } = require("@budibase/backend-core")
-const setup = require("./utilities")
-const { basicRow } = setup.structures
-const { BUILTIN_ROLE_IDS } = roles
-
-const HIGHER_ROLE_ID = BUILTIN_ROLE_IDS.BASIC
-const STD_ROLE_ID = BUILTIN_ROLE_IDS.PUBLIC
-
-describe("/permission", () => {
-  let request = setup.getRequest()
-  let config = setup.getConfig()
-  let table
-  let perms
-  let row
-
-  afterAll(setup.afterAll)
-
-  beforeAll(async () => {
-    await config.init()
-  })
-  
-  beforeEach(async () => {
-    table = await config.createTable()
-    row = await config.createRow()
-    perms = await config.addPermission(STD_ROLE_ID, table._id)
-  })
-
-  async function getTablePermissions() {
-    return request
-      .get(`/api/permission/${table._id}`)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-  }
-
-  describe("levels", () => {
-    it("should be able to get levels", async () => {
-      const res = await request
-        .get(`/api/permission/levels`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body).toBeDefined()
-      expect(res.body.length).toEqual(3)
-      expect(res.body).toContain("read")
-      expect(res.body).toContain("write")
-      expect(res.body).toContain("execute")
-    })
-  })
-
-  describe("add", () => {
-    it("should be able to add permission to a role for the table", async () => {
-      expect(perms.length).toEqual(1)
-      expect(perms[0]._id).toEqual(`${STD_ROLE_ID}`)
-    })
-
-    it("should get the resource permissions", async () => {
-      const res = await request
-        .get(`/api/permission/${table._id}`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body["read"]).toEqual(STD_ROLE_ID)
-      expect(res.body["write"]).toEqual(HIGHER_ROLE_ID)
-    })
-
-    it("should get resource permissions with multiple roles", async () => {
-      perms = await config.addPermission(HIGHER_ROLE_ID, table._id, "write")
-      const res = await getTablePermissions()
-      expect(res.body["read"]).toEqual(STD_ROLE_ID)
-      expect(res.body["write"]).toEqual(HIGHER_ROLE_ID)
-      const allRes = await request
-        .get(`/api/permission`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(allRes.body[table._id]["write"]).toEqual(HIGHER_ROLE_ID)
-      expect(allRes.body[table._id]["read"]).toEqual(STD_ROLE_ID)
-    })
-  })
-
-  describe("remove", () => {
-    it("should be able to remove the permission", async () => {
-      const res = await request
-        .delete(`/api/permission/${STD_ROLE_ID}/${table._id}/read`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body[0]._id).toEqual(STD_ROLE_ID)
-      const permsRes = await getTablePermissions()
-      expect(permsRes.body[STD_ROLE_ID]).toBeUndefined()
-    })
-  })
-
-  describe("check public user allowed", () => {
-    it("should be able to read the row", async () => {
-      // replicate changes before checking permissions
-      await config.publish()
-
-      const res = await request
-        .get(`/api/${table._id}/rows`)
-        .set(config.publicHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body[0]._id).toEqual(row._id)
-    })
-
-    it("shouldn't allow writing from a public user", async () => {
-      const res = await request
-        .post(`/api/${table._id}/rows`)
-        .send(basicRow(table._id))
-        .set(config.publicHeaders())
-        .expect("Content-Type", /json/)
-        .expect(403)
-      expect(res.status).toEqual(403)
-    })
-  })
-
-  describe("fetch builtins", () => {
-    it("should be able to fetch builtin definitions", async () => {
-      const res = await request
-        .get(`/api/permission/builtin`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(Array.isArray(res.body)).toEqual(true)
-      const publicPerm = res.body.find(perm => perm._id === "public")
-      expect(publicPerm).toBeDefined()
-      expect(publicPerm.permissions).toBeDefined()
-      expect(publicPerm.name).toBeDefined()
-    })
-  })
-})
diff --git a/packages/server/src/api/routes/tests/permissions.spec.ts b/packages/server/src/api/routes/tests/permissions.spec.ts
new file mode 100644
index 0000000000..129bc00b44
--- /dev/null
+++ b/packages/server/src/api/routes/tests/permissions.spec.ts
@@ -0,0 +1,290 @@
+const mockedSdk = sdk.permissions as jest.Mocked<typeof sdk.permissions>
+jest.mock("../../../sdk/app/permissions", () => ({
+  ...jest.requireActual("../../../sdk/app/permissions"),
+  resourceActionAllowed: jest.fn(),
+}))
+
+import sdk from "../../../sdk"
+
+import { roles } from "@budibase/backend-core"
+import {
+  Document,
+  DocumentType,
+  PermissionLevel,
+  Row,
+  Table,
+  ViewV2,
+} from "@budibase/types"
+import * as setup from "./utilities"
+import { mocks } from "@budibase/backend-core/tests"
+
+const { basicRow } = setup.structures
+const { BUILTIN_ROLE_IDS } = roles
+
+const HIGHER_ROLE_ID = BUILTIN_ROLE_IDS.BASIC
+const STD_ROLE_ID = BUILTIN_ROLE_IDS.PUBLIC
+
+describe("/permission", () => {
+  let request = setup.getRequest()
+  let config = setup.getConfig()
+  let table: Table & { _id: string }
+  let perms: Document[]
+  let row: Row
+  let view: ViewV2
+
+  afterAll(setup.afterAll)
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  beforeEach(async () => {
+    mocks.licenses.useCloudFree()
+    mockedSdk.resourceActionAllowed.mockResolvedValue({ allowed: true })
+
+    table = (await config.createTable()) as typeof table
+    row = await config.createRow()
+    view = await config.api.viewV2.create({ tableId: table._id })
+    perms = await config.api.permission.set({
+      roleId: STD_ROLE_ID,
+      resourceId: table._id,
+      level: PermissionLevel.READ,
+    })
+  })
+
+  describe("levels", () => {
+    it("should be able to get levels", async () => {
+      const res = await request
+        .get(`/api/permission/levels`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+      expect(res.body).toBeDefined()
+      expect(res.body.length).toEqual(3)
+      expect(res.body).toContain("read")
+      expect(res.body).toContain("write")
+      expect(res.body).toContain("execute")
+    })
+  })
+
+  describe("add", () => {
+    it("should be able to add permission to a role for the table", async () => {
+      expect(perms.length).toEqual(1)
+      expect(perms[0]._id).toEqual(`${STD_ROLE_ID}`)
+    })
+
+    it("should get the resource permissions", async () => {
+      const res = await request
+        .get(`/api/permission/${table._id}`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+      expect(res.body).toEqual({
+        permissions: {
+          read: { permissionType: "EXPLICIT", role: STD_ROLE_ID },
+          write: { permissionType: "BASE", role: HIGHER_ROLE_ID },
+        },
+      })
+    })
+
+    it("should get resource permissions with multiple roles", async () => {
+      perms = await config.api.permission.set({
+        roleId: HIGHER_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.WRITE,
+      })
+      const res = await config.api.permission.get(table._id)
+      expect(res.body).toEqual({
+        permissions: {
+          read: { permissionType: "EXPLICIT", role: STD_ROLE_ID },
+          write: { permissionType: "EXPLICIT", role: HIGHER_ROLE_ID },
+        },
+      })
+
+      const allRes = await request
+        .get(`/api/permission`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+      expect(allRes.body[table._id]["read"]).toEqual(STD_ROLE_ID)
+      expect(allRes.body[table._id]["write"]).toEqual(HIGHER_ROLE_ID)
+    })
+
+    it("throw forbidden if the action is not allowed for the resource", async () => {
+      mockedSdk.resourceActionAllowed.mockResolvedValue({
+        allowed: false,
+        resourceType: DocumentType.DATASOURCE,
+        level: PermissionLevel.READ,
+      })
+
+      const response = await config.api.permission.set(
+        {
+          roleId: STD_ROLE_ID,
+          resourceId: table._id,
+          level: PermissionLevel.EXECUTE,
+        },
+        { expectStatus: 403 }
+      )
+      expect(response.message).toEqual(
+        "You are not allowed to 'read' the resource type 'datasource'"
+      )
+    })
+  })
+
+  describe("remove", () => {
+    it("should be able to remove the permission", async () => {
+      const res = await config.api.permission.revoke({
+        roleId: STD_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.READ,
+      })
+      expect(res.body[0]._id).toEqual(STD_ROLE_ID)
+      const permsRes = await config.api.permission.get(table._id)
+      expect(permsRes.body[STD_ROLE_ID]).toBeUndefined()
+    })
+
+    it("throw forbidden if the action is not allowed for the resource", async () => {
+      mockedSdk.resourceActionAllowed.mockResolvedValue({
+        allowed: false,
+        resourceType: DocumentType.DATASOURCE,
+        level: PermissionLevel.READ,
+      })
+
+      const response = await config.api.permission.revoke(
+        {
+          roleId: STD_ROLE_ID,
+          resourceId: table._id,
+          level: PermissionLevel.EXECUTE,
+        },
+        { expectStatus: 403 }
+      )
+      expect(response.body.message).toEqual(
+        "You are not allowed to 'read' the resource type 'datasource'"
+      )
+    })
+  })
+
+  describe("check public user allowed", () => {
+    it("should be able to read the row", async () => {
+      // replicate changes before checking permissions
+      await config.publish()
+
+      const res = await request
+        .get(`/api/${table._id}/rows`)
+        .set(config.publicHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+      expect(res.body[0]._id).toEqual(row._id)
+    })
+
+    it("should be able to access the view data when the table is set to public and with no view permissions overrides", async () => {
+      // replicate changes before checking permissions
+      await config.publish()
+
+      const res = await config.api.viewV2.search(view.id, undefined, {
+        usePublicUser: true,
+      })
+      expect(res.body.rows[0]._id).toEqual(row._id)
+    })
+
+    it("should not be able to access the view data when the table is not public and there are no view permissions overrides", async () => {
+      await config.api.permission.revoke({
+        roleId: STD_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.READ,
+      })
+      // replicate changes before checking permissions
+      await config.publish()
+
+      await config.api.viewV2.search(view.id, undefined, {
+        expectStatus: 403,
+        usePublicUser: true,
+      })
+    })
+
+    it("should ignore the view permissions if the flag is not on", async () => {
+      await config.api.permission.set({
+        roleId: STD_ROLE_ID,
+        resourceId: view.id,
+        level: PermissionLevel.READ,
+      })
+      await config.api.permission.revoke({
+        roleId: STD_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.READ,
+      })
+      // replicate changes before checking permissions
+      await config.publish()
+
+      await config.api.viewV2.search(view.id, undefined, {
+        expectStatus: 403,
+        usePublicUser: true,
+      })
+    })
+
+    it("should use the view permissions if the flag is on", async () => {
+      mocks.licenses.useViewPermissions()
+      await config.api.permission.set({
+        roleId: STD_ROLE_ID,
+        resourceId: view.id,
+        level: PermissionLevel.READ,
+      })
+      await config.api.permission.revoke({
+        roleId: STD_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.READ,
+      })
+      // replicate changes before checking permissions
+      await config.publish()
+
+      const res = await config.api.viewV2.search(view.id, undefined, {
+        usePublicUser: true,
+      })
+      expect(res.body.rows[0]._id).toEqual(row._id)
+    })
+
+    it("shouldn't allow writing from a public user", async () => {
+      const res = await request
+        .post(`/api/${table._id}/rows`)
+        .send(basicRow(table._id))
+        .set(config.publicHeaders())
+        .expect("Content-Type", /json/)
+        .expect(403)
+      expect(res.status).toEqual(403)
+    })
+  })
+
+  describe("fetch builtins", () => {
+    it("should be able to fetch builtin definitions", async () => {
+      const res = await request
+        .get(`/api/permission/builtin`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+      expect(Array.isArray(res.body)).toEqual(true)
+      const publicPerm = res.body.find(
+        (perm: Document) => perm._id === "public"
+      )
+      expect(publicPerm).toBeDefined()
+      expect(publicPerm.permissions).toBeDefined()
+      expect(publicPerm.name).toBeDefined()
+    })
+  })
+
+  describe("default permissions", () => {
+    it("legacy views", async () => {
+      const legacyView = await config.createLegacyView()
+
+      const res = await config.api.permission.get(legacyView.name)
+
+      expect(res.body).toEqual({
+        permissions: {
+          read: {
+            permissionType: "BASE",
+            role: "BASIC",
+          },
+        },
+      })
+    })
+  })
+})
diff --git a/packages/server/src/api/routes/tests/role.spec.js b/packages/server/src/api/routes/tests/role.spec.js
index 5282597897..a6418c2277 100644
--- a/packages/server/src/api/routes/tests/role.spec.js
+++ b/packages/server/src/api/routes/tests/role.spec.js
@@ -1,5 +1,6 @@
 const { roles, events, permissions } = require("@budibase/backend-core")
 const setup = require("./utilities")
+const { PermissionLevel } = require("@budibase/types")
 const { basicRole } = setup.structures
 const { BUILTIN_ROLE_IDS } = roles
 const { BuiltinPermissionID } = permissions
@@ -16,7 +17,7 @@ describe("/roles", () => {
 
   const createRole = async (role) => {
     if (!role) {
-      role =  basicRole()
+      role = basicRole()
     }
 
     return request
@@ -98,7 +99,7 @@ describe("/roles", () => {
 
     it("should be able to get the role with a permission added", async () => {
       const table = await config.createTable()
-      await config.addPermission(BUILTIN_ROLE_IDS.POWER, table._id)
+      await config.api.permission.set({ roleId: BUILTIN_ROLE_IDS.POWER, resourceId: table._id, level: PermissionLevel.READ })
       const res = await request
         .get(`/api/roles`)
         .set(config.defaultHeaders())
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index b986ffb945..f63be2318f 100644
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@@ -1,31 +1,30 @@
 import tk from "timekeeper"
-const timestamp = new Date("2023-01-26T11:48:57.597Z").toISOString()
-tk.freeze(timestamp)
-
 import { outputProcessing } from "../../../utilities/rowProcessor"
 import * as setup from "./utilities"
-const { basicRow } = setup.structures
-import { context, tenancy } from "@budibase/backend-core"
+import { context, roles, tenancy } from "@budibase/backend-core"
 import { quotas } from "@budibase/pro"
 import {
-  QuotaUsageType,
-  StaticQuotaName,
-  MonthlyQuotaName,
-  Row,
-  Table,
   FieldType,
-  SortType,
+  MonthlyQuotaName,
+  PermissionLevel,
+  QuotaUsageType,
+  Row,
   SortOrder,
-  DeleteRow,
+  SortType,
+  StaticQuotaName,
+  Table,
 } from "@budibase/types"
 import {
   expectAnyInternalColsAttributes,
   generator,
+  mocks,
   structures,
 } from "@budibase/backend-core/tests"
-import trimViewRowInfoMiddleware from "../../../middleware/trimViewRowInfo"
-import noViewDataMiddleware from "../../../middleware/noViewData"
-import router from "../row"
+
+const timestamp = new Date("2023-01-26T11:48:57.597Z").toISOString()
+tk.freeze(timestamp)
+
+const { basicRow } = setup.structures
 
 describe("/rows", () => {
   let request = setup.getRequest()
@@ -40,6 +39,7 @@ describe("/rows", () => {
   })
 
   beforeEach(async () => {
+    mocks.licenses.useCloudFree()
     table = await config.createTable()
     row = basicRow(table._id!)
   })
@@ -394,25 +394,48 @@ describe("/rows", () => {
       expect(saved.arrayFieldArrayStrKnown).toEqual(["One"])
       expect(saved.optsFieldStrKnown).toEqual("Alpha")
     })
+  })
 
-    it("should throw an error when creating a table row with view id data", async () => {
-      const res = await request
-        .post(`/api/${row.tableId}/rows`)
-        .send({ ...row, _viewId: generator.guid() })
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(400)
-      expect(res.body.message).toEqual(
-        "Table row endpoints cannot contain view info"
-      )
-    })
+  describe("view save", () => {
+    function orderTable(): Table {
+      return {
+        name: "orders",
+        schema: {
+          Country: {
+            type: FieldType.STRING,
+            name: "Country",
+          },
+          OrderID: {
+            type: FieldType.STRING,
+            name: "OrderID",
+          },
+          Story: {
+            type: FieldType.STRING,
+            name: "Story",
+          },
+        },
+      }
+    }
 
-    it("should setup the noViewData middleware", async () => {
-      const route = router.stack.find(
-        r => r.methods.includes("POST") && r.path === "/api/:tableId/rows"
-      )
-      expect(route).toBeDefined()
-      expect(route?.stack).toContainEqual(noViewDataMiddleware)
+    it("views have extra data trimmed", async () => {
+      const table = await config.createTable(orderTable())
+
+      const createViewResponse = await config.api.viewV2.create({
+        tableId: table._id,
+        schema: {
+          Country: {},
+          OrderID: {},
+        },
+      })
+
+      const response = await config.api.row.save(createViewResponse.id, {
+        Country: "Aussy",
+        OrderID: "1111",
+        Story: "aaaaa",
+      })
+
+      const row = await config.api.row.get(table._id!, response._id!)
+      expect(row.body.Story).toBeUndefined()
     })
   })
 
@@ -463,33 +486,6 @@ describe("/rows", () => {
       await assertRowUsage(rowUsage)
       await assertQueryUsage(queryUsage)
     })
-
-    it("should throw an error when creating a table row with view id data", async () => {
-      const existing = await config.createRow()
-
-      const res = await config.api.row.patch(
-        table._id!,
-        {
-          ...existing,
-          _id: existing._id!,
-          _rev: existing._rev!,
-          tableId: table._id!,
-          _viewId: generator.guid(),
-        },
-        { expectStatus: 400 }
-      )
-      expect(res.body.message).toEqual(
-        "Table row endpoints cannot contain view info"
-      )
-    })
-
-    it("should setup the noViewData middleware", async () => {
-      const route = router.stack.find(
-        r => r.methods.includes("PATCH") && r.path === "/api/:tableId/rows"
-      )
-      expect(route).toBeDefined()
-      expect(route?.stack).toContainEqual(noViewDataMiddleware)
-    })
   })
 
   describe("destroy", () => {
@@ -677,7 +673,7 @@ describe("/rows", () => {
     })
 
     it("should be able to run on a view", async () => {
-      const view = await config.createView()
+      const view = await config.createLegacyView()
       const row = await config.createRow()
       const rowUsage = await getRowUsage()
       const queryUsage = await getQueryUsage()
@@ -758,7 +754,7 @@ describe("/rows", () => {
       })
       // the environment needs configured for this
       await setup.switchToSelfHosted(async () => {
-        context.doInAppContext(config.getAppId(), async () => {
+        return context.doInAppContext(config.getAppId(), async () => {
           const enriched = await outputProcessing(table, [row])
           expect((enriched as Row[])[0].attachment[0].url).toBe(
             `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
@@ -813,252 +809,6 @@ describe("/rows", () => {
     })
   })
 
-  describe("view search", () => {
-    function userTable(): Table {
-      return {
-        name: "user",
-        type: "user",
-        schema: {
-          name: {
-            type: FieldType.STRING,
-            name: "name",
-            constraints: { type: "string" },
-          },
-          age: {
-            type: FieldType.NUMBER,
-            name: "age",
-            constraints: {},
-          },
-        },
-      }
-    }
-
-    it("returns table rows from view", async () => {
-      const table = await config.createTable(userTable())
-      const rows = []
-      for (let i = 0; i < 10; i++) {
-        rows.push(await config.createRow({ tableId: table._id }))
-      }
-
-      const createViewResponse = await config.api.viewV2.create()
-      const response = await config.api.viewV2.search(createViewResponse.id)
-
-      expect(response.body.rows).toHaveLength(10)
-      expect(response.body).toEqual({
-        rows: expect.arrayContaining(rows.map(expect.objectContaining)),
-      })
-    })
-
-    it("searching respects the view filters", async () => {
-      const table = await config.createTable(userTable())
-      const expectedRows = []
-      for (let i = 0; i < 10; i++)
-        await config.createRow({
-          tableId: table._id,
-          name: generator.name(),
-          age: generator.integer({ min: 10, max: 30 }),
-        })
-
-      for (let i = 0; i < 5; i++)
-        expectedRows.push(
-          await config.createRow({
-            tableId: table._id,
-            name: generator.name(),
-            age: 40,
-          })
-        )
-
-      const createViewResponse = await config.api.viewV2.create({
-        query: { equal: { age: 40 } },
-      })
-
-      const response = await config.api.viewV2.search(createViewResponse.id)
-
-      expect(response.body.rows).toHaveLength(5)
-      expect(response.body).toEqual({
-        rows: expect.arrayContaining(expectedRows.map(expect.objectContaining)),
-      })
-    })
-
-    const sortTestOptions: [
-      {
-        field: string
-        order?: SortOrder
-        type?: SortType
-      },
-      string[]
-    ][] = [
-      [
-        {
-          field: "name",
-          order: SortOrder.ASCENDING,
-          type: SortType.STRING,
-        },
-        ["Alice", "Bob", "Charly", "Danny"],
-      ],
-      [
-        {
-          field: "name",
-        },
-        ["Alice", "Bob", "Charly", "Danny"],
-      ],
-      [
-        {
-          field: "name",
-          order: SortOrder.DESCENDING,
-        },
-        ["Danny", "Charly", "Bob", "Alice"],
-      ],
-      [
-        {
-          field: "name",
-          order: SortOrder.DESCENDING,
-          type: SortType.STRING,
-        },
-        ["Danny", "Charly", "Bob", "Alice"],
-      ],
-      [
-        {
-          field: "age",
-          order: SortOrder.ASCENDING,
-          type: SortType.number,
-        },
-        ["Danny", "Alice", "Charly", "Bob"],
-      ],
-      [
-        {
-          field: "age",
-          order: SortOrder.ASCENDING,
-        },
-        ["Danny", "Alice", "Charly", "Bob"],
-      ],
-      [
-        {
-          field: "age",
-          order: SortOrder.DESCENDING,
-        },
-        ["Bob", "Charly", "Alice", "Danny"],
-      ],
-      [
-        {
-          field: "age",
-          order: SortOrder.DESCENDING,
-          type: SortType.number,
-        },
-        ["Bob", "Charly", "Alice", "Danny"],
-      ],
-    ]
-
-    it.each(sortTestOptions)(
-      "allow sorting (%s)",
-      async (sortParams, expected) => {
-        await config.createTable(userTable())
-        const users = [
-          { name: "Alice", age: 25 },
-          { name: "Bob", age: 30 },
-          { name: "Charly", age: 27 },
-          { name: "Danny", age: 15 },
-        ]
-        for (const user of users) {
-          await config.createRow({
-            tableId: config.table!._id,
-            ...user,
-          })
-        }
-
-        const createViewResponse = await config.api.viewV2.create({
-          sort: sortParams,
-        })
-
-        const response = await config.api.viewV2.search(createViewResponse.id)
-
-        expect(response.body.rows).toHaveLength(4)
-        expect(response.body).toEqual({
-          rows: expected.map(name => expect.objectContaining({ name })),
-        })
-      }
-    )
-
-    it.each(sortTestOptions)(
-      "allow override the default view sorting (%s)",
-      async (sortParams, expected) => {
-        await config.createTable(userTable())
-        const users = [
-          { name: "Alice", age: 25 },
-          { name: "Bob", age: 30 },
-          { name: "Charly", age: 27 },
-          { name: "Danny", age: 15 },
-        ]
-        for (const user of users) {
-          await config.createRow({
-            tableId: config.table!._id,
-            ...user,
-          })
-        }
-
-        const createViewResponse = await config.api.viewV2.create({
-          sort: {
-            field: "name",
-            order: SortOrder.ASCENDING,
-            type: SortType.STRING,
-          },
-        })
-
-        const response = await config.api.viewV2.search(createViewResponse.id, {
-          sort: {
-            column: sortParams.field,
-            order: sortParams.order,
-            type: sortParams.type,
-          },
-        })
-
-        expect(response.body.rows).toHaveLength(4)
-        expect(response.body).toEqual({
-          rows: expected.map(name => expect.objectContaining({ name })),
-        })
-      }
-    )
-
-    it("when schema is defined, defined columns and row attributes are returned", async () => {
-      const table = await config.createTable(userTable())
-      const rows = []
-      for (let i = 0; i < 10; i++) {
-        rows.push(
-          await config.createRow({
-            tableId: table._id,
-            name: generator.name(),
-            age: generator.age(),
-          })
-        )
-      }
-
-      const view = await config.api.viewV2.create({
-        schema: { name: {} },
-      })
-      const response = await config.api.viewV2.search(view.id)
-
-      expect(response.body.rows).toHaveLength(10)
-      expect(response.body.rows).toEqual(
-        expect.arrayContaining(
-          rows.map(r => ({
-            ...expectAnyInternalColsAttributes,
-            _viewId: view.id,
-            name: r.name,
-          }))
-        )
-      )
-    })
-
-    it("views without data can be returned", async () => {
-      const table = await config.createTable(userTable())
-
-      const createViewResponse = await config.api.viewV2.create()
-      const response = await config.api.viewV2.search(createViewResponse.id)
-
-      expect(response.body.rows).toHaveLength(0)
-    })
-  })
-
   describe("view 2.0", () => {
     function userTable(): Table {
       return {
@@ -1110,7 +860,7 @@ describe("/rows", () => {
         })
 
         const data = randomRowData()
-        const newRow = await config.api.viewV2.row.create(view.id, {
+        const newRow = await config.api.row.save(view.id, {
           tableId: config.table!._id,
           _viewId: view.id,
           ...data,
@@ -1132,16 +882,6 @@ describe("/rows", () => {
         expect(row.body.age).toBeUndefined()
         expect(row.body.jobTitle).toBeUndefined()
       })
-
-      it("should setup the trimViewRowInfo middleware", async () => {
-        const route = router.stack.find(
-          r =>
-            r.methods.includes("POST") &&
-            r.path === "/api/v2/views/:viewId/rows"
-        )
-        expect(route).toBeDefined()
-        expect(route?.stack).toContainEqual(trimViewRowInfoMiddleware)
-      })
     })
 
     describe("patch", () => {
@@ -1156,13 +896,13 @@ describe("/rows", () => {
           },
         })
 
-        const newRow = await config.api.viewV2.row.create(view.id, {
+        const newRow = await config.api.row.save(view.id, {
           tableId,
           _viewId: view.id,
           ...randomRowData(),
         })
         const newData = randomRowData()
-        await config.api.viewV2.row.update(view.id, newRow._id!, {
+        await config.api.row.patch(view.id, {
           tableId,
           _viewId: view.id,
           _id: newRow._id!,
@@ -1185,16 +925,6 @@ describe("/rows", () => {
         expect(row.body.age).toBeUndefined()
         expect(row.body.jobTitle).toBeUndefined()
       })
-
-      it("should setup the trimViewRowInfo middleware", async () => {
-        const route = router.stack.find(
-          r =>
-            r.methods.includes("PATCH") &&
-            r.path === "/api/v2/views/:viewId/rows/:rowId"
-        )
-        expect(route).toBeDefined()
-        expect(route?.stack).toContainEqual(trimViewRowInfoMiddleware)
-      })
     })
 
     describe("destroy", () => {
@@ -1213,10 +943,7 @@ describe("/rows", () => {
         const rowUsage = await getRowUsage()
         const queryUsage = await getQueryUsage()
 
-        const body: DeleteRow = {
-          _id: createdRow._id!,
-        }
-        await config.api.viewV2.row.delete(view.id, body)
+        await config.api.row.delete(view.id, [createdRow])
 
         await assertRowUsage(rowUsage - 1)
         await assertQueryUsage(queryUsage + 1)
@@ -1245,9 +972,7 @@ describe("/rows", () => {
         const rowUsage = await getRowUsage()
         const queryUsage = await getQueryUsage()
 
-        await config.api.viewV2.row.delete(view.id, {
-          rows: [rows[0], rows[2]],
-        })
+        await config.api.row.delete(view.id, [rows[0], rows[2]])
 
         await assertRowUsage(rowUsage - 2)
         await assertQueryUsage(queryUsage + 1)
@@ -1261,5 +986,416 @@ describe("/rows", () => {
         await config.api.row.get(tableId, rows[1]._id!, { expectStatus: 200 })
       })
     })
+
+    describe("view search", () => {
+      const viewSchema = { age: { visible: true }, name: { visible: true } }
+      function userTable(): Table {
+        return {
+          name: "user",
+          type: "user",
+          schema: {
+            name: {
+              type: FieldType.STRING,
+              name: "name",
+              constraints: { type: "string" },
+            },
+            age: {
+              type: FieldType.NUMBER,
+              name: "age",
+              constraints: {},
+            },
+          },
+        }
+      }
+
+      it("returns table rows from view", async () => {
+        const table = await config.createTable(userTable())
+        const rows = []
+        for (let i = 0; i < 10; i++) {
+          rows.push(await config.createRow({ tableId: table._id }))
+        }
+
+        const createViewResponse = await config.api.viewV2.create()
+        const response = await config.api.viewV2.search(createViewResponse.id)
+
+        expect(response.body.rows).toHaveLength(10)
+        expect(response.body).toEqual({
+          rows: expect.arrayContaining(rows.map(expect.objectContaining)),
+        })
+      })
+
+      it("searching respects the view filters", async () => {
+        const table = await config.createTable(userTable())
+        const expectedRows = []
+        for (let i = 0; i < 10; i++)
+          await config.createRow({
+            tableId: table._id,
+            name: generator.name(),
+            age: generator.integer({ min: 10, max: 30 }),
+          })
+
+        for (let i = 0; i < 5; i++)
+          expectedRows.push(
+            await config.createRow({
+              tableId: table._id,
+              name: generator.name(),
+              age: 40,
+            })
+          )
+
+        const createViewResponse = await config.api.viewV2.create({
+          query: [{ operator: "equal", field: "age", value: 40 }],
+          schema: viewSchema,
+        })
+
+        const response = await config.api.viewV2.search(createViewResponse.id)
+
+        expect(response.body.rows).toHaveLength(5)
+        expect(response.body).toEqual({
+          rows: expect.arrayContaining(
+            expectedRows.map(expect.objectContaining)
+          ),
+        })
+      })
+
+      const sortTestOptions: [
+        {
+          field: string
+          order?: SortOrder
+          type?: SortType
+        },
+        string[]
+      ][] = [
+        [
+          {
+            field: "name",
+            order: SortOrder.ASCENDING,
+            type: SortType.STRING,
+          },
+          ["Alice", "Bob", "Charly", "Danny"],
+        ],
+        [
+          {
+            field: "name",
+          },
+          ["Alice", "Bob", "Charly", "Danny"],
+        ],
+        [
+          {
+            field: "name",
+            order: SortOrder.DESCENDING,
+          },
+          ["Danny", "Charly", "Bob", "Alice"],
+        ],
+        [
+          {
+            field: "name",
+            order: SortOrder.DESCENDING,
+            type: SortType.STRING,
+          },
+          ["Danny", "Charly", "Bob", "Alice"],
+        ],
+        [
+          {
+            field: "age",
+            order: SortOrder.ASCENDING,
+            type: SortType.number,
+          },
+          ["Danny", "Alice", "Charly", "Bob"],
+        ],
+        [
+          {
+            field: "age",
+            order: SortOrder.ASCENDING,
+          },
+          ["Danny", "Alice", "Charly", "Bob"],
+        ],
+        [
+          {
+            field: "age",
+            order: SortOrder.DESCENDING,
+          },
+          ["Bob", "Charly", "Alice", "Danny"],
+        ],
+        [
+          {
+            field: "age",
+            order: SortOrder.DESCENDING,
+            type: SortType.number,
+          },
+          ["Bob", "Charly", "Alice", "Danny"],
+        ],
+      ]
+
+      it.each(sortTestOptions)(
+        "allow sorting (%s)",
+        async (sortParams, expected) => {
+          await config.createTable(userTable())
+          const users = [
+            { name: "Alice", age: 25 },
+            { name: "Bob", age: 30 },
+            { name: "Charly", age: 27 },
+            { name: "Danny", age: 15 },
+          ]
+          for (const user of users) {
+            await config.createRow({
+              tableId: config.table!._id,
+              ...user,
+            })
+          }
+
+          const createViewResponse = await config.api.viewV2.create({
+            sort: sortParams,
+            schema: viewSchema,
+          })
+
+          const response = await config.api.viewV2.search(createViewResponse.id)
+
+          expect(response.body.rows).toHaveLength(4)
+          expect(response.body).toEqual({
+            rows: expected.map(name => expect.objectContaining({ name })),
+          })
+        }
+      )
+
+      it.each(sortTestOptions)(
+        "allow override the default view sorting (%s)",
+        async (sortParams, expected) => {
+          await config.createTable(userTable())
+          const users = [
+            { name: "Alice", age: 25 },
+            { name: "Bob", age: 30 },
+            { name: "Charly", age: 27 },
+            { name: "Danny", age: 15 },
+          ]
+          for (const user of users) {
+            await config.createRow({
+              tableId: config.table!._id,
+              ...user,
+            })
+          }
+
+          const createViewResponse = await config.api.viewV2.create({
+            sort: {
+              field: "name",
+              order: SortOrder.ASCENDING,
+              type: SortType.STRING,
+            },
+            schema: viewSchema,
+          })
+
+          const response = await config.api.viewV2.search(
+            createViewResponse.id,
+            {
+              sort: sortParams.field,
+              sortOrder: sortParams.order,
+              sortType: sortParams.type,
+              query: {},
+            }
+          )
+
+          expect(response.body.rows).toHaveLength(4)
+          expect(response.body).toEqual({
+            rows: expected.map(name => expect.objectContaining({ name })),
+          })
+        }
+      )
+
+      it("when schema is defined, defined columns and row attributes are returned", async () => {
+        const table = await config.createTable(userTable())
+        const rows = []
+        for (let i = 0; i < 10; i++) {
+          rows.push(
+            await config.createRow({
+              tableId: table._id,
+              name: generator.name(),
+              age: generator.age(),
+            })
+          )
+        }
+
+        const view = await config.api.viewV2.create({
+          schema: { name: { visible: true } },
+        })
+        const response = await config.api.viewV2.search(view.id)
+
+        expect(response.body.rows).toHaveLength(10)
+        expect(response.body.rows).toEqual(
+          expect.arrayContaining(
+            rows.map(r => ({
+              ...expectAnyInternalColsAttributes,
+              _viewId: view.id,
+              name: r.name,
+            }))
+          )
+        )
+      })
+
+      it("views without data can be returned", async () => {
+        await config.createTable(userTable())
+
+        const createViewResponse = await config.api.viewV2.create()
+        const response = await config.api.viewV2.search(createViewResponse.id)
+
+        expect(response.body.rows).toHaveLength(0)
+      })
+
+      it("respects the limit parameter", async () => {
+        const table = await config.createTable(userTable())
+        const rows = []
+        for (let i = 0; i < 10; i++) {
+          rows.push(await config.createRow({ tableId: table._id }))
+        }
+        const limit = generator.integer({ min: 1, max: 8 })
+
+        const createViewResponse = await config.api.viewV2.create()
+        const response = await config.api.viewV2.search(createViewResponse.id, {
+          limit,
+          query: {},
+        })
+
+        expect(response.body.rows).toHaveLength(limit)
+      })
+
+      it("can handle pagination", async () => {
+        const table = await config.createTable(userTable())
+        const rows = []
+        for (let i = 0; i < 10; i++) {
+          rows.push(await config.createRow({ tableId: table._id }))
+        }
+        // rows.sort((a, b) => (a._id! > b._id! ? 1 : -1))
+
+        const createViewResponse = await config.api.viewV2.create()
+        const allRows = (await config.api.viewV2.search(createViewResponse.id))
+          .body.rows
+
+        const firstPageResponse = await config.api.viewV2.search(
+          createViewResponse.id,
+          {
+            paginate: true,
+            limit: 4,
+            query: {},
+          }
+        )
+        expect(firstPageResponse.body).toEqual({
+          rows: expect.arrayContaining(allRows.slice(0, 4)),
+          totalRows: 10,
+          hasNextPage: true,
+          bookmark: expect.any(String),
+        })
+
+        const secondPageResponse = await config.api.viewV2.search(
+          createViewResponse.id,
+          {
+            paginate: true,
+            limit: 4,
+            bookmark: firstPageResponse.body.bookmark,
+
+            query: {},
+          }
+        )
+        expect(secondPageResponse.body).toEqual({
+          rows: expect.arrayContaining(allRows.slice(4, 8)),
+          totalRows: 10,
+          hasNextPage: true,
+          bookmark: expect.any(String),
+        })
+
+        const lastPageResponse = await config.api.viewV2.search(
+          createViewResponse.id,
+          {
+            paginate: true,
+            limit: 4,
+            bookmark: secondPageResponse.body.bookmark,
+            query: {},
+          }
+        )
+        expect(lastPageResponse.body).toEqual({
+          rows: expect.arrayContaining(allRows.slice(8)),
+          totalRows: 10,
+          hasNextPage: false,
+          bookmark: expect.any(String),
+        })
+      })
+
+      describe("permissions", () => {
+        let viewId: string
+        let tableId: string
+
+        beforeAll(async () => {
+          const table = await config.createTable(userTable())
+          const rows = []
+          for (let i = 0; i < 10; i++) {
+            rows.push(await config.createRow({ tableId: table._id }))
+          }
+
+          const createViewResponse = await config.api.viewV2.create()
+
+          tableId = table._id!
+          viewId = createViewResponse.id
+        })
+
+        beforeEach(() => {
+          mocks.licenses.useViewPermissions()
+        })
+
+        it("does not allow public users to fetch by default", async () => {
+          await config.publish()
+          await config.api.viewV2.search(viewId, undefined, {
+            expectStatus: 403,
+            usePublicUser: true,
+          })
+        })
+
+        it("allow public users to fetch when permissions are explicit", async () => {
+          await config.api.permission.set({
+            roleId: roles.BUILTIN_ROLE_IDS.PUBLIC,
+            level: PermissionLevel.READ,
+            resourceId: viewId,
+          })
+          await config.publish()
+
+          const response = await config.api.viewV2.search(viewId, undefined, {
+            usePublicUser: true,
+          })
+
+          expect(response.body.rows).toHaveLength(10)
+        })
+
+        it("allow public users to fetch when permissions are inherited", async () => {
+          await config.api.permission.set({
+            roleId: roles.BUILTIN_ROLE_IDS.PUBLIC,
+            level: PermissionLevel.READ,
+            resourceId: tableId,
+          })
+          await config.publish()
+
+          const response = await config.api.viewV2.search(viewId, undefined, {
+            usePublicUser: true,
+          })
+
+          expect(response.body.rows).toHaveLength(10)
+        })
+
+        it("respects inherited permissions, not allowing not public views from public tables", async () => {
+          await config.api.permission.set({
+            roleId: roles.BUILTIN_ROLE_IDS.PUBLIC,
+            level: PermissionLevel.READ,
+            resourceId: tableId,
+          })
+          await config.api.permission.set({
+            roleId: roles.BUILTIN_ROLE_IDS.POWER,
+            level: PermissionLevel.READ,
+            resourceId: viewId,
+          })
+          await config.publish()
+
+          await config.api.viewV2.search(viewId, undefined, {
+            usePublicUser: true,
+            expectStatus: 403,
+          })
+        })
+      })
+    })
   })
 })
diff --git a/packages/server/src/api/routes/tests/table.spec.ts b/packages/server/src/api/routes/tests/table.spec.ts
index 04911e5505..9914e6d66f 100644
--- a/packages/server/src/api/routes/tests/table.spec.ts
+++ b/packages/server/src/api/routes/tests/table.spec.ts
@@ -87,7 +87,7 @@ describe("/tables", () => {
 
     it("updates all the row fields for a table when a schema key is renamed", async () => {
       const testTable = await config.createTable()
-      await config.createView({
+      await config.createLegacyView({
         name: "TestView",
         field: "Price",
         calculation: "stats",
@@ -254,7 +254,7 @@ describe("/tables", () => {
       }))
 
       await config.api.viewV2.create({ tableId })
-      await config.createView({ tableId, name: generator.guid() })
+      await config.createLegacyView({ tableId, name: generator.guid() })
 
       const res = await config.api.table.fetch()
 
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index df07ffa4af..e633279058 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -249,7 +249,7 @@ describe("/views", () => {
     })
 
     it("returns only custom views", async () => {
-      await config.createView({
+      await config.createLegacyView({
         name: "TestView",
         field: "Price",
         calculation: "stats",
@@ -267,7 +267,7 @@ describe("/views", () => {
 
   describe("query", () => {
     it("returns data for the created view", async () => {
-      await config.createView({
+      await config.createLegacyView({
         name: "TestView",
         field: "Price",
         calculation: "stats",
@@ -295,7 +295,7 @@ describe("/views", () => {
     })
 
     it("returns data for the created view using a group by", async () => {
-      await config.createView({
+      await config.createLegacyView({
         calculation: "stats",
         name: "TestView",
         field: "Price",
@@ -331,7 +331,7 @@ describe("/views", () => {
   describe("destroy", () => {
     it("should be able to delete a view", async () => {
       const table = await config.createTable(priceTable())
-      const view = await config.createView()
+      const view = await config.createLegacyView()
       const res = await request
         .delete(`/api/views/${view.name}`)
         .set(config.defaultHeaders())
@@ -395,7 +395,7 @@ describe("/views", () => {
 
     it("should be able to export a view as JSON", async () => {
       let table = await setupExport()
-      const view = await config.createView()
+      const view = await config.createLegacyView()
       table = await config.getTable(table._id)
 
       let res = await exportView(view.name, "json")
@@ -407,7 +407,7 @@ describe("/views", () => {
 
     it("should be able to export a view as CSV", async () => {
       let table = await setupExport()
-      const view = await config.createView()
+      const view = await config.createLegacyView()
       table = await config.getTable(table._id)
 
       let res = await exportView(view.name, "csv")
diff --git a/packages/server/src/api/routes/tests/viewV2.spec.ts b/packages/server/src/api/routes/tests/viewV2.spec.ts
index fc97e657c5..5e8ae09e55 100644
--- a/packages/server/src/api/routes/tests/viewV2.spec.ts
+++ b/packages/server/src/api/routes/tests/viewV2.spec.ts
@@ -10,6 +10,7 @@ import {
   ViewV2,
 } from "@budibase/types"
 import { generator } from "@budibase/backend-core/tests"
+import { generateDatasourceID } from "../../../db/utils"
 
 function priceTable(): Table {
   return {
@@ -32,27 +33,52 @@ function priceTable(): Table {
   }
 }
 
-describe("/v2/views", () => {
-  const config = setup.getConfig()
+const config = setup.getConfig()
 
-  afterAll(setup.afterAll)
+beforeAll(async () => {
+  await config.init()
+})
+
+describe.each([
+  ["internal ds", () => config.createTable(priceTable())],
+  [
+    "external ds",
+    async () => {
+      const datasource = await config.createDatasource({
+        datasource: {
+          ...setup.structures.basicDatasource().datasource,
+          plus: true,
+          _id: generateDatasourceID({ plus: true }),
+        },
+      })
+
+      return config.createTable({
+        ...priceTable(),
+        sourceId: datasource._id,
+        type: "external",
+      })
+    },
+  ],
+])("/v2/views (%s)", (_, tableBuilder) => {
+  let table: Table
 
   beforeAll(async () => {
-    await config.init()
-    await config.createTable(priceTable())
+    table = await tableBuilder()
   })
 
+  afterAll(setup.afterAll)
+
   describe("create", () => {
     it("persist the view when the view is successfully created", async () => {
       const newView: CreateViewRequest = {
         name: generator.name(),
-        tableId: config.table!._id!,
+        tableId: table._id!,
       }
       const res = await config.api.viewV2.create(newView)
 
       expect(res).toEqual({
         ...newView,
-        id: expect.stringMatching(new RegExp(`${config.table?._id!}_`)),
+        id: expect.stringMatching(new RegExp(`${table._id!}_`)),
         version: 2,
       })
     })
@@ -60,9 +86,9 @@ describe("/v2/views", () => {
     it("can persist views with all fields", async () => {
       const newView: Required<CreateViewRequest> = {
         name: generator.name(),
-        tableId: config.table!._id!,
+        tableId: table._id!,
         primaryDisplay: generator.word(),
-        query: { allOr: false, equal: { field: "value" } },
+        query: [{ operator: "equal", field: "field", value: "value" }],
         sort: {
           field: "fieldToSort",
           order: SortOrder.DESCENDING,
@@ -78,9 +104,7 @@ describe("/v2/views", () => {
 
       expect(res).toEqual({
         ...newView,
-        schema: undefined,
-        columns: ["name"],
-        schemaUI: newView.schema,
+        schema: newView.schema,
         id: expect.any(String),
         version: 2,
       })
@@ -89,7 +113,7 @@ describe("/v2/views", () => {
     it("persist only UI schema overrides", async () => {
       const newView: CreateViewRequest = {
         name: generator.name(),
-        tableId: config.table!._id!,
+        tableId: table._id!,
         schema: {
           Price: {
             name: "Price",
@@ -111,54 +135,22 @@ describe("/v2/views", () => {
 
       expect(await config.api.viewV2.get(createdView.id)).toEqual({
         ...newView,
-        schema: undefined,
-        columns: ["Price", "Category"],
-        schemaUI: {
+        schema: {
           Price: {
             visible: true,
             order: 1,
             width: 100,
           },
-          Category: {
-            visible: false,
-            icon: "ic",
-          },
         },
         id: createdView.id,
         version: 2,
       })
     })
 
-    it("throw an exception if the schema overrides a non UI field", async () => {
-      const newView: CreateViewRequest = {
-        name: generator.name(),
-        tableId: config.table!._id!,
-        schema: {
-          Price: {
-            name: "Price",
-            type: FieldType.NUMBER,
-            visible: true,
-          },
-          Category: {
-            name: "Category",
-            type: FieldType.STRING,
-            constraints: {
-              type: "string",
-              presence: true,
-            },
-          },
-        } as Record<string, FieldSchema>,
-      }
-
-      await config.api.viewV2.create(newView, {
-        expectStatus: 400,
-      })
-    })
-
     it("will not throw an exception if the schema is 'deleting' non UI fields", async () => {
       const newView: CreateViewRequest = {
         name: generator.name(),
-        tableId: config.table!._id!,
+        tableId: table._id!,
         schema: {
           Price: {
             name: "Price",
@@ -182,33 +174,29 @@ describe("/v2/views", () => {
     let view: ViewV2
 
     beforeEach(async () => {
-      await config.createTable(priceTable())
+      table = await tableBuilder()
+
       view = await config.api.viewV2.create({ name: "View A" })
     })
 
     it("can update an existing view data", async () => {
-      const tableId = config.table!._id!
+      const tableId = table._id!
       await config.api.viewV2.update({
         ...view,
-        query: { equal: { newField: "thatValue" } },
+        query: [{ operator: "equal", field: "newField", value: "thatValue" }],
       })
 
-      expect(await config.api.table.get(tableId)).toEqual({
-        ...config.table,
-        views: {
-          [view.name]: {
-            ...view,
-            query: { equal: { newField: "thatValue" } },
-            schema: expect.anything(),
-          },
+      expect((await config.api.table.get(tableId)).views).toEqual({
+        [view.name]: {
+          ...view,
+          query: [{ operator: "equal", field: "newField", value: "thatValue" }],
+          schema: expect.anything(),
         },
-        _rev: expect.any(String),
-        updatedAt: expect.any(String),
       })
     })
 
     it("can update all fields", async () => {
-      const tableId = config.table!._id!
+      const tableId = table._id!
 
       const updatedData: Required<UpdateViewRequest> = {
         version: view.version,
@@ -216,7 +204,13 @@ describe("/v2/views", () => {
         tableId,
         name: view.name,
         primaryDisplay: generator.word(),
-        query: { equal: { [generator.word()]: generator.word() } },
+        query: [
+          {
+            operator: "equal",
+            field: generator.word(),
+            value: generator.word(),
+          },
+        ],
         sort: {
           field: generator.word(),
           order: SortOrder.DESCENDING,
@@ -230,25 +224,24 @@ describe("/v2/views", () => {
       }
       await config.api.viewV2.update(updatedData)
 
-      expect(await config.api.table.get(tableId)).toEqual({
-        ...config.table,
-        views: {
-          [view.name]: {
-            ...updatedData,
-            schema: {
-              Category: expect.objectContaining({
-                visible: false,
-              }),
-            },
+      expect((await config.api.table.get(tableId)).views).toEqual({
+        [view.name]: {
+          ...updatedData,
+          schema: {
+            ...table.schema,
+            Category: expect.objectContaining({
+              visible: false,
+            }),
+            Price: expect.objectContaining({
+              visible: false,
+            }),
           },
         },
-        _rev: expect.any(String),
-        updatedAt: expect.any(String),
       })
     })
 
     it("can update an existing view name", async () => {
-      const tableId = config.table!._id!
+      const tableId = table._id!
       await config.api.viewV2.update({ ...view, name: "View B" })
 
       expect(await config.api.table.get(tableId)).toEqual(
@@ -261,7 +254,7 @@ describe("/v2/views", () => {
     })
 
     it("cannot update an unexisting views nor edit ids", async () => {
-      const tableId = config.table!._id!
+      const tableId = table._id!
       await config.api.viewV2.update(
         { ...view, id: generator.guid() },
         { expectStatus: 404 }
@@ -280,12 +273,12 @@ describe("/v2/views", () => {
     })
 
     it("cannot update views with the wrong tableId", async () => {
-      const tableId = config.table!._id!
+      const tableId = table._id!
       await config.api.viewV2.update(
         {
           ...view,
           tableId: generator.guid(),
-          query: { equal: { newField: "thatValue" } },
+          query: [{ operator: "equal", field: "newField", value: "thatValue" }],
         },
         { expectStatus: 404 }
       )
@@ -303,7 +296,7 @@ describe("/v2/views", () => {
     })
 
     it("cannot update views v1", async () => {
-      const viewV1 = await config.createView()
+      const viewV1 = await config.createLegacyView()
       await config.api.viewV2.update(
         {
           ...viewV1,
@@ -357,50 +350,18 @@ describe("/v2/views", () => {
 
       expect(await config.api.viewV2.get(view.id)).toEqual({
         ...view,
-        schema: undefined,
-        columns: ["Price", "Category"],
-        schemaUI: {
+        schema: {
           Price: {
             visible: true,
             order: 1,
             width: 100,
           },
-          Category: {
-            visible: false,
-            icon: "ic",
-          },
         },
         id: view.id,
         version: 2,
       })
     })
 
-    it("throw an exception if the schema overrides a non UI field", async () => {
-      await config.api.viewV2.update(
-        {
-          ...view,
-          schema: {
-            Price: {
-              name: "Price",
-              type: FieldType.NUMBER,
-              visible: true,
-            },
-            Category: {
-              name: "Category",
-              type: FieldType.STRING,
-              constraints: {
-                type: "string",
-                presence: true,
-              },
-            },
-          } as Record<string, FieldSchema>,
-        },
-        {
-          expectStatus: 400,
-        }
-      )
-    })
-
     it("will not throw an exception if the schema is 'deleting' non UI fields", async () => {
       await config.api.viewV2.update(
         {
@@ -428,12 +389,11 @@ describe("/v2/views", () => {
     let view: ViewV2
 
     beforeAll(async () => {
-      await config.createTable(priceTable())
       view = await config.api.viewV2.create()
     })
 
     it("can delete an existing view", async () => {
-      const tableId = config.table!._id!
+      const tableId = table._id!
       const getPersistedView = async () =>
         (await config.api.table.get(tableId)).views![view.name]
 
@@ -444,4 +404,23 @@ describe("/v2/views", () => {
       expect(await getPersistedView()).toBeUndefined()
     })
   })
+
+  describe("fetch view (through table)", () => {
+    it("should be able to fetch a view V2", async () => {
+      const newView: CreateViewRequest = {
+        name: generator.name(),
+        tableId: table._id!,
+        schema: {
+          Price: { visible: false },
+          Category: { visible: true },
+        },
+      }
+      const res = await config.api.viewV2.create(newView)
+      const view = await config.api.viewV2.get(res.id)
+      expect(view!.schema?.Price).toBeUndefined()
+      const updatedTable = await config.getTable(table._id!)
+      const viewSchema = updatedTable.views[view!.name!].schema
+      expect(viewSchema.Price.visible).toEqual(false)
+    })
+  })
 })
diff --git a/packages/server/src/api/routes/view.ts b/packages/server/src/api/routes/view.ts
index 18c58134b4..545d3016a3 100644
--- a/packages/server/src/api/routes/view.ts
+++ b/packages/server/src/api/routes/view.ts
@@ -1,13 +1,22 @@
 import Router from "@koa/router"
 import * as viewController from "../controllers/view"
 import * as rowController from "../controllers/row"
-import authorized from "../../middleware/authorized"
+import authorized, { authorizedResource } from "../../middleware/authorized"
 import { paramResource } from "../../middleware/resourceId"
 import { permissions } from "@budibase/backend-core"
 
 const router: Router = new Router()
 
 router
+  .get(
+    "/api/v2/views/:viewId",
+    authorizedResource(
+      permissions.PermissionType.VIEW,
+      permissions.PermissionLevel.READ,
+      "viewId"
+    ),
+    viewController.v2.get
+  )
   .post(
     "/api/v2/views",
     authorized(permissions.BUILDER),
@@ -34,7 +43,7 @@ router
     "/api/views/:viewName",
     paramResource("viewName"),
     authorized(
-      permissions.PermissionType.VIEW,
+      permissions.PermissionType.TABLE,
       permissions.PermissionLevel.READ
     ),
     rowController.fetchView
diff --git a/packages/server/src/app.ts b/packages/server/src/app.ts
index d41f908059..4b501718a8 100644
--- a/packages/server/src/app.ts
+++ b/packages/server/src/app.ts
@@ -1,120 +1,43 @@
+import Sentry from "@sentry/node"
+
 if (process.env.DD_APM_ENABLED) {
   require("./ddApm")
 }
 
 // need to load environment first
 import env from "./environment"
-
-import { ExtendableContext } from "koa"
 import * as db from "./db"
 db.init()
-import Koa from "koa"
-import koaBody from "koa-body"
-import http from "http"
-import * as api from "./api"
-import * as automations from "./automations"
-import { Thread } from "./threads"
-import * as redis from "./utilities/redis"
 import { ServiceType } from "@budibase/types"
-import {
-  events,
-  logging,
-  middleware,
-  timers,
-  env as coreEnv,
-} from "@budibase/backend-core"
+import { env as coreEnv } from "@budibase/backend-core"
 coreEnv._set("SERVICE_TYPE", ServiceType.APPS)
+import { apiEnabled } from "./features"
+import createKoaApp from "./koa"
+import Koa from "koa"
+import { Server } from "http"
 import { startup } from "./startup"
-const Sentry = require("@sentry/node")
-const destroyable = require("server-destroy")
-const { userAgent } = require("koa-useragent")
 
-const app = new Koa()
+let app: Koa, server: Server
 
-let mbNumber = parseInt(env.HTTP_MB_LIMIT || "10")
-if (!mbNumber || isNaN(mbNumber)) {
-  mbNumber = 10
-}
-// set up top level koa middleware
-app.use(
-  koaBody({
-    multipart: true,
-    formLimit: `${mbNumber}mb`,
-    jsonLimit: `${mbNumber}mb`,
-    textLimit: `${mbNumber}mb`,
-    // @ts-ignore
-    enableTypes: ["json", "form", "text"],
-    parsedMethods: ["POST", "PUT", "PATCH", "DELETE"],
-  })
-)
-
-app.use(middleware.correlation)
-app.use(middleware.pino)
-app.use(userAgent)
-
-if (env.isProd()) {
-  env._set("NODE_ENV", "production")
-  Sentry.init()
-
-  app.on("error", (err: any, ctx: ExtendableContext) => {
-    Sentry.withScope(function (scope: any) {
-      scope.addEventProcessor(function (event: any) {
-        return Sentry.Handlers.parseRequest(event, ctx.request)
-      })
-      Sentry.captureException(err)
-    })
-  })
-}
-
-const server = http.createServer(app.callback())
-destroyable(server)
-
-let shuttingDown = false,
-  errCode = 0
-
-server.on("close", async () => {
-  // already in process
-  if (shuttingDown) {
-    return
+async function start() {
+  // if API disabled, could run automations instead
+  if (apiEnabled()) {
+    const koa = createKoaApp()
+    app = koa.app
+    server = koa.server
   }
-  shuttingDown = true
-  console.log("Server Closed")
-  timers.cleanup()
-  await automations.shutdown()
-  await redis.shutdown()
-  events.shutdown()
-  await Thread.shutdown()
-  api.shutdown()
-  if (!env.isTest()) {
-    process.exit(errCode)
-  }
-})
-
-export default server.listen(env.PORT || 0, async () => {
+  // startup includes automation runner - if enabled
   await startup(app, server)
-})
-
-const shutdown = () => {
-  server.close()
-  // @ts-ignore
-  server.destroy()
+  if (env.isProd()) {
+    env._set("NODE_ENV", "production")
+    Sentry.init()
+  }
 }
 
-process.on("uncaughtException", err => {
-  // @ts-ignore
-  // don't worry about this error, comes from zlib isn't important
-  if (err && err["code"] === "ERR_INVALID_CHAR") {
-    return
-  }
-  errCode = -1
-  logging.logAlert("Uncaught exception.", err)
-  shutdown()
+start().catch(err => {
+  console.error(`Failed server startup - ${err.message}`)
 })
 
-process.on("SIGTERM", () => {
-  shutdown()
-})
-
-process.on("SIGINT", () => {
-  shutdown()
-})
+export function getServer() {
+  return server
+}
diff --git a/packages/server/src/automations/index.ts b/packages/server/src/automations/index.ts
index 9bbab95a27..4ef3210932 100644
--- a/packages/server/src/automations/index.ts
+++ b/packages/server/src/automations/index.ts
@@ -2,6 +2,7 @@ import { processEvent } from "./utils"
 import { automationQueue } from "./bullboard"
 import { rebootTrigger } from "./triggers"
 import BullQueue from "bull"
+import { automationsEnabled } from "../features"
 
 export { automationQueue } from "./bullboard"
 export { shutdown } from "./bullboard"
@@ -12,6 +13,9 @@ export { BUILTIN_ACTION_DEFINITIONS, getActionDefinitions } from "./actions"
  * This module is built purely to kick off the worker farm and manage the inputs/outputs
  */
 export async function init() {
+  if (!automationsEnabled()) {
+    return
+  }
   // this promise will not complete
   const promise = automationQueue.process(async job => {
     await processEvent(job)
diff --git a/packages/server/src/automations/steps/queryRows.ts b/packages/server/src/automations/steps/queryRows.ts
index 1abb8c6a31..e0680017e7 100644
--- a/packages/server/src/automations/steps/queryRows.ts
+++ b/packages/server/src/automations/steps/queryRows.ts
@@ -11,6 +11,7 @@ import {
   AutomationStepInput,
   AutomationStepSchema,
   AutomationStepType,
+  EmptyFilterOption,
   SearchFilters,
   Table,
 } from "@budibase/types"
@@ -26,16 +27,6 @@ const SortOrderPretty = {
   [SortOrder.DESCENDING]: "Descending",
 }
 
-enum EmptyFilterOption {
-  RETURN_ALL = "all",
-  RETURN_NONE = "none",
-}
-
-const EmptyFilterOptionPretty = {
-  [EmptyFilterOption.RETURN_ALL]: "Return all table rows",
-  [EmptyFilterOption.RETURN_NONE]: "Return no rows",
-}
-
 export const definition: AutomationStepSchema = {
   description: "Query rows from the database",
   icon: "Search",
@@ -77,12 +68,6 @@ export const definition: AutomationStepSchema = {
           title: "Limit",
           customType: AutomationCustomIOType.QUERY_LIMIT,
         },
-        onEmptyFilter: {
-          pretty: Object.values(EmptyFilterOptionPretty),
-          enum: Object.values(EmptyFilterOption),
-          type: AutomationIOType.STRING,
-          title: "When Filter Empty",
-        },
       },
       required: ["tableId"],
     },
diff --git a/packages/server/src/automations/tests/filter.spec.js b/packages/server/src/automations/tests/filter.spec.ts
similarity index 76%
rename from packages/server/src/automations/tests/filter.spec.js
rename to packages/server/src/automations/tests/filter.spec.ts
index 5fa5e0e202..c2c5d13e2d 100644
--- a/packages/server/src/automations/tests/filter.spec.js
+++ b/packages/server/src/automations/tests/filter.spec.ts
@@ -1,11 +1,18 @@
-const setup = require("./utilities")
-const { FilterConditions } = require("../steps/filter")
+import * as setup from "./utilities"
+import { FilterConditions } from "../steps/filter"
 
 describe("test the filter logic", () => {
-  async function checkFilter(field, condition, value, pass = true) {
-    let res = await setup.runStep(setup.actions.FILTER.stepId,
-      { field, condition, value }
-    )
+  async function checkFilter(
+    field: any,
+    condition: string,
+    value: any,
+    pass = true
+  ) {
+    let res = await setup.runStep(setup.actions.FILTER.stepId, {
+      field,
+      condition,
+      value,
+    })
     expect(res.result).toEqual(pass)
     expect(res.success).toEqual(true)
   }
@@ -36,9 +43,9 @@ describe("test the filter logic", () => {
 
   it("check date coercion", async () => {
     await checkFilter(
-      (new Date()).toISOString(),
+      new Date().toISOString(),
       FilterConditions.GREATER_THAN,
-      (new Date(-10000)).toISOString(),
+      new Date(-10000).toISOString(),
       true
     )
   })
diff --git a/packages/server/src/automations/utils.ts b/packages/server/src/automations/utils.ts
index 194eff5b32..9522ad6ccd 100644
--- a/packages/server/src/automations/utils.ts
+++ b/packages/server/src/automations/utils.ts
@@ -15,11 +15,15 @@ import {
   WebhookActionType,
 } from "@budibase/types"
 import sdk from "../sdk"
+import { automationsEnabled } from "../features"
 
 const REBOOT_CRON = "@reboot"
 const WH_STEP_ID = definitions.WEBHOOK.stepId
 const CRON_STEP_ID = definitions.CRON.stepId
-const Runner = new Thread(ThreadType.AUTOMATION)
+let Runner: Thread
+if (automationsEnabled()) {
+  Runner = new Thread(ThreadType.AUTOMATION)
+}
 
 function loggingArgs(job: AutomationJob) {
   return [
@@ -100,7 +104,8 @@ export async function disableAllCrons(appId: any) {
       }
     }
   }
-  return Promise.all(promises)
+  const results = await Promise.all(promises)
+  return { count: results.length / 2 }
 }
 
 export async function disableCronById(jobId: number | string) {
@@ -148,6 +153,7 @@ export function isRebootTrigger(auto: Automation) {
  */
 export async function enableCronTrigger(appId: any, automation: Automation) {
   const trigger = automation ? automation.definition.trigger : null
+  let enabled = false
 
   // need to create cron job
   if (
@@ -174,8 +180,9 @@ export async function enableCronTrigger(appId: any, automation: Automation) {
       automation._id = response.id
       automation._rev = response.rev
     })
+    enabled = true
   }
-  return automation
+  return { enabled, automation }
 }
 
 /**
diff --git a/packages/server/src/db/utils.ts b/packages/server/src/db/utils.ts
index dda14a9187..abea725707 100644
--- a/packages/server/src/db/utils.ts
+++ b/packages/server/src/db/utils.ts
@@ -1,5 +1,7 @@
 import newid from "./newid"
 import { db as dbCore } from "@budibase/backend-core"
+import { DocumentType, VirtualDocumentType } from "@budibase/types"
+export { DocumentType, VirtualDocumentType } from "@budibase/types"
 
 type Optional = string | null
 
@@ -19,7 +21,6 @@ export const BudibaseInternalDB = {
 
 export const SEPARATOR = dbCore.SEPARATOR
 export const StaticDatabases = dbCore.StaticDatabases
-export const DocumentType = dbCore.DocumentType
 export const APP_PREFIX = dbCore.APP_PREFIX
 export const APP_DEV_PREFIX = dbCore.APP_DEV_PREFIX
 export const isDevAppID = dbCore.isDevAppID
@@ -284,10 +285,22 @@ export function getMultiIDParams(ids: string[]) {
  * @returns {string} The new view ID which the view doc can be stored under.
  */
 export function generateViewID(tableId: string) {
-  return `${tableId}${SEPARATOR}${newid()}`
+  return `${
+    VirtualDocumentType.VIEW
+  }${SEPARATOR}${tableId}${SEPARATOR}${newid()}`
+}
+
+export function isViewID(viewId: string) {
+  return viewId?.split(SEPARATOR)[0] === VirtualDocumentType.VIEW
 }
 
 export function extractViewInfoFromID(viewId: string) {
+  if (!isViewID(viewId)) {
+    throw new Error("Unable to extract table ID, is not a view ID")
+  }
+  const split = viewId.split(SEPARATOR)
+  split.shift()
+  viewId = split.join(SEPARATOR)
   const regex = new RegExp(`^(?<tableId>.+)${SEPARATOR}([^${SEPARATOR}]+)$`)
   const res = regex.exec(viewId)
   return {
diff --git a/packages/server/src/definitions/openapi.ts b/packages/server/src/definitions/openapi.ts
index 5ca4990647..fe5c17b218 100644
--- a/packages/server/src/definitions/openapi.ts
+++ b/packages/server/src/definitions/openapi.ts
@@ -34,6 +34,14 @@ export interface paths {
     /** Based on query properties (currently only name) search for queries. */
     post: operations["querySearch"];
   };
+  "/roles/assign": {
+    /** This is a business/enterprise only endpoint */
+    post: operations["roleAssign"];
+  };
+  "/roles/unassign": {
+    /** This is a business/enterprise only endpoint */
+    post: operations["roleUnAssign"];
+  };
   "/tables/{tableId}/rows": {
     /** Creates a row within the specified table. */
     post: operations["rowCreate"];
@@ -256,7 +264,8 @@ export interface components {
                 | "auto"
                 | "json"
                 | "internal"
-                | "barcodeqr";
+                | "barcodeqr"
+                | "bigint";
               /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
               constraints?: {
                 /** @enum {string} */
@@ -362,7 +371,8 @@ export interface components {
                   | "auto"
                   | "json"
                   | "internal"
-                  | "barcodeqr";
+                  | "barcodeqr"
+                  | "bigint";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
                   /** @enum {string} */
@@ -470,7 +480,8 @@ export interface components {
                   | "auto"
                   | "json"
                   | "internal"
-                  | "barcodeqr";
+                  | "barcodeqr"
+                  | "bigint";
                 /** @description A constraint can be applied to the column which will be validated against when a row is saved. */
                 constraints?: {
                   /** @enum {string} */
@@ -577,17 +588,17 @@ export interface components {
       lastName?: string;
       /** @description If set to true forces the user to reset their password on first login. */
       forceResetPassword?: boolean;
-      /** @description Describes if the user is a builder user or not. */
+      /** @description Describes if the user is a builder user or not. This field can only be set on a business or enterprise license. */
       builder?: {
         /** @description If set to true the user will be able to build any app in the system. */
         global?: boolean;
       };
-      /** @description Describes if the user is an admin user or not. */
+      /** @description Describes if the user is an admin user or not. This field can only be set on a business or enterprise license. */
       admin?: {
         /** @description If set to true the user will be able to administrate the system. */
         global?: boolean;
       };
-      /** @description Contains the roles of the user per app (assuming they are not a builder user). */
+      /** @description Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license. */
       roles: { [key: string]: string };
     };
     userOutput: {
@@ -607,17 +618,17 @@ export interface components {
         lastName?: string;
         /** @description If set to true forces the user to reset their password on first login. */
         forceResetPassword?: boolean;
-        /** @description Describes if the user is a builder user or not. */
+        /** @description Describes if the user is a builder user or not. This field can only be set on a business or enterprise license. */
         builder?: {
           /** @description If set to true the user will be able to build any app in the system. */
           global?: boolean;
         };
-        /** @description Describes if the user is an admin user or not. */
+        /** @description Describes if the user is an admin user or not. This field can only be set on a business or enterprise license. */
         admin?: {
           /** @description If set to true the user will be able to administrate the system. */
           global?: boolean;
         };
-        /** @description Contains the roles of the user per app (assuming they are not a builder user). */
+        /** @description Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license. */
         roles: { [key: string]: string };
         /** @description The ID of the user. */
         _id: string;
@@ -640,17 +651,17 @@ export interface components {
         lastName?: string;
         /** @description If set to true forces the user to reset their password on first login. */
         forceResetPassword?: boolean;
-        /** @description Describes if the user is a builder user or not. */
+        /** @description Describes if the user is a builder user or not. This field can only be set on a business or enterprise license. */
         builder?: {
           /** @description If set to true the user will be able to build any app in the system. */
           global?: boolean;
         };
-        /** @description Describes if the user is an admin user or not. */
+        /** @description Describes if the user is an admin user or not. This field can only be set on a business or enterprise license. */
         admin?: {
           /** @description If set to true the user will be able to administrate the system. */
           global?: boolean;
         };
-        /** @description Contains the roles of the user per app (assuming they are not a builder user). */
+        /** @description Contains the roles of the user per app (assuming they are not a builder user). This field can only be set on a business or enterprise license. */
         roles: { [key: string]: string };
         /** @description The ID of the user. */
         _id: string;
@@ -712,6 +723,52 @@ export interface components {
       /** @description The name to be used when searching - this will be used in a case insensitive starts with match. */
       name: string;
     };
+    rolesAssign: {
+      /** @description Allow setting users to builders per app. */
+      appBuilder?: {
+        /** @description The app that the users should have app builder privileges granted for. */
+        appId: string;
+      };
+      /** @description Add/remove global builder permissions from the list of users. */
+      builder?: boolean;
+      /** @description Add/remove global admin permissions from the list of users. */
+      admin?: boolean;
+      /** @description Add/remove a per-app role, such as BASIC, ADMIN etc. */
+      role?: {
+        /** @description The role ID, such as BASIC, ADMIN or a custom role ID. */
+        roleId: string;
+        /** @description The app that the role relates to. */
+        appId: string;
+      };
+      /** @description The user IDs to be updated to add/remove the specified roles. */
+      userIds: string[];
+    };
+    rolesUnAssign: {
+      /** @description Allow setting users to builders per app. */
+      appBuilder?: {
+        /** @description The app that the users should have app builder privileges granted for. */
+        appId: string;
+      };
+      /** @description Add/remove global builder permissions from the list of users. */
+      builder?: boolean;
+      /** @description Add/remove global admin permissions from the list of users. */
+      admin?: boolean;
+      /** @description Add/remove a per-app role, such as BASIC, ADMIN etc. */
+      role?: {
+        /** @description The role ID, such as BASIC, ADMIN or a custom role ID. */
+        roleId: string;
+        /** @description The app that the role relates to. */
+        appId: string;
+      };
+      /** @description The user IDs to be updated to add/remove the specified roles. */
+      userIds: string[];
+    };
+    rolesOutput: {
+      data: {
+        /** @description The updated users' IDs */
+        userIds: string[];
+      };
+    };
   };
   parameters: {
     /** @description The ID of the table which this request is targeting. */
@@ -907,6 +964,38 @@ export interface operations {
       };
     };
   };
+  /** This is a business/enterprise only endpoint */
+  roleAssign: {
+    responses: {
+      /** Returns a list of updated user IDs */
+      200: {
+        content: {
+          "application/json": components["schemas"]["rolesOutput"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["rolesAssign"];
+      };
+    };
+  };
+  /** This is a business/enterprise only endpoint */
+  roleUnAssign: {
+    responses: {
+      /** Returns a list of updated user IDs */
+      200: {
+        content: {
+          "application/json": components["schemas"]["rolesOutput"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["rolesUnAssign"];
+      };
+    };
+  };
   /** Creates a row within the specified table. */
   rowCreate: {
     parameters: {
diff --git a/packages/server/src/environment.ts b/packages/server/src/environment.ts
index 2d3b717efd..06fd659911 100644
--- a/packages/server/src/environment.ts
+++ b/packages/server/src/environment.ts
@@ -38,6 +38,8 @@ function parseIntSafe(number?: string) {
 }
 
 const environment = {
+  // features
+  APP_FEATURES: process.env.APP_FEATURES,
   // important - prefer app port to generic port
   PORT: process.env.APP_PORT || process.env.PORT,
   COUCH_DB_URL: process.env.COUCH_DB_URL,
diff --git a/packages/server/src/features.ts b/packages/server/src/features.ts
new file mode 100644
index 0000000000..e12260ea32
--- /dev/null
+++ b/packages/server/src/features.ts
@@ -0,0 +1,24 @@
+import { features } from "@budibase/backend-core"
+import env from "./environment"
+
+enum AppFeature {
+  API = "api",
+  AUTOMATIONS = "automations",
+}
+
+const featureList = features.processFeatureEnvVar<AppFeature>(
+  Object.values(AppFeature),
+  env.APP_FEATURES
+)
+
+export function isFeatureEnabled(feature: AppFeature) {
+  return featureList.includes(feature)
+}
+
+export function automationsEnabled() {
+  return featureList.includes(AppFeature.AUTOMATIONS)
+}
+
+export function apiEnabled() {
+  return featureList.includes(AppFeature.API)
+}
diff --git a/packages/server/src/integration-test/postgres.spec.ts b/packages/server/src/integration-test/postgres.spec.ts
index 1b64c763e6..6b0e7b4266 100644
--- a/packages/server/src/integration-test/postgres.spec.ts
+++ b/packages/server/src/integration-test/postgres.spec.ts
@@ -18,7 +18,7 @@ import {
 import _ from "lodash"
 import { generator } from "@budibase/backend-core/tests"
 import { utils } from "@budibase/backend-core"
-import { GenericContainer } from "testcontainers"
+import { GenericContainer, Wait, StartedTestContainer } from "testcontainers"
 
 const config = setup.getConfig()!
 
@@ -37,22 +37,36 @@ describe("postgres integrations", () => {
 
   let host: string
   let port: number
+  const containers: StartedTestContainer[] = []
 
   beforeAll(async () => {
-    const container = await new GenericContainer("postgres")
+    const containerPostgres = await new GenericContainer("postgres")
       .withExposedPorts(5432)
       .withEnv("POSTGRES_PASSWORD", "password")
+      .withWaitStrategy(
+        Wait.forLogMessage(
+          "PostgreSQL init process complete; ready for start up."
+        )
+      )
       .start()
 
-    host = container.getContainerIpAddress()
-    port = container.getMappedPort(5432)
+    host = containerPostgres.getContainerIpAddress()
+    port = containerPostgres.getMappedPort(5432)
 
     await config.init()
     const apiKey = await config.generateApiKey()
 
+    containers.push(containerPostgres)
+
     makeRequest = generateMakeRequest(apiKey, true)
   })
 
+  afterAll(async () => {
+    for (let container of containers) {
+      await container.stop()
+    }
+  })
+
   function pgDatasourceConfig() {
     return {
       datasource: {
diff --git a/packages/server/src/integrations/microsoftSqlServer.ts b/packages/server/src/integrations/microsoftSqlServer.ts
index 2669277512..cd62e590d8 100644
--- a/packages/server/src/integrations/microsoftSqlServer.ts
+++ b/packages/server/src/integrations/microsoftSqlServer.ts
@@ -341,10 +341,10 @@ class SqlServerIntegration extends Sql implements DatasourcePlus {
     }
   }
 
-  getDefinitionSQL(tableName: string) {
+  getDefinitionSQL(tableName: string, schemaName: string) {
     return `select *
             from INFORMATION_SCHEMA.COLUMNS
-            where TABLE_NAME='${tableName}'`
+            where TABLE_NAME='${tableName}' AND TABLE_SCHEMA='${schemaName}'`
   }
 
   getConstraintsSQL(tableName: string) {
@@ -388,16 +388,18 @@ class SqlServerIntegration extends Sql implements DatasourcePlus {
       throw "Unable to get list of tables in database"
     }
 
-    const schema = this.config.schema || DEFAULT_SCHEMA
+    const schemaName = this.config.schema || DEFAULT_SCHEMA
     const tableNames = tableInfo
-      .filter((record: any) => record.TABLE_SCHEMA === schema)
+      .filter((record: any) => record.TABLE_SCHEMA === schemaName)
       .map((record: any) => record.TABLE_NAME)
       .filter((name: string) => this.MASTER_TABLES.indexOf(name) === -1)
 
     const tables: Record<string, ExternalTable> = {}
     for (let tableName of tableNames) {
       // get the column definition (type)
-      const definition = await this.runSQL(this.getDefinitionSQL(tableName))
+      const definition = await this.runSQL(
+        this.getDefinitionSQL(tableName, schemaName)
+      )
       // find primary key constraints
       const constraints = await this.runSQL(this.getConstraintsSQL(tableName))
       // find the computed and identity columns (auto columns)
diff --git a/packages/server/src/integrations/mysql.ts b/packages/server/src/integrations/mysql.ts
index a01f6b71f9..b88162c59a 100644
--- a/packages/server/src/integrations/mysql.ts
+++ b/packages/server/src/integrations/mysql.ts
@@ -93,6 +93,21 @@ const SCHEMA: Integration = {
   },
 }
 
+const defaultTypeCasting = function (field: any, next: any) {
+  if (
+    field.type == "DATETIME" ||
+    field.type === "DATE" ||
+    field.type === "TIMESTAMP" ||
+    field.type === "LONGLONG"
+  ) {
+    return field.string()
+  }
+  if (field.type === "BIT" && field.length === 1) {
+    return field.buffer()?.[0]
+  }
+  return next()
+}
+
 export function bindingTypeCoerce(bindings: any[]) {
   for (let i = 0; i < bindings.length; i++) {
     const binding = bindings[i]
@@ -147,21 +162,8 @@ class MySQLIntegration extends Sql implements DatasourcePlus {
     delete config.rejectUnauthorized
     this.config = {
       ...config,
+      typeCast: defaultTypeCasting,
       multipleStatements: true,
-      typeCast: function (field: any, next: any) {
-        if (
-          field.type == "DATETIME" ||
-          field.type === "DATE" ||
-          field.type === "TIMESTAMP" ||
-          field.type === "LONGLONG"
-        ) {
-          return field.string()
-        }
-        if (field.type === "BIT" && field.length === 1) {
-          return field.buffer()?.[0]
-        }
-        return next()
-      },
     }
   }
 
@@ -194,6 +196,37 @@ class MySQLIntegration extends Sql implements DatasourcePlus {
     return `concat(${parts.join(", ")})`
   }
 
+  defineTypeCastingFromSchema(schema: {
+    [key: string]: { name: string; type: string }
+  }): void {
+    if (!schema) {
+      return
+    }
+    this.config.typeCast = function (field: any, next: any) {
+      if (schema[field.name]?.name === field.name) {
+        if (["LONGLONG", "NEWDECIMAL", "DECIMAL"].includes(field.type)) {
+          if (schema[field.name]?.type === "number") {
+            const value = field.string()
+            return value ? Number(value) : null
+          } else {
+            return field.string()
+          }
+        }
+      }
+      if (
+        field.type == "DATETIME" ||
+        field.type === "DATE" ||
+        field.type === "TIMESTAMP"
+      ) {
+        return field.string()
+      }
+      if (field.type === "BIT" && field.length === 1) {
+        return field.buffer()?.[0]
+      }
+      return next()
+    }
+  }
+
   async connect() {
     this.client = await mysql.createConnection(this.config)
   }
@@ -204,7 +237,10 @@ class MySQLIntegration extends Sql implements DatasourcePlus {
 
   async internalQuery(
     query: SqlQuery,
-    opts: { connect?: boolean; disableCoercion?: boolean } = {
+    opts: {
+      connect?: boolean
+      disableCoercion?: boolean
+    } = {
       connect: true,
       disableCoercion: false,
     }
diff --git a/packages/server/src/koa.ts b/packages/server/src/koa.ts
new file mode 100644
index 0000000000..de11bf973a
--- /dev/null
+++ b/packages/server/src/koa.ts
@@ -0,0 +1,102 @@
+import env from "./environment"
+import { ExtendableContext } from "koa"
+import Koa from "koa"
+import koaBody from "koa-body"
+import http from "http"
+import * as api from "./api"
+import * as automations from "./automations"
+import { Thread } from "./threads"
+import * as redis from "./utilities/redis"
+import { events, logging, middleware, timers } from "@budibase/backend-core"
+const Sentry = require("@sentry/node")
+const destroyable = require("server-destroy")
+const { userAgent } = require("koa-useragent")
+
+export default function createKoaApp() {
+  const app = new Koa()
+
+  let mbNumber = parseInt(env.HTTP_MB_LIMIT || "10")
+  if (!mbNumber || isNaN(mbNumber)) {
+    mbNumber = 10
+  }
+  // set up top level koa middleware
+  app.use(
+    koaBody({
+      multipart: true,
+      formLimit: `${mbNumber}mb`,
+      jsonLimit: `${mbNumber}mb`,
+      textLimit: `${mbNumber}mb`,
+      // @ts-ignore
+      enableTypes: ["json", "form", "text"],
+      parsedMethods: ["POST", "PUT", "PATCH", "DELETE"],
+    })
+  )
+
+  app.use(middleware.correlation)
+  app.use(middleware.pino)
+  app.use(userAgent)
+
+  if (env.isProd()) {
+    app.on("error", (err: any, ctx: ExtendableContext) => {
+      Sentry.withScope(function (scope: any) {
+        scope.addEventProcessor(function (event: any) {
+          return Sentry.Handlers.parseRequest(event, ctx.request)
+        })
+        Sentry.captureException(err)
+      })
+    })
+  }
+
+  const server = http.createServer(app.callback())
+  destroyable(server)
+
+  let shuttingDown = false,
+    errCode = 0
+
+  server.on("close", async () => {
+    // already in process
+    if (shuttingDown) {
+      return
+    }
+    shuttingDown = true
+    console.log("Server Closed")
+    timers.cleanup()
+    await automations.shutdown()
+    await redis.shutdown()
+    events.shutdown()
+    await Thread.shutdown()
+    api.shutdown()
+    if (!env.isTest()) {
+      process.exit(errCode)
+    }
+  })
+
+  const listener = server.listen(env.PORT || 0)
+
+  const shutdown = () => {
+    server.close()
+    // @ts-ignore
+    server.destroy()
+  }
+
+  process.on("uncaughtException", err => {
+    // @ts-ignore
+    // don't worry about this error, comes from zlib isn't important
+    if (err && err["code"] === "ERR_INVALID_CHAR") {
+      return
+    }
+    errCode = -1
+    logging.logAlert("Uncaught exception.", err)
+    shutdown()
+  })
+
+  process.on("SIGTERM", () => {
+    shutdown()
+  })
+
+  process.on("SIGINT", () => {
+    shutdown()
+  })
+
+  return { app, server: listener }
+}
diff --git a/packages/server/src/middleware/authorized.ts b/packages/server/src/middleware/authorized.ts
index 915344f747..b2ffeacaf8 100644
--- a/packages/server/src/middleware/authorized.ts
+++ b/packages/server/src/middleware/authorized.ts
@@ -8,6 +8,8 @@ import {
 import { PermissionLevel, PermissionType, Role, UserCtx } from "@budibase/types"
 import builderMiddleware from "./builder"
 import { isWebhookEndpoint } from "./utils"
+import { paramResource } from "./resourceId"
+import sdk from "../sdk"
 
 function hasResource(ctx: any) {
   return ctx.resourceId != null
@@ -74,10 +76,12 @@ const checkAuthorizedResource = async (
   }
 }
 
-export default (
+const authorized =
+  (
     permType: PermissionType,
     permLevel?: PermissionLevel,
-    opts = { schema: false }
+    opts = { schema: false },
+    resourcePath?: string
   ) =>
   async (ctx: any, next: any) => {
     // webhooks don't need authentication, each webhook unique
@@ -91,17 +95,40 @@ export default (
     }
 
     // get the resource roles
-    let resourceRoles: any = []
-    let otherLevelRoles: any = []
+    let resourceRoles: string[] = []
+    let otherLevelRoles: string[] = []
     const otherLevel =
       permLevel === PermissionLevel.READ
         ? PermissionLevel.WRITE
         : PermissionLevel.READ
-    const appId = context.getAppId()
-    if (appId && hasResource(ctx)) {
-      resourceRoles = await roles.getRequiredResourceRole(permLevel!, ctx)
+
+    if (resourcePath) {
+      // Reusing the existing middleware to extract the value
+      paramResource(resourcePath)(ctx, () => {})
+    }
+
+    if (hasResource(ctx)) {
+      const { resourceId, subResourceId } = ctx
+
+      const permissions = await sdk.permissions.getResourcePerms(resourceId)
+      const subPermissions =
+        !!subResourceId &&
+        (await sdk.permissions.getResourcePerms(subResourceId))
+
+      function getPermLevel(permLevel: string) {
+        let result: string[] = []
+        if (permissions[permLevel]) {
+          result.push(permissions[permLevel].role)
+        }
+        if (subPermissions && subPermissions[permLevel]) {
+          result.push(subPermissions[permLevel].role)
+        }
+        return result
+      }
+
+      resourceRoles = getPermLevel(permLevel!)
       if (opts && opts.schema) {
-        otherLevelRoles = await roles.getRequiredResourceRole(otherLevel, ctx)
+        otherLevelRoles = getPermLevel(otherLevel!)
       }
     }
 
@@ -143,3 +170,17 @@ export default (
     // csrf protection
     return csrf(ctx, next)
   }
+
+export default (
+  permType: PermissionType,
+  permLevel?: PermissionLevel,
+  opts = { schema: false }
+) => authorized(permType, permLevel, opts)
+
+export const authorizedResource = (
+  permType: PermissionType,
+  permLevel: PermissionLevel,
+  resourcePath: string
+) => {
+  return authorized(permType, permLevel, undefined, resourcePath)
+}
diff --git a/packages/server/src/middleware/noViewData.ts b/packages/server/src/middleware/noViewData.ts
deleted file mode 100644
index 809424b6bf..0000000000
--- a/packages/server/src/middleware/noViewData.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Ctx, Row } from "@budibase/types"
-
-export default async (ctx: Ctx<Row>, next: any) => {
-  if (ctx.request.body._viewId) {
-    return ctx.throw(400, "Table row endpoints cannot contain view info")
-  }
-
-  return next()
-}
diff --git a/packages/server/src/middleware/resourceId.ts b/packages/server/src/middleware/resourceId.ts
index 0917941061..1ad0b2a0c1 100644
--- a/packages/server/src/middleware/resourceId.ts
+++ b/packages/server/src/middleware/resourceId.ts
@@ -43,6 +43,7 @@ export class ResourceIdGetter {
   }
 }
 
+/** @deprecated we should use the authorizedResource middleware instead */
 export function paramResource(main: string) {
   return new ResourceIdGetter("params").mainResource(main).build()
 }
diff --git a/packages/server/src/middleware/tests/authorized.spec.js b/packages/server/src/middleware/tests/authorized.spec.js
deleted file mode 100644
index 3adc4d99a1..0000000000
--- a/packages/server/src/middleware/tests/authorized.spec.js
+++ /dev/null
@@ -1,163 +0,0 @@
-jest.mock("../../environment", () => ({
-    prod: false,
-    isTest: () => true,
-    isProd: () => this.prod,
-    _set: function(key, value) {
-      this.prod = value === "production"
-    }
-  })
-)
-const authorizedMiddleware = require("../authorized").default
-const env = require("../../environment")
-const { PermissionType, PermissionLevel } = require("@budibase/types")
-
-const APP_ID = ""
-
-class TestConfiguration {
-  constructor(role) {
-    this.middleware = authorizedMiddleware(role)
-    this.next = jest.fn()
-    this.throw = jest.fn()
-    this.headers = {}
-    this.ctx = {
-      headers: {},
-      request: {
-        url: ""
-      },
-      appId: APP_ID,
-      auth: {},
-      next: this.next,
-      throw: this.throw,
-      get: (name) => this.headers[name],
-    }
-  }
-
-  executeMiddleware() {
-    return this.middleware(this.ctx, this.next)
-  }
-
-  setUser(user) {
-    this.ctx.user = user
-  }
-
-  setMiddlewareRequiredPermission(...perms) {
-    this.middleware = authorizedMiddleware(...perms)
-  }
-
-  setResourceId(id) {
-    this.ctx.resourceId = id
-  }
-
-  setAuthenticated(isAuthed) {
-    this.ctx.isAuthenticated = isAuthed
-  }
-
-  setRequestUrl(url) {
-    this.ctx.request.url = url
-  }
-
-  setEnvironment(isProd) {
-    env._set("NODE_ENV", isProd ? "production" : "jest")
-  }
-
-  setRequestHeaders(headers) {
-    this.ctx.headers = headers 
-  }
-
-  afterEach() {
-    jest.clearAllMocks()
-  }
-}
-
-
-describe("Authorization middleware", () => {
-  const next = jest.fn()
-  let config
-
-  afterEach(() => {
-    config.afterEach()
-  })
-
-  beforeEach(() => {
-    config = new TestConfiguration()
-  })
-
-  describe("non-webhook call", () => {
-    let config
-
-    beforeEach(() => {
-      config = new TestConfiguration()
-      config.setEnvironment(true)
-      config.setAuthenticated(true)
-    })
-
-    it("throws when no user data is present in context", async () => {
-      await config.executeMiddleware()
-
-      expect(config.throw).toHaveBeenCalledWith(403, "No user info found")
-    })
-
-    it("passes on to next() middleware if user is an admin", async () => {
-      config.setUser({
-        _id: "user",
-        role: {
-          _id: "ADMIN",
-        }
-      })
-
-      await config.executeMiddleware()
-
-      expect(config.next).toHaveBeenCalled()
-    })
-    
-    it("throws if the user does not have builder permissions", async () => {
-      config.setEnvironment(false)
-      config.setMiddlewareRequiredPermission(PermissionType.BUILDER)
-      config.setUser({
-        role: {
-          _id: ""
-        }
-      })
-      await config.executeMiddleware()
-
-      expect(config.throw).toHaveBeenCalledWith(403, "Not Authorized")
-    })
-
-    it("passes on to next() middleware if the user has resource permission", async () => {
-      config.setResourceId(PermissionType.QUERY)
-      config.setUser({
-        role: {
-          _id: ""
-        }
-      })
-      config.setMiddlewareRequiredPermission(PermissionType.QUERY)
-
-      await config.executeMiddleware()
-      expect(config.next).toHaveBeenCalled()
-    })
-
-    it("throws if the user session is not authenticated", async () => {
-      config.setUser({
-        role: {
-          _id: ""
-        },
-      })
-      config.setAuthenticated(false)
-
-      await config.executeMiddleware()
-      expect(config.throw).toHaveBeenCalledWith(403, "Session not authenticated")
-    })
-
-    it("throws if the user does not have base permissions to perform the operation", async () => {
-      config.setUser({
-        role: {
-          _id: ""
-        },
-      })
-      config.setMiddlewareRequiredPermission(PermissionType.ADMIN, PermissionLevel.BASIC)
-      
-      await config.executeMiddleware()
-      expect(config.throw).toHaveBeenCalledWith(403, "User does not have permission")
-    })
-  })
-})
diff --git a/packages/server/src/middleware/tests/authorized.spec.ts b/packages/server/src/middleware/tests/authorized.spec.ts
new file mode 100644
index 0000000000..0741f50e4d
--- /dev/null
+++ b/packages/server/src/middleware/tests/authorized.spec.ts
@@ -0,0 +1,224 @@
+jest.mock("../../sdk/app/permissions", () => ({
+  ...jest.requireActual("../../sdk/app/permissions"),
+  getResourcePerms: jest.fn().mockResolvedValue([]),
+}))
+
+import {
+  PermissionType,
+  PermissionLevel,
+  PermissionSource,
+} from "@budibase/types"
+
+import authorizedMiddleware from "../authorized"
+import env from "../../environment"
+import { generateTableID, generateViewID } from "../../db/utils"
+import { generator, mocks } from "@budibase/backend-core/tests"
+import { initProMocks } from "../../tests/utilities/mocks/pro"
+import { getResourcePerms } from "../../sdk/app/permissions"
+
+const APP_ID = ""
+
+initProMocks()
+
+class TestConfiguration {
+  middleware: (ctx: any, next: any) => Promise<void>
+  next: () => void
+  throw: () => void
+  headers: Record<string, any>
+  ctx: any
+
+  constructor() {
+    this.middleware = authorizedMiddleware(PermissionType.APP)
+    this.next = jest.fn()
+    this.throw = jest.fn()
+    this.headers = {}
+    this.ctx = {
+      headers: {},
+      request: {
+        url: "",
+      },
+      appId: APP_ID,
+      auth: {},
+      next: this.next,
+      throw: this.throw,
+      get: (name: string) => this.headers[name],
+    }
+  }
+
+  executeMiddleware() {
+    return this.middleware(this.ctx, this.next)
+  }
+
+  setUser(user: any) {
+    this.ctx.user = user
+  }
+
+  setMiddlewareRequiredPermission(...perms: any[]) {
+    // @ts-ignore
+    this.middleware = authorizedMiddleware(...perms)
+  }
+
+  setResourceId(id?: string) {
+    this.ctx.resourceId = id
+  }
+
+  setAuthenticated(isAuthed: boolean) {
+    this.ctx.isAuthenticated = isAuthed
+  }
+
+  setRequestUrl(url: string) {
+    this.ctx.request.url = url
+  }
+
+  setEnvironment(isProd: boolean) {
+    env._set("NODE_ENV", isProd ? "production" : "jest")
+  }
+
+  setRequestHeaders(headers: Record<string, any>) {
+    this.ctx.headers = headers
+  }
+
+  afterEach() {
+    jest.clearAllMocks()
+  }
+}
+
+describe("Authorization middleware", () => {
+  let config: TestConfiguration
+
+  afterEach(() => {
+    config.afterEach()
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mocks.licenses.useCloudFree()
+    config = new TestConfiguration()
+  })
+
+  describe("non-webhook call", () => {
+    beforeEach(() => {
+      config = new TestConfiguration()
+      config.setEnvironment(true)
+      config.setAuthenticated(true)
+    })
+
+    it("throws when no user data is present in context", async () => {
+      await config.executeMiddleware()
+
+      expect(config.throw).toHaveBeenCalledWith(403, "No user info found")
+    })
+
+    it("passes on to next() middleware if user is an admin", async () => {
+      config.setUser({
+        _id: "user",
+        role: {
+          _id: "ADMIN",
+        },
+      })
+
+      await config.executeMiddleware()
+
+      expect(config.next).toHaveBeenCalled()
+    })
+
+    it("throws if the user does not have builder permissions", async () => {
+      config.setEnvironment(false)
+      config.setMiddlewareRequiredPermission(PermissionType.BUILDER)
+      config.setUser({
+        role: {
+          _id: "",
+        },
+      })
+      await config.executeMiddleware()
+
+      expect(config.throw).toHaveBeenCalledWith(403, "Not Authorized")
+    })
+
+    it("passes on to next() middleware if the user has resource permission", async () => {
+      config.setResourceId(PermissionType.QUERY)
+      config.setUser({
+        role: {
+          _id: "",
+        },
+      })
+      config.setMiddlewareRequiredPermission(PermissionType.QUERY)
+
+      await config.executeMiddleware()
+      expect(config.next).toHaveBeenCalled()
+    })
+
+    it("throws if the user session is not authenticated", async () => {
+      config.setUser({
+        role: {
+          _id: "",
+        },
+      })
+      config.setAuthenticated(false)
+
+      await config.executeMiddleware()
+      expect(config.throw).toHaveBeenCalledWith(
+        403,
+        "Session not authenticated"
+      )
+    })
+
+    it("throws if the user does not have base permissions to perform the operation", async () => {
+      config.setUser({
+        role: {
+          _id: "",
+        },
+      })
+      config.setMiddlewareRequiredPermission(
+        PermissionType.APP,
+        PermissionLevel.READ
+      )
+
+      await config.executeMiddleware()
+      expect(config.throw).toHaveBeenCalledWith(
+        403,
+        "User does not have permission"
+      )
+    })
+
+    describe("with resource", () => {
+      let resourceId: string
+      const mockedGetResourcePerms = getResourcePerms as jest.MockedFunction<
+        typeof getResourcePerms
+      >
+
+      beforeEach(() => {
+        config.setMiddlewareRequiredPermission(
+          PermissionType.VIEW,
+          PermissionLevel.READ
+        )
+        resourceId = generator.guid()
+        config.setResourceId(resourceId)
+
+        mockedGetResourcePerms.mockResolvedValue({
+          [PermissionLevel.READ]: {
+            role: "PUBLIC",
+            type: PermissionSource.BASE,
+          },
+        })
+
+        config.setUser({
+          _id: "user",
+          role: {
+            _id: "PUBLIC",
+          },
+        })
+      })
+
+      it("will fetch resource permissions when resource is set", async () => {
+        await config.executeMiddleware()
+
+        expect(config.throw).not.toBeCalled()
+        expect(config.next).toHaveBeenCalled()
+
+        expect(mockedGetResourcePerms).toBeCalledTimes(1)
+        expect(mockedGetResourcePerms).toBeCalledWith(resourceId)
+      })
+    })
+  })
+})
diff --git a/packages/server/src/middleware/tests/noViewData.spec.ts b/packages/server/src/middleware/tests/noViewData.spec.ts
deleted file mode 100644
index 54b0ca8ff8..0000000000
--- a/packages/server/src/middleware/tests/noViewData.spec.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { generator } from "@budibase/backend-core/tests"
-import { BBRequest, FieldType, Row, Table } from "@budibase/types"
-import { Next } from "koa"
-import * as utils from "../../db/utils"
-import noViewDataMiddleware from "../noViewData"
-
-class TestConfiguration {
-  next: Next
-  throw: jest.Mock<(status: number, message: string) => never>
-  middleware: typeof noViewDataMiddleware
-  params: Record<string, any>
-  request?: Pick<BBRequest<Row>, "body">
-
-  constructor() {
-    this.next = jest.fn()
-    this.throw = jest.fn()
-    this.params = {}
-
-    this.middleware = noViewDataMiddleware
-  }
-
-  executeMiddleware(ctxRequestBody: Row) {
-    this.request = {
-      body: ctxRequestBody,
-    }
-    return this.middleware(
-      {
-        request: this.request as any,
-        throw: this.throw as any,
-        params: this.params,
-      } as any,
-      this.next
-    )
-  }
-
-  afterEach() {
-    jest.clearAllMocks()
-  }
-}
-
-describe("noViewData middleware", () => {
-  let config: TestConfiguration
-
-  beforeEach(() => {
-    config = new TestConfiguration()
-  })
-
-  afterEach(() => {
-    config.afterEach()
-  })
-
-  const getRandomData = () => ({
-    _id: generator.guid(),
-    name: generator.name(),
-    age: generator.age(),
-    address: generator.address(),
-  })
-
-  it("it should pass without view id data", async () => {
-    const data = getRandomData()
-    await config.executeMiddleware({
-      ...data,
-    })
-
-    expect(config.next).toBeCalledTimes(1)
-    expect(config.throw).not.toBeCalled()
-  })
-
-  it("it should throw an error if _viewid is provided", async () => {
-    const data = getRandomData()
-    await config.executeMiddleware({
-      _viewId: generator.guid(),
-      ...data,
-    })
-
-    expect(config.throw).toBeCalledTimes(1)
-    expect(config.throw).toBeCalledWith(
-      400,
-      "Table row endpoints cannot contain view info"
-    )
-    expect(config.next).not.toBeCalled()
-  })
-})
diff --git a/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts b/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts
index 427ac9a608..17b4cc7b93 100644
--- a/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts
+++ b/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts
@@ -102,12 +102,13 @@ describe("trimViewRowInfo middleware", () => {
     address: generator.address(),
   })
 
-  it("when no columns are defined, same data is returned", async () => {
+  it("when no columns are defined, don't allow anything", async () => {
     mockGetView.mockResolvedValue({
       version: 2,
       id: viewId,
       name: generator.guid(),
       tableId: table._id!,
+      schema: {},
     })
 
     const data = getRandomData()
@@ -116,8 +117,10 @@ describe("trimViewRowInfo middleware", () => {
       ...data,
     })
 
-    expect(config.request?.body).toEqual(data)
-    expect(config.params.tableId).toEqual(table._id)
+    expect(config.request?.body).toEqual({
+      _id: data._id,
+    })
+    expect(config.params.sourceId).toEqual(table._id)
 
     expect(config.next).toBeCalledTimes(1)
     expect(config.throw).not.toBeCalled()
@@ -129,7 +132,10 @@ describe("trimViewRowInfo middleware", () => {
       id: viewId,
       name: generator.guid(),
       tableId: table._id!,
-      columns: ["name", "address"],
+      schema: {
+        name: {},
+        address: {},
+      },
     })
 
     const data = getRandomData()
@@ -143,32 +149,9 @@ describe("trimViewRowInfo middleware", () => {
       name: data.name,
       address: data.address,
     })
-    expect(config.params.tableId).toEqual(table._id)
+    expect(config.params.sourceId).toEqual(table._id)
 
     expect(config.next).toBeCalledTimes(1)
     expect(config.throw).not.toBeCalled()
   })
-
-  it("it should throw an error if no viewid is provided on the body", async () => {
-    const data = getRandomData()
-    await config.executeMiddleware(viewId, {
-      ...data,
-    })
-
-    expect(config.throw).toBeCalledTimes(1)
-    expect(config.throw).toBeCalledWith(400, "_viewId is required")
-    expect(config.next).not.toBeCalled()
-  })
-
-  it("it should throw an error if no viewid is provided on the parameters", async () => {
-    const data = getRandomData()
-    await config.executeMiddleware(undefined as any, {
-      _viewId: viewId,
-      ...data,
-    })
-
-    expect(config.throw).toBeCalledTimes(1)
-    expect(config.throw).toBeCalledWith(400, "viewId path is required")
-    expect(config.next).not.toBeCalled()
-  })
 })
diff --git a/packages/server/src/middleware/trimViewRowInfo.ts b/packages/server/src/middleware/trimViewRowInfo.ts
index 2e3ded27f5..6a7448262b 100644
--- a/packages/server/src/middleware/trimViewRowInfo.ts
+++ b/packages/server/src/middleware/trimViewRowInfo.ts
@@ -3,50 +3,47 @@ import * as utils from "../db/utils"
 import sdk from "../sdk"
 import { db } from "@budibase/backend-core"
 import { Next } from "koa"
+import { getTableId } from "../api/controllers/row/utils"
 
 export default async (ctx: Ctx<Row>, next: Next) => {
   const { body } = ctx.request
-  const { _viewId: viewId } = body
+  let { _viewId: viewId } = body
+
+  const possibleViewId = getTableId(ctx)
+  if (utils.isViewID(possibleViewId)) {
+    viewId = possibleViewId
+  }
+
+  // nothing to do, it is not a view (just a table ID)
   if (!viewId) {
-    return ctx.throw(400, "_viewId is required")
+    return next()
   }
 
-  if (!ctx.params.viewId) {
-    return ctx.throw(400, "viewId path is required")
+  const { tableId } = utils.extractViewInfoFromID(viewId)
+
+  // don't need to trim delete requests
+  if (ctx?.method?.toLowerCase() !== "delete") {
+    await trimViewFields(ctx.request.body, viewId)
   }
 
-  const { tableId } = utils.extractViewInfoFromID(ctx.params.viewId)
-  const { _viewId, ...trimmedView } = await trimViewFields(
-    viewId,
-    tableId,
-    body
-  )
-  ctx.request.body = trimmedView
-  ctx.params.tableId = tableId
+  ctx.params.sourceId = tableId
+  ctx.params.viewId = viewId
 
   return next()
 }
 
+// have to mutate the koa context, can't return
 export async function trimViewFields<T extends Row>(
-  viewId: string,
-  tableId: string,
-  data: T
-): Promise<T> {
+  body: Row,
+  viewId: string
+): Promise<void> {
   const view = await sdk.views.get(viewId)
-  if (!view?.columns || !Object.keys(view.columns).length) {
-    return data
+  const allowedKeys = sdk.views.allowedFields(view)
+  // have to mutate the context, can't update reference
+  const toBeRemoved = Object.keys(body).filter(
+    key => !allowedKeys.includes(key)
+  )
+  for (let removeKey of toBeRemoved) {
+    delete body[removeKey]
   }
-
-  const table = await sdk.tables.getTable(tableId)
-  const { schema } = sdk.views.enrichSchema(view!, table.schema)
-  const result: Record<string, any> = {}
-  for (const key of [
-    ...Object.keys(schema),
-    ...db.CONSTANT_EXTERNAL_ROW_COLS,
-    ...db.CONSTANT_INTERNAL_ROW_COLS,
-  ]) {
-    result[key] = data[key] !== null ? data[key] : undefined
-  }
-
-  return result as T
 }
diff --git a/packages/server/src/migrations/tests/index.spec.ts b/packages/server/src/migrations/tests/index.spec.ts
index 2465c930b4..b64cad26c1 100644
--- a/packages/server/src/migrations/tests/index.spec.ts
+++ b/packages/server/src/migrations/tests/index.spec.ts
@@ -50,9 +50,9 @@ describe("migrations", () => {
         await config.createRole()
         await config.createRole()
         await config.createTable()
-        await config.createView()
+        await config.createLegacyView()
         await config.createTable()
-        await config.createView(structures.view(config.table!._id!))
+        await config.createLegacyView(structures.view(config.table!._id!))
         await config.createScreen()
         await config.createScreen()
 
diff --git a/packages/server/src/sdk/app/backups/exports.ts b/packages/server/src/sdk/app/backups/exports.ts
index 306918cf80..307cdf4015 100644
--- a/packages/server/src/sdk/app/backups/exports.ts
+++ b/packages/server/src/sdk/app/backups/exports.ts
@@ -60,7 +60,7 @@ function tarFilesToTmp(tmpDir: string, files: string[]) {
 export async function exportDB(
   dbName: string,
   opts: DBDumpOpts = {}
-): Promise<DBDumpOpts> {
+): Promise<string> {
   const exportOpts = {
     filter: opts?.filter,
     batch_size: 1000,
diff --git a/packages/server/src/sdk/app/permissions/index.ts b/packages/server/src/sdk/app/permissions/index.ts
new file mode 100644
index 0000000000..b79bfeeb31
--- /dev/null
+++ b/packages/server/src/sdk/app/permissions/index.ts
@@ -0,0 +1,155 @@
+import { db, env, roles } from "@budibase/backend-core"
+import { features } from "@budibase/pro"
+import {
+  DocumentType,
+  PermissionLevel,
+  PermissionSource,
+  PlanType,
+  VirtualDocumentType,
+} from "@budibase/types"
+import { extractViewInfoFromID, isViewID } from "../../../db/utils"
+import {
+  CURRENTLY_SUPPORTED_LEVELS,
+  getBasePermissions,
+} from "../../../utilities/security"
+import sdk from "../../../sdk"
+import { isV2 } from "../views"
+
+type ResourceActionAllowedResult =
+  | { allowed: true }
+  | {
+      allowed: false
+      level: PermissionLevel
+      resourceType: DocumentType | VirtualDocumentType
+    }
+
+export async function resourceActionAllowed({
+  resourceId,
+  level,
+}: {
+  resourceId: string
+  level: PermissionLevel
+}): Promise<ResourceActionAllowedResult> {
+  if (!isViewID(resourceId)) {
+    return { allowed: true }
+  }
+
+  if (await features.isViewPermissionEnabled()) {
+    return { allowed: true }
+  }
+
+  return {
+    allowed: false,
+    level,
+    resourceType: VirtualDocumentType.VIEW,
+  }
+}
+
+type ResourcePermissions = Record<
+  string,
+  { role: string; type: PermissionSource }
+>
+
+export async function getInheritablePermissions(
+  resourceId: string
+): Promise<ResourcePermissions | undefined> {
+  if (isViewID(resourceId)) {
+    return await getResourcePerms(extractViewInfoFromID(resourceId).tableId)
+  }
+}
+
+export async function allowsExplicitPermissions(resourceId: string) {
+  if (isViewID(resourceId)) {
+    const allowed = await features.isViewPermissionEnabled()
+    const minPlan = !allowed
+      ? env.SELF_HOSTED
+        ? PlanType.BUSINESS
+        : PlanType.PREMIUM
+      : undefined
+
+    return {
+      allowed,
+      minPlan,
+    }
+  }
+
+  return { allowed: true }
+}
+
+export async function getResourcePerms(
+  resourceId: string
+): Promise<ResourcePermissions> {
+  const rolesList = await roles.getAllRoles()
+
+  let permissions: ResourcePermissions = {}
+
+  const permsToInherit = await getInheritablePermissions(resourceId)
+
+  const allowsExplicitPerm = (await allowsExplicitPermissions(resourceId))
+    .allowed
+
+  for (let level of CURRENTLY_SUPPORTED_LEVELS) {
+    // update the various roleIds in the resource permissions
+    for (let role of rolesList) {
+      const rolePerms = allowsExplicitPerm
+        ? roles.checkForRoleResourceArray(role.permissions, resourceId)
+        : {}
+      if (rolePerms[resourceId]?.indexOf(level) > -1) {
+        permissions[level] = {
+          role: roles.getExternalRoleID(role._id!, role.version),
+          type: PermissionSource.EXPLICIT,
+        }
+      } else if (
+        !permissions[level] &&
+        permsToInherit &&
+        permsToInherit[level]
+      ) {
+        permissions[level] = {
+          role: permsToInherit[level].role,
+          type: PermissionSource.INHERITED,
+        }
+      }
+    }
+  }
+
+  const basePermissions = Object.entries(
+    getBasePermissions(resourceId)
+  ).reduce<ResourcePermissions>((p, [level, role]) => {
+    p[level] = { role, type: PermissionSource.BASE }
+    return p
+  }, {})
+  const result = Object.assign(basePermissions, permissions)
+  return result
+}
+
+export async function getDependantResources(
+  resourceId: string
+): Promise<Record<string, number> | undefined> {
+  if (db.isTableId(resourceId)) {
+    const dependants: Record<string, Set<string>> = {}
+
+    const table = await sdk.tables.getTable(resourceId)
+    const views = Object.values(table.views || {})
+
+    for (const view of views) {
+      if (!isV2(view)) {
+        continue
+      }
+
+      const permissions = await getResourcePerms(view.id)
+      for (const [level, roleInfo] of Object.entries(permissions)) {
+        if (roleInfo.type === PermissionSource.INHERITED) {
+          dependants[VirtualDocumentType.VIEW] ??= new Set()
+          dependants[VirtualDocumentType.VIEW].add(view.id)
+        }
+      }
+    }
+
+    return Object.entries(dependants).reduce((p, [type, resources]) => {
+      p[type] = resources.size
+      return p
+    }, {} as Record<string, number>)
+  }
+
+  return
+}
diff --git a/packages/server/src/sdk/app/permissions/tests/permissions.spec.ts b/packages/server/src/sdk/app/permissions/tests/permissions.spec.ts
new file mode 100644
index 0000000000..4c233e68fa
--- /dev/null
+++ b/packages/server/src/sdk/app/permissions/tests/permissions.spec.ts
@@ -0,0 +1,53 @@
+import { PermissionLevel } from "@budibase/types"
+import { mocks, structures } from "@budibase/backend-core/tests"
+import { resourceActionAllowed } from ".."
+import { generateViewID } from "../../../../db/utils"
+import { initProMocks } from "../../../../tests/utilities/mocks/pro"
+
+initProMocks()
+
+describe("permissions sdk", () => {
+  beforeEach(() => {
+    mocks.licenses.useCloudFree()
+  })
+
+  describe("resourceActionAllowed", () => {
+    it("non view resources actions are always allowed", async () => {
+      const resourceId = structures.users.user()._id!
+
+      const result = await resourceActionAllowed({
+        resourceId,
+        level: PermissionLevel.READ,
+      })
+
+      expect(result).toEqual({ allowed: true })
+    })
+
+    it("view resources actions allowed if the feature flag is enabled", async () => {
+      mocks.licenses.useViewPermissions()
+      const resourceId = generateViewID(structures.generator.guid())
+
+      const result = await resourceActionAllowed({
+        resourceId,
+        level: PermissionLevel.READ,
+      })
+
+      expect(result).toEqual({ allowed: true })
+    })
+
+    it("view resources actions allowed if the feature flag is disabled", async () => {
+      const resourceId = generateViewID(structures.generator.guid())
+
+      const result = await resourceActionAllowed({
+        resourceId,
+        level: PermissionLevel.READ,
+      })
+
+      expect(result).toEqual({
+        allowed: false,
+        level: "read",
+        resourceType: "view",
+      })
+    })
+  })
+})
diff --git a/packages/server/src/sdk/app/rows/search.ts b/packages/server/src/sdk/app/rows/search.ts
index a523d828f3..4861f473ea 100644
--- a/packages/server/src/sdk/app/rows/search.ts
+++ b/packages/server/src/sdk/app/rows/search.ts
@@ -1,23 +1,9 @@
-import { SearchFilters, SortOrder, SortType } from "@budibase/types"
+import { SearchFilters, SearchParams } from "@budibase/types"
 import { isExternalTable } from "../../../integrations/utils"
 import * as internal from "./search/internal"
 import * as external from "./search/external"
 import { Format } from "../../../api/controllers/view/exporters"
 
-export interface SearchParams {
-  tableId: string
-  paginate?: boolean
-  query: SearchFilters
-  bookmark?: string
-  limit?: number
-  sort?: string
-  sortOrder?: SortOrder
-  sortType?: SortType
-  version?: string
-  disableEscaping?: boolean
-  fields?: string[]
-}
-
 export interface ViewParams {
   calculation: string
   group: string
diff --git a/packages/server/src/sdk/app/rows/search/external.ts b/packages/server/src/sdk/app/rows/search/external.ts
index 159f3d84fd..447d1d7d16 100644
--- a/packages/server/src/sdk/app/rows/search/external.ts
+++ b/packages/server/src/sdk/app/rows/search/external.ts
@@ -6,6 +6,7 @@ import {
   IncludeRelationship,
   Row,
   SearchFilters,
+  SearchParams,
 } from "@budibase/types"
 import * as exporters from "../../../../api/controllers/view/exporters"
 import sdk from "../../../../sdk"
@@ -13,7 +14,7 @@ import { handleRequest } from "../../../../api/controllers/row/external"
 import { breakExternalTableId } from "../../../../integrations/utils"
 import { cleanExportRows } from "../utils"
 import { utils } from "@budibase/shared-core"
-import { ExportRowsParams, ExportRowsResult, SearchParams } from "../search"
+import { ExportRowsParams, ExportRowsResult } from "../search"
 import { HTTPError, db } from "@budibase/backend-core"
 import pick from "lodash/pick"
 
diff --git a/packages/server/src/sdk/app/rows/search/internal.ts b/packages/server/src/sdk/app/rows/search/internal.ts
index e7f0aadfd6..dfc5b7dcab 100644
--- a/packages/server/src/sdk/app/rows/search/internal.ts
+++ b/packages/server/src/sdk/app/rows/search/internal.ts
@@ -12,7 +12,7 @@ import {
 } from "../../../../db/utils"
 import { getGlobalUsersFromMetadata } from "../../../../utilities/global"
 import { outputProcessing } from "../../../../utilities/rowProcessor"
-import { Database, Row, Table } from "@budibase/types"
+import { Database, Row, Table, SearchParams } from "@budibase/types"
 import { cleanExportRows } from "../utils"
 import {
   Format,
@@ -28,7 +28,7 @@ import {
   getFromMemoryDoc,
 } from "../../../../api/controllers/view/utils"
 import sdk from "../../../../sdk"
-import { ExportRowsParams, ExportRowsResult, SearchParams } from "../search"
+import { ExportRowsParams, ExportRowsResult } from "../search"
 import pick from "lodash/pick"
 
 export async function search(options: SearchParams) {
diff --git a/packages/server/src/sdk/app/rows/search/tests/external.spec.ts b/packages/server/src/sdk/app/rows/search/tests/external.spec.ts
index b24557fd4f..b3bddfbc97 100644
--- a/packages/server/src/sdk/app/rows/search/tests/external.spec.ts
+++ b/packages/server/src/sdk/app/rows/search/tests/external.spec.ts
@@ -1,8 +1,15 @@
 import { GenericContainer } from "testcontainers"
 
-import { Datasource, FieldType, Row, SourceName, Table } from "@budibase/types"
+import {
+  Datasource,
+  FieldType,
+  Row,
+  SourceName,
+  Table,
+  SearchParams,
+} from "@budibase/types"
+
 import TestConfiguration from "../../../../../tests/utilities/TestConfiguration"
-import { SearchParams } from "../../search"
 import { search } from "../external"
 import {
   expectAnyExternalColsAttributes,
diff --git a/packages/server/src/sdk/app/rows/search/tests/internal.spec.ts b/packages/server/src/sdk/app/rows/search/tests/internal.spec.ts
index a58c368cea..b3e98a1149 100644
--- a/packages/server/src/sdk/app/rows/search/tests/internal.spec.ts
+++ b/packages/server/src/sdk/app/rows/search/tests/internal.spec.ts
@@ -1,6 +1,5 @@
-import { FieldType, Row, Table } from "@budibase/types"
+import { FieldType, Row, Table, SearchParams } from "@budibase/types"
 import TestConfiguration from "../../../../../tests/utilities/TestConfiguration"
-import { SearchParams } from "../../search"
 import { search } from "../internal"
 import {
   expectAnyInternalColsAttributes,
diff --git a/packages/server/src/sdk/app/tables/index.ts b/packages/server/src/sdk/app/tables/index.ts
index 3313e8dfc6..1bf9117837 100644
--- a/packages/server/src/sdk/app/tables/index.ts
+++ b/packages/server/src/sdk/app/tables/index.ts
@@ -6,13 +6,13 @@ import {
   isSQL,
 } from "../../../integrations/utils"
 import {
-  Table,
   Database,
+  Table,
   TableResponse,
   TableViewsResponse,
 } from "@budibase/types"
 import datasources from "../datasources"
-import { populateExternalTableSchemas, isEditableColumn } from "./validation"
+import { isEditableColumn, populateExternalTableSchemas } from "./validation"
 import sdk from "../../../sdk"
 
 async function getAllInternalTables(db?: Database): Promise<Table[]> {
@@ -62,7 +62,7 @@ async function getTable(tableId: any): Promise<Table> {
 }
 
 function enrichViewSchemas(table: Table): TableResponse {
-  const result: TableResponse = {
+  return {
     ...table,
     views: Object.values(table.views ?? [])
       .map(v => sdk.views.enrichSchema(v, table.schema))
@@ -71,8 +71,6 @@ function enrichViewSchemas(table: Table): TableResponse {
         return p
       }, {} as TableViewsResponse),
   }
-
-  return result
 }
 
 export default {
diff --git a/packages/server/src/sdk/app/views/external.ts b/packages/server/src/sdk/app/views/external.ts
new file mode 100644
index 0000000000..bc240ae17b
--- /dev/null
+++ b/packages/server/src/sdk/app/views/external.ts
@@ -0,0 +1,88 @@
+import { ViewV2 } from "@budibase/types"
+import { context, HTTPError } from "@budibase/backend-core"
+
+import sdk from "../../../sdk"
+import * as utils from "../../../db/utils"
+import { enrichSchema, isV2 } from "."
+import { breakExternalTableId } from "../../../integrations/utils"
+
+export async function get(
+  viewId: string,
+  opts?: { enriched: boolean }
+): Promise<ViewV2> {
+  const { tableId } = utils.extractViewInfoFromID(viewId)
+
+  const { datasourceId, tableName } = breakExternalTableId(tableId)
+  const ds = await sdk.datasources.get(datasourceId!)
+
+  const table = ds.entities![tableName!]
+  const views = Object.values(table.views!)
+  const found = views.find(v => isV2(v) && v.id === viewId)
+  if (!found) {
+    throw new Error("No view found")
+  }
+  if (opts?.enriched) {
+    return enrichSchema(found, table.schema) as ViewV2
+  } else {
+    return found as ViewV2
+  }
+}
+
+export async function create(
+  tableId: string,
+  viewRequest: Omit<ViewV2, "id" | "version">
+): Promise<ViewV2> {
+  const view: ViewV2 = {
+    ...viewRequest,
+    id: utils.generateViewID(tableId),
+    version: 2,
+  }
+
+  const db = context.getAppDB()
+
+  const { datasourceId, tableName } = breakExternalTableId(tableId)
+  const ds = await sdk.datasources.get(datasourceId!)
+  ds.entities![tableName!].views ??= {}
+  ds.entities![tableName!].views![view.name] = view
+  await db.put(ds)
+  return view
+}
+
+export async function update(tableId: string, view: ViewV2): Promise<ViewV2> {
+  const db = context.getAppDB()
+
+  const { datasourceId, tableName } = breakExternalTableId(tableId)
+  const ds = await sdk.datasources.get(datasourceId!)
+  ds.entities![tableName!].views ??= {}
+  const views = ds.entities![tableName!].views!
+
+  const existingView = Object.values(views).find(
+    v => isV2(v) && v.id === view.id
+  )
+  if (!existingView) {
+    throw new HTTPError(`View ${view.id} not found in table ${tableId}`, 404)
+  }
+
+  console.log("set to", view)
+  delete views[existingView.name]
+  views[view.name] = view
+  await db.put(ds)
+  return view
+}
+
+export async function remove(viewId: string): Promise<ViewV2> {
+  const db = context.getAppDB()
+
+  const view = await get(viewId)
+
+  if (!view) {
+    throw new HTTPError(`View ${viewId} not found`, 404)
+  }
+
+  const { datasourceId, tableName } = breakExternalTableId(view.tableId)
+  const ds = await sdk.datasources.get(datasourceId!)
+
+  delete ds.entities![tableName!].views![view?.name]
+  await db.put(ds)
+  return view
+}
diff --git a/packages/server/src/sdk/app/views/index.ts b/packages/server/src/sdk/app/views/index.ts
index 7e75f22060..927f82cc68 100644
--- a/packages/server/src/sdk/app/views/index.ts
+++ b/packages/server/src/sdk/app/views/index.ts
@@ -1,71 +1,55 @@
-import { HTTPError, context } from "@budibase/backend-core"
-import { FieldSchema, TableSchema, View, ViewV2 } from "@budibase/types"
+import { RenameColumn, TableSchema, View, ViewV2 } from "@budibase/types"
+import { db as dbCore } from "@budibase/backend-core"
+import { cloneDeep } from "lodash"
 
 import sdk from "../../../sdk"
 import * as utils from "../../../db/utils"
-import merge from "lodash/merge"
+import { isExternalTable } from "../../../integrations/utils"
 
-export async function get(viewId: string): Promise<ViewV2 | undefined> {
+import * as internal from "./internal"
+import * as external from "./external"
+
+function pickApi(tableId: any) {
+  if (isExternalTable(tableId)) {
+    return external
+  }
+  return internal
+}
+
+export async function get(
+  viewId: string,
+  opts?: { enriched: boolean }
+): Promise<ViewV2> {
   const { tableId } = utils.extractViewInfoFromID(viewId)
-  const table = await sdk.tables.getTable(tableId)
-  const views = Object.values(table.views!)
-  const view = views.find(v => isV2(v) && v.id === viewId) as ViewV2 | undefined
-
-  return view
+  return pickApi(tableId).get(viewId, opts)
 }
 
 export async function create(
   tableId: string,
   viewRequest: Omit<ViewV2, "id" | "version">
 ): Promise<ViewV2> {
-  const view: ViewV2 = {
-    ...viewRequest,
-    id: utils.generateViewID(tableId),
-    version: 2,
-  }
-
-  const db = context.getAppDB()
-  const table = await sdk.tables.getTable(tableId)
-  table.views ??= {}
-
-  table.views[view.name] = view
-  await db.put(table)
-  return view
+  return pickApi(tableId).create(tableId, viewRequest)
 }
 
 export async function update(tableId: string, view: ViewV2): Promise<ViewV2> {
-  const db = context.getAppDB()
-  const table = await sdk.tables.getTable(tableId)
-  table.views ??= {}
-
-  const existingView = Object.values(table.views).find(
-    v => isV2(v) && v.id === view.id
-  )
-  if (!existingView) {
-    throw new HTTPError(`View ${view.id} not found in table ${tableId}`, 404)
-  }
-
-  delete table.views[existingView.name]
-  table.views[view.name] = view
-  await db.put(table)
-  return view
+  return pickApi(tableId).update(tableId, view)
 }
 
 export function isV2(view: View | ViewV2): view is ViewV2 {
   return (view as ViewV2).version === 2
 }
 
-export async function remove(viewId: string): Promise<void> {
-  const db = context.getAppDB()
+export async function remove(viewId: string): Promise<ViewV2> {
+  const { tableId } = utils.extractViewInfoFromID(viewId)
+  return pickApi(tableId).remove(viewId)
+}
 
-  const view = await get(viewId)
-  const table = await sdk.tables.getTable(view?.tableId)
-  if (!view) {
-    throw new HTTPError(`View ${viewId} not found`, 404)
-  }
-
-  delete table.views![view?.name]
-  await db.put(table)
+export function allowedFields(view: View | ViewV2) {
+  return [
+    ...Object.keys(view?.schema || {}),
+    ...dbCore.CONSTANT_EXTERNAL_ROW_COLS,
+    ...dbCore.CONSTANT_INTERNAL_ROW_COLS,
+  ]
 }
 
 export function enrichSchema(view: View | ViewV2, tableSchema: TableSchema) {
@@ -73,32 +57,22 @@ export function enrichSchema(view: View | ViewV2, tableSchema: TableSchema) {
     return view
   }
 
-  let schema = { ...tableSchema }
-  if (view.schemaUI) {
-    const viewOverridesEntries = Object.entries(view.schemaUI)
-    const viewSetsOrder = viewOverridesEntries.some(([_, v]) => v.order)
-    for (const [fieldName, schemaUI] of viewOverridesEntries) {
-      schema[fieldName] = {
-        ...schema[fieldName],
-        ...schemaUI,
-        order: viewSetsOrder
-          ? schemaUI.order || undefined
-          : schema[fieldName].order,
+  let schema = cloneDeep(tableSchema)
+  const anyViewOrder = Object.values(view.schema || {}).some(
+    ui => ui.order != null
+  )
+  for (const key of Object.keys(schema)) {
+    // if nothing specified in view, then it is not visible
+    const ui = view.schema?.[key] || { visible: false }
+    if (ui.visible === false) {
+      schema[key].visible = false
+    } else {
+      schema[key] = {
+        ...schema[key],
+        ...ui,
+        order: anyViewOrder ? ui?.order ?? undefined : schema[key].order,
       }
     }
-    delete view.schemaUI
-  }
-
-  if (view?.columns?.length) {
-    const pickedSchema: Record<string, FieldSchema> = {}
-    for (const fieldName of view.columns) {
-      if (!schema[fieldName]) {
-        continue
-      }
-      pickedSchema[fieldName] = { ...schema[fieldName] }
-    }
-    schema = pickedSchema
-    delete view.columns
   }
 
   return {
@@ -106,3 +80,29 @@ export function enrichSchema(view: View | ViewV2, tableSchema: TableSchema) {
     schema: schema,
   }
 }
+
+export function syncSchema(
+  view: ViewV2,
+  schema: TableSchema,
+  renameColumn: RenameColumn | undefined
+): ViewV2 {
+  if (renameColumn && view.schema) {
+    view.schema[renameColumn.updated] = view.schema[renameColumn.old]
+    delete view.schema[renameColumn.old]
+  }
+
+  if (view.schema) {
+    for (const fieldName of Object.keys(view.schema)) {
+      if (!schema[fieldName]) {
+        delete view.schema[fieldName]
+      }
+    }
+    for (const fieldName of Object.keys(schema)) {
+      if (!view.schema[fieldName]) {
+        view.schema[fieldName] = { visible: false }
+      }
+    }
+  }
+
+  return view
+}
diff --git a/packages/server/src/sdk/app/views/internal.ts b/packages/server/src/sdk/app/views/internal.ts
new file mode 100644
index 0000000000..97b47fbcb5
--- /dev/null
+++ b/packages/server/src/sdk/app/views/internal.ts
@@ -0,0 +1,77 @@
+import { ViewV2 } from "@budibase/types"
+import { context, HTTPError } from "@budibase/backend-core"
+
+import sdk from "../../../sdk"
+import * as utils from "../../../db/utils"
+import { enrichSchema, isV2 } from "."
+
+export async function get(
+  viewId: string,
+  opts?: { enriched: boolean }
+): Promise<ViewV2> {
+  const { tableId } = utils.extractViewInfoFromID(viewId)
+  const table = await sdk.tables.getTable(tableId)
+  const views = Object.values(table.views!)
+  const found = views.find(v => isV2(v) && v.id === viewId)
+  if (!found) {
+    throw new Error("No view found")
+  }
+  if (opts?.enriched) {
+    return enrichSchema(found, table.schema) as ViewV2
+  } else {
+    return found as ViewV2
+  }
+}
+
+export async function create(
+  tableId: string,
+  viewRequest: Omit<ViewV2, "id" | "version">
+): Promise<ViewV2> {
+  const view: ViewV2 = {
+    ...viewRequest,
+    id: utils.generateViewID(tableId),
+    version: 2,
+  }
+
+  const db = context.getAppDB()
+
+  const table = await sdk.tables.getTable(tableId)
+  table.views ??= {}
+
+  table.views[view.name] = view
+  await db.put(table)
+  return view
+}
+
+export async function update(tableId: string, view: ViewV2): Promise<ViewV2> {
+  const db = context.getAppDB()
+  const table = await sdk.tables.getTable(tableId)
+  table.views ??= {}
+
+  const existingView = Object.values(table.views).find(
+    v => isV2(v) && v.id === view.id
+  )
+  if (!existingView) {
+    throw new HTTPError(`View ${view.id} not found in table ${tableId}`, 404)
+  }
+
+  console.log("set to", view)
+  delete table.views[existingView.name]
+  table.views[view.name] = view
+  await db.put(table)
+  return view
+}
+
+export async function remove(viewId: string): Promise<ViewV2> {
+  const db = context.getAppDB()
+
+  const view = await get(viewId)
+  const table = await sdk.tables.getTable(view?.tableId)
+  if (!view) {
+    throw new HTTPError(`View ${viewId} not found`, 404)
+  }
+
+  delete table.views![view?.name]
+  await db.put(table)
+  return view
+}
diff --git a/packages/server/src/sdk/app/views/tests/views.spec.ts b/packages/server/src/sdk/app/views/tests/views.spec.ts
index 3b1cb84a42..2314f362e9 100644
--- a/packages/server/src/sdk/app/views/tests/views.spec.ts
+++ b/packages/server/src/sdk/app/views/tests/views.spec.ts
@@ -1,54 +1,55 @@
-import { FieldType, Table, ViewV2 } from "@budibase/types"
+import _ from "lodash"
+import { FieldType, Table, TableSchema, ViewV2 } from "@budibase/types"
 import { generator } from "@budibase/backend-core/tests"
-import { enrichSchema } from ".."
+import { enrichSchema, syncSchema } from ".."
 
 describe("table sdk", () => {
-  describe("enrichViewSchemas", () => {
-    const basicTable: Table = {
-      _id: generator.guid(),
-      name: "TestTable",
-      type: "table",
-      schema: {
-        name: {
-          type: FieldType.STRING,
-          name: "name",
-          visible: true,
-          width: 80,
-          order: 2,
-          constraints: {
-            type: "string",
-          },
-        },
-        description: {
-          type: FieldType.STRING,
-          name: "description",
-          visible: true,
-          width: 200,
-          constraints: {
-            type: "string",
-          },
-        },
-        id: {
-          type: FieldType.NUMBER,
-          name: "id",
-          visible: true,
-          order: 1,
-          constraints: {
-            type: "number",
-          },
-        },
-        hiddenField: {
-          type: FieldType.STRING,
-          name: "hiddenField",
-          visible: false,
-          constraints: {
-            type: "string",
-          },
+  const basicTable: Table = {
+    _id: generator.guid(),
+    name: "TestTable",
+    type: "table",
+    schema: {
+      name: {
+        type: FieldType.STRING,
+        name: "name",
+        visible: true,
+        width: 80,
+        order: 2,
+        constraints: {
+          type: "string",
         },
       },
-    }
+      description: {
+        type: FieldType.STRING,
+        name: "description",
+        visible: true,
+        width: 200,
+        constraints: {
+          type: "string",
+        },
+      },
+      id: {
+        type: FieldType.NUMBER,
+        name: "id",
+        visible: true,
+        order: 1,
+        constraints: {
+          type: "number",
+        },
+      },
+      hiddenField: {
+        type: FieldType.STRING,
+        name: "hiddenField",
+        visible: false,
+        constraints: {
+          type: "string",
+        },
+      },
+    },
+  }
 
-    it("should fetch the default schema if not overriden", async () => {
+  describe("enrichViewSchemas", () => {
+    it("should fetch the default schema if not overridden", async () => {
       const tableId = basicTable._id!
       const view: ViewV2 = {
         version: 2,
@@ -65,7 +66,7 @@ describe("table sdk", () => {
           name: {
             type: "string",
             name: "name",
-            visible: true,
+            visible: false,
             order: 2,
             width: 80,
             constraints: {
@@ -75,7 +76,7 @@ describe("table sdk", () => {
           description: {
             type: "string",
             name: "description",
-            visible: true,
+            visible: false,
             width: 200,
             constraints: {
               type: "string",
@@ -84,7 +85,7 @@ describe("table sdk", () => {
           id: {
             type: "number",
             name: "id",
-            visible: true,
+            visible: false,
             order: 1,
             constraints: {
               type: "number",
@@ -109,7 +110,10 @@ describe("table sdk", () => {
         id: generator.guid(),
         name: generator.guid(),
         tableId,
-        columns: ["name", "id"],
+        schema: {
+          name: { visible: true },
+          id: { visible: true },
+        },
       }
 
       const res = enrichSchema(view, basicTable.schema)
@@ -118,23 +122,20 @@ describe("table sdk", () => {
         ...view,
         schema: {
           name: {
-            type: "string",
-            name: "name",
+            ...basicTable.schema.name,
             visible: true,
-            order: 2,
-            width: 80,
-            constraints: {
-              type: "string",
-            },
+          },
+          description: {
+            ...basicTable.schema.description,
+            visible: false,
           },
           id: {
-            type: "number",
-            name: "id",
+            ...basicTable.schema.id,
             visible: true,
-            order: 1,
-            constraints: {
-              type: "number",
-            },
+          },
+          hiddenField: {
+            ...basicTable.schema.hiddenField,
+            visible: false,
           },
         },
       })
@@ -147,28 +148,35 @@ describe("table sdk", () => {
         id: generator.guid(),
         name: generator.guid(),
         tableId,
-        columns: ["unnexisting", "name"],
+        schema: {
+          unnexisting: { visible: true },
+          name: { visible: true },
+        },
       }
 
       const res = enrichSchema(view, basicTable.schema)
 
-      expect(res).toEqual(
-        expect.objectContaining({
-          ...view,
-          schema: {
-            name: {
-              type: "string",
-              name: "name",
-              order: 2,
-              visible: true,
-              width: 80,
-              constraints: {
-                type: "string",
-              },
-            },
+      expect(res).toEqual({
+        ...view,
+        schema: {
+          name: {
+            ...basicTable.schema.name,
+            visible: true,
           },
-        })
-      )
+          description: {
+            ...basicTable.schema.description,
+            visible: false,
+          },
+          id: {
+            ...basicTable.schema.id,
+            visible: false,
+          },
+          hiddenField: {
+            ...basicTable.schema.hiddenField,
+            visible: false,
+          },
+        },
+      })
     })
 
     it("if the view schema overrides the schema UI, the table schema should be overridden", async () => {
@@ -178,8 +186,7 @@ describe("table sdk", () => {
         id: generator.guid(),
         name: generator.guid(),
         tableId,
-        columns: ["name", "id", "description"],
-        schemaUI: {
+        schema: {
           name: { visible: true, width: 100 },
           id: { visible: true, width: 20 },
           description: { visible: false },
@@ -192,6 +199,7 @@ describe("table sdk", () => {
         expect.objectContaining({
           ...view,
           schema: {
+            ...basicTable.schema,
             name: {
               type: "string",
               name: "name",
@@ -233,11 +241,10 @@ describe("table sdk", () => {
         id: generator.guid(),
         name: generator.guid(),
         tableId,
-        columns: ["name", "id", "description"],
-        schemaUI: {
+        schema: {
           name: { visible: true, order: 1 },
           id: { visible: true },
-          description: { visible: false, order: 2 },
+          description: { visible: true, order: 2 },
         },
       }
 
@@ -247,6 +254,7 @@ describe("table sdk", () => {
         expect.objectContaining({
           ...view,
           schema: {
+            ...basicTable.schema,
             name: {
               type: "string",
               name: "name",
@@ -260,6 +268,7 @@ describe("table sdk", () => {
             id: {
               type: "number",
               name: "id",
+              order: undefined,
               visible: true,
               constraints: {
                 type: "number",
@@ -269,7 +278,7 @@ describe("table sdk", () => {
               type: "string",
               name: "description",
               order: 2,
-              visible: false,
+              visible: true,
               width: 200,
               constraints: {
                 type: "string",
@@ -280,4 +289,278 @@ describe("table sdk", () => {
       )
     })
   })
+
+  describe("syncSchema", () => {
+    const basicView: ViewV2 = {
+      version: 2,
+      id: generator.guid(),
+      name: generator.guid(),
+      tableId: basicTable._id!,
+    }
+
+    describe("view without schema", () => {
+      it("no table schema changes will not amend the view", () => {
+        const view: ViewV2 = {
+          ...basicView,
+        }
+        const result = syncSchema(
+          _.cloneDeep(view),
+          basicTable.schema,
+          undefined
+        )
+        expect(result).toEqual(view)
+      })
+
+      it("adding new columns will not change the view schema", () => {
+        const view: ViewV2 = {
+          ...basicView,
+        }
+
+        const newTableSchema = {
+          ...basicTable.schema,
+          newField1: {
+            type: FieldType.STRING,
+            name: "newField1",
+            visible: true,
+          },
+          newField2: {
+            type: FieldType.NUMBER,
+            name: "newField2",
+            visible: false,
+          },
+        }
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, undefined)
+        expect(result).toEqual({
+          ...view,
+          schema: undefined,
+        })
+      })
+
+      it("deleting columns will not change the view schema", () => {
+        const view: ViewV2 = {
+          ...basicView,
+        }
+        const { name, description, ...newTableSchema } = basicTable.schema
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, undefined)
+        expect(result).toEqual({
+          ...view,
+          schema: undefined,
+        })
+      })
+
+      it("renaming mapped columns will update the view column mapping", () => {
+        const view: ViewV2 = {
+          ...basicView,
+        }
+        const { description, ...newTableSchema } = {
+          ...basicTable.schema,
+          updatedDescription: {
+            ...basicTable.schema.description,
+            name: "updatedDescription",
+          },
+        } as TableSchema
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, {
+          old: "description",
+          updated: "updatedDescription",
+        })
+        expect(result).toEqual({
+          ...view,
+          schema: undefined,
+        })
+      })
+    })
+
+    describe("view with schema", () => {
+      it("no table schema changes will not amend the view", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true, width: 100 },
+            id: { visible: true, width: 20 },
+            description: { visible: false },
+            hiddenField: { visible: false },
+          },
+        }
+        const result = syncSchema(
+          _.cloneDeep(view),
+          basicTable.schema,
+          undefined
+        )
+        expect(result).toEqual(view)
+      })
+
+      it("adding new columns will add them as not visible to the view", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true, width: 100 },
+            id: { visible: true, width: 20 },
+            description: { visible: false },
+            hiddenField: { visible: false },
+          },
+        }
+
+        const newTableSchema = {
+          ...basicTable.schema,
+          newField1: {
+            type: FieldType.STRING,
+            name: "newField1",
+            visible: true,
+          },
+          newField2: {
+            type: FieldType.NUMBER,
+            name: "newField2",
+            visible: false,
+          },
+        }
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, undefined)
+        expect(result).toEqual({
+          ...view,
+          schema: {
+            ...view.schema,
+            newField1: { visible: false },
+            newField2: { visible: false },
+          },
+        })
+      })
+
+      it("deleting columns will remove them from the UI", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true, width: 100 },
+            id: { visible: true, width: 20 },
+            description: { visible: false },
+            hiddenField: { visible: false },
+          },
+        }
+        const { name, description, ...newTableSchema } = basicTable.schema
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, undefined)
+        expect(result).toEqual({
+          ...view,
+          schema: {
+            ...view.schema,
+            name: undefined,
+            description: undefined,
+          },
+        })
+      })
+
+      it("can handle additions and deletions at the same them UI", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true, width: 100 },
+            id: { visible: true, width: 20 },
+            description: { visible: false },
+            hiddenField: { visible: false },
+          },
+        }
+        const { name, description, ...newTableSchema } = {
+          ...basicTable.schema,
+          newField1: {
+            type: FieldType.STRING,
+            name: "newField1",
+            visible: true,
+          },
+        } as TableSchema
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, undefined)
+        expect(result).toEqual({
+          ...view,
+          schema: {
+            ...view.schema,
+            name: undefined,
+            description: undefined,
+            newField1: { visible: false },
+          },
+        })
+      })
+
+      it("renaming mapped columns will update the view column mapping and it's schema", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true },
+            id: { visible: true },
+            description: { visible: true, width: 150, icon: "ic-any" },
+            hiddenField: { visible: false },
+          },
+        }
+        const { description, ...newTableSchema } = {
+          ...basicTable.schema,
+          updatedDescription: {
+            ...basicTable.schema.description,
+            name: "updatedDescription",
+          },
+        } as TableSchema
+
+        const result = syncSchema(_.cloneDeep(view), newTableSchema, {
+          old: "description",
+          updated: "updatedDescription",
+        })
+        expect(result).toEqual({
+          ...view,
+          schema: {
+            ...view.schema,
+            description: undefined,
+            updatedDescription: { visible: true, width: 150, icon: "ic-any" },
+          },
+        })
+      })
+
+      it("changing no UI schema will not affect the view", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true, width: 100 },
+            id: { visible: true, width: 20 },
+            description: { visible: false },
+            hiddenField: { visible: false },
+          },
+        }
+        const result = syncSchema(
+          _.cloneDeep(view),
+          {
+            ...basicTable.schema,
+            id: {
+              ...basicTable.schema.id,
+              type: FieldType.NUMBER,
+            },
+          },
+          undefined
+        )
+        expect(result).toEqual(view)
+      })
+
+      it("changing table column UI fields will not affect the view schema", () => {
+        const view: ViewV2 = {
+          ...basicView,
+          schema: {
+            name: { visible: true, width: 100 },
+            id: { visible: true, width: 20 },
+            description: { visible: false },
+            hiddenField: { visible: false },
+          },
+        }
+        const result = syncSchema(
+          _.cloneDeep(view),
+          {
+            ...basicTable.schema,
+            id: {
+              ...basicTable.schema.id,
+              visible: !basicTable.schema.id.visible,
+            },
+          },
+          undefined
+        )
+        expect(result).toEqual(view)
+      })
+    })
+  })
 })
diff --git a/packages/server/src/sdk/index.ts b/packages/server/src/sdk/index.ts
index 85ac483c05..24eb1ebf3c 100644
--- a/packages/server/src/sdk/index.ts
+++ b/packages/server/src/sdk/index.ts
@@ -8,6 +8,7 @@ import { default as rows } from "./app/rows"
 import { default as users } from "./users"
 import { default as plugins } from "./plugins"
 import * as views from "./app/views"
+import * as permissions from "./app/permissions"
 
 const sdk = {
   backups,
@@ -20,6 +21,7 @@ const sdk = {
   queries,
   plugins,
   views,
+  permissions,
 }
 
 // default export for TS
diff --git a/packages/server/src/startup.ts b/packages/server/src/startup.ts
index 9da26ac2aa..b4a287d2d4 100644
--- a/packages/server/src/startup.ts
+++ b/packages/server/src/startup.ts
@@ -17,6 +17,7 @@ import * as pro from "@budibase/pro"
 import * as api from "./api"
 import sdk from "./sdk"
 import { initialise as initialiseWebsockets } from "./websockets"
+import { automationsEnabled } from "./features"
 
 let STARTUP_RAN = false
 
@@ -97,7 +98,9 @@ export async function startup(app?: any, server?: any) {
   // configure events to use the pro audit log write
   // can't integrate directly into backend-core due to cyclic issues
   queuePromises.push(events.processors.init(pro.sdk.auditLogs.write))
-  queuePromises.push(automations.init())
+  if (automationsEnabled()) {
+    queuePromises.push(automations.init())
+  }
   queuePromises.push(initPro())
   if (app) {
     // bring routes online as final step once everything ready
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index a93c78d5fc..4c6d0701f3 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -10,7 +10,6 @@ mocks.licenses.useUnlimited()
 import { init as dbInit } from "../../db"
 dbInit()
 import env from "../../environment"
-import { env as coreEnv } from "@budibase/backend-core"
 import {
   basicTable,
   basicRow,
@@ -33,6 +32,7 @@ import {
   encryption,
   auth,
   roles,
+  env as coreEnv,
 } from "@budibase/backend-core"
 import * as controllers from "./controllers"
 import { cleanup } from "../../utilities/fileSystem"
@@ -51,7 +51,6 @@ import {
   UserRoles,
   Automation,
 } from "@budibase/types"
-import { BUILTIN_ROLE_IDS } from "@budibase/backend-core/src/security/roles"
 
 import API from "./api"
 
@@ -87,7 +86,7 @@ class TestConfiguration {
     if (openServer) {
       // use a random port because it doesn't matter
       env.PORT = "0"
-      this.server = require("../../app").default
+      this.server = require("../../app").getServer()
       // we need the request for logging in, involves cookies, hard to fake
       this.request = supertest(this.server)
       this.started = true
@@ -178,7 +177,7 @@ class TestConfiguration {
     if (this.server) {
       this.server.close()
     } else {
-      require("../../app").default.close()
+      require("../../app").getServer().close()
     }
     if (this.allApps) {
       cleanup(this.allApps.map(app => app.appId))
@@ -317,7 +316,7 @@ class TestConfiguration {
     }
   }
 
-  async createGroup(roleId: string = BUILTIN_ROLE_IDS.BASIC) {
+  async createGroup(roleId: string = roles.BUILTIN_ROLE_IDS.BASIC) {
     return context.doInTenant(this.tenantId!, async () => {
       const baseGroup = structures.userGroups.userGroup()
       baseGroup.roles = {
@@ -620,21 +619,9 @@ class TestConfiguration {
     return this._req(config, null, controllers.role.save)
   }
 
-  async addPermission(roleId: string, resourceId: string, level = "read") {
-    return this._req(
-      null,
-      {
-        roleId,
-        resourceId,
-        level,
-      },
-      controllers.perms.addPermission
-    )
-  }
-
   // VIEW
 
-  async createView(config?: any) {
+  async createLegacyView(config?: any) {
     if (!this.table) {
       throw "Test requires table to be configured."
     }
diff --git a/packages/server/src/tests/utilities/api/index.ts b/packages/server/src/tests/utilities/api/index.ts
index a6002a72d8..40995b62f2 100644
--- a/packages/server/src/tests/utilities/api/index.ts
+++ b/packages/server/src/tests/utilities/api/index.ts
@@ -1,4 +1,5 @@
 import TestConfiguration from "../TestConfiguration"
+import { PermissionAPI } from "./permission"
 import { RowAPI } from "./row"
 import { TableAPI } from "./table"
 import { ViewV2API } from "./viewV2"
@@ -7,10 +8,12 @@ export default class API {
   table: TableAPI
   viewV2: ViewV2API
   row: RowAPI
+  permission: PermissionAPI
 
   constructor(config: TestConfiguration) {
     this.table = new TableAPI(config)
     this.viewV2 = new ViewV2API(config)
     this.row = new RowAPI(config)
+    this.permission = new PermissionAPI(config)
   }
 }
diff --git a/packages/server/src/tests/utilities/api/permission.ts b/packages/server/src/tests/utilities/api/permission.ts
new file mode 100644
index 0000000000..ffa89e88f9
--- /dev/null
+++ b/packages/server/src/tests/utilities/api/permission.ts
@@ -0,0 +1,52 @@
+import { AnyDocument, PermissionLevel } from "@budibase/types"
+import TestConfiguration from "../TestConfiguration"
+import { TestAPI } from "./base"
+
+export class PermissionAPI extends TestAPI {
+  constructor(config: TestConfiguration) {
+    super(config)
+  }
+
+  get = async (
+    resourceId: string,
+    { expectStatus } = { expectStatus: 200 }
+  ) => {
+    return this.request
+      .get(`/api/permission/${resourceId}`)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+  }
+
+  set = async (
+    {
+      roleId,
+      resourceId,
+      level,
+    }: { roleId: string; resourceId: string; level: PermissionLevel },
+    { expectStatus } = { expectStatus: 200 }
+  ): Promise<any> => {
+    const res = await this.request
+      .post(`/api/permission/${roleId}/${resourceId}/${level}`)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+    return res.body
+  }
+
+  revoke = async (
+    {
+      roleId,
+      resourceId,
+      level,
+    }: { roleId: string; resourceId: string; level: PermissionLevel },
+    { expectStatus } = { expectStatus: 200 }
+  ) => {
+    const res = await this.request
+      .delete(`/api/permission/${roleId}/${resourceId}/${level}`)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+    return res
+  }
+}
diff --git a/packages/server/src/tests/utilities/api/row.ts b/packages/server/src/tests/utilities/api/row.ts
index c7c72368f5..c6ef4606d2 100644
--- a/packages/server/src/tests/utilities/api/row.ts
+++ b/packages/server/src/tests/utilities/api/row.ts
@@ -1,4 +1,4 @@
-import { PatchRowRequest } from "@budibase/types"
+import { PatchRowRequest, SaveRowRequest, Row } from "@budibase/types"
 import TestConfiguration from "../TestConfiguration"
 import { TestAPI } from "./base"
 
@@ -8,12 +8,12 @@ export class RowAPI extends TestAPI {
   }
 
   get = async (
-    tableId: string,
+    sourceId: string,
     rowId: string,
     { expectStatus } = { expectStatus: 200 }
   ) => {
     const request = this.request
-      .get(`/api/${tableId}/rows/${rowId}`)
+      .get(`/api/${sourceId}/rows/${rowId}`)
       .set(this.config.defaultHeaders())
       .expect(expectStatus)
     if (expectStatus !== 404) {
@@ -22,16 +22,43 @@ export class RowAPI extends TestAPI {
     return request
   }
 
+  save = async (
+    sourceId: string,
+    row: SaveRowRequest,
+    { expectStatus } = { expectStatus: 200 }
+  ): Promise<Row> => {
+    const resp = await this.request
+      .post(`/api/${sourceId}/rows`)
+      .send(row)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+    return resp.body as Row
+  }
+
   patch = async (
-    tableId: string,
+    sourceId: string,
     row: PatchRowRequest,
     { expectStatus } = { expectStatus: 200 }
   ) => {
     return this.request
-      .patch(`/api/${tableId}/rows`)
+      .patch(`/api/${sourceId}/rows`)
       .send(row)
       .set(this.config.defaultHeaders())
       .expect("Content-Type", /json/)
       .expect(expectStatus)
   }
+
+  delete = async (
+    sourceId: string,
+    rows: Row[],
+    { expectStatus } = { expectStatus: 200 }
+  ) => {
+    return this.request
+      .delete(`/api/${sourceId}/rows`)
+      .send({ rows })
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+  }
 }
diff --git a/packages/server/src/tests/utilities/api/viewV2.ts b/packages/server/src/tests/utilities/api/viewV2.ts
index 5ad2b2d3d7..0682361e16 100644
--- a/packages/server/src/tests/utilities/api/viewV2.ts
+++ b/packages/server/src/tests/utilities/api/viewV2.ts
@@ -1,13 +1,8 @@
 import {
   CreateViewRequest,
-  SortOrder,
-  SortType,
   UpdateViewRequest,
-  DeleteRowRequest,
-  PatchRowRequest,
-  PatchRowResponse,
-  Row,
   ViewV2,
+  SearchViewRowRequest,
 } from "@budibase/types"
 import TestConfiguration from "../TestConfiguration"
 import { TestAPI } from "./base"
@@ -28,7 +23,8 @@ export class ViewV2API extends TestAPI {
     if (!tableId && !this.config.table) {
       throw "Test requires table to be configured."
     }
-    tableId = this.config.table!._id!
+    const table = this.config.table
+    tableId = table!._id!
     const view = {
       tableId,
       name: generator.guid(),
@@ -81,75 +77,18 @@ export class ViewV2API extends TestAPI {
 
   search = async (
     viewId: string,
-    options?: {
-      sort: {
-        column: string
-        order?: SortOrder
-        type?: SortType
-      }
-    },
-    { expectStatus } = { expectStatus: 200 }
+    params?: SearchViewRowRequest,
+    { expectStatus = 200, usePublicUser = false } = {}
   ) => {
-    const qs: [string, any][] = []
-    if (options?.sort.column) {
-      qs.push(["sort_column", options.sort.column])
-    }
-    if (options?.sort.order) {
-      qs.push(["sort_order", options.sort.order])
-    }
-    if (options?.sort.type) {
-      qs.push(["sort_type", options.sort.type])
-    }
-    let url = `/api/v2/views/${viewId}/search`
-    if (qs.length) {
-      url += "?" + qs.map(q => q.join("=")).join("&")
-    }
     return this.request
-      .get(url)
-      .set(this.config.defaultHeaders())
+      .post(`/api/v2/views/${viewId}/search`)
+      .send(params)
+      .set(
+        usePublicUser
+          ? this.config.publicHeaders()
+          : this.config.defaultHeaders()
+      )
       .expect("Content-Type", /json/)
       .expect(expectStatus)
   }
-
-  row = {
-    create: async (
-      viewId: string,
-      row: Row,
-      { expectStatus } = { expectStatus: 200 }
-    ): Promise<Row> => {
-      const result = await this.request
-        .post(`/api/v2/views/${viewId}/rows`)
-        .send(row)
-        .set(this.config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(expectStatus)
-      return result.body as Row
-    },
-    update: async (
-      viewId: string,
-      rowId: string,
-      row: PatchRowRequest,
-      { expectStatus } = { expectStatus: 200 }
-    ): Promise<PatchRowResponse> => {
-      const result = await this.request
-        .patch(`/api/v2/views/${viewId}/rows/${rowId}`)
-        .send(row)
-        .set(this.config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(expectStatus)
-      return result.body as PatchRowResponse
-    },
-    delete: async (
-      viewId: string,
-      body: DeleteRowRequest,
-      { expectStatus } = { expectStatus: 200 }
-    ): Promise<any> => {
-      const result = await this.request
-        .delete(`/api/v2/views/${viewId}/rows`)
-        .send(body)
-        .set(this.config.defaultHeaders())
-        .expect(expectStatus)
-      return result.body
-    },
-  }
 }
diff --git a/packages/server/src/tests/utilities/mocks/pro.ts b/packages/server/src/tests/utilities/mocks/pro.ts
new file mode 100644
index 0000000000..a365ff40c4
--- /dev/null
+++ b/packages/server/src/tests/utilities/mocks/pro.ts
@@ -0,0 +1,10 @@
+// init the licensing mock
+import { mocks } from "@budibase/backend-core/tests"
+import * as pro from "@budibase/pro"
+
+export const initProMocks = () => {
+  mocks.licenses.init(pro)
+
+  // use unlimited license by default
+  mocks.licenses.useUnlimited()
+}
diff --git a/packages/server/src/threads/automation.ts b/packages/server/src/threads/automation.ts
index bc0629a939..8bdf9cbe65 100644
--- a/packages/server/src/threads/automation.ts
+++ b/packages/server/src/threads/automation.ts
@@ -1,10 +1,9 @@
 import { default as threadUtils } from "./utils"
 import { Job } from "bull"
-threadUtils.threadSetup()
 import {
-  isRecurring,
   disableCronById,
   isErrorInOutput,
+  isRecurring,
 } from "../automations/utils"
 import * as actions from "../automations/actions"
 import * as automationUtils from "../automations/automationUtils"
@@ -15,17 +14,18 @@ import { AutomationErrors, MAX_AUTOMATION_RECURRING_ERRORS } from "../constants"
 import { storeLog } from "../automations/logging"
 import {
   Automation,
-  AutomationStep,
-  AutomationStatus,
-  AutomationMetadata,
-  AutomationJob,
   AutomationData,
+  AutomationJob,
+  AutomationMetadata,
+  AutomationStatus,
+  AutomationStep,
+  AutomationStepStatus,
 } from "@budibase/types"
 import {
-  LoopStep,
-  LoopInput,
-  TriggerOutput,
   AutomationContext,
+  LoopInput,
+  LoopStep,
+  TriggerOutput,
 } from "../definitions/automations"
 import { WorkerCallback } from "./definitions"
 import { context, logging } from "@budibase/backend-core"
@@ -34,6 +34,8 @@ import { cloneDeep } from "lodash/fp"
 import { performance } from "perf_hooks"
 import * as sdkUtils from "../sdk/utils"
 import env from "../environment"
+
+threadUtils.threadSetup()
 const FILTER_STEP_ID = actions.BUILTIN_ACTION_DEFINITIONS.FILTER.stepId
 const LOOP_STEP_ID = actions.BUILTIN_ACTION_DEFINITIONS.LOOP.stepId
 const CRON_STEP_ID = triggerDefs.CRON.stepId
@@ -450,7 +452,10 @@ class Orchestrator {
         this.executionOutput.steps.splice(loopStepNumber + 1, 0, {
           id: step.id,
           stepId: step.stepId,
-          outputs: { status: AutomationStatus.NO_ITERATIONS, success: true },
+          outputs: {
+            status: AutomationStepStatus.NO_ITERATIONS,
+            success: true,
+          },
           inputs: {},
         })
 
@@ -557,11 +562,10 @@ export function executeSynchronously(job: Job) {
     // put into automation thread for whole context
     return context.doInEnvironmentContext(envVars, async () => {
       const automationOrchestrator = new Orchestrator(job)
-      const response = await Promise.race([
+      return await Promise.race([
         automationOrchestrator.execute(),
         timeoutPromise,
       ])
-      return response
     })
   })
 }
diff --git a/packages/server/src/threads/definitions.ts b/packages/server/src/threads/definitions.ts
index 21e7ce0b69..dd0891d34a 100644
--- a/packages/server/src/threads/definitions.ts
+++ b/packages/server/src/threads/definitions.ts
@@ -11,6 +11,12 @@ export interface QueryEvent {
   queryId: string
   environmentVariables?: Record<string, string>
   ctx?: any
+  schema?: {
+    [key: string]: {
+      name: string
+      type: string
+    }
+  }
 }
 
 export interface QueryVariable {
diff --git a/packages/server/src/threads/query.ts b/packages/server/src/threads/query.ts
index 135c533122..3d68895753 100644
--- a/packages/server/src/threads/query.ts
+++ b/packages/server/src/threads/query.ts
@@ -8,6 +8,7 @@ import { context, cache, auth } from "@budibase/backend-core"
 import { getGlobalIDFromUserMetadataID } from "../db/utils"
 import sdk from "../sdk"
 import { cloneDeep } from "lodash/fp"
+import { SourceName } from "@budibase/types"
 
 import { isSQL } from "../integrations/utils"
 import { interpolateSQL } from "../integrations/queries/sql"
@@ -28,6 +29,7 @@ class QueryRunner {
   hasRerun: boolean
   hasRefreshedOAuth: boolean
   hasDynamicVariables: boolean
+  schema: any
 
   constructor(input: QueryEvent, flags = { noRecursiveQuery: false }) {
     this.datasource = input.datasource
@@ -37,6 +39,7 @@ class QueryRunner {
     this.pagination = input.pagination
     this.transformer = input.transformer
     this.queryId = input.queryId
+    this.schema = input.schema
     this.noRecursiveQuery = flags.noRecursiveQuery
     this.cachedVariables = []
     // Additional context items for enrichment
@@ -51,7 +54,7 @@ class QueryRunner {
   }
 
   async execute(): Promise<any> {
-    let { datasource, fields, queryVerb, transformer } = this
+    let { datasource, fields, queryVerb, transformer, schema } = this
     let datasourceClone = cloneDeep(datasource)
     let fieldsClone = cloneDeep(fields)
 
@@ -70,6 +73,9 @@ class QueryRunner {
 
     const integration = new Integration(datasourceClone.config)
 
+    // define the type casting from the schema
+    integration.defineTypeCastingFromSchema?.(schema)
+
     // pre-query, make sure datasource variables are added to parameters
     const parameters = await this.addDatasourceVariables()
 
diff --git a/packages/server/src/utilities/global.ts b/packages/server/src/utilities/global.ts
index 5561b59233..5aa201990c 100644
--- a/packages/server/src/utilities/global.ts
+++ b/packages/server/src/utilities/global.ts
@@ -12,75 +12,65 @@ import { groups } from "@budibase/pro"
 import { UserCtx, ContextUser, User, UserGroup } from "@budibase/types"
 import cloneDeep from "lodash/cloneDeep"
 
-export function updateAppRole(
+export async function processUser(
   user: ContextUser,
-  { appId }: { appId?: string } = {}
+  opts: { appId?: string; groups?: UserGroup[] } = {}
 ) {
-  appId = appId || context.getAppId()
-
   if (!user || (!user.roles && !user.userGroups)) {
     return user
   }
-  // if in an multi-tenancy environment make sure roles are never updated
+  user = cloneDeep(user)
+  delete user.password
+  const appId = opts.appId || context.getAppId()
+  if (!appId) {
+    throw new Error("Unable to process user without app ID")
+  }
+  // if in a multi-tenancy environment and in wrong tenant make sure roles are never updated
   if (env.MULTI_TENANCY && appId && !tenancy.isUserInAppTenant(appId, user)) {
     user = users.removePortalUserPermissions(user)
     user.roleId = roles.BUILTIN_ROLE_IDS.PUBLIC
     return user
   }
-  // always use the deployed app
-  if (appId && user.roles) {
+  let groupList: UserGroup[] = []
+  if (appId && user?.userGroups?.length) {
+    groupList = opts.groups
+      ? opts.groups
+      : await groups.getBulk(user.userGroups)
+  }
+  // check if a group provides builder access
+  const builderAppIds = await groups.getGroupBuilderAppIds(user, {
+    appId,
+    groups: groupList,
+  })
+  if (builderAppIds.length && !users.isBuilder(user, appId)) {
+    const existingApps = user.builder?.apps || []
+    user.builder = {
+      apps: [...new Set(existingApps.concat(builderAppIds))],
+    }
+  }
+  // builders are always admins within the app
+  if (users.isBuilder(user, appId)) {
+    user.roleId = roles.BUILTIN_ROLE_IDS.ADMIN
+  }
+  // try to get the role from the user list
+  if (!user.roleId && appId && user.roles) {
     user.roleId = user.roles[dbCore.getProdAppID(appId)]
   }
-  // if a role wasn't found then either set as admin (builder) or public (everyone else)
-  if (!user.roleId && users.isBuilder(user, appId)) {
-    user.roleId = roles.BUILTIN_ROLE_IDS.ADMIN
-  } else if (!user.roleId && !user?.userGroups?.length) {
-    user.roleId = roles.BUILTIN_ROLE_IDS.PUBLIC
-  }
-
-  delete user.roles
-  return user
-}
-
-async function checkGroupRoles(
-  user: ContextUser,
-  opts: { appId?: string; groups?: UserGroup[] } = {}
-) {
-  if (user.roleId && user.roleId !== roles.BUILTIN_ROLE_IDS.PUBLIC) {
-    return user
-  }
-  if (opts.appId) {
-    user.roleId = await groups.getGroupRoleId(user as User, opts.appId, {
-      groups: opts.groups,
+  // try to get the role from the group list
+  if (!user.roleId && groupList) {
+    user.roleId = await groups.getGroupRoleId(user, appId, {
+      groups: groupList,
     })
   }
   // final fallback, simply couldn't find a role - user must be public
   if (!user.roleId) {
     user.roleId = roles.BUILTIN_ROLE_IDS.PUBLIC
   }
+  // remove the roles as it is now set
+  delete user.roles
   return user
 }
 
-export async function processUser(
-  user: ContextUser,
-  opts: { appId?: string; groups?: UserGroup[] } = {}
-) {
-  let clonedUser = cloneDeep(user)
-  if (clonedUser) {
-    delete clonedUser.password
-  }
-  const appId = opts.appId || context.getAppId()
-  clonedUser = updateAppRole(clonedUser, { appId })
-  if (!clonedUser.roleId && clonedUser?.userGroups?.length) {
-    clonedUser = await checkGroupRoles(clonedUser, {
-      appId,
-      groups: opts?.groups,
-    })
-  }
-
-  return clonedUser
-}
-
 export async function getCachedSelf(ctx: UserCtx, appId: string) {
   // this has to be tenant aware, can't depend on the context to find it out
   // running some middlewares before the tenancy causes context to break
diff --git a/packages/server/src/utilities/security.ts b/packages/server/src/utilities/security.ts
index 694dff4360..01a3468c9c 100644
--- a/packages/server/src/utilities/security.ts
+++ b/packages/server/src/utilities/security.ts
@@ -1,5 +1,5 @@
 import { permissions, roles } from "@budibase/backend-core"
-import { DocumentType } from "../db/utils"
+import { DocumentType, VirtualDocumentType } from "../db/utils"
 
 export const CURRENTLY_SUPPORTED_LEVELS: string[] = [
   permissions.PermissionLevel.WRITE,
@@ -11,9 +11,10 @@ export function getPermissionType(resourceId: string) {
   const docType = Object.values(DocumentType).filter(docType =>
     resourceId.startsWith(docType)
   )[0]
-  switch (docType) {
+  switch (docType as DocumentType | VirtualDocumentType) {
     case DocumentType.TABLE:
     case DocumentType.ROW:
+    case VirtualDocumentType.VIEW:
       return permissions.PermissionType.TABLE
     case DocumentType.AUTOMATION:
       return permissions.PermissionType.AUTOMATION
@@ -23,8 +24,8 @@ export function getPermissionType(resourceId: string) {
     case DocumentType.DATASOURCE:
       return permissions.PermissionType.QUERY
     default:
-      // views don't have an ID, will end up here
-      return permissions.PermissionType.VIEW
+      // legacy views don't have an ID, will end up here
+      return permissions.PermissionType.LEGACY_VIEW
   }
 }
 
diff --git a/packages/server/src/utilities/users.ts b/packages/server/src/utilities/users.ts
index 1498a79719..f841ec3646 100644
--- a/packages/server/src/utilities/users.ts
+++ b/packages/server/src/utilities/users.ts
@@ -1,9 +1,9 @@
 import { InternalTables } from "../db/utils"
 import { getGlobalUser } from "./global"
-import { context, db as dbCore, roles } from "@budibase/backend-core"
-import { BBContext } from "@budibase/types"
+import { context, roles } from "@budibase/backend-core"
+import { UserCtx } from "@budibase/types"
 
-export async function getFullUser(ctx: BBContext, userId: string) {
+export async function getFullUser(ctx: UserCtx, userId: string) {
   const global = await getGlobalUser(userId)
   let metadata: any = {}
 
@@ -29,21 +29,12 @@ export async function getFullUser(ctx: BBContext, userId: string) {
   }
 }
 
-export function publicApiUserFix(ctx: BBContext) {
+export function publicApiUserFix(ctx: UserCtx) {
   if (!ctx.request.body) {
     return ctx
   }
   if (!ctx.request.body._id && ctx.params.userId) {
     ctx.request.body._id = ctx.params.userId
   }
-  if (!ctx.request.body.roles) {
-    ctx.request.body.roles = {}
-  } else {
-    const newRoles: { [key: string]: any } = {}
-    for (let [appId, role] of Object.entries(ctx.request.body.roles)) {
-      newRoles[dbCore.getProdAppID(appId)] = role
-    }
-    ctx.request.body.roles = newRoles
-  }
   return ctx
 }
diff --git a/packages/server/src/utilities/workerRequests.ts b/packages/server/src/utilities/workerRequests.ts
index 5230e25bf7..fa9fde7297 100644
--- a/packages/server/src/utilities/workerRequests.ts
+++ b/packages/server/src/utilities/workerRequests.ts
@@ -8,10 +8,9 @@ import {
   logging,
   env as coreEnv,
 } from "@budibase/backend-core"
-import { updateAppRole } from "./global"
-import { BBContext, User, EmailInvite } from "@budibase/types"
+import { Ctx, User, EmailInvite } from "@budibase/types"
 
-export function request(ctx?: BBContext, request?: any) {
+export function request(ctx?: Ctx, request?: any) {
   if (!request.headers) {
     request.headers = {}
   }
@@ -43,7 +42,7 @@ export function request(ctx?: BBContext, request?: any) {
 async function checkResponse(
   response: any,
   errorMsg: string,
-  { ctx }: { ctx?: BBContext } = {}
+  { ctx }: { ctx?: Ctx } = {}
 ) {
   if (response.status !== 200) {
     let error
@@ -105,21 +104,7 @@ export async function sendSmtpEmail({
   return checkResponse(response, "send email")
 }
 
-export async function getGlobalSelf(ctx: BBContext, appId?: string) {
-  const endpoint = `/api/global/self`
-  const response = await fetch(
-    checkSlashesInUrl(env.WORKER_URL + endpoint),
-    // we don't want to use API key when getting self
-    request(ctx, { method: "GET" })
-  )
-  let json = await checkResponse(response, "get self globally", { ctx })
-  if (appId) {
-    json = updateAppRole(json)
-  }
-  return json
-}
-
-export async function removeAppFromUserRoles(ctx: BBContext, appId: string) {
+export async function removeAppFromUserRoles(ctx: Ctx, appId: string) {
   const prodAppId = dbCore.getProdAppID(appId)
   const response = await fetch(
     checkSlashesInUrl(env.WORKER_URL + `/api/global/roles/${prodAppId}`),
@@ -130,7 +115,7 @@ export async function removeAppFromUserRoles(ctx: BBContext, appId: string) {
   return checkResponse(response, "remove app role")
 }
 
-export async function allGlobalUsers(ctx: BBContext) {
+export async function allGlobalUsers(ctx: Ctx) {
   const response = await fetch(
     checkSlashesInUrl(env.WORKER_URL + "/api/global/users"),
     // we don't want to use API key when getting self
@@ -139,7 +124,7 @@ export async function allGlobalUsers(ctx: BBContext) {
   return checkResponse(response, "get users", { ctx })
 }
 
-export async function saveGlobalUser(ctx: BBContext) {
+export async function saveGlobalUser(ctx: Ctx) {
   const response = await fetch(
     checkSlashesInUrl(env.WORKER_URL + "/api/global/users"),
     // we don't want to use API key when getting self
@@ -148,7 +133,7 @@ export async function saveGlobalUser(ctx: BBContext) {
   return checkResponse(response, "save user", { ctx })
 }
 
-export async function deleteGlobalUser(ctx: BBContext) {
+export async function deleteGlobalUser(ctx: Ctx) {
   const response = await fetch(
     checkSlashesInUrl(
       env.WORKER_URL + `/api/global/users/${ctx.params.userId}`
@@ -159,7 +144,7 @@ export async function deleteGlobalUser(ctx: BBContext) {
   return checkResponse(response, "delete user", { ctx })
 }
 
-export async function readGlobalUser(ctx: BBContext): Promise<User> {
+export async function readGlobalUser(ctx: Ctx): Promise<User> {
   const response = await fetch(
     checkSlashesInUrl(
       env.WORKER_URL + `/api/global/users/${ctx.params.userId}`
diff --git a/packages/server/src/websockets/builder.ts b/packages/server/src/websockets/builder.ts
index 7f4c9fbd33..d2fdbca20c 100644
--- a/packages/server/src/websockets/builder.ts
+++ b/packages/server/src/websockets/builder.ts
@@ -108,12 +108,12 @@ export default class BuilderSocket extends BaseSocket {
     gridSocket?.emitTableUpdate(ctx, table)
   }
 
-  emitTableDeletion(ctx: any, id: string) {
+  emitTableDeletion(ctx: any, table: Table) {
     this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.TableChange, {
-      id,
+      id: table._id,
       table: null,
     })
-    gridSocket?.emitTableDeletion(ctx, id)
+    gridSocket?.emitTableDeletion(ctx, table)
   }
 
   emitDatasourceUpdate(ctx: any, datasource: Datasource) {
diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts
index f95137ee08..979a0bf125 100644
--- a/packages/server/src/websockets/grid.ts
+++ b/packages/server/src/websockets/grid.ts
@@ -5,7 +5,7 @@ import { auth, permissions } from "@budibase/backend-core"
 import http from "http"
 import Koa from "koa"
 import { getTableId } from "../api/controllers/row/utils"
-import { Row, Table } from "@budibase/types"
+import { Row, Table, View, ViewV2 } from "@budibase/types"
 import { Socket } from "socket.io"
 import { GridSocketEvent } from "@budibase/shared-core"
 import { userAgent } from "koa-useragent"
@@ -20,48 +20,49 @@ export default class GridSocket extends BaseSocket {
 
   async onConnect(socket: Socket) {
     // Initial identification of connected spreadsheet
-    socket.on(
-      GridSocketEvent.SelectTable,
-      async ({ tableId, appId }, callback) => {
-        // Ignore if no table or app specified
-        if (!tableId || !appId) {
-          socket.disconnect(true)
-          return
-        }
+    socket.on(GridSocketEvent.SelectDatasource, async (payload, callback) => {
+      const ds = payload.datasource
+      const appId = payload.appId
+      const resourceId = ds?.type === "table" ? ds?.tableId : ds?.id
 
-        // Create context
-        const ctx = createContext(this.app, socket, {
-          resourceId: tableId,
-          appId,
-        })
-
-        // Construct full middleware chain to assess permissions
-        const middlewares = [
-          userAgent,
-          auth.buildAuthMiddleware([], {
-            publicAllowed: true,
-          }),
-          currentApp,
-          authorized(PermissionType.TABLE, PermissionLevel.READ),
-        ]
-
-        // Run all koa middlewares
-        try {
-          await runMiddlewares(ctx, middlewares, async () => {
-            // Middlewares are finished and we have permission
-            // Join room for this resource
-            const room = `${appId}-${tableId}`
-            await this.joinRoom(socket, room)
-
-            // Reply with all users in current room
-            const sessions = await this.getRoomSessions(room)
-            callback({ users: sessions })
-          })
-        } catch (error) {
-          socket.disconnect(true)
-        }
+      // Ignore if no table or app specified
+      if (!resourceId || !appId) {
+        socket.disconnect(true)
+        return
       }
-    )
+
+      // Create context
+      const ctx = createContext(this.app, socket, {
+        resourceId,
+        appId,
+      })
+
+      // Construct full middleware chain to assess permissions
+      const middlewares = [
+        userAgent,
+        auth.buildAuthMiddleware([], {
+          publicAllowed: true,
+        }),
+        currentApp,
+        authorized(PermissionType.TABLE, PermissionLevel.READ),
+      ]
+
+      // Run all koa middlewares
+      try {
+        await runMiddlewares(ctx, middlewares, async () => {
+          // Middlewares are finished and we have permission
+          // Join room for this resource
+          const room = `${appId}-${resourceId}`
+          await this.joinRoom(socket, room)
+
+          // Reply with all users in current room
+          const sessions = await this.getRoomSessions(room)
+          callback({ users: sessions })
+        })
+      } catch (error) {
+        socket.disconnect(true)
+      }
+    })
 
     // Handle users selecting a new cell
     socket.on(GridSocketEvent.SelectCell, ({ cellId }) => {
@@ -79,30 +80,60 @@ export default class GridSocket extends BaseSocket {
   }
 
   emitRowUpdate(ctx: any, row: Row) {
-    const tableId = getTableId(ctx)
-    const room = `${ctx.appId}-${tableId}`
+    const resourceId = ctx.params?.viewId || getTableId(ctx)
+    const room = `${ctx.appId}-${resourceId}`
     this.emitToRoom(ctx, room, GridSocketEvent.RowChange, {
       id: row._id,
       row,
     })
   }
 
-  emitRowDeletion(ctx: any, id: string) {
-    const tableId = getTableId(ctx)
-    const room = `${ctx.appId}-${tableId}`
-    this.emitToRoom(ctx, room, GridSocketEvent.RowChange, { id, row: null })
+  emitRowDeletion(ctx: any, row: Row) {
+    const resourceId = ctx.params?.viewId || getTableId(ctx)
+    const room = `${ctx.appId}-${resourceId}`
+    this.emitToRoom(ctx, room, GridSocketEvent.RowChange, {
+      id: row._id,
+      row: null,
+    })
   }
 
   emitTableUpdate(ctx: any, table: Table) {
     const room = `${ctx.appId}-${table._id}`
-    this.emitToRoom(ctx, room, GridSocketEvent.TableChange, {
+    this.emitToRoom(ctx, room, GridSocketEvent.DatasourceChange, {
       id: table._id,
-      table,
+      datasource: table,
     })
   }
 
-  emitTableDeletion(ctx: any, id: string) {
-    const room = `${ctx.appId}-${id}`
-    this.emitToRoom(ctx, room, GridSocketEvent.TableChange, { id, table: null })
+  emitTableDeletion(ctx: any, table: Table) {
+    const room = `${ctx.appId}-${table._id}`
+    this.emitToRoom(ctx, room, GridSocketEvent.DatasourceChange, {
+      id: table._id,
+      datasource: null,
+    })
+
+    // When the table is deleted we need to notify all views that they have
+    // also been deleted
+    Object.values(table.views || {})
+      .filter((view: View | ViewV2) => (view as ViewV2).version === 2)
+      .forEach((view: View | ViewV2) => {
+        this.emitViewDeletion(ctx, view as ViewV2)
+      })
+  }
+
+  emitViewUpdate(ctx: any, view: ViewV2) {
+    const room = `${ctx.appId}-${view.id}`
+    this.emitToRoom(ctx, room, GridSocketEvent.DatasourceChange, {
+      id: view.id,
+      datasource: view,
+    })
+  }
+
+  emitViewDeletion(ctx: any, view: ViewV2) {
+    const room = `${ctx.appId}-${view.id}`
+    this.emitToRoom(ctx, room, GridSocketEvent.DatasourceChange, {
+      id: view.id,
+      datasource: null,
+    })
   }
 }
diff --git a/packages/server/src/websockets/websocket.ts b/packages/server/src/websockets/websocket.ts
index 9dea67ef5f..c92f0b6897 100644
--- a/packages/server/src/websockets/websocket.ts
+++ b/packages/server/src/websockets/websocket.ts
@@ -270,7 +270,7 @@ export class BaseSocket {
 
   // Emit an event to everyone in a room, including metadata of whom
   // the originator of the request was
-  emitToRoom(ctx: any, room: string, event: string, payload: any) {
+  emitToRoom(ctx: any, room: string | string[], event: string, payload: any) {
     this.io.in(room).emit(event, {
       ...payload,
       apiSessionId: ctx.headers?.[Header.SESSION_ID],
diff --git a/packages/shared-core/package.json b/packages/shared-core/package.json
index 382f3fa731..8edea4870a 100644
--- a/packages/shared-core/package.json
+++ b/packages/shared-core/package.json
@@ -32,7 +32,18 @@
             "target": "build"
           }
         ]
+      },
+      "dev:builder": {
+        "dependsOn": [
+          {
+            "projects": [
+              "@budibase/types"
+            ],
+            "target": "build"
+          }
+        ]
       }
+
     }
   }
 }
diff --git a/packages/shared-core/src/constants.ts b/packages/shared-core/src/constants.ts
index 864009fbf2..725c246e2f 100644
--- a/packages/shared-core/src/constants.ts
+++ b/packages/shared-core/src/constants.ts
@@ -76,8 +76,8 @@ export enum SocketEvent {
 
 export enum GridSocketEvent {
   RowChange = "RowChange",
-  TableChange = "TableChange",
-  SelectTable = "SelectTable",
+  DatasourceChange = "DatasourceChange",
+  SelectDatasource = "SelectDatasource",
   SelectCell = "SelectCell",
 }
 
diff --git a/packages/shared-core/src/filters.ts b/packages/shared-core/src/filters.ts
index 54e0df92df..2cd6fa8c13 100644
--- a/packages/shared-core/src/filters.ts
+++ b/packages/shared-core/src/filters.ts
@@ -1,4 +1,12 @@
-import { Datasource, FieldType, SortDirection, SortType } from "@budibase/types"
+import {
+  Datasource,
+  FieldType,
+  SortDirection,
+  SortType,
+  SearchFilter,
+  SearchQuery,
+  SearchQueryFields,
+} from "@budibase/types"
 import { OperatorOptions, SqlNumberTypeRangeMap } from "./constants"
 import { deepGet } from "./helpers"
 
@@ -73,13 +81,13 @@ export const NoEmptyFilterStrings = [
   OperatorOptions.NotEquals.value,
   OperatorOptions.Contains.value,
   OperatorOptions.NotContains.value,
-] as (keyof QueryFields)[]
+] as (keyof SearchQueryFields)[]
 
 /**
  * Removes any fields that contain empty strings that would cause inconsistent
  * behaviour with how backend tables are filtered (no value means no filter).
  */
-const cleanupQuery = (query: Query) => {
+const cleanupQuery = (query: SearchQuery) => {
   if (!query) {
     return query
   }
@@ -110,66 +118,12 @@ const removeKeyNumbering = (key: string) => {
   }
 }
 
-type Filter = {
-  operator: keyof Query
-  field: string
-  type: any
-  value: any
-  externalType: keyof typeof SqlNumberTypeRangeMap
-}
-
-type Query = QueryFields & QueryConfig
-type QueryFields = {
-  string?: {
-    [key: string]: string
-  }
-  fuzzy?: {
-    [key: string]: string
-  }
-  range?: {
-    [key: string]: {
-      high: number | string
-      low: number | string
-    }
-  }
-  equal?: {
-    [key: string]: any
-  }
-  notEqual?: {
-    [key: string]: any
-  }
-  empty?: {
-    [key: string]: any
-  }
-  notEmpty?: {
-    [key: string]: any
-  }
-  oneOf?: {
-    [key: string]: any[]
-  }
-  contains?: {
-    [key: string]: any[]
-  }
-  notContains?: {
-    [key: string]: any[]
-  }
-  containsAny?: {
-    [key: string]: any[]
-  }
-}
-
-type QueryConfig = {
-  allOr?: boolean
-}
-
-type QueryFieldsType = keyof QueryFields
-
 /**
  * Builds a lucene JSON query from the filter structure generated in the builder
  * @param filter the builder filter structure
  */
-export const buildLuceneQuery = (filter: Filter[]) => {
-  let query: Query = {
+export const buildLuceneQuery = (filter: SearchFilter[]) => {
+  let query: SearchQuery = {
     string: {},
     fuzzy: {},
     range: {},
@@ -184,7 +138,8 @@ export const buildLuceneQuery = (filter: Filter[]) => {
   }
   if (Array.isArray(filter)) {
     filter.forEach(expression => {
-      let { operator, field, type, value, externalType } = expression
+      let { operator, field, type, value, externalType, onEmptyFilter } =
+        expression
       const isHbs =
         typeof value === "string" && (value.match(HBS_REGEX) || []).length > 0
       // Parse all values into correct types
@@ -192,6 +147,10 @@ export const buildLuceneQuery = (filter: Filter[]) => {
         query.allOr = true
         return
       }
+      if (onEmptyFilter) {
+        query.onEmptyFilter = onEmptyFilter
+        return
+      }
       if (
         type === "datetime" &&
         !isHbs &&
@@ -227,9 +186,13 @@ export const buildLuceneQuery = (filter: Filter[]) => {
       }
       if (operator.startsWith("range") && query.range) {
         const minint =
-          SqlNumberTypeRangeMap[externalType]?.min || Number.MIN_SAFE_INTEGER
+          SqlNumberTypeRangeMap[
+            externalType as keyof typeof SqlNumberTypeRangeMap
+          ]?.min || Number.MIN_SAFE_INTEGER
         const maxint =
-          SqlNumberTypeRangeMap[externalType]?.max || Number.MAX_SAFE_INTEGER
+          SqlNumberTypeRangeMap[
+            externalType as keyof typeof SqlNumberTypeRangeMap
+          ]?.max || Number.MAX_SAFE_INTEGER
         if (!query.range[field]) {
           query.range[field] = {
             low: type === "number" ? minint : "0000-00-00T00:00:00.000Z",
@@ -245,7 +208,7 @@ export const buildLuceneQuery = (filter: Filter[]) => {
         ) {
           query.range[field].high = value
         }
-      } else if (query[operator]) {
+      } else if (query[operator] && operator !== "onEmptyFilter") {
         if (type === "boolean") {
           // Transform boolean filters to cope with null.
           // "equals false" needs to be "not equals true"
@@ -275,7 +238,7 @@ export const buildLuceneQuery = (filter: Filter[]) => {
  * @param docs the data
  * @param query the JSON lucene query
  */
-export const runLuceneQuery = (docs: any[], query?: Query) => {
+export const runLuceneQuery = (docs: any[], query?: SearchQuery) => {
   if (!docs || !Array.isArray(docs)) {
     return []
   }
@@ -289,7 +252,7 @@ export const runLuceneQuery = (docs: any[], query?: Query) => {
   // Iterates over a set of filters and evaluates a fail function against a doc
   const match =
     (
-      type: QueryFieldsType,
+      type: keyof SearchQueryFields,
       failFn: (docValue: any, testValue: any) => boolean
     ) =>
     (doc: any) => {
@@ -456,11 +419,11 @@ export const luceneLimit = (docs: any[], limit: string) => {
   return docs.slice(0, numLimit)
 }
 
-export const hasFilters = (query?: Query) => {
+export const hasFilters = (query?: SearchQuery) => {
   if (!query) {
     return false
   }
-  const skipped = ["allOr"]
+  const skipped = ["allOr", "onEmptyFilter"]
   for (let [key, value] of Object.entries(query)) {
     if (skipped.includes(key) || typeof value !== "object") {
       continue
diff --git a/packages/shared-core/src/sdk/documents/users.ts b/packages/shared-core/src/sdk/documents/users.ts
index 0f0983c6f7..1be8845656 100644
--- a/packages/shared-core/src/sdk/documents/users.ts
+++ b/packages/shared-core/src/sdk/documents/users.ts
@@ -35,6 +35,13 @@ export function isAdminOrBuilder(
   return isBuilder(user, appId) || isAdmin(user)
 }
 
+export function isAdminOrGlobalBuilder(
+  user: User | ContextUser,
+  appId?: string
+): boolean {
+  return isGlobalBuilder(user) || isAdmin(user)
+}
+
 // check if they are a builder within an app (not necessarily a global builder)
 export function hasAppBuilderPermissions(user?: User | ContextUser): boolean {
   if (!user) {
diff --git a/packages/shared-core/tsconfig.build.json b/packages/shared-core/tsconfig.build.json
index 31dc1afc10..5b356a1f08 100644
--- a/packages/shared-core/tsconfig.build.json
+++ b/packages/shared-core/tsconfig.build.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "moduleResolution": "node",
+    "module": "commonjs",
     "lib": ["es2020"],
     "strict": true,
     "noImplicitAny": true,
diff --git a/packages/shared-core/tsconfig.json b/packages/shared-core/tsconfig.json
index 33e37179d7..1e7516a1ab 100644
--- a/packages/shared-core/tsconfig.json
+++ b/packages/shared-core/tsconfig.json
@@ -1,4 +1,10 @@
 {
   "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "rootDir": "src",
+    "composite": true,
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
+  },
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/types/src/api/web/app/index.ts b/packages/types/src/api/web/app/index.ts
index e7b4b87aa9..276d7fa7c1 100644
--- a/packages/types/src/api/web/app/index.ts
+++ b/packages/types/src/api/web/app/index.ts
@@ -4,3 +4,4 @@ export * from "./row"
 export * from "./view"
 export * from "./rows"
 export * from "./table"
+export * from "./permission"
diff --git a/packages/types/src/api/web/app/permission.ts b/packages/types/src/api/web/app/permission.ts
new file mode 100644
index 0000000000..a8ab0e8084
--- /dev/null
+++ b/packages/types/src/api/web/app/permission.ts
@@ -0,0 +1,16 @@
+import { PlanType } from "../../../sdk"
+
+export interface ResourcePermissionInfo {
+  role: string
+  permissionType: string
+  inheritablePermission?: string
+}
+
+export interface GetResourcePermsResponse {
+  permissions: Record<string, ResourcePermissionInfo>
+  requiresPlanToModify?: PlanType
+}
+
+export interface GetDependantResourcesResponse {
+  resourceByType?: Record<string, number>
+}
diff --git a/packages/types/src/api/web/app/rows.ts b/packages/types/src/api/web/app/rows.ts
index fedb8ec146..a99ef0e837 100644
--- a/packages/types/src/api/web/app/rows.ts
+++ b/packages/types/src/api/web/app/rows.ts
@@ -1,5 +1,8 @@
+import { SearchParams } from "../../../sdk"
 import { Row } from "../../../documents"
 
+export interface SaveRowRequest extends Row {}
+
 export interface PatchRowRequest extends Row {
   _id: string
   _rev: string
@@ -8,6 +11,20 @@ export interface PatchRowRequest extends Row {
 
 export interface PatchRowResponse extends Row {}
 
-export interface SearchResponse {
+export interface SearchRowRequest extends Omit<SearchParams, "tableId"> {}
+
+export interface SearchViewRowRequest
+  extends Pick<
+    SearchRowRequest,
+    | "sort"
+    | "sortOrder"
+    | "sortType"
+    | "limit"
+    | "bookmark"
+    | "paginate"
+    | "query"
+  > {}
+
+export interface SearchRowResponse {
   rows: any[]
 }
diff --git a/packages/types/src/api/web/app/table.ts b/packages/types/src/api/web/app/table.ts
index 178f758254..ff288811c9 100644
--- a/packages/types/src/api/web/app/table.ts
+++ b/packages/types/src/api/web/app/table.ts
@@ -1,4 +1,10 @@
-import { Table, TableSchema, View, ViewV2 } from "../../../documents"
+import {
+  Table,
+  TableRequest,
+  TableSchema,
+  View,
+  ViewV2,
+} from "../../../documents"
 
 interface ViewV2Response extends ViewV2 {
   schema: TableSchema
@@ -11,3 +17,7 @@ export interface TableResponse extends Table {
 }
 
 export type FetchTablesResponse = TableResponse[]
+
+export interface SaveTableRequest extends TableRequest {}
+
+export type SaveTableResponse = Table
diff --git a/packages/types/src/api/web/app/view.ts b/packages/types/src/api/web/app/view.ts
index 60b5a01b15..30e7bf77d7 100644
--- a/packages/types/src/api/web/app/view.ts
+++ b/packages/types/src/api/web/app/view.ts
@@ -5,11 +5,10 @@ export interface ViewResponse {
 }
 
 export interface CreateViewRequest
-  extends Omit<ViewV2, "version" | "id" | "columns" | "schemaUI"> {
+  extends Omit<ViewV2, "version" | "id" | "schema"> {
   schema?: Record<string, UIFieldMetadata>
 }
 
-export interface UpdateViewRequest
-  extends Omit<ViewV2, "columns" | "schemaUI"> {
+export interface UpdateViewRequest extends Omit<ViewV2, "schema"> {
   schema?: Record<string, UIFieldMetadata>
 }
diff --git a/packages/types/src/api/web/index.ts b/packages/types/src/api/web/index.ts
index 0e0527eb7f..cba1e04f9a 100644
--- a/packages/types/src/api/web/index.ts
+++ b/packages/types/src/api/web/index.ts
@@ -8,3 +8,4 @@ export * from "./system"
 export * from "./app"
 export * from "./global"
 export * from "./pagination"
+export * from "./searchFilter"
diff --git a/packages/types/src/api/web/searchFilter.ts b/packages/types/src/api/web/searchFilter.ts
new file mode 100644
index 0000000000..6980bc117b
--- /dev/null
+++ b/packages/types/src/api/web/searchFilter.ts
@@ -0,0 +1,54 @@
+import { FieldType } from "../../documents"
+import { EmptyFilterOption } from "../../sdk"
+
+export type SearchFilter = {
+  operator: keyof SearchQuery
+  onEmptyFilter?: EmptyFilterOption
+  field: string
+  type?: FieldType
+  value: any
+  externalType?: string
+}
+
+export type SearchQuery = {
+  allOr?: boolean
+  onEmptyFilter?: EmptyFilterOption
+  string?: {
+    [key: string]: string
+  }
+  fuzzy?: {
+    [key: string]: string
+  }
+  range?: {
+    [key: string]: {
+      high: number | string
+      low: number | string
+    }
+  }
+  equal?: {
+    [key: string]: any
+  }
+  notEqual?: {
+    [key: string]: any
+  }
+  empty?: {
+    [key: string]: any
+  }
+  notEmpty?: {
+    [key: string]: any
+  }
+  oneOf?: {
+    [key: string]: any[]
+  }
+  contains?: {
+    [key: string]: any[]
+  }
+  notContains?: {
+    [key: string]: any[]
+  }
+  containsAny?: {
+    [key: string]: any[]
+  }
+}
+
+export type SearchQueryFields = Omit<SearchQuery, "allOr" | "onEmptyFilter">
diff --git a/packages/types/src/documents/app/automation.ts b/packages/types/src/documents/app/automation.ts
index d1dbbec21b..88ce5e9b9a 100644
--- a/packages/types/src/documents/app/automation.ts
+++ b/packages/types/src/documents/app/automation.ts
@@ -174,12 +174,15 @@ export interface AutomationTrigger extends AutomationTriggerSchema {
   id: string
 }
 
+export enum AutomationStepStatus {
+  NO_ITERATIONS = "no_iterations",
+}
+
 export enum AutomationStatus {
   SUCCESS = "success",
   ERROR = "error",
   STOPPED = "stopped",
   STOPPED_ERROR = "stopped_error",
-  NO_ITERATIONS = "no_iterations",
 }
 
 export interface AutomationResults {
diff --git a/packages/types/src/documents/app/view.ts b/packages/types/src/documents/app/view.ts
index 3fe8b4a500..0de5c69123 100644
--- a/packages/types/src/documents/app/view.ts
+++ b/packages/types/src/documents/app/view.ts
@@ -1,6 +1,5 @@
-import { SortOrder, SortType } from "../../api"
-import { SearchFilters } from "../../sdk"
-import { TableSchema, UIFieldMetadata } from "./table"
+import { SearchFilter, SortOrder, SortType } from "../../api"
+import { UIFieldMetadata } from "./table"
 
 export interface View {
   name: string
@@ -20,14 +19,13 @@ export interface ViewV2 {
   name: string
   primaryDisplay?: string
   tableId: string
-  query?: SearchFilters
+  query?: SearchFilter[]
   sort?: {
     field: string
     order?: SortOrder
     type?: SortType
   }
-  columns?: string[]
-  schemaUI?: Record<string, UIFieldMetadata>
+  schema?: Record<string, UIFieldMetadata>
 }
 
 export type ViewSchema = ViewCountOrSumSchema | ViewStatisticsSchema
diff --git a/packages/types/src/documents/document.ts b/packages/types/src/documents/document.ts
index 6ba318269b..03e01907b8 100644
--- a/packages/types/src/documents/document.ts
+++ b/packages/types/src/documents/document.ts
@@ -39,6 +39,12 @@ export enum DocumentType {
   AUDIT_LOG = "al",
 }
 
+// these documents don't really exist, they are part of other
+// documents or enriched into existence as part of get requests
+export enum VirtualDocumentType {
+  VIEW = "view",
+}
+
 export interface Document {
   _id?: string
   _rev?: string
diff --git a/packages/types/src/documents/global/userGroup.ts b/packages/types/src/documents/global/userGroup.ts
index b74e59c020..e6b70a160c 100644
--- a/packages/types/src/documents/global/userGroup.ts
+++ b/packages/types/src/documents/global/userGroup.ts
@@ -7,6 +7,10 @@ export interface UserGroup extends Document {
   color: string
   users?: GroupUser[]
   roles?: UserGroupRoles
+  // same structure as users
+  builder?: {
+    apps: string[]
+  }
   createdAt?: number
   scimInfo?: {
     externalId: string
diff --git a/packages/types/src/sdk/datasources.ts b/packages/types/src/sdk/datasources.ts
index 2391f6e878..d6a0d4a7c8 100644
--- a/packages/types/src/sdk/datasources.ts
+++ b/packages/types/src/sdk/datasources.ts
@@ -166,6 +166,12 @@ export interface IntegrationBase {
   delete?(query: any): Promise<any[] | any>
   testConnection?(): Promise<ConnectionInfo>
   getExternalSchema?(): Promise<string>
+  defineTypeCastingFromSchema?(schema: {
+    [key: string]: {
+      name: string
+      type: string
+    }
+  }): void
 }
 
 export interface DatasourcePlus extends IntegrationBase {
diff --git a/packages/types/src/sdk/index.ts b/packages/types/src/sdk/index.ts
index e4b5778ed9..0eab2ba556 100644
--- a/packages/types/src/sdk/index.ts
+++ b/packages/types/src/sdk/index.ts
@@ -19,3 +19,4 @@ export * from "./user"
 export * from "./cli"
 export * from "./websocket"
 export * from "./permissions"
+export * from "./row"
diff --git a/packages/types/src/sdk/licensing/feature.ts b/packages/types/src/sdk/licensing/feature.ts
index 20f6813409..bd3a6583bf 100644
--- a/packages/types/src/sdk/licensing/feature.ts
+++ b/packages/types/src/sdk/licensing/feature.ts
@@ -11,6 +11,8 @@ export enum Feature {
   SYNC_AUTOMATIONS = "syncAutomations",
   APP_BUILDERS = "appBuilders",
   OFFLINE = "offline",
+  USER_ROLE_PUBLIC_API = "userRolePublicApi",
+  VIEW_PERMISSIONS = "viewPermissions",
 }
 
 export type PlanFeatures = { [key in PlanType]: Feature[] | undefined }
diff --git a/packages/types/src/sdk/permissions.ts b/packages/types/src/sdk/permissions.ts
index 9e51e4c7b4..c855bbd219 100644
--- a/packages/types/src/sdk/permissions.ts
+++ b/packages/types/src/sdk/permissions.ts
@@ -14,6 +14,13 @@ export enum PermissionType {
   WEBHOOK = "webhook",
   BUILDER = "builder",
   GLOBAL_BUILDER = "globalBuilder",
-  VIEW = "view",
   QUERY = "query",
+  VIEW = "view",
+  LEGACY_VIEW = "legacy_view",
+}
+
+export enum PermissionSource {
+  EXPLICIT = "EXPLICIT",
+  INHERITED = "INHERITED",
+  BASE = "BASE",
 }
diff --git a/packages/types/src/sdk/row.ts b/packages/types/src/sdk/row.ts
new file mode 100644
index 0000000000..7e4b89e0f7
--- /dev/null
+++ b/packages/types/src/sdk/row.ts
@@ -0,0 +1,16 @@
+import { SortOrder, SortType } from "../api"
+import { SearchFilters } from "./search"
+
+export interface SearchParams {
+  tableId: string
+  paginate?: boolean
+  query: SearchFilters
+  bookmark?: string
+  limit?: number
+  sort?: string
+  sortOrder?: SortOrder
+  sortType?: SortType
+  version?: string
+  disableEscaping?: boolean
+  fields?: string[]
+}
diff --git a/packages/types/src/sdk/search.ts b/packages/types/src/sdk/search.ts
index ae9aec66a2..35fd148c05 100644
--- a/packages/types/src/sdk/search.ts
+++ b/packages/types/src/sdk/search.ts
@@ -4,6 +4,7 @@ import { SortType } from "../api"
 
 export interface SearchFilters {
   allOr?: boolean
+  onEmptyFilter?: EmptyFilterOption
   string?: {
     [key: string]: string
   }
@@ -99,3 +100,8 @@ export interface SqlQuery {
   sql: string
   bindings?: string[]
 }
+
+export enum EmptyFilterOption {
+  RETURN_ALL = "all",
+  RETURN_NONE = "none",
+}
diff --git a/packages/types/tsconfig.build.json b/packages/types/tsconfig.build.json
index f2c4c7667b..8df63fac57 100644
--- a/packages/types/tsconfig.build.json
+++ b/packages/types/tsconfig.build.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "moduleResolution": "node",
+    "module": "commonjs",
     "lib": ["es2020"],
     "strict": true,
     "noImplicitAny": true,
diff --git a/packages/worker/Dockerfile b/packages/worker/Dockerfile
index dd98f3b7f8..4230ee86f8 100644
--- a/packages/worker/Dockerfile
+++ b/packages/worker/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14-alpine
+FROM node:18-alpine
 
 LABEL com.centurylinklabs.watchtower.lifecycle.pre-check="scripts/watchtower-hooks/pre-check.sh"
 LABEL com.centurylinklabs.watchtower.lifecycle.pre-update="scripts/watchtower-hooks/pre-update.sh"
diff --git a/packages/worker/package.json b/packages/worker/package.json
index a71e9519d9..3b66df264e 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -102,5 +102,20 @@
     "tsconfig-paths": "4.0.0",
     "typescript": "4.7.3",
     "update-dotenv": "1.1.1"
+  },
+  "nx": {
+    "targets": {
+      "dev:builder": {
+        "dependsOn": [
+          {
+            "comment": "Required for pro usage when submodule not loaded",
+            "projects": [
+              "@budibase/backend-core"
+            ],
+            "target": "build"
+          }
+        ]
+      }
+    }
   }
 }
diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index 7167d91b23..47dbef964e 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -48,7 +48,7 @@ export async function generateAPIKey(ctx: any) {
   } catch (err) {
     devInfo = { _id: id, userId }
   }
-  devInfo.apiKey = await apiKey
+  devInfo.apiKey = apiKey
   await db.put(devInfo)
   ctx.body = cleanupDevInfo(devInfo)
 }
@@ -63,7 +63,7 @@ export async function fetchAPIKey(ctx: any) {
     devInfo = {
       _id: id,
       userId: ctx.user._id,
-      apiKey: await newApiKey(),
+      apiKey: newApiKey(),
     }
     await db.put(devInfo)
   }
diff --git a/packages/worker/src/api/controllers/global/users.ts b/packages/worker/src/api/controllers/global/users.ts
index a8207ea89e..6d3a13aa4e 100644
--- a/packages/worker/src/api/controllers/global/users.ts
+++ b/packages/worker/src/api/controllers/global/users.ts
@@ -25,11 +25,11 @@ import {
 import {
   accounts,
   cache,
+  ErrorCode,
   events,
   migrations,
-  tenancy,
   platform,
-  ErrorCode,
+  tenancy,
 } from "@budibase/backend-core"
 import { checkAnyUserExists } from "../../../utilities/users"
 import { isEmailConfigured } from "../../../utilities/email"
@@ -272,15 +272,15 @@ export const onboardUsers = async (ctx: Ctx<InviteUsersRequest>) => {
         password,
         forceResetPassword: true,
         roles: invite.userInfo.apps,
-        admin: { global: false },
-        builder: { global: false },
+        admin: invite.userInfo.admin,
+        builder: invite.userInfo.builder,
         tenantId: tenancy.getTenantId(),
       }
     })
     let bulkCreateReponse = await userSdk.db.bulkCreate(users, [])
 
     // Apply temporary credentials
-    let createWithCredentials = {
+    ctx.body = {
       ...bulkCreateReponse,
       successful: bulkCreateReponse?.successful.map(user => {
         return {
@@ -290,8 +290,6 @@ export const onboardUsers = async (ctx: Ctx<InviteUsersRequest>) => {
       }),
       created: true,
     }
-
-    ctx.body = createWithCredentials
   } else {
     ctx.throw(400, "User onboarding failed")
   }
@@ -370,6 +368,12 @@ export const updateInvite = async (ctx: any) => {
     ...invite,
   }
 
+  if (!updateBody?.builder?.apps && updated.info?.builder?.apps) {
+    updated.info.builder.apps = []
+  } else if (updateBody?.builder) {
+    updated.info.builder = updateBody.builder
+  }
+
   if (!updateBody?.apps || !Object.keys(updateBody?.apps).length) {
     updated.info.apps = []
   } else {
@@ -394,17 +398,24 @@ export const inviteAccept = async (
     // info is an extension of the user object that was stored by global
     const { email, info }: any = await checkInviteCode(inviteCode)
     const user = await tenancy.doInTenant(info.tenantId, async () => {
-      let request = {
+      let request: any = {
         firstName,
         lastName,
         password,
         email,
+        admin: { global: info?.admin?.global || false },
         roles: info.apps,
         tenantId: info.tenantId,
       }
+      let builder: { global: boolean; apps?: string[] } = {
+        global: info?.builder?.global || false,
+      }
 
+      if (info?.builder?.apps) {
+        builder.apps = info.builder.apps
+        request.builder = builder
+      }
       delete info.apps
-
       request = {
         ...request,
         ...info,
diff --git a/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts b/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts
index f98ebbe15c..228715b860 100644
--- a/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts
@@ -33,7 +33,9 @@ describe("/api/global/users/:userId/app/builder", () => {
         MOCK_APP_ID,
         400
       )
-      expect(resp.body.message).toContain("Feature not enabled")
+      expect(resp.body.message).toContain(
+        "appBuilders are not currently enabled"
+      )
     })
   })
 
diff --git a/packages/worker/src/api/routes/global/tests/scim.spec.ts b/packages/worker/src/api/routes/global/tests/scim.spec.ts
index 2eda482ed2..5686e39fa8 100644
--- a/packages/worker/src/api/routes/global/tests/scim.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/scim.spec.ts
@@ -10,6 +10,8 @@ import {
 import { TestConfiguration } from "../../../../tests"
 import { events } from "@budibase/backend-core"
 
+jest.setTimeout(30000)
+
 mocks.licenses.useScimIntegration()
 
 describe("scim", () => {
diff --git a/packages/worker/src/environment.ts b/packages/worker/src/environment.ts
index 6ef6dab03c..c357ceb65b 100644
--- a/packages/worker/src/environment.ts
+++ b/packages/worker/src/environment.ts
@@ -31,6 +31,8 @@ function parseIntSafe(number: any) {
 }
 
 const environment = {
+  // features
+  WORKER_FEATURES: process.env.WORKER_FEATURES,
   // auth
   MINIO_ACCESS_KEY: process.env.MINIO_ACCESS_KEY,
   MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
diff --git a/packages/worker/src/features.ts b/packages/worker/src/features.ts
new file mode 100644
index 0000000000..075b3b81ca
--- /dev/null
+++ b/packages/worker/src/features.ts
@@ -0,0 +1,13 @@
+import { features } from "@budibase/backend-core"
+import env from "./environment"
+
+enum WorkerFeature {}
+
+const featureList: WorkerFeature[] = features.processFeatureEnvVar(
+  Object.values(WorkerFeature),
+  env.WORKER_FEATURES
+)
+
+export function isFeatureEnabled(feature: WorkerFeature) {
+  return featureList.includes(feature)
+}
diff --git a/packages/worker/src/tests/jestEnv.ts b/packages/worker/src/tests/jestEnv.ts
index fc92bbbf23..9153676b8e 100644
--- a/packages/worker/src/tests/jestEnv.ts
+++ b/packages/worker/src/tests/jestEnv.ts
@@ -9,4 +9,4 @@ process.env.MINIO_SECRET_KEY = "test"
 process.env.PLATFORM_URL = "http://localhost:10000"
 process.env.INTERNAL_API_KEY = "tet"
 process.env.DISABLE_ACCOUNT_PORTAL = "0"
-process.env.REDIS_PASSWORD = "budibase"
+process.env.MOCK_REDIS = "1"
diff --git a/qa-core/src/integrations/validators/dynamodb.integration.spec.ts b/qa-core/src/integrations/validators/dynamodb.integration.spec.ts
index c885f64213..d1cec7bca1 100644
--- a/qa-core/src/integrations/validators/dynamodb.integration.spec.ts
+++ b/qa-core/src/integrations/validators/dynamodb.integration.spec.ts
@@ -28,8 +28,8 @@ describe("datasource validators", () => {
           8000
         )}`,
       }
-      env._set("AWS_ACCESS_KEY_ID", "mocked_key")
-      env._set("AWS_SECRET_ACCESS_KEY", "mocked_secret")
+      env._set("AWS_ACCESS_KEY_ID", "mockedkey")
+      env._set("AWS_SECRET_ACCESS_KEY", "mockedsecret")
     })
 
     it("test valid connection string", async () => {
diff --git a/scripts/build.js b/scripts/build.js
index 3d1f65ff76..a3a377593a 100755
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -15,14 +15,21 @@ const { nodeExternalsPlugin } = require("esbuild-node-externals")
 
 var argv = require("minimist")(process.argv.slice(2))
 
-function runBuild(entry, outfile) {
+function runBuild(
+  entry,
+  outfile,
+  opts = { skipMeta: false, bundle: true, silent: false }
+) {
   const isDev = process.env.NODE_ENV !== "production"
   const tsconfig = argv["p"] || `tsconfig.build.json`
   const tsconfigPathPluginContent = JSON.parse(
     fs.readFileSync(tsconfig, "utf-8")
   )
 
-  if (!fs.existsSync("../pro/src")) {
+  if (
+    !fs.existsSync("../pro/src") &&
+    tsconfigPathPluginContent.compilerOptions?.paths
+  ) {
     // If we don't have pro, we cannot bundle backend-core.
     // Otherwise, the main context will not be shared between libraries
     delete tsconfigPathPluginContent?.compilerOptions?.paths?.[
@@ -33,30 +40,28 @@ function runBuild(entry, outfile) {
     ]
   }
 
+  const metafile = !opts.skipMeta
+  const { bundle } = opts
+
   const sharedConfig = {
     entryPoints: [entry],
-    bundle: true,
+    bundle,
     minify: !isDev,
     sourcemap: isDev,
     tsconfig,
+    format: opts?.forcedFormat,
     plugins: [
       TsconfigPathsPlugin({ tsconfig: tsconfigPathPluginContent }),
       nodeExternalsPlugin(),
     ],
-    target: "node14",
     preserveSymlinks: true,
     loader: {
       ".svelte": "copy",
     },
-    metafile: true,
-    external: [
-      "deasync",
-      "mock-aws-s3",
-      "nock",
-      "pino",
-      "koa-pino-logger",
-      "bull",
-    ],
+    metafile,
+    external: bundle
+      ? ["deasync", "mock-aws-s3", "nock", "pino", "koa-pino-logger", "bull"]
+      : undefined,
   }
 
   build({
@@ -69,16 +74,19 @@ function runBuild(entry, outfile) {
         fs.copyFileSync(file, `${process.cwd()}/dist/${path.basename(file)}`)
       }
 
-      console.log(
-        "\x1b[32m%s\x1b[0m",
-        `Build successfully in ${(Date.now() - start) / 1000} seconds`
-      )
+      !opts.silent &&
+        console.log(
+          "\x1b[32m%s\x1b[0m",
+          `Build successfully in ${(Date.now() - start) / 1000} seconds`
+        )
     })
 
-    fs.writeFileSync(
-      `dist/${path.basename(outfile)}.meta.json`,
-      JSON.stringify(result.metafile)
-    )
+    if (metafile) {
+      fs.writeFileSync(
+        `dist/${path.basename(outfile)}.meta.json`,
+        JSON.stringify(result.metafile)
+      )
+    }
   })
 }
 
diff --git a/scripts/link-dependencies.sh b/scripts/link-dependencies.sh
deleted file mode 100755
index ed42f29b4a..0000000000
--- a/scripts/link-dependencies.sh
+++ /dev/null
@@ -1,77 +0,0 @@
-echo "Linking backend-core"
-cd packages/backend-core
-yarn unlink
-yarn link
-cd -
-
-echo "Linking string-templates"
-cd packages/string-templates
-yarn unlink
-yarn link
-cd -
-
-echo "Linking types"
-cd packages/types
-yarn unlink
-yarn link
-cd -
-
-echo "Linking bbui"
-cd packages/bbui
-yarn unlink
-yarn link
-cd -
-
-echo "Linking frontend-core"
-cd packages/frontend-core
-yarn unlink
-yarn link
-cd -
-
-echo "Linking shared-core"
-cd packages/shared-core
-yarn unlink
-yarn link
-cd -
-
-if [ -d packages/pro/src ]; then
-  pro_loaded_locally=true
-else
-  pro_loaded_locally=false
-fi
-
-if [ $pro_loaded_locally = true ]; then
-  echo "Linking pro"
-  cd packages/pro
-  yarn unlink
-  yarn link
-  cd -
-fi
-
-if [ -d "../account-portal" ]; then
-  cd ../account-portal
-  echo "Bootstrapping account-portal"
-  yarn bootstrap
-  
-  cd packages/server
-  echo "Linking backend-core to account-portal"
-  yarn link "@budibase/backend-core"
-
-  echo "Linking string-templates to account-portal"
-  yarn link "@budibase/string-templates"
-
-  echo "Linking types to account-portal"
-  yarn link "@budibase/types"
-
-  if [ $pro_loaded_locally = true ]; then
-    echo "Linking pro to account-portal"
-    yarn link "@budibase/pro"
-  fi
-
-  cd ../ui
-  echo "Linking bbui to account-portal"
-  yarn link "@budibase/bbui"
-
-  echo "Linking frontend-core to account-portal"
-  yarn link "@budibase/frontend-core"
-fi
diff --git a/scripts/scopeBackend.sh b/scripts/scopeBackend.sh
deleted file mode 100755
index c8903b7df9..0000000000
--- a/scripts/scopeBackend.sh
+++ /dev/null
@@ -1,16 +0,0 @@
-#!/bin/bash
-
-# Define the packages
-PACKAGES=("@budibase/backend-core" "@budibase/worker" "@budibase/server" "@budibase/string-templates" "@budibase/types" "@budibase/shared-core")
-
-# Generate the scope arguments
-SCOPE_ARGS=""
-for PACKAGE in "${PACKAGES[@]}"; do
-  SCOPE_ARGS+="--scope $PACKAGE "
-done
-
-# Run the commands with the scope arguments
-for COMMAND in "$@"; do
-  echo "Running: $COMMAND $SCOPE_ARGS"
-  yarn $COMMAND $SCOPE_ARGS
-done
diff --git a/yarn.lock b/yarn.lock
index 827c94a176..4f5e0db2e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10283,7 +10283,7 @@ denque@^1.1.0:
   resolved "https://registry.yarnpkg.com/denque/-/denque-1.5.1.tgz#07f670e29c9a78f8faecb2566a1e2c11929c5cbf"
   integrity sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==
 
-denque@^2.0.1, denque@^2.1.0:
+denque@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/denque/-/denque-2.1.0.tgz#e93e1a6569fb5e66f16a3c2a2964617d349d6ab1"
   integrity sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==
@@ -16986,6 +16986,11 @@ long@^5.0.0:
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.1.tgz#e27595d0083d103d2fa2c20c7699f8e0c92b897f"
   integrity sha512-GKSNGeNAtw8IryjjkhZxuKB3JzlcLTwjtiQCHKvqQet81I93kXslhDQruGI/QsddO83mcDToBVy7GqGS/zYf/A==
 
+long@^5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
+  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
+
 lookpath@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/lookpath/-/lookpath-1.1.0.tgz#932d68371a2f0b4a5644f03d6a2b4728edba96d2"
@@ -17052,6 +17057,11 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
+lru-cache@^8.0.0:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-8.0.5.tgz#983fe337f3e176667f8e567cfcce7cb064ea214e"
+  integrity sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==
+
 lru-cache@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-9.0.1.tgz#ac061ed291f8b9adaca2b085534bb1d3b61bef83"
@@ -17952,17 +17962,17 @@ mute-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-1.0.0.tgz#e31bd9fe62f0aed23520aa4324ea6671531e013e"
   integrity sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==
 
-mysql2@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/mysql2/-/mysql2-2.3.3.tgz#944f3deca4b16629052ff8614fbf89d5552545a0"
-  integrity sha512-wxJUev6LgMSgACDkb/InIFxDprRa6T95+VEoR+xPvtngtccNH2dGjEB/fVZ8yg1gWv1510c9CvXuJHi5zUm0ZA==
+mysql2@3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/mysql2/-/mysql2-3.5.2.tgz#a06050e1514e9ac15711a8b883ffd51cb44b2dc8"
+  integrity sha512-cptobmhYkYeTBIFp2c0piw2+gElpioga1rUw5UidHvo8yaHijMZoo8A3zyBVoo/K71f7ZFvrShA9iMIy9dCzCA==
   dependencies:
-    denque "^2.0.1"
+    denque "^2.1.0"
     generate-function "^2.3.1"
     iconv-lite "^0.6.3"
-    long "^4.0.0"
-    lru-cache "^6.0.0"
-    named-placeholders "^1.1.2"
+    long "^5.2.1"
+    lru-cache "^8.0.0"
+    named-placeholders "^1.1.3"
     seq-queue "^0.0.5"
     sqlstring "^2.3.2"
 
@@ -17975,7 +17985,7 @@ mz@^2.4.0, mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-named-placeholders@^1.1.2:
+named-placeholders@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/named-placeholders/-/named-placeholders-1.1.3.tgz#df595799a36654da55dda6152ba7a137ad1d9351"
   integrity sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==