diff --git a/lerna.json b/lerna.json
index 4fd5161891..7d14875c97 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.11.42",
+  "version": "2.11.44",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/backend-core/src/objectStore/buckets/app.ts b/packages/backend-core/src/objectStore/buckets/app.ts
index be9fddeaa6..43bc965c65 100644
--- a/packages/backend-core/src/objectStore/buckets/app.ts
+++ b/packages/backend-core/src/objectStore/buckets/app.ts
@@ -1,37 +1,50 @@
 import env from "../../environment"
 import * as objectStore from "../objectStore"
 import * as cloudfront from "../cloudfront"
+import qs from "querystring"
+import { DEFAULT_TENANT_ID, getTenantId } from "../../context"
+
+export function clientLibraryPath(appId: string) {
+  return `${objectStore.sanitizeKey(appId)}/budibase-client.js`
+}
 
 /**
- * In production the client library is stored in the object store, however in development
- * we use the symlinked version produced by lerna, located in node modules. We link to this
- * via a specific endpoint (under /api/assets/client).
- * @param appId In production we need the appId to look up the correct bucket, as the
- * version of the client lib may differ between apps.
- * @param version The version to retrieve.
- * @return The URL to be inserted into appPackage response or server rendered
- * app index file.
+ * Previously we used to serve the client library directly from Cloudfront, however
+ * due to issues with the domain we were unable to continue doing this - keeping
+ * incase we are able to switch back to CDN path again in future.
  */
-export const clientLibraryUrl = (appId: string, version: string) => {
-  if (env.isProd()) {
-    let file = `${objectStore.sanitizeKey(appId)}/budibase-client.js`
-    if (env.CLOUDFRONT_CDN) {
-      // append app version to bust the cache
-      if (version) {
-        file += `?v=${version}`
-      }
-      // don't need to use presigned for client with cloudfront
-      // file is public
-      return cloudfront.getUrl(file)
-    } else {
-      return objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, file)
+export function clientLibraryCDNUrl(appId: string, version: string) {
+  let file = clientLibraryPath(appId)
+  if (env.CLOUDFRONT_CDN) {
+    // append app version to bust the cache
+    if (version) {
+      file += `?v=${version}`
     }
+    // don't need to use presigned for client with cloudfront
+    // file is public
+    return cloudfront.getUrl(file)
   } else {
-    return `/api/assets/client`
+    return objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, file)
   }
 }
 
-export const getAppFileUrl = (s3Key: string) => {
+export function clientLibraryUrl(appId: string, version: string) {
+  let tenantId, qsParams: { appId: string; version: string; tenantId?: string }
+  try {
+    tenantId = getTenantId()
+  } finally {
+    qsParams = {
+      appId,
+      version,
+    }
+  }
+  if (tenantId && tenantId !== DEFAULT_TENANT_ID) {
+    qsParams.tenantId = tenantId
+  }
+  return `/api/assets/client?${qs.encode(qsParams)}`
+}
+
+export function getAppFileUrl(s3Key: string) {
   if (env.CLOUDFRONT_CDN) {
     return cloudfront.getPresignedUrl(s3Key)
   } else {
diff --git a/packages/backend-core/src/objectStore/buckets/plugins.ts b/packages/backend-core/src/objectStore/buckets/plugins.ts
index f7721afb23..6f1b7116ae 100644
--- a/packages/backend-core/src/objectStore/buckets/plugins.ts
+++ b/packages/backend-core/src/objectStore/buckets/plugins.ts
@@ -6,7 +6,7 @@ import { Plugin } from "@budibase/types"
 
 // URLS
 
-export const enrichPluginURLs = (plugins: Plugin[]) => {
+export function enrichPluginURLs(plugins: Plugin[]) {
   if (!plugins || !plugins.length) {
     return []
   }
@@ -17,12 +17,12 @@ export const enrichPluginURLs = (plugins: Plugin[]) => {
   })
 }
 
-const getPluginJSUrl = (plugin: Plugin) => {
+function getPluginJSUrl(plugin: Plugin) {
   const s3Key = getPluginJSKey(plugin)
   return getPluginUrl(s3Key)
 }
 
-const getPluginIconUrl = (plugin: Plugin): string | undefined => {
+function getPluginIconUrl(plugin: Plugin): string | undefined {
   const s3Key = getPluginIconKey(plugin)
   if (!s3Key) {
     return
@@ -30,7 +30,7 @@ const getPluginIconUrl = (plugin: Plugin): string | undefined => {
   return getPluginUrl(s3Key)
 }
 
-const getPluginUrl = (s3Key: string) => {
+function getPluginUrl(s3Key: string) {
   if (env.CLOUDFRONT_CDN) {
     return cloudfront.getPresignedUrl(s3Key)
   } else {
@@ -40,11 +40,11 @@ const getPluginUrl = (s3Key: string) => {
 
 // S3 KEYS
 
-export const getPluginJSKey = (plugin: Plugin) => {
+export function getPluginJSKey(plugin: Plugin) {
   return getPluginS3Key(plugin, "plugin.min.js")
 }
 
-export const getPluginIconKey = (plugin: Plugin) => {
+export function getPluginIconKey(plugin: Plugin) {
   // stored iconUrl is deprecated - hardcode to icon.svg in this case
   const iconFileName = plugin.iconUrl ? "icon.svg" : plugin.iconFileName
   if (!iconFileName) {
@@ -53,12 +53,12 @@ export const getPluginIconKey = (plugin: Plugin) => {
   return getPluginS3Key(plugin, iconFileName)
 }
 
-const getPluginS3Key = (plugin: Plugin, fileName: string) => {
+function getPluginS3Key(plugin: Plugin, fileName: string) {
   const s3Key = getPluginS3Dir(plugin.name)
   return `${s3Key}/${fileName}`
 }
 
-export const getPluginS3Dir = (pluginName: string) => {
+export function getPluginS3Dir(pluginName: string) {
   let s3Key = `${pluginName}`
   if (env.MULTI_TENANCY) {
     const tenantId = context.getTenantId()
diff --git a/packages/backend-core/src/objectStore/buckets/tests/app.spec.ts b/packages/backend-core/src/objectStore/buckets/tests/app.spec.ts
index aaa07ec9d3..cbbbee6255 100644
--- a/packages/backend-core/src/objectStore/buckets/tests/app.spec.ts
+++ b/packages/backend-core/src/objectStore/buckets/tests/app.spec.ts
@@ -1,5 +1,4 @@
 import * as app from "../app"
-import { getAppFileUrl } from "../app"
 import { testEnv } from "../../../../tests/extra"
 
 describe("app", () => {
@@ -7,6 +6,15 @@ describe("app", () => {
     testEnv.nodeJest()
   })
 
+  function baseCheck(url: string, tenantId?: string) {
+    expect(url).toContain("/api/assets/client")
+    if (tenantId) {
+      expect(url).toContain(`tenantId=${tenantId}`)
+    }
+    expect(url).toContain("appId=app_123")
+    expect(url).toContain("version=2.0.0")
+  }
+
   describe("clientLibraryUrl", () => {
     function getClientUrl() {
       return app.clientLibraryUrl("app_123/budibase-client.js", "2.0.0")
@@ -20,31 +28,19 @@ describe("app", () => {
       it("gets url in dev", () => {
         testEnv.nodeDev()
         const url = getClientUrl()
-        expect(url).toBe("/api/assets/client")
-      })
-
-      it("gets url with embedded minio", () => {
-        testEnv.withMinio()
-        const url = getClientUrl()
-        expect(url).toBe(
-          "/files/signed/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-        )
+        baseCheck(url)
       })
 
       it("gets url with custom S3", () => {
         testEnv.withS3()
         const url = getClientUrl()
-        expect(url).toBe(
-          "http://s3.example.com/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-        )
+        baseCheck(url)
       })
 
       it("gets url with cloudfront + s3", () => {
         testEnv.withCloudfront()
         const url = getClientUrl()
-        expect(url).toBe(
-          "http://cf.example.com/app_123/budibase-client.js/budibase-client.js?v=2.0.0"
-        )
+        baseCheck(url)
       })
     })
 
@@ -57,7 +53,7 @@ describe("app", () => {
         testEnv.nodeDev()
         await testEnv.withTenant(tenantId => {
           const url = getClientUrl()
-          expect(url).toBe("/api/assets/client")
+          baseCheck(url, tenantId)
         })
       })
 
@@ -65,9 +61,7 @@ describe("app", () => {
         await testEnv.withTenant(tenantId => {
           testEnv.withMinio()
           const url = getClientUrl()
-          expect(url).toBe(
-            "/files/signed/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-          )
+          baseCheck(url, tenantId)
         })
       })
 
@@ -75,9 +69,7 @@ describe("app", () => {
         await testEnv.withTenant(tenantId => {
           testEnv.withS3()
           const url = getClientUrl()
-          expect(url).toBe(
-            "http://s3.example.com/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-          )
+          baseCheck(url, tenantId)
         })
       })
 
@@ -85,9 +77,7 @@ describe("app", () => {
         await testEnv.withTenant(tenantId => {
           testEnv.withCloudfront()
           const url = getClientUrl()
-          expect(url).toBe(
-            "http://cf.example.com/app_123/budibase-client.js/budibase-client.js?v=2.0.0"
-          )
+          baseCheck(url, tenantId)
         })
       })
     })
diff --git a/packages/backend-core/src/objectStore/objectStore.ts b/packages/backend-core/src/objectStore/objectStore.ts
index c36a09915e..76d2dd6689 100644
--- a/packages/backend-core/src/objectStore/objectStore.ts
+++ b/packages/backend-core/src/objectStore/objectStore.ts
@@ -1,6 +1,6 @@
 const sanitize = require("sanitize-s3-objectkey")
 import AWS from "aws-sdk"
-import stream from "stream"
+import stream, { Readable } from "stream"
 import fetch from "node-fetch"
 import tar from "tar-fs"
 import zlib from "zlib"
@@ -66,10 +66,10 @@ export function sanitizeBucket(input: string) {
  * @return an S3 object store object, check S3 Nodejs SDK for usage.
  * @constructor
  */
-export const ObjectStore = (
+export function ObjectStore(
   bucket: string,
   opts: { presigning: boolean } = { presigning: false }
-) => {
+) {
   const config: any = {
     s3ForcePathStyle: true,
     signatureVersion: "v4",
@@ -104,7 +104,7 @@ export const ObjectStore = (
  * Given an object store and a bucket name this will make sure the bucket exists,
  * if it does not exist then it will create it.
  */
-export const makeSureBucketExists = async (client: any, bucketName: string) => {
+export async function makeSureBucketExists(client: any, bucketName: string) {
   bucketName = sanitizeBucket(bucketName)
   try {
     await client
@@ -139,13 +139,13 @@ export const makeSureBucketExists = async (client: any, bucketName: string) => {
  * Uploads the contents of a file given the required parameters, useful when
  * temp files in use (for example file uploaded as an attachment).
  */
-export const upload = async ({
+export async function upload({
   bucket: bucketName,
   filename,
   path,
   type,
   metadata,
-}: UploadParams) => {
+}: UploadParams) {
   const extension = filename.split(".").pop()
   const fileBytes = fs.readFileSync(path)
 
@@ -180,12 +180,12 @@ export const upload = async ({
  * Similar to the upload function but can be used to send a file stream
  * through to the object store.
  */
-export const streamUpload = async (
+export async function streamUpload(
   bucketName: string,
   filename: string,
   stream: any,
   extra = {}
-) => {
+) {
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
 
@@ -215,7 +215,7 @@ export const streamUpload = async (
  * retrieves the contents of a file from the object store, if it is a known content type it
  * will be converted, otherwise it will be returned as a buffer stream.
  */
-export const retrieve = async (bucketName: string, filepath: string) => {
+export async function retrieve(bucketName: string, filepath: string) {
   const objectStore = ObjectStore(bucketName)
   const params = {
     Bucket: sanitizeBucket(bucketName),
@@ -230,7 +230,7 @@ export const retrieve = async (bucketName: string, filepath: string) => {
   }
 }
 
-export const listAllObjects = async (bucketName: string, path: string) => {
+export async function listAllObjects(bucketName: string, path: string) {
   const objectStore = ObjectStore(bucketName)
   const list = (params: ListParams = {}) => {
     return objectStore
@@ -261,11 +261,11 @@ export const listAllObjects = async (bucketName: string, path: string) => {
 /**
  * Generate a presigned url with a default TTL of 1 hour
  */
-export const getPresignedUrl = (
+export function getPresignedUrl(
   bucketName: string,
   key: string,
   durationSeconds: number = 3600
-) => {
+) {
   const objectStore = ObjectStore(bucketName, { presigning: true })
   const params = {
     Bucket: sanitizeBucket(bucketName),
@@ -291,7 +291,7 @@ export const getPresignedUrl = (
 /**
  * Same as retrieval function but puts to a temporary file.
  */
-export const retrieveToTmp = async (bucketName: string, filepath: string) => {
+export async function retrieveToTmp(bucketName: string, filepath: string) {
   bucketName = sanitizeBucket(bucketName)
   filepath = sanitizeKey(filepath)
   const data = await retrieve(bucketName, filepath)
@@ -300,7 +300,7 @@ export const retrieveToTmp = async (bucketName: string, filepath: string) => {
   return outputPath
 }
 
-export const retrieveDirectory = async (bucketName: string, path: string) => {
+export async function retrieveDirectory(bucketName: string, path: string) {
   let writePath = join(budibaseTempDir(), v4())
   fs.mkdirSync(writePath)
   const objects = await listAllObjects(bucketName, path)
@@ -324,7 +324,7 @@ export const retrieveDirectory = async (bucketName: string, path: string) => {
 /**
  * Delete a single file.
  */
-export const deleteFile = async (bucketName: string, filepath: string) => {
+export async function deleteFile(bucketName: string, filepath: string) {
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
   const params = {
@@ -334,7 +334,7 @@ export const deleteFile = async (bucketName: string, filepath: string) => {
   return objectStore.deleteObject(params).promise()
 }
 
-export const deleteFiles = async (bucketName: string, filepaths: string[]) => {
+export async function deleteFiles(bucketName: string, filepaths: string[]) {
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
   const params = {
@@ -349,10 +349,10 @@ export const deleteFiles = async (bucketName: string, filepaths: string[]) => {
 /**
  * Delete a path, including everything within.
  */
-export const deleteFolder = async (
+export async function deleteFolder(
   bucketName: string,
   folder: string
-): Promise<any> => {
+): Promise<any> {
   bucketName = sanitizeBucket(bucketName)
   folder = sanitizeKey(folder)
   const client = ObjectStore(bucketName)
@@ -383,11 +383,11 @@ export const deleteFolder = async (
   }
 }
 
-export const uploadDirectory = async (
+export async function uploadDirectory(
   bucketName: string,
   localPath: string,
   bucketPath: string
-) => {
+) {
   bucketName = sanitizeBucket(bucketName)
   let uploads = []
   const files = fs.readdirSync(localPath, { withFileTypes: true })
@@ -404,11 +404,11 @@ export const uploadDirectory = async (
   return files
 }
 
-export const downloadTarballDirect = async (
+export async function downloadTarballDirect(
   url: string,
   path: string,
   headers = {}
-) => {
+) {
   path = sanitizeKey(path)
   const response = await fetch(url, { headers })
   if (!response.ok) {
@@ -418,11 +418,11 @@ export const downloadTarballDirect = async (
   await streamPipeline(response.body, zlib.createUnzip(), tar.extract(path))
 }
 
-export const downloadTarball = async (
+export async function downloadTarball(
   url: string,
   bucketName: string,
   path: string
-) => {
+) {
   bucketName = sanitizeBucket(bucketName)
   path = sanitizeKey(path)
   const response = await fetch(url)
@@ -438,3 +438,17 @@ export const downloadTarball = async (
   // return the temporary path incase there is a use for it
   return tmpPath
 }
+
+export async function getReadStream(
+  bucketName: string,
+  path: string
+): Promise<Readable> {
+  bucketName = sanitizeBucket(bucketName)
+  path = sanitizeKey(path)
+  const client = ObjectStore(bucketName)
+  const params = {
+    Bucket: bucketName,
+    Key: path,
+  }
+  return client.getObject(params).createReadStream()
+}
diff --git a/packages/backend-core/src/users/users.ts b/packages/backend-core/src/users/users.ts
index d259d5b560..6237c23972 100644
--- a/packages/backend-core/src/users/users.ts
+++ b/packages/backend-core/src/users/users.ts
@@ -21,8 +21,9 @@ import {
   User,
   DatabaseQueryOpts,
 } from "@budibase/types"
-import * as context from "../context"
 import { getGlobalDB } from "../context"
+import * as context from "../context"
+import { isCreator } from "./utils"
 
 type GetOpts = { cleanup?: boolean }
 
@@ -286,6 +287,19 @@ export async function getUserCount() {
   return response.total_rows
 }
 
+export async function getCreatorCount() {
+  let creators = 0
+  async function iterate(startPage?: string) {
+    const page = await paginatedUsers({ bookmark: startPage })
+    creators += page.data.filter(isCreator).length
+    if (page.hasNextPage) {
+      await iterate(page.nextPage)
+    }
+  }
+  await iterate()
+  return creators
+}
+
 // used to remove the builder/admin permissions, for processing the
 // user as an app user (they may have some specific role/group
 export function removePortalUserPermissions(user: User | ContextUser) {
diff --git a/packages/backend-core/src/users/utils.ts b/packages/backend-core/src/users/utils.ts
index af0e8e10c7..0ef4b77998 100644
--- a/packages/backend-core/src/users/utils.ts
+++ b/packages/backend-core/src/users/utils.ts
@@ -10,6 +10,7 @@ import { getAccountByTenantId } from "../accounts"
 // extract from shared-core to make easily accessible from backend-core
 export const isBuilder = sdk.users.isBuilder
 export const isAdmin = sdk.users.isAdmin
+export const isCreator = sdk.users.isCreator
 export const isGlobalBuilder = sdk.users.isGlobalBuilder
 export const isAdminOrBuilder = sdk.users.isAdminOrBuilder
 export const hasAdminPermissions = sdk.users.hasAdminPermissions
diff --git a/packages/backend-core/tests/core/utilities/structures/licenses.ts b/packages/backend-core/tests/core/utilities/structures/licenses.ts
index 5cce84edfd..0e34f2e9bb 100644
--- a/packages/backend-core/tests/core/utilities/structures/licenses.ts
+++ b/packages/backend-core/tests/core/utilities/structures/licenses.ts
@@ -72,6 +72,11 @@ export function quotas(): Quotas {
           value: 1,
           triggers: [],
         },
+        creators: {
+          name: "Creators",
+          value: 1,
+          triggers: [],
+        },
         userGroups: {
           name: "User Groups",
           value: 1,
diff --git a/packages/backend-core/tests/core/utilities/structures/quotas.ts b/packages/backend-core/tests/core/utilities/structures/quotas.ts
index e82117053f..8d0b05fe1e 100644
--- a/packages/backend-core/tests/core/utilities/structures/quotas.ts
+++ b/packages/backend-core/tests/core/utilities/structures/quotas.ts
@@ -1,6 +1,6 @@
 import { MonthlyQuotaName, QuotaUsage } from "@budibase/types"
 
-export const usage = (): QuotaUsage => {
+export const usage = (users: number = 0, creators: number = 0): QuotaUsage => {
   return {
     _id: "usage_quota",
     quotaReset: new Date().toISOString(),
@@ -58,7 +58,8 @@ export const usage = (): QuotaUsage => {
     usageQuota: {
       apps: 0,
       plugins: 0,
-      users: 0,
+      users,
+      creators,
       userGroups: 0,
       rows: 0,
       triggers: {},
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 529d1144ee..2610d6106c 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -106,6 +106,13 @@
           name: fieldName,
         }
       }
+
+      // Delete numeric only widths as these are grid widths and should be
+      // ignored
+      const width = fixedSchema[fieldName].width
+      if (width != null && `${width}`.trim().match(/^[0-9]+$/)) {
+        delete fixedSchema[fieldName].width
+      }
     })
     return fixedSchema
   }
diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js
index 16b972058e..522dbae416 100644
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/packages/builder/src/builderStore/componentUtils.js
@@ -5,6 +5,7 @@ import {
   encodeJSBinding,
   findHBSBlocks,
 } from "@budibase/string-templates"
+import { capitalise } from "helpers"
 
 /**
  * Recursively searches for a specific component ID
@@ -235,3 +236,13 @@ export const makeComponentUnique = component => {
   // Recurse on all children
   return JSON.parse(definition)
 }
+
+export const getComponentText = component => {
+  if (component?._instanceName) {
+    return component._instanceName
+  }
+  const type =
+    component._component.replace("@budibase/standard-components/", "") ||
+    "component"
+  return capitalise(type)
+}
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 91ea3f98ad..3d5938c174 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -16,6 +16,7 @@
   export let closeButtonIcon = "Close"
 
   $: customHeaderContent = $$slots["panel-header-content"]
+  $: customTitleContent = $$slots["panel-title-content"]
 </script>
 
 <div
@@ -33,7 +34,11 @@
       <Icon name={icon} />
     {/if}
     <div class="title">
-      <Body size="S">{title}</Body>
+      {#if customTitleContent}
+        <slot name="panel-title-content" />
+      {:else}
+        <Body size="S">{title || ""}</Body>
+      {/if}
     </div>
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
@@ -134,4 +139,7 @@
   .custom-content-wrap {
     border-bottom: var(--border-light);
   }
+  .title {
+    display: flex;
+  }
 </style>
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 8e3079101a..9e53f7f1cf 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
@@ -16,7 +16,11 @@
 <DrawerContent>
   <div class="container">
     <Layout noPadding gap="S">
-      <Input bind:value={column.width} label="Width" placeholder="Auto" />
+      <Input
+        bind:value={column.width}
+        label="Width (must include a unit like px or %)"
+        placeholder="Auto"
+      />
       <Select
         label="Alignment"
         bind:value={column.align}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index afcada4138..17eadb99bd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -1,10 +1,12 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { store, selectedComponent, selectedScreen } from "builderStore"
+  import { getComponentText } from "builderStore/componentUtils"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
+  import { notifications } from "@budibase/bbui"
 
   import {
     getBindableProperties,
@@ -13,6 +15,14 @@
   import { ActionButton } from "@budibase/bbui"
   import { capitalise } from "helpers"
 
+  const onUpdateName = async value => {
+    try {
+      await store.actions.components.updateSetting("_instanceName", value)
+    } catch (error) {
+      notifications.error("Error updating component name")
+    }
+  }
+
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
@@ -39,6 +49,22 @@
 {#if $selectedComponent}
   {#key $selectedComponent._id}
     <Panel {title} icon={componentDefinition?.icon} borderLeft wide>
+      <span class="panel-title-content" slot="panel-title-content">
+        <input
+          class="input"
+          value={title}
+          {title}
+          placeholder={getComponentText(componentInstance)}
+          on:keypress={e => {
+            if (e.key.toLowerCase() === "enter") {
+              e.target.blur()
+            }
+          }}
+          on:change={e => {
+            onUpdateName(e.target.value)
+          }}
+        />
+      </span>
       <span slot="panel-header-content">
         <div class="settings-tabs">
           {#each tabs as tab}
@@ -90,4 +116,24 @@
     padding: 0 var(--spacing-l);
     padding-bottom: var(--spacing-l);
   }
+  .input {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    background-color: transparent;
+    border: none;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .panel-title-content {
+    display: contents;
+  }
+  .input:focus {
+    outline: none;
+  }
+  input::placeholder {
+    color: var(--spectrum-global-color-gray-600);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 639cef332e..40353bef52 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -1,6 +1,6 @@
 <script>
   import { helpers } from "@budibase/shared-core"
-  import { Input, DetailSummary, notifications } from "@budibase/bbui"
+  import { DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
@@ -16,7 +16,6 @@
   export let isScreen = false
   export let onUpdateSetting
   export let showSectionTitle = true
-  export let showInstanceName = true
 
   $: sections = getSections(componentInstance, componentDefinition, isScreen)
 
@@ -140,15 +139,6 @@
         />
       {/if}
       <div class="settings">
-        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen && showInstanceName}
-          <PropertyControl
-            control={Input}
-            label="Name"
-            key="_instanceName"
-            value={componentInstance._instanceName}
-            onChange={val => updateSetting({ key: "_instanceName" }, val)}
-          />
-        {/if}
         {#each section.settings as setting (setting.key)}
           {#if setting.visible}
             <PropertyControl
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 0e23f82946..8adc6cb5d4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -2,14 +2,16 @@
   import { store, userSelectedResourceMap } from "builderStore"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
-  import { capitalise } from "helpers"
   import { notifications } from "@budibase/bbui"
   import {
     selectedComponentPath,
     selectedComponent,
     selectedScreen,
   } from "builderStore"
-  import { findComponentPath } from "builderStore/componentUtils"
+  import {
+    findComponentPath,
+    getComponentText,
+  } from "builderStore/componentUtils"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
 
@@ -35,16 +37,6 @@
     return false
   }
 
-  const getComponentText = component => {
-    if (component._instanceName) {
-      return component._instanceName
-    }
-    const type =
-      component._component.replace("@budibase/standard-components/", "") ||
-      "component"
-    return capitalise(type)
-  }
-
   const getComponentIcon = component => {
     const def = store.actions.components.getDefinition(component?._component)
     return def?.icon
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index ae97cd30c6..7094ce88e9 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5305,6 +5305,12 @@
         "key": "title",
         "nested": true
       },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "description",
+        "nested": true
+      },
       {
         "section": true,
         "dependsOn": {
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 2639c77edd..342194d5e2 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -81,6 +81,7 @@
       sortOrder: $fetch.sortOrder,
     },
     limit,
+    primaryDisplay: $fetch.definition?.primaryDisplay,
   }
 
   const createFetch = datasource => {
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index 5d57d10ab6..f905227af9 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -12,6 +12,7 @@
   export let fields
   export let labelPosition
   export let title
+  export let description
   export let showDeleteButton
   export let showSaveButton
   export let saveButtonLabel
@@ -98,6 +99,7 @@
     fields: fieldsOrDefault,
     labelPosition,
     title,
+    description,
     saveButtonLabel: saveLabel,
     deleteButtonLabel: deleteLabel,
     schema,
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index ec5daa21b1..e65d2cf90b 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -11,6 +11,7 @@
   export let fields
   export let labelPosition
   export let title
+  export let description
   export let saveButtonLabel
   export let deleteButtonLabel
   export let schema
@@ -160,55 +161,71 @@
         <BlockComponent
           type="container"
           props={{
-            direction: "row",
-            hAlign: "stretch",
-            vAlign: "center",
-            gap: "M",
-            wrap: true,
+            direction: "column",
+            gap: "S",
           }}
           order={0}
         >
           <BlockComponent
-            type="heading"
-            props={{ text: title || "" }}
+            type="container"
+            props={{
+              direction: "row",
+              hAlign: "stretch",
+              vAlign: "center",
+              gap: "M",
+              wrap: true,
+            }}
             order={0}
-          />
-          {#if renderButtons}
+          >
             <BlockComponent
-              type="container"
-              props={{
-                direction: "row",
-                hAlign: "stretch",
-                vAlign: "center",
-                gap: "M",
-                wrap: true,
-              }}
+              type="heading"
+              props={{ text: title || "" }}
+              order={0}
+            />
+            {#if renderButtons}
+              <BlockComponent
+                type="container"
+                props={{
+                  direction: "row",
+                  hAlign: "stretch",
+                  vAlign: "center",
+                  gap: "M",
+                  wrap: true,
+                }}
+                order={1}
+              >
+                {#if renderDeleteButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: deleteButtonLabel,
+                      onClick: onDelete,
+                      quiet: true,
+                      type: "secondary",
+                    }}
+                    order={0}
+                  />
+                {/if}
+                {#if renderSaveButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: saveButtonLabel,
+                      onClick: onSave,
+                      type: "cta",
+                    }}
+                    order={1}
+                  />
+                {/if}
+              </BlockComponent>
+            {/if}
+          </BlockComponent>
+          {#if description}
+            <BlockComponent
+              type="text"
+              props={{ text: description }}
               order={1}
-            >
-              {#if renderDeleteButton}
-                <BlockComponent
-                  type="button"
-                  props={{
-                    text: deleteButtonLabel,
-                    onClick: onDelete,
-                    quiet: true,
-                    type: "secondary",
-                  }}
-                  order={0}
-                />
-              {/if}
-              {#if renderSaveButton}
-                <BlockComponent
-                  type="button"
-                  props={{
-                    text: saveButtonLabel,
-                    onClick: onSave,
-                    type: "cta",
-                  }}
-                  order={1}
-                />
-              {/if}
-            </BlockComponent>
+            />
           {/if}
         </BlockComponent>
       {/if}
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index 8ef25846f8..a4cc0dc0eb 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -32,7 +32,8 @@
   $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
   $: fullSchema = dataProvider?.schema ?? {}
-  $: fields = getFields(fullSchema, columns, false)
+  $: primaryDisplay = dataProvider?.primaryDisplay
+  $: fields = getFields(fullSchema, columns, false, primaryDisplay)
   $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
   $: setSorting = getAction(
     dataProvider?.id,
@@ -55,18 +56,13 @@
     }
   }
 
-  const getFields = (schema, customColumns, showAutoColumns) => {
-    // Check for an invalid column selection
-    let invalid = false
-    customColumns?.forEach(column => {
-      const columnName = typeof column === "string" ? column : column.name
-      if (schema[columnName] == null) {
-        invalid = true
-      }
-    })
-
-    // Use column selection if it exists
-    if (!invalid && customColumns?.length) {
+  const getFields = (
+    schema,
+    customColumns,
+    showAutoColumns,
+    primaryDisplay
+  ) => {
+    if (customColumns?.length) {
       return customColumns
     }
 
@@ -74,13 +70,38 @@
     let columns = []
     let autoColumns = []
     Object.entries(schema).forEach(([field, fieldSchema]) => {
+      if (fieldSchema.visible === false) {
+        return
+      }
       if (!fieldSchema?.autocolumn) {
         columns.push(field)
       } else if (showAutoColumns) {
         autoColumns.push(field)
       }
     })
-    return columns.concat(autoColumns)
+
+    // Sort columns to respect grid metadata
+    const allCols = columns.concat(autoColumns)
+    return allCols.sort((a, b) => {
+      if (a === primaryDisplay) {
+        return -1
+      }
+      if (b === primaryDisplay) {
+        return 1
+      }
+      const aOrder = schema[a].order
+      const bOrder = schema[b].order
+      if (aOrder === bOrder) {
+        return 0
+      }
+      if (aOrder == null) {
+        return 1
+      }
+      if (bOrder == null) {
+        return -1
+      }
+      return aOrder < bOrder ? -1 : 1
+    })
   }
 
   const getFilteredSchema = (schema, fields, hasChildren) => {
diff --git a/packages/pro b/packages/pro
index f7e7cffe42..d24c0dc3a3 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit f7e7cffe422086d9449c2075a74a378c16caff9d
+Subproject commit d24c0dc3a30014cbe61860252aa48104cad36376
diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index bbf9dd34f5..984cb16c06 100644
--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@@ -16,7 +16,7 @@ import AWS from "aws-sdk"
 import fs from "fs"
 import sdk from "../../../sdk"
 import * as pro from "@budibase/pro"
-import { App } from "@budibase/types"
+import { App, Ctx } from "@budibase/types"
 
 const send = require("koa-send")
 
@@ -39,7 +39,7 @@ async function prepareUpload({ s3Key, bucket, metadata, file }: any) {
   }
 }
 
-export const toggleBetaUiFeature = async function (ctx: any) {
+export const toggleBetaUiFeature = async function (ctx: Ctx) {
   const cookieName = `beta:${ctx.params.feature}`
 
   if (ctx.cookies.get(cookieName)) {
@@ -67,16 +67,14 @@ export const toggleBetaUiFeature = async function (ctx: any) {
   }
 }
 
-export const serveBuilder = async function (ctx: any) {
+export const serveBuilder = async function (ctx: Ctx) {
   const builderPath = join(TOP_LEVEL_PATH, "builder")
   await send(ctx, ctx.file, { root: builderPath })
 }
 
-export const uploadFile = async function (ctx: any) {
-  let files =
-    ctx.request.files.file.length > 1
-      ? Array.from(ctx.request.files.file)
-      : [ctx.request.files.file]
+export const uploadFile = async function (ctx: Ctx) {
+  const file = ctx.request?.files?.file
+  let files = file && Array.isArray(file) ? Array.from(file) : [file]
 
   const uploads = files.map(async (file: any) => {
     const fileExtension = [...file.name.split(".")].pop()
@@ -93,14 +91,14 @@ export const uploadFile = async function (ctx: any) {
   ctx.body = await Promise.all(uploads)
 }
 
-export const deleteObjects = async function (ctx: any) {
+export const deleteObjects = async function (ctx: Ctx) {
   ctx.body = await objectStore.deleteFiles(
     ObjectStoreBuckets.APPS,
     ctx.request.body.keys
   )
 }
 
-export const serveApp = async function (ctx: any) {
+export const serveApp = async function (ctx: Ctx) {
   const bbHeaderEmbed =
     ctx.request.get("x-budibase-embed")?.toLowerCase() === "true"
 
@@ -181,7 +179,7 @@ export const serveApp = async function (ctx: any) {
   }
 }
 
-export const serveBuilderPreview = async function (ctx: any) {
+export const serveBuilderPreview = async function (ctx: Ctx) {
   const db = context.getAppDB({ skip_setup: true })
   const appInfo = await db.get<App>(DocumentType.APP_METADATA)
 
@@ -197,18 +195,30 @@ export const serveBuilderPreview = async function (ctx: any) {
   }
 }
 
-export const serveClientLibrary = async function (ctx: any) {
+export const serveClientLibrary = async function (ctx: Ctx) {
+  const appId = context.getAppId() || (ctx.request.query.appId as string)
   let rootPath = join(NODE_MODULES_PATH, "@budibase", "client", "dist")
-  // incase running from TS directly
-  if (env.isDev() && !fs.existsSync(rootPath)) {
-    rootPath = join(require.resolve("@budibase/client"), "..")
+  if (!appId) {
+    ctx.throw(400, "No app ID provided - cannot fetch client library.")
+  }
+  if (env.isProd()) {
+    ctx.body = await objectStore.getReadStream(
+      ObjectStoreBuckets.APPS,
+      objectStore.clientLibraryPath(appId!)
+    )
+    ctx.set("Content-Type", "application/javascript")
+  } else if (env.isDev()) {
+    // incase running from TS directly
+    const tsPath = join(require.resolve("@budibase/client"), "..")
+    return send(ctx, "budibase-client.js", {
+      root: !fs.existsSync(rootPath) ? tsPath : rootPath,
+    })
+  } else {
+    ctx.throw(500, "Unable to retrieve client library.")
   }
-  return send(ctx, "budibase-client.js", {
-    root: rootPath,
-  })
 }
 
-export const getSignedUploadURL = async function (ctx: any) {
+export const getSignedUploadURL = async function (ctx: Ctx) {
   // Ensure datasource is valid
   let datasource
   try {
@@ -247,7 +257,7 @@ export const getSignedUploadURL = async function (ctx: any) {
       const params = { Bucket: bucket, Key: key }
       signedUrl = s3.getSignedUrl("putObject", params)
       publicUrl = `https://${bucket}.s3.${awsRegion}.amazonaws.com/${key}`
-    } catch (error) {
+    } catch (error: any) {
       ctx.throw(400, error)
     }
   }
diff --git a/packages/server/src/api/routes/static.ts b/packages/server/src/api/routes/static.ts
index 0012764b40..bd3f1aba2e 100644
--- a/packages/server/src/api/routes/static.ts
+++ b/packages/server/src/api/routes/static.ts
@@ -27,15 +27,9 @@ router.param("file", async (file: any, ctx: any, next: any) => {
   return next()
 })
 
-// only used in development for retrieving the client library,
-// in production the client lib is always stored in the object store.
-if (env.isDev()) {
-  router.get("/api/assets/client", controller.serveClientLibrary)
-}
-
 router
-  // TODO: for now this builder endpoint is not authorized/secured, will need to be
   .get("/builder/:file*", controller.serveBuilder)
+  .get("/api/assets/client", controller.serveClientLibrary)
   .post("/api/attachments/process", authorized(BUILDER), controller.uploadFile)
   .post(
     "/api/attachments/delete",
diff --git a/packages/server/src/migrations/functions/syncQuotas.ts b/packages/server/src/migrations/functions/syncQuotas.ts
index 67f38ba929..83a7670e78 100644
--- a/packages/server/src/migrations/functions/syncQuotas.ts
+++ b/packages/server/src/migrations/functions/syncQuotas.ts
@@ -3,6 +3,7 @@ import * as syncApps from "./usageQuotas/syncApps"
 import * as syncRows from "./usageQuotas/syncRows"
 import * as syncPlugins from "./usageQuotas/syncPlugins"
 import * as syncUsers from "./usageQuotas/syncUsers"
+import * as syncCreators from "./usageQuotas/syncCreators"
 
 /**
  * Synchronise quotas to the state of the db.
@@ -13,5 +14,6 @@ export const run = async () => {
     await syncRows.run()
     await syncPlugins.run()
     await syncUsers.run()
+    await syncCreators.run()
   })
 }
diff --git a/packages/server/src/migrations/functions/usageQuotas/syncCreators.ts b/packages/server/src/migrations/functions/usageQuotas/syncCreators.ts
new file mode 100644
index 0000000000..ce53be925a
--- /dev/null
+++ b/packages/server/src/migrations/functions/usageQuotas/syncCreators.ts
@@ -0,0 +1,13 @@
+import { users } from "@budibase/backend-core"
+import { quotas } from "@budibase/pro"
+import { QuotaUsageType, StaticQuotaName } from "@budibase/types"
+
+export const run = async () => {
+  const creatorCount = await users.getCreatorCount()
+  console.log(`Syncing creator count: ${creatorCount}`)
+  await quotas.setUsage(
+    creatorCount,
+    StaticQuotaName.CREATORS,
+    QuotaUsageType.STATIC
+  )
+}
diff --git a/packages/server/src/migrations/functions/usageQuotas/tests/syncCreators.spec.ts b/packages/server/src/migrations/functions/usageQuotas/tests/syncCreators.spec.ts
new file mode 100644
index 0000000000..75fa9f217e
--- /dev/null
+++ b/packages/server/src/migrations/functions/usageQuotas/tests/syncCreators.spec.ts
@@ -0,0 +1,26 @@
+import TestConfig from "../../../../tests/utilities/TestConfiguration"
+import * as syncCreators from "../syncCreators"
+import { quotas } from "@budibase/pro"
+
+describe("syncCreators", () => {
+  let config = new TestConfig(false)
+
+  beforeEach(async () => {
+    await config.init()
+  })
+
+  afterAll(config.end)
+
+  it("syncs creators", async () => {
+    return config.doInContext(null, async () => {
+      await config.createUser({ admin: true })
+
+      await syncCreators.run()
+
+      const usageDoc = await quotas.getQuotaUsage()
+      // default + additional creator
+      const creatorsCount = 2
+      expect(usageDoc.usageQuota.creators).toBe(creatorsCount)
+    })
+  })
+})
diff --git a/packages/shared-core/src/sdk/documents/users.ts b/packages/shared-core/src/sdk/documents/users.ts
index 03d86daa85..b58994aa46 100644
--- a/packages/shared-core/src/sdk/documents/users.ts
+++ b/packages/shared-core/src/sdk/documents/users.ts
@@ -6,6 +6,7 @@ import {
   InternalTable,
 } from "@budibase/types"
 import { getProdAppID } from "./applications"
+import * as _ from "lodash/fp"
 
 // checks if a user is specifically a builder, given an app ID
 export function isBuilder(user: User | ContextUser, appId?: string): boolean {
@@ -58,6 +59,18 @@ export function hasAppBuilderPermissions(user?: User | ContextUser): boolean {
   return !isGlobalBuilder && appLength != null && appLength > 0
 }
 
+export function hasAppCreatorPermissions(user?: User | ContextUser): boolean {
+  if (!user) {
+    return false
+  }
+  return _.flow(
+    _.get("roles"),
+    _.values,
+    _.find(x => ["CREATOR", "ADMIN"].includes(x)),
+    x => !!x
+  )(user)
+}
+
 // checks if a user is capable of building any app
 export function hasBuilderPermissions(user?: User | ContextUser): boolean {
   if (!user) {
@@ -74,6 +87,18 @@ export function hasAdminPermissions(user?: User | ContextUser): boolean {
   return !!user.admin?.global
 }
 
+export function isCreator(user?: User | ContextUser): boolean {
+  if (!user) {
+    return false
+  }
+  return (
+    isGlobalBuilder(user) ||
+    hasAdminPermissions(user) ||
+    hasAppBuilderPermissions(user) ||
+    hasAppCreatorPermissions(user)
+  )
+}
+
 export function getGlobalUserID(userId?: string): string | undefined {
   if (typeof userId !== "string") {
     return userId
diff --git a/packages/types/src/documents/global/quotas.ts b/packages/types/src/documents/global/quotas.ts
index 61410f7435..4eb1168f7d 100644
--- a/packages/types/src/documents/global/quotas.ts
+++ b/packages/types/src/documents/global/quotas.ts
@@ -32,6 +32,7 @@ export interface StaticUsage {
   [StaticQuotaName.APPS]: number
   [StaticQuotaName.PLUGINS]: number
   [StaticQuotaName.USERS]: number
+  [StaticQuotaName.CREATORS]: number
   [StaticQuotaName.USER_GROUPS]: number
   [StaticQuotaName.ROWS]: number
   triggers: {
diff --git a/packages/types/src/sdk/licensing/quota.ts b/packages/types/src/sdk/licensing/quota.ts
index 73afa1ed05..85700f167b 100644
--- a/packages/types/src/sdk/licensing/quota.ts
+++ b/packages/types/src/sdk/licensing/quota.ts
@@ -14,6 +14,7 @@ export enum StaticQuotaName {
   ROWS = "rows",
   APPS = "apps",
   USERS = "users",
+  CREATORS = "creators",
   USER_GROUPS = "userGroups",
   PLUGINS = "plugins",
 }
@@ -67,6 +68,7 @@ export type StaticQuotas = {
   [StaticQuotaName.ROWS]: Quota
   [StaticQuotaName.APPS]: Quota
   [StaticQuotaName.USERS]: Quota
+  [StaticQuotaName.CREATORS]: Quota
   [StaticQuotaName.USER_GROUPS]: Quota
   [StaticQuotaName.PLUGINS]: Quota
 }
diff --git a/packages/types/src/sdk/migrations.ts b/packages/types/src/sdk/migrations.ts
index 4667ed0c8f..0692b27f8e 100644
--- a/packages/types/src/sdk/migrations.ts
+++ b/packages/types/src/sdk/migrations.ts
@@ -46,7 +46,7 @@ export enum MigrationName {
   GLOBAL_INFO_SYNC_USERS = "global_info_sync_users",
   TABLE_SETTINGS_LINKS_TO_ACTIONS = "table_settings_links_to_actions",
   // increment this number to re-activate this migration
-  SYNC_QUOTAS = "sync_quotas_1",
+  SYNC_QUOTAS = "sync_quotas_2",
 }
 
 export interface MigrationDefinition {
diff --git a/qa-core/package.json b/qa-core/package.json
index 3c789d89e6..d266ca9def 100644
--- a/qa-core/package.json
+++ b/qa-core/package.json
@@ -17,7 +17,7 @@
     "test:notify": "node scripts/testResultsWebhook",
     "test:cloud:prod": "yarn run test --testPathIgnorePatterns=\\.integration\\.",
     "test:cloud:qa": "yarn run test",
-    "test:self:ci": "yarn run test --testPathIgnorePatterns=\\.integration\\. \\.cloud\\.",
+    "test:self:ci": "yarn run test --testPathIgnorePatterns=\\.integration\\. \\.cloud\\. \\.license\\.",
     "serve:test:self:ci": "start-server-and-test dev:built http://localhost:4001/health test:self:ci",
     "serve": "start-server-and-test dev:built http://localhost:4001/health",
     "dev:built": "cd ../ && yarn dev:built"
diff --git a/qa-core/src/account-api/api/AccountInternalAPI.ts b/qa-core/src/account-api/api/AccountInternalAPI.ts
index 3813ad2c9e..f89bf556f2 100644
--- a/qa-core/src/account-api/api/AccountInternalAPI.ts
+++ b/qa-core/src/account-api/api/AccountInternalAPI.ts
@@ -1,5 +1,5 @@
 import AccountInternalAPIClient from "./AccountInternalAPIClient"
-import { AccountAPI, LicenseAPI, AuthAPI } from "./apis"
+import { AccountAPI, LicenseAPI, AuthAPI, StripeAPI } from "./apis"
 import { State } from "../../types"
 
 export default class AccountInternalAPI {
@@ -8,11 +8,13 @@ export default class AccountInternalAPI {
   auth: AuthAPI
   accounts: AccountAPI
   licenses: LicenseAPI
+  stripe: StripeAPI
 
   constructor(state: State) {
     this.client = new AccountInternalAPIClient(state)
     this.auth = new AuthAPI(this.client)
     this.accounts = new AccountAPI(this.client)
     this.licenses = new LicenseAPI(this.client)
+    this.stripe = new StripeAPI(this.client)
   }
 }
diff --git a/qa-core/src/account-api/api/apis/LicenseAPI.ts b/qa-core/src/account-api/api/apis/LicenseAPI.ts
index 44579f867b..b371f00f05 100644
--- a/qa-core/src/account-api/api/apis/LicenseAPI.ts
+++ b/qa-core/src/account-api/api/apis/LicenseAPI.ts
@@ -2,21 +2,19 @@ import AccountInternalAPIClient from "../AccountInternalAPIClient"
 import {
   Account,
   CreateOfflineLicenseRequest,
+  GetLicenseKeyResponse,
   GetOfflineLicenseResponse,
   UpdateLicenseRequest,
 } from "@budibase/types"
 import { Response } from "node-fetch"
 import BaseAPI from "./BaseAPI"
 import { APIRequestOpts } from "../../../types"
-
 export default class LicenseAPI extends BaseAPI {
   client: AccountInternalAPIClient
-
   constructor(client: AccountInternalAPIClient) {
     super()
     this.client = client
   }
-
   async updateLicense(
     accountId: string,
     body: UpdateLicenseRequest,
@@ -29,9 +27,7 @@ export default class LicenseAPI extends BaseAPI {
       })
     }, opts)
   }
-
   // TODO: Better approach for setting tenant id header
-
   async createOfflineLicense(
     accountId: string,
     tenantId: string,
@@ -51,7 +47,6 @@ export default class LicenseAPI extends BaseAPI {
     expect(response.status).toBe(opts.status ? opts.status : 201)
     return response
   }
-
   async getOfflineLicense(
     accountId: string,
     tenantId: string,
@@ -69,4 +64,74 @@ export default class LicenseAPI extends BaseAPI {
     expect(response.status).toBe(opts.status ? opts.status : 200)
     return [response, json]
   }
+  async getLicenseKey(
+    opts: { status?: number } = {}
+  ): Promise<[Response, GetLicenseKeyResponse]> {
+    const [response, json] = await this.client.get(`/api/license/key`)
+    expect(response.status).toBe(opts.status || 200)
+    return [response, json]
+  }
+  async activateLicense(
+    apiKey: string,
+    tenantId: string,
+    licenseKey: string,
+    opts: APIRequestOpts = { status: 200 }
+  ) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/license/activate`, {
+        body: {
+          apiKey: apiKey,
+          tenantId: tenantId,
+          licenseKey: licenseKey,
+        },
+      })
+    }, opts)
+  }
+  async regenerateLicenseKey(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/license/key/regenerate`, {})
+    }, opts)
+  }
+
+  async getPlans(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/plans`)
+    }, opts)
+  }
+
+  async updatePlan(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.put(`/api/license/plan`)
+    }, opts)
+  }
+
+  async refreshAccountLicense(
+    accountId: string,
+    opts: { status?: number } = {}
+  ): Promise<Response> {
+    const [response, json] = await this.client.post(
+      `/api/accounts/${accountId}/license/refresh`,
+      {
+        internal: true,
+      }
+    )
+    expect(response.status).toBe(opts.status ? opts.status : 201)
+    return response
+  }
+
+  async getLicenseUsage(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/license/usage`)
+    }, opts)
+  }
+
+  async licenseUsageTriggered(
+    opts: { status?: number } = {}
+  ): Promise<Response> {
+    const [response, json] = await this.client.post(
+      `/api/license/usage/triggered`
+    )
+    expect(response.status).toBe(opts.status ? opts.status : 201)
+    return response
+  }
 }
diff --git a/qa-core/src/account-api/api/apis/StripeAPI.ts b/qa-core/src/account-api/api/apis/StripeAPI.ts
new file mode 100644
index 0000000000..c9c776e89b
--- /dev/null
+++ b/qa-core/src/account-api/api/apis/StripeAPI.ts
@@ -0,0 +1,64 @@
+import AccountInternalAPIClient from "../AccountInternalAPIClient"
+import BaseAPI from "./BaseAPI"
+import { APIRequestOpts } from "../../../types"
+
+export default class StripeAPI extends BaseAPI {
+  client: AccountInternalAPIClient
+
+  constructor(client: AccountInternalAPIClient) {
+    super()
+    this.client = client
+  }
+
+  async createCheckoutSession(
+    priceId: string,
+    opts: APIRequestOpts = { status: 200 }
+  ) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/checkout-session`, {
+        body: { priceId },
+      })
+    }, opts)
+  }
+
+  async checkoutSuccess(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/checkout-success`)
+    }, opts)
+  }
+
+  async createPortalSession(
+    stripeCustomerId: string,
+    opts: APIRequestOpts = { status: 200 }
+  ) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/portal-session`, {
+        body: { stripeCustomerId },
+      })
+    }, opts)
+  }
+
+  async linkStripeCustomer(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/link`)
+    }, opts)
+  }
+
+  async getInvoices(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/stripe/invoices`)
+    }, opts)
+  }
+
+  async getUpcomingInvoice(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/stripe/upcoming-invoice`)
+    }, opts)
+  }
+
+  async getStripeCustomers(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/stripe/customers`)
+    }, opts)
+  }
+}
diff --git a/qa-core/src/account-api/api/apis/index.ts b/qa-core/src/account-api/api/apis/index.ts
index 1137ac3e36..5b0cf55110 100644
--- a/qa-core/src/account-api/api/apis/index.ts
+++ b/qa-core/src/account-api/api/apis/index.ts
@@ -1,3 +1,4 @@
 export { default as AuthAPI } from "./AuthAPI"
 export { default as AccountAPI } from "./AccountAPI"
 export { default as LicenseAPI } from "./LicenseAPI"
+export { default as StripeAPI } from "./StripeAPI"
diff --git a/qa-core/src/account-api/tests/licensing/license.activate.spec.ts b/qa-core/src/account-api/tests/licensing/license.activate.spec.ts
new file mode 100644
index 0000000000..96c6eaea2a
--- /dev/null
+++ b/qa-core/src/account-api/tests/licensing/license.activate.spec.ts
@@ -0,0 +1,68 @@
+import TestConfiguration from "../../config/TestConfiguration"
+import * as fixures from "../../fixtures"
+import { Feature, Hosting } from "@budibase/types"
+
+describe("license activation", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.beforeAll()
+  })
+
+  afterAll(async () => {
+    await config.afterAll()
+  })
+
+  it("creates, activates and deletes online license - self host", async () => {
+    // Remove existing license key
+    await config.internalApi.license.deleteLicenseKey()
+
+    // Verify license key not found
+    await config.internalApi.license.getLicenseKey({ status: 404 })
+
+    // Create self host account
+    const createAccountRequest = fixures.accounts.generateAccount({
+      hosting: Hosting.SELF,
+    })
+    const [createAccountRes, account] =
+      await config.accountsApi.accounts.create(createAccountRequest, {
+        autoVerify: true,
+      })
+
+    let licenseKey: string = " "
+    await config.doInNewState(async () => {
+      await config.loginAsAccount(createAccountRequest)
+      // Retrieve license key
+      const [res, body] = await config.accountsApi.licenses.getLicenseKey()
+      licenseKey = body.licenseKey
+    })
+
+    const accountId = account.accountId!
+
+    // Update license to have paid feature
+    const [res, acc] = await config.accountsApi.licenses.updateLicense(
+      accountId,
+      {
+        overrides: {
+          features: [Feature.APP_BACKUPS],
+        },
+      }
+    )
+
+    // Activate license key
+    await config.internalApi.license.activateLicenseKey({ licenseKey })
+
+    // Verify license updated with new feature
+    await config.doInNewState(async () => {
+      await config.loginAsAccount(createAccountRequest)
+      const [selfRes, body] = await config.api.accounts.self()
+      expect(body.license.features[0]).toBe("appBackups")
+    })
+
+    // Remove license key
+    await config.internalApi.license.deleteLicenseKey()
+
+    // Verify license key not found
+    await config.internalApi.license.getLicenseKey({ status: 404 })
+  })
+})
diff --git a/qa-core/src/internal-api/api/apis/LicenseAPI.ts b/qa-core/src/internal-api/api/apis/LicenseAPI.ts
index 4c9d14c55e..ef322e069a 100644
--- a/qa-core/src/internal-api/api/apis/LicenseAPI.ts
+++ b/qa-core/src/internal-api/api/apis/LicenseAPI.ts
@@ -1,17 +1,19 @@
 import { Response } from "node-fetch"
 import {
+  ActivateLicenseKeyRequest,
   ActivateOfflineLicenseTokenRequest,
+  GetLicenseKeyResponse,
   GetOfflineIdentifierResponse,
   GetOfflineLicenseTokenResponse,
 } from "@budibase/types"
 import BudibaseInternalAPIClient from "../BudibaseInternalAPIClient"
 import BaseAPI from "./BaseAPI"
+import { APIRequestOpts } from "../../../types"
 
 export default class LicenseAPI extends BaseAPI {
   constructor(client: BudibaseInternalAPIClient) {
     super(client)
   }
-
   async getOfflineLicenseToken(
     opts: { status?: number } = {}
   ): Promise<[Response, GetOfflineLicenseTokenResponse]> {
@@ -21,19 +23,16 @@ export default class LicenseAPI extends BaseAPI {
     )
     return [response, body]
   }
-
   async deleteOfflineLicenseToken(): Promise<[Response]> {
     const [response] = await this.del(`/global/license/offline`, 204)
     return [response]
   }
-
   async activateOfflineLicenseToken(
     body: ActivateOfflineLicenseTokenRequest
   ): Promise<[Response]> {
     const [response] = await this.post(`/global/license/offline`, body)
     return [response]
   }
-
   async getOfflineIdentifier(): Promise<
     [Response, GetOfflineIdentifierResponse]
   > {
@@ -42,4 +41,23 @@ export default class LicenseAPI extends BaseAPI {
     )
     return [response, body]
   }
+
+  async getLicenseKey(
+    opts: { status?: number } = {}
+  ): Promise<[Response, GetLicenseKeyResponse]> {
+    const [response, body] = await this.get(`/global/license/key`, opts.status)
+    return [response, body]
+  }
+
+  async activateLicenseKey(
+    body: ActivateLicenseKeyRequest
+  ): Promise<[Response]> {
+    const [response] = await this.post(`/global/license/key`, body)
+    return [response]
+  }
+
+  async deleteLicenseKey(): Promise<[Response]> {
+    const [response] = await this.del(`/global/license/key`, 204)
+    return [response]
+  }
 }