diff --git a/.github/workflows/budibase_ci.yml b/.github/workflows/budibase_ci.yml
index e2f000cf7e..e81925876b 100644
--- a/.github/workflows/budibase_ci.yml
+++ b/.github/workflows/budibase_ci.yml
@@ -30,7 +30,7 @@ env:
 
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -47,7 +47,7 @@ jobs:
       - run: yarn lint
 
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -76,7 +76,7 @@ jobs:
           fi
 
   helm-lint:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -88,7 +88,7 @@ jobs:
       - run: cd charts/budibase && helm lint .
 
   test-libraries:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -122,7 +122,7 @@ jobs:
           fi
 
   test-worker:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -151,7 +151,7 @@ jobs:
           yarn test --verbose --reporters=default --reporters=github-actions
 
   test-server:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
         datasource:
@@ -237,7 +237,7 @@ jobs:
           yarn test --filter $FILTER --verbose --reporters=default --reporters=github-actions
 
   check-pro-submodule:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     if: inputs.run_as_oss != true  && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase')
     steps:
       - name: Checkout repo and submodules
@@ -296,7 +296,7 @@ jobs:
           fi
 
   check-lockfile:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     if: inputs.run_as_oss != true  && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase')
     steps:
       - name: Checkout repo
diff --git a/examples/nextjs-api-sales/package.json b/examples/nextjs-api-sales/package.json
index 1f4335462b..1050c6b75e 100644
--- a/examples/nextjs-api-sales/package.json
+++ b/examples/nextjs-api-sales/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "bulma": "^0.9.3",
-    "next": "14.2.10",
+    "next": "14.2.15",
     "node-fetch": "^3.2.10",
     "sass": "^1.52.3",
     "react": "17.0.2",
diff --git a/examples/nextjs-api-sales/yarn.lock b/examples/nextjs-api-sales/yarn.lock
index 40bf33da70..b595a148bf 100644
--- a/examples/nextjs-api-sales/yarn.lock
+++ b/examples/nextjs-api-sales/yarn.lock
@@ -46,10 +46,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@next/env@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.10.tgz#1d3178340028ced2d679f84140877db4f420333c"
-  integrity sha512-dZIu93Bf5LUtluBXIv4woQw2cZVZ2DJTjax5/5DOs3lzEOeKLy7GxRSr4caK9/SCPdaW6bCgpye6+n4Dh9oJPw==
+"@next/env@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.15.tgz#06d984e37e670d93ddd6790af1844aeb935f332f"
+  integrity sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==
 
 "@next/eslint-plugin-next@12.1.0":
   version "12.1.0"
@@ -58,50 +58,50 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.10.tgz#49d10ca4086fbd59ee68e204f75d7136eda2aa80"
-  integrity sha512-V3z10NV+cvMAfxQUMhKgfQnPbjw+Ew3cnr64b0lr8MDiBJs3eLnM6RpGC46nhfMZsiXgQngCJKWGTC/yDcgrDQ==
+"@next/swc-darwin-arm64@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.15.tgz#6386d585f39a1c490c60b72b1f76612ba4434347"
+  integrity sha512-Rvh7KU9hOUBnZ9TJ28n2Oa7dD9cvDBKua9IKx7cfQQ0GoYUwg9ig31O2oMwH3wm+pE3IkAQ67ZobPfEgurPZIA==
 
-"@next/swc-darwin-x64@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.10.tgz#0ebeae3afb8eac433882b79543295ab83624a1a8"
-  integrity sha512-Y0TC+FXbFUQ2MQgimJ/7Ina2mXIKhE7F+GUe1SgnzRmwFY3hX2z8nyVCxE82I2RicspdkZnSWMn4oTjIKz4uzA==
+"@next/swc-darwin-x64@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.15.tgz#b7baeedc6a28f7545ad2bc55adbab25f7b45cb89"
+  integrity sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==
 
-"@next/swc-linux-arm64-gnu@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.10.tgz#7e602916d2fb55a3c532f74bed926a0137c16f20"
-  integrity sha512-ZfQ7yOy5zyskSj9rFpa0Yd7gkrBnJTkYVSya95hX3zeBG9E55Z6OTNPn1j2BTFWvOVVj65C3T+qsjOyVI9DQpA==
+"@next/swc-linux-arm64-gnu@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.15.tgz#fa13c59d3222f70fb4cb3544ac750db2c6e34d02"
+  integrity sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==
 
-"@next/swc-linux-arm64-musl@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.10.tgz#6b143f628ccee490b527562e934f8de578d4be47"
-  integrity sha512-n2i5o3y2jpBfXFRxDREr342BGIQCJbdAUi/K4q6Env3aSx8erM9VuKXHw5KNROK9ejFSPf0LhoSkU/ZiNdacpQ==
+"@next/swc-linux-arm64-musl@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.15.tgz#30e45b71831d9a6d6d18d7ac7d611a8d646a17f9"
+  integrity sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==
 
-"@next/swc-linux-x64-gnu@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.10.tgz#086f2f16a0678890a1eb46518c4dda381b046082"
-  integrity sha512-GXvajAWh2woTT0GKEDlkVhFNxhJS/XdDmrVHrPOA83pLzlGPQnixqxD8u3bBB9oATBKB//5e4vpACnx5Vaxdqg==
+"@next/swc-linux-x64-gnu@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.15.tgz#5065db17fc86f935ad117483f21f812dc1b39254"
+  integrity sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==
 
-"@next/swc-linux-x64-musl@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.10.tgz#1befef10ed8dbcc5047b5d637a25ae3c30a0bfc3"
-  integrity sha512-opFFN5B0SnO+HTz4Wq4HaylXGFV+iHrVxd3YvREUX9K+xfc4ePbRrxqOuPOFjtSuiVouwe6uLeDtabjEIbkmDA==
+"@next/swc-linux-x64-musl@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.15.tgz#3c4a4568d8be7373a820f7576cf33388b5dab47e"
+  integrity sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==
 
-"@next/swc-win32-arm64-msvc@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.10.tgz#731f52c3ae3c56a26cf21d474b11ae1529531209"
-  integrity sha512-9NUzZuR8WiXTvv+EiU/MXdcQ1XUvFixbLIMNQiVHuzs7ZIFrJDLJDaOF1KaqttoTujpcxljM/RNAOmw1GhPPQQ==
+"@next/swc-win32-arm64-msvc@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.15.tgz#fb812cc4ca0042868e32a6a021da91943bb08b98"
+  integrity sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==
 
-"@next/swc-win32-ia32-msvc@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.10.tgz#32723ef7f04e25be12af357cc72ddfdd42fd1041"
-  integrity sha512-fr3aEbSd1GeW3YUMBkWAu4hcdjZ6g4NBl1uku4gAn661tcxd1bHs1THWYzdsbTRLcCKLjrDZlNp6j2HTfrw+Bg==
+"@next/swc-win32-ia32-msvc@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.15.tgz#ec26e6169354f8ced240c1427be7fd485c5df898"
+  integrity sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==
 
-"@next/swc-win32-x64-msvc@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.10.tgz#ee1d036cb5ec871816f96baee7991035bb242455"
-  integrity sha512-UjeVoRGKNL2zfbcQ6fscmgjBAS/inHBh63mjIlfPg/NG8Yn2ztqylXt5qilYb6hoHIwaU2ogHknHWWmahJjgZQ==
+"@next/swc-win32-x64-msvc@14.2.15":
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.15.tgz#18d68697002b282006771f8d92d79ade9efd35c4"
+  integrity sha512-SzqGbsLsP9OwKNUG9nekShTwhj6JSB9ZLMWQ8g1gG6hdE5gQLncbnbymrwy2yVmH9nikSLYRYxYMFu78Ggp7/g==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1253,12 +1253,12 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-next@14.2.10:
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.10.tgz#331981a4fecb1ae8af1817d4db98fc9687ee1cb6"
-  integrity sha512-sDDExXnh33cY3RkS9JuFEKaS4HmlWmDKP1VJioucCG6z5KuA008DPsDZOzi8UfqEk3Ii+2NCQSJrfbEWtZZfww==
+next@14.2.15:
+  version "14.2.15"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.15.tgz#348e5603e22649775d19c785c09a89c9acb5189a"
+  integrity sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==
   dependencies:
-    "@next/env" "14.2.10"
+    "@next/env" "14.2.15"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -1266,15 +1266,15 @@ next@14.2.10:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.10"
-    "@next/swc-darwin-x64" "14.2.10"
-    "@next/swc-linux-arm64-gnu" "14.2.10"
-    "@next/swc-linux-arm64-musl" "14.2.10"
-    "@next/swc-linux-x64-gnu" "14.2.10"
-    "@next/swc-linux-x64-musl" "14.2.10"
-    "@next/swc-win32-arm64-msvc" "14.2.10"
-    "@next/swc-win32-ia32-msvc" "14.2.10"
-    "@next/swc-win32-x64-msvc" "14.2.10"
+    "@next/swc-darwin-arm64" "14.2.15"
+    "@next/swc-darwin-x64" "14.2.15"
+    "@next/swc-linux-arm64-gnu" "14.2.15"
+    "@next/swc-linux-arm64-musl" "14.2.15"
+    "@next/swc-linux-x64-gnu" "14.2.15"
+    "@next/swc-linux-x64-musl" "14.2.15"
+    "@next/swc-win32-arm64-msvc" "14.2.15"
+    "@next/swc-win32-ia32-msvc" "14.2.15"
+    "@next/swc-win32-x64-msvc" "14.2.15"
 
 node-domexception@^1.0.0:
   version "1.0.0"
diff --git a/lerna.json b/lerna.json
index 055b5c3ce7..5e0bc09825 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.2.28",
+  "version": "3.2.29",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {
diff --git a/packages/backend-core/src/sql/utils.ts b/packages/backend-core/src/sql/utils.ts
index 14127a189f..16b352995b 100644
--- a/packages/backend-core/src/sql/utils.ts
+++ b/packages/backend-core/src/sql/utils.ts
@@ -70,6 +70,10 @@ export function encodeTableId(tableId: string) {
   }
 }
 
+export function encodeViewId(viewId: string) {
+  return encodeURIComponent(viewId)
+}
+
 export function breakExternalTableId(tableId: string) {
   const parts = tableId.split(DOUBLE_SEPARATOR)
   let datasourceId = parts.shift()
diff --git a/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
index 6c06ce4e79..84b55c403f 100644
--- a/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
@@ -51,6 +51,7 @@
   }
   input.hide-arrows {
     -moz-appearance: textfield;
+    appearance: textfield;
   }
   input[type="time"]::-webkit-calendar-picker-indicator {
     display: none;
diff --git a/packages/bbui/src/Form/Core/Slider.svelte b/packages/bbui/src/Form/Core/Slider.svelte
index 1a601d0185..0fcadd8bad 100644
--- a/packages/bbui/src/Form/Core/Slider.svelte
+++ b/packages/bbui/src/Form/Core/Slider.svelte
@@ -39,6 +39,7 @@
     padding: 0;
     margin: 0;
     -webkit-appearance: none;
+    appearance: none;
     background: transparent;
   }
   input::-webkit-slider-thumb {
diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index 62dd9cc909..e469927e60 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -43,12 +43,11 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
-    overflow-y: scroll !important;
     flex: 1 1 auto;
     overflow-x: hidden;
   }
   .main {
-    overflow: auto;
+    overflow-y: scroll;
   }
   .content {
     display: flex;
diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
index 37a1e07d73..112fa739c7 100644
--- a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -37,7 +37,7 @@
     }
   }
 
-  export let overBackground
+  export let overBackground = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index c94b396398..3955145ad1 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -124,8 +124,6 @@
   .spectrum-Tabs-selectionIndicator.emphasized {
     background-color: var(--spectrum-global-color-blue-400);
   }
-  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
-  }
   .noHorizPadding {
     padding: 0;
   }
diff --git a/packages/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index 4d2399aaf8..b85f4e1c03 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -134,6 +134,7 @@
   .spectrum-Tooltip-label {
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     font-size: 12px;
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 485cced7ab..71d1c32008 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -7,7 +7,7 @@
     "build": "routify -b && NODE_OPTIONS=\"--max_old_space_size=4096\" vite build --emptyOutDir",
     "start": "routify -c rollup",
     "dev": "routify -c dev:vite",
-    "dev:vite": "vite --host 0.0.0.0",
+    "dev:vite": "vite --host 0.0.0.0 --mode=dev",
     "rollup": "rollup -c -w",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -94,6 +94,7 @@
     "@sveltejs/vite-plugin-svelte": "1.4.0",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/svelte": "^4.1.0",
+    "@types/shortid": "^2.2.0",
     "babel-jest": "^29.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index f31f45bb84..866a28a4e6 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -3,7 +3,7 @@
   import { routes } from "../.routify/routes"
   import { NotificationDisplay, BannerDisplay } from "@budibase/bbui"
   import { parse, stringify } from "qs"
-  import LicensingOverlays from "components/portal/licensing/LicensingOverlays.svelte"
+  import LicensingOverlays from "@/components/portal/licensing/LicensingOverlays.svelte"
 
   const queryHandler = { parse, stringify }
 </script>
diff --git a/packages/builder/src/analytics/index.js b/packages/builder/src/analytics/index.js
index c9887aebc3..aa83f3c7ab 100644
--- a/packages/builder/src/analytics/index.js
+++ b/packages/builder/src/analytics/index.js
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 import PosthogClient from "./PosthogClient"
 import { Events, EventSource } from "./constants"
 
diff --git a/packages/builder/src/api.ts b/packages/builder/src/api.ts
index 5d1a0beaeb..e9e8b39e28 100644
--- a/packages/builder/src/api.ts
+++ b/packages/builder/src/api.ts
@@ -3,12 +3,12 @@ import {
   CookieUtils,
   Constants,
 } from "@budibase/frontend-core"
-import { appStore } from "stores/builder"
+import { appStore } from "@/stores/builder"
 import { get } from "svelte/store"
 import { auth, navigation } from "./stores/portal"
 
 export const API = createAPIClient({
-  attachHeaders: (headers: Record<string, string>) => {
+  attachHeaders: headers => {
     // Attach app ID header from store
     let appId = get(appStore).appId
     if (appId) {
@@ -22,7 +22,7 @@ export const API = createAPIClient({
     }
   },
 
-  onError: (error: any) => {
+  onError: error => {
     const { url, message, status, method, handled } = error || {}
 
     // Log any errors that we haven't manually handled
@@ -45,7 +45,7 @@ export const API = createAPIClient({
       }
     }
   },
-  onMigrationDetected: (appId: string) => {
+  onMigrationDetected: appId => {
     const updatingUrl = `/builder/app/updating/${appId}`
 
     if (window.location.pathname === updatingUrl) {
diff --git a/packages/builder/src/components/ContextMenu.svelte b/packages/builder/src/components/ContextMenu.svelte
index 37aacf06ed..3ff2a2b084 100644
--- a/packages/builder/src/components/ContextMenu.svelte
+++ b/packages/builder/src/components/ContextMenu.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { contextMenuStore } from "stores/builder"
+  import { contextMenuStore } from "@/stores/builder"
   import { Popover, Menu, MenuItem } from "@budibase/bbui"
 
   let dropdown
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index 9952826be3..d775094126 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { selectedAutomation } from "stores/builder"
+  import { selectedAutomation } from "@/stores/builder"
   import Flowchart from "./FlowChart/FlowChart.svelte"
 </script>
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index b1a4f37f46..0b68d8e4b3 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -9,7 +9,7 @@
   } from "svelte"
   import Logo from "assets/bb-emblem.svg?raw"
   import { Utils, memo } from "@budibase/frontend-core"
-  import { selectedAutomation, automationStore } from "stores/builder"
+  import { selectedAutomation, automationStore } from "@/stores/builder"
 
   // CSS classes that, on mouse down, will trigger the view drag behaviour
   export let draggableClasses = []
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 524e70e329..706c196fff 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -10,10 +10,10 @@
     Tag,
   } from "@budibase/bbui"
   import { AutomationActionStepId } from "@budibase/types"
-  import { automationStore, selectedAutomation } from "stores/builder"
-  import { admin, licensing } from "stores/portal"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
+  import { admin, licensing } from "@/stores/portal"
   import { externalActions } from "./ExternalActions"
-  import { TriggerStepID, ActionStepID } from "constants/backend/automations"
+  import { TriggerStepID, ActionStepID } from "@/constants/backend/automations"
 
   export let block
   export let modal
@@ -49,7 +49,7 @@
   const disabled = () => {
     return {
       SEND_EMAIL_SMTP: {
-        disabled: !$admin.checklist.smtp.checked,
+        disabled: !$admin.checklist?.smtp?.checked,
         message: "Please configure SMTP",
       },
       COLLECT: {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
index 8732623dcf..0a8ce505b8 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
@@ -1,7 +1,7 @@
 <script>
   import { processStringSync } from "@budibase/string-templates"
   import { get } from "lodash/fp"
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
 
   export let block
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
index 0a87ea3815..779eaf415a 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
@@ -1,5 +1,5 @@
 <script>
-  import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
+  import FilterBuilder from "@/components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
   import {
     Drawer,
     DrawerContent,
@@ -14,11 +14,11 @@
     Modal,
     ModalContent,
   } from "@budibase/bbui"
-  import PropField from "components/automation/SetupPanel/PropField.svelte"
-  import AutomationBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
+  import PropField from "@/components/automation/SetupPanel/PropField.svelte"
+  import AutomationBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
   import FlowItemHeader from "./FlowItemHeader.svelte"
   import FlowItemActions from "./FlowItemActions.svelte"
-  import { automationStore, selectedAutomation } from "stores/builder"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
   import { QueryUtils, Utils } from "@budibase/frontend-core"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 26a15a134a..01f0032e58 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -3,8 +3,8 @@
     automationStore,
     automationHistoryStore,
     selectedAutomation,
-  } from "stores/builder"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  } from "@/stores/builder"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import TestDataModal from "./TestDataModal.svelte"
   import {
     notifications,
@@ -13,8 +13,8 @@
     Button,
     ActionButton,
   } from "@budibase/bbui"
-  import { ActionStepID } from "constants/backend/automations"
-  import UndoRedoControl from "components/common/UndoRedoControl.svelte"
+  import { ActionStepID } from "@/constants/backend/automations"
+  import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
   import StepNode from "./StepNode.svelte"
   import { memo } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 0e5a932aa0..95df59b249 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -4,7 +4,7 @@
     permissions,
     selectedAutomation,
     tables,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import {
     Icon,
     Divider,
@@ -16,16 +16,16 @@
   } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
-  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
+  import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
   import FlowItemHeader from "./FlowItemHeader.svelte"
-  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-  import { ActionStepID, TriggerStepID } from "constants/backend/automations"
+  import RoleSelect from "@/components/design/settings/controls/RoleSelect.svelte"
+  import { ActionStepID, TriggerStepID } from "@/constants/backend/automations"
   import { AutomationStepType } from "@budibase/types"
   import FlowItemActions from "./FlowItemActions.svelte"
-  import DragHandle from "components/design/settings/controls/DraggableList/drag-handle.svelte"
+  import DragHandle from "@/components/design/settings/controls/DraggableList/drag-handle.svelte"
   import { getContext } from "svelte"
   import DragZone from "./DragZone.svelte"
-  import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
 
   export let block
   export let blockRef
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 0aa43f8e04..e81d6d0f5c 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { automationStore, selectedAutomation } from "stores/builder"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
   import { Icon, Body, AbsTooltip, StatusLight } from "@budibase/bbui"
   import { externalActions } from "./ExternalActions"
   import { createEventDispatcher } from "svelte"
-  import { Features } from "constants/backend/automations"
+  import { Features } from "@/constants/backend/automations"
 
   export let block
   export let open
@@ -22,7 +22,7 @@
   const dispatch = createEventDispatcher()
 
   $: blockRefs = $selectedAutomation?.blockRefs || {}
-  $: stepNames = automation?.definition.stepNames
+  $: stepNames = automation?.definition.stepNames || {}
   $: allSteps = automation?.definition.steps || []
   $: automationName = itemName || stepNames?.[block.id] || block?.name || ""
   $: automationNameError = getAutomationNameError(automationName)
@@ -64,7 +64,7 @@
   const getAutomationNameError = name => {
     const duplicateError =
       "This name already exists, please enter a unique name"
-    if (stepNames && editing) {
+    if (editing) {
       for (const [key, value] of Object.entries(stepNames)) {
         if (name !== block.name && name === value && key !== block.id) {
           return duplicateError
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
index a320973333..fbd49723be 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
@@ -3,8 +3,8 @@
   import BranchNode from "./BranchNode.svelte"
   import { AutomationActionStepId } from "@budibase/types"
   import { ActionButton, notifications } from "@budibase/bbui"
-  import { automationStore } from "stores/builder"
-  import { environment } from "stores/portal"
+  import { automationStore } from "@/stores/builder"
+  import { environment } from "@/stores/portal"
   import { cloneDeep } from "lodash"
   import { memo } from "@budibase/frontend-core"
   import { getContext, onMount } from "svelte"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index eebd977e6c..ab73c6babb 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -6,7 +6,7 @@
     notifications,
     ActionButton,
   } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "stores/builder"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import { cloneDeep } from "lodash/fp"
   import { AutomationEventType } from "@budibase/types"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte b/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
index fd7961e3b0..5cf0cfad74 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Icon, Divider, Tabs, Tab, Label } from "@budibase/bbui"
   import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
-  import { ActionStepID } from "constants/backend/automations"
+  import { ActionStepID } from "@/constants/backend/automations"
   import { JsonView } from "@zerodevx/svelte-json-view"
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
   import { AutomationActionStepId } from "@budibase/types"
 
   export let automation
diff --git a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
index d39d228717..780730729e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Icon, Divider } from "@budibase/bbui"
   import TestDisplay from "./TestDisplay.svelte"
-  import { automationStore, selectedAutomation } from "stores/builder"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
 
   export let automation
 </script>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte
index fa89ab9393..c44ba8a93a 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte
@@ -4,12 +4,12 @@
     userSelectedResourceMap,
     automationStore,
     contextMenuStore,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import { notifications, Icon } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import UpdateAutomationModal from "components/automation/AutomationPanel/UpdateAutomationModal.svelte"
-  import NavItem from "components/common/NavItem.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import UpdateAutomationModal from "@/components/automation/AutomationPanel/UpdateAutomationModal.svelte"
+  import NavItem from "@/components/common/NavItem.svelte"
 
   export let automation
   export let icon
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index a26efdf243..f84130f5e7 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,11 +1,11 @@
 <script>
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
   import { Modal, notifications, Layout } from "@budibase/bbui"
-  import NavHeader from "components/common/NavHeader.svelte"
+  import NavHeader from "@/components/common/NavHeader.svelte"
   import { onMount } from "svelte"
-  import { automationStore, tables } from "stores/builder"
+  import { automationStore, tables } from "@/stores/builder"
   import AutomationNavItem from "./AutomationNavItem.svelte"
-  import { TriggerStepID } from "constants/backend/automations"
+  import { TriggerStepID } from "@/constants/backend/automations"
 
   export let modal
   export let webhookModal
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index 35fdba970a..19cfa179f9 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
   import {
     notifications,
     Input,
@@ -11,7 +11,7 @@
     Icon,
     Label,
   } from "@budibase/bbui"
-  import { TriggerStepID } from "constants/backend/automations"
+  import { TriggerStepID } from "@/constants/backend/automations"
 
   export let webhookModal
 
diff --git a/packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte
index 6ac7f84556..56aba711b4 100644
--- a/packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
   import {
     notifications,
     Icon,
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index ab01b56152..16183ea59a 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -20,9 +20,9 @@
     Icon,
   } from "@budibase/bbui"
 
-  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import { automationStore, tables } from "stores/builder"
-  import { environment } from "stores/portal"
+  import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
+  import { automationStore, tables } from "@/stores/builder"
+  import { environment } from "@/stores/portal"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
   import {
     BindingSidePanel,
@@ -30,24 +30,27 @@
     DrawerBindableInput,
     ServerBindingPanel as AutomationBindingPanel,
     ModalBindableInput,
-  } from "components/common/bindings"
+  } from "@/components/common/bindings"
   import CodeEditorModal from "./CodeEditorModal.svelte"
   import QueryParamSelector from "./QueryParamSelector.svelte"
   import AutomationSelector from "./AutomationSelector.svelte"
   import CronBuilder from "./CronBuilder.svelte"
-  import Editor from "components/integration/QueryEditor.svelte"
-  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import { BindingHelpers, BindingType } from "components/common/bindings/utils"
+  import Editor from "@/components/integration/QueryEditor.svelte"
+  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
+  import {
+    BindingHelpers,
+    BindingType,
+  } from "@/components/common/bindings/utils"
   import {
     bindingsToCompletions,
     hbAutocomplete,
     EditorModes,
-  } from "components/common/CodeEditor"
-  import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
+  } from "@/components/common/CodeEditor"
+  import FilterBuilder from "@/components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
   import { QueryUtils, Utils, search, memo } from "@budibase/frontend-core"
-  import { getSchemaForDatasourcePlus } from "dataBinding"
-  import { TriggerStepID, ActionStepID } from "constants/backend/automations"
+  import { getSchemaForDatasourcePlus } from "@/dataBinding"
+  import { TriggerStepID, ActionStepID } from "@/constants/backend/automations"
   import { onMount, createEventDispatcher } from "svelte"
   import { writable } from "svelte/store"
   import { cloneDeep } from "lodash/fp"
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
index cda8f76de3..a9cb3cc64f 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { automationStore, selectedAutomation } from "stores/builder"
-  import { TriggerStepID } from "constants/backend/automations"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
+  import { TriggerStepID } from "@/constants/backend/automations"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
diff --git a/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte b/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
index fd235a70f2..f04c5454ea 100644
--- a/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
@@ -8,9 +8,9 @@
     notifications,
   } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
-  import { flags } from "stores/builder"
-  import { featureFlags, licensing } from "stores/portal"
-  import { API } from "api"
+  import { flags } from "@/stores/builder"
+  import { featureFlags, licensing } from "@/stores/portal"
+  import { API } from "@/api"
   import MagicWand from "../../../../assets/MagicWand.svelte"
 
   import { helpers, REBOOT_CRON } from "@budibase/shared-core"
@@ -98,9 +98,7 @@
   async function generateAICronExpression() {
     loadingAICronExpression = true
     try {
-      const response = await API.generateCronExpression({
-        prompt: aiCronPrompt,
-      })
+      const response = await API.generateCronExpression(aiCronPrompt)
       cronExpression = response.message
       dispatch("change", response.message)
     } catch (err) {
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index f46bca3090..eb97f9b02f 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte"
-  import { queries } from "stores/builder"
+  import { queries } from "@/stores/builder"
   import { Select, Label } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
diff --git a/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte b/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte
index 384067e3f2..cf5cd645e4 100644
--- a/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { queries } from "stores/builder"
+  import { queries } from "@/stores/builder"
   import { Select } from "@budibase/bbui"
 
   export let value
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 88e2f06be9..cc3315a4ab 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
   import {
     ActionButton,
     Popover,
@@ -13,8 +13,8 @@
   import RowSelectorTypes from "./RowSelectorTypes.svelte"
   import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
-  import { FIELDS } from "constants/backend"
-  import { capitalise } from "helpers"
+  import { FIELDS } from "@/constants/backend"
+  import { capitalise } from "@/helpers"
   import { memo } from "@budibase/frontend-core"
   import PropField from "./PropField.svelte"
   import { cloneDeep, isPlainObject, mergeWith } from "lodash"
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
index 5bdc20ab37..86666660af 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -7,16 +7,16 @@
     Toggle,
   } from "@budibase/bbui"
   import { FieldType } from "@budibase/types"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
+  import LinkedRowSelector from "@/components/common/LinkedRowSelector.svelte"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
-  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
+  } from "@/dataBinding"
 
   export let onChange
   export let field
diff --git a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index 74bfe27b29..5488e9651c 100644
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
   import { Select } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { TableNames } from "constants"
+  import { TableNames } from "@/constants"
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
index 56cc58e0c5..dfe2b0bc7d 100644
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon, notifications, ModalContent } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "stores/builder"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
   import WebhookDisplay from "./WebhookDisplay.svelte"
   import { onMount, onDestroy } from "svelte"
 
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 745f29d56a..ffab667142 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { API } from "api"
+  import { API } from "@/api"
   import {
     Input,
     Select,
@@ -13,12 +13,12 @@
     ActionButton,
     notifications,
   } from "@budibase/bbui"
-  import Dropzone from "components/common/Dropzone.svelte"
-  import { capitalise } from "helpers"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
+  import Dropzone from "@/components/common/Dropzone.svelte"
+  import { capitalise } from "@/helpers"
+  import LinkedRowSelector from "@/components/common/LinkedRowSelector.svelte"
   import Editor from "../../integration/QueryEditor.svelte"
   import { SignatureModal } from "@budibase/frontend-core/src/components"
-  import { themeStore } from "stores/portal"
+  import { themeStore } from "@/stores/portal"
 
   export let meta
   export let value
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index e09dd4bd39..a32d67c881 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -2,8 +2,8 @@
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
   import { Table, Heading, Layout } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
-  import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
+  import Spinner from "@/components/common/Spinner.svelte"
+  import { TableNames, UNEDITABLE_USER_FIELDS } from "@/constants"
   import RoleCell from "./cells/RoleCell.svelte"
   import { createEventDispatcher } from "svelte"
   import { canBeSortColumn } from "@budibase/frontend-core"
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 6c718d79ae..d8d1f4d24c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { Button } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
 
   export let selectedRows
   export let deleteRows
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
index e2d611a523..21173965d9 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
@@ -2,7 +2,7 @@
   import { ActionButton, notifications } from "@budibase/bbui"
   import CreateEditRelationshipModal from "../../Datasources/CreateEditRelationshipModal.svelte"
 
-  import { datasources, tables as tablesStore } from "stores/builder"
+  import { datasources, tables as tablesStore } from "@/stores/builder"
   import { createEventDispatcher } from "svelte"
 
   export let table
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index e9352045ea..ee53faf9bc 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -7,9 +7,9 @@
     Button,
   } from "@budibase/bbui"
   import download from "downloadjs"
-  import { API } from "api"
-  import { ROW_EXPORT_FORMATS } from "constants/backend"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import { API } from "@/api"
+  import { ROW_EXPORT_FORMATS } from "@/constants/backend"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   export let view
   export let sorting
@@ -56,28 +56,19 @@
   }
 
   const exportAllData = async () => {
-    return await API.exportView({
-      viewName: view,
-      format: exportFormat,
-    })
+    return await API.exportView(view, exportFormat)
   }
 
   const exportFilteredData = async () => {
-    let payload = {
-      tableId: view,
-      format: exportFormat,
-      search: {
-        paginate: false,
-      },
-    }
+    let payload = {}
     if (selectedRows?.length) {
       payload.rows = selectedRows.map(row => row._id)
     }
     if (sorting) {
-      payload.search.sort = sorting.sortColumn
-      payload.search.sortOrder = sorting.sortOrder
+      payload.sort = sorting.sortColumn
+      payload.sortOrder = sorting.sortOrder
     }
-    return await API.exportRows(payload)
+    return await API.exportRows(view, exportFormat, payload)
   }
 
   const exportData = async () => {
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
index a2e7a2a194..ddbf4a53e9 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
@@ -1,9 +1,9 @@
 <script>
   import { ActionButton, Button, Body, notifications } from "@budibase/bbui"
-  import DetailPopover from "components/common/DetailPopover.svelte"
-  import ExistingTableDataImport from "components/backend/TableNavigator/ExistingTableDataImport.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import ExistingTableDataImport from "@/components/backend/TableNavigator/ExistingTableDataImport.svelte"
   import { createEventDispatcher } from "svelte"
-  import { API } from "api"
+  import { API } from "@/api"
 
   export let tableId
   export let tableType
@@ -30,11 +30,7 @@
   const importData = async () => {
     try {
       loading = true
-      await API.importTableData({
-        tableId,
-        rows,
-        identifierFields,
-      })
+      await API.importTableData(tableId, rows, identifierFields)
       notifications.success("Rows successfully imported")
       popover.hide()
     } catch (error) {
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 85227b9140..092c09e735 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -8,12 +8,12 @@
     ListItem,
     notifications,
   } from "@budibase/bbui"
-  import { permissions as permissionsStore, roles } from "stores/builder"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import { permissions as permissionsStore, roles } from "@/stores/builder"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
   import { PermissionSource } from "@budibase/types"
-  import { capitalise } from "helpers"
-  import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
-  import { Roles } from "constants/backend"
+  import { capitalise } from "@/helpers"
+  import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import { Roles } from "@/constants/backend"
 
   export let resourceId
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index d4a71c9ef8..ff687e69f2 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -1,12 +1,12 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { ActionButton, Button } from "@budibase/bbui"
-  import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
-  import { getUserBindings } from "dataBinding"
+  import FilterBuilder from "@/components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
+  import { getUserBindings } from "@/dataBinding"
   import { makePropSafe } from "@budibase/string-templates"
   import { search, Utils } from "@budibase/frontend-core"
-  import { tables } from "stores/builder"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import { tables } from "@/stores/builder"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   export let schema
   export let filters
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte
index 2cda43dda0..1b9ed5b001 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import ToggleActionButtonGroup from "components/common/ToggleActionButtonGroup.svelte"
+  import ToggleActionButtonGroup from "@/components/common/ToggleActionButtonGroup.svelte"
   import { helpers } from "@budibase/shared-core"
   import { SchemaUtils } from "@budibase/frontend-core"
   import { Icon, notifications, ActionButton, Popover } from "@budibase/bbui"
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
index b2448eeaf3..7016fcf0b0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
@@ -1,8 +1,8 @@
 <script>
   import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
-  import DetailPopover from "components/common/DetailPopover.svelte"
-  import { TriggerStepID } from "constants/backend/automations"
-  import { automationStore, appStore } from "stores/builder"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { TriggerStepID } from "@/constants/backend/automations"
+  import { automationStore, appStore } from "@/stores/builder"
   import { createEventDispatcher, getContext } from "svelte"
 
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
index 801abeaf9f..349e242422 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
@@ -10,7 +10,7 @@
   import { getContext } from "svelte"
   import { ActionButton } from "@budibase/bbui"
   import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   const { tableColumns, datasource } = getContext("grid")
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte
index 5d1ec835d5..40edfa326a 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte
@@ -6,14 +6,14 @@
     tables,
     builderStore,
     viewsV2,
-  } from "stores/builder"
-  import { TriggerStepID } from "constants/backend/automations"
+  } from "@/stores/builder"
+  import { TriggerStepID } from "@/constants/backend/automations"
   import { goto } from "@roxi/routify"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
   import MagicWand from "./magic-wand.svg"
-  import { AutoScreenTypes } from "constants"
-  import CreateScreenModal from "pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte"
-  import { getSequentialName } from "helpers/duplicate"
+  import { AutoScreenTypes } from "@/constants"
+  import CreateScreenModal from "@/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte"
+  import { getSequentialName } from "@/helpers/duplicate"
 
   const { datasource } = getContext("grid")
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
index f61e19c19d..1f02162cf0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
@@ -10,9 +10,9 @@
     ModalContent,
     Input,
   } from "@budibase/bbui"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
   import { getContext } from "svelte"
-  import { appStore, rowActions } from "stores/builder"
+  import { appStore, rowActions } from "@/stores/builder"
   import { goto, url } from "@roxi/routify"
   import { derived } from "svelte/store"
 
@@ -39,9 +39,9 @@
 
   const toggleAction = async (action, enabled) => {
     if (enabled) {
-      await rowActions.enableView(tableId, viewId, action.id)
+      await rowActions.enableView(tableId, action.id, viewId)
     } else {
-      await rowActions.disableView(tableId, viewId, action.id)
+      await rowActions.disableView(tableId, action.id, viewId)
     }
   }
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
index db446b3c9e..b2edb52725 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
-  import DetailPopover from "components/common/DetailPopover.svelte"
-  import { screenStore, appStore } from "stores/builder"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { screenStore, appStore } from "@/stores/builder"
   import { getContext, createEventDispatcher } from "svelte"
 
   const { datasource } = getContext("grid")
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
index 148d8b1d5f..7ee47a5cfc 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { ActionButton, Label } from "@budibase/bbui"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   const {
     Constants,
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte
index 244a1b1560..aab29286c0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridSortButton.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Select } from "@budibase/bbui"
   import { canBeSortColumn } from "@budibase/frontend-core"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   const { sort, columns } = getContext("grid")
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte
index 55eb2475cf..34b388c9ac 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ActionButton, Popover, Heading, Body, Button } from "@budibase/bbui"
-  import { builderStore } from "stores/builder"
+  import { builderStore } from "@/stores/builder"
 
   let anchor
   let open = false
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
index 7b279d3948..7733a90bad 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
@@ -7,9 +7,9 @@
     Button,
   } from "@budibase/bbui"
   import { CalculationType, canGroupBy, isNumeric } from "@budibase/types"
-  import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import { getContext } from "svelte"
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
 
   const { definition, datasource, rows } = getContext("grid")
   const calculationTypeOptions = [
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
index 8c9b4e306b..a39badb81b 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { roles } from "stores/builder"
+  import { roles } from "@/stores/builder"
 
   export let value
 
diff --git a/packages/builder/src/components/backend/DataTable/formula.js b/packages/builder/src/components/backend/DataTable/formula.js
index a9491abfef..9ec75b52c0 100644
--- a/packages/builder/src/components/backend/DataTable/formula.js
+++ b/packages/builder/src/components/backend/DataTable/formula.js
@@ -1,6 +1,6 @@
 import { FieldType } from "@budibase/types"
-import { FIELDS } from "constants/backend"
-import { tables } from "stores/builder"
+import { FIELDS } from "@/constants/backend"
+import { tables } from "@/stores/builder"
 import { get as svelteGet } from "svelte/store"
 
 // currently supported level of relationship depth (server side)
diff --git a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
index 1acf5e3efd..45711bc733 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CalculateModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label, notifications, ModalContent } from "@budibase/bbui"
-  import { tables, views } from "stores/builder"
-  import { FIELDS } from "constants/backend"
+  import { tables, views } from "@/stores/builder"
+  import { FIELDS } from "@/constants/backend"
 
   const CALCULATIONS = [
     {
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 17069aa8c6..db5b8a7d49 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -25,32 +25,32 @@
   import { makePropSafe } from "@budibase/string-templates"
   import { createEventDispatcher, getContext, onMount } from "svelte"
   import { cloneDeep } from "lodash/fp"
-  import { tables, datasources } from "stores/builder"
-  import { featureFlags } from "stores/portal"
-  import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
+  import { tables, datasources } from "@/stores/builder"
+  import { featureFlags } from "@/stores/portal"
+  import { TableNames, UNEDITABLE_USER_FIELDS } from "@/constants"
   import {
     FIELDS,
     RelationshipType,
     PrettyRelationshipDefinitions,
     DB_TYPE_EXTERNAL,
-  } from "constants/backend"
-  import { getAutoColumnInformation, buildAutoColumn } from "helpers/utils"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import AIFieldConfiguration from "components/common/AIFieldConfiguration.svelte"
-  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
-  import { getBindings } from "components/backend/DataTable/formula"
+  } from "@/constants/backend"
+  import { getAutoColumnInformation, buildAutoColumn } from "@/helpers/utils"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import AIFieldConfiguration from "@/components/common/AIFieldConfiguration.svelte"
+  import ModalBindableInput from "@/components/common/bindings/ModalBindableInput.svelte"
+  import { getBindings } from "@/components/backend/DataTable/formula"
   import JSONSchemaModal from "./JSONSchemaModal.svelte"
   import {
     BBReferenceFieldSubType,
     FieldType,
     SourceName,
   } from "@budibase/types"
-  import RelationshipSelector from "components/common/RelationshipSelector.svelte"
+  import RelationshipSelector from "@/components/common/RelationshipSelector.svelte"
   import { RowUtils, canBeDisplayColumn } from "@budibase/frontend-core"
-  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
+  import ServerBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
   import OptionsEditor from "./OptionsEditor.svelte"
-  import { isEnabled } from "helpers/featureFlags"
-  import { getUserBindings } from "dataBinding"
+  import { isEnabled } from "@/helpers/featureFlags"
+  import { getUserBindings } from "@/dataBinding"
 
   export let field
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index eb99e994d1..beaf51cf70 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -1,10 +1,10 @@
 <script>
   import { createEventDispatcher } from "svelte"
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
   import { ModalContent, keepOpen, notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
-  import { API } from "api"
-  import { FIELDS } from "constants/backend"
+  import { API } from "@/api"
+  import { FIELDS } from "@/constants/backend"
 
   const FORMULA_TYPE = FIELDS.FORMULA.type
   const AI_TYPE = FIELDS.AI.type
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 5ac2beab65..a3fe16733b 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte"
-  import { tables, roles } from "stores/builder"
+  import { tables, roles } from "@/stores/builder"
   import {
     notifications,
     keepOpen,
@@ -9,8 +9,8 @@
     Link,
   } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
-  import { API } from "api"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import { API } from "@/api"
+  import ErrorsBox from "@/components/common/ErrorsBox.svelte"
   import { goto } from "@roxi/routify"
 
   export let row = {}
diff --git a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
index 1c67da1ab8..025015a6c3 100644
--- a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
@@ -10,7 +10,7 @@
     notifications,
     Icon,
   } from "@budibase/bbui"
-  import { tables, views } from "stores/builder"
+  import { tables, views } from "@/stores/builder"
 
   const CONDITIONS = [
     {
diff --git a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
index d122013428..acd6040973 100644
--- a/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, ModalContent, notifications } from "@budibase/bbui"
-  import { tables, views } from "stores/builder"
-  import { FIELDS } from "constants/backend"
+  import { tables, views } from "@/stores/builder"
+  import { FIELDS } from "@/constants/backend"
 
   export let view = {}
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte b/packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte
index 0b2eb58748..908a7b1aea 100644
--- a/packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Editor from "components/integration/QueryEditor.svelte"
+  import Editor from "@/components/integration/QueryEditor.svelte"
   import {
     ModalContent,
     Tabs,
@@ -12,8 +12,8 @@
     ActionButton,
   } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
-  import { FIELDS } from "constants/backend"
-  import { generate } from "helpers/schemaGenerator"
+  import { FIELDS } from "@/constants/backend"
+  import { generate } from "@/helpers/schemaGenerator"
 
   export let schema = {}
   export let json
diff --git a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte
index 8e35e38ae9..8546b34cd8 100644
--- a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte
@@ -4,7 +4,7 @@
   import { Icon, Popover } from "@budibase/bbui"
   import { tick } from "svelte"
   import { Constants } from "@budibase/frontend-core"
-  import { getSequentialName } from "helpers/duplicate"
+  import { getSequentialName } from "@/helpers/duplicate"
   import { derived, writable } from "svelte/store"
 
   export let constraints
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 d031e752cd..58507373ac 100644
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
+  import CreateEditColumn from "@/components/backend/DataTable/modals/CreateEditColumn.svelte"
 
   const { datasource, rows } = getContext("grid")
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte
index 1ba32838ab..d538a9b1b7 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte
@@ -1,12 +1,12 @@
 <script>
   import { isActive } from "@roxi/routify"
-  import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
-  import { contextMenuStore, userSelectedResourceMap } from "stores/builder"
-  import NavItem from "components/common/NavItem.svelte"
+  import { BUDIBASE_INTERNAL_DB_ID } from "@/constants/backend"
+  import { contextMenuStore, userSelectedResourceMap } from "@/stores/builder"
+  import NavItem from "@/components/common/NavItem.svelte"
 
-  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import { Icon } from "@budibase/bbui"
-  import UpdateDatasourceModal from "components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte"
+  import UpdateDatasourceModal from "@/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte"
   import DeleteConfirmationModal from "./DeleteConfirmationModal.svelte"
 
   export let datasource
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte
index 3d36d1e00e..6982f87dc7 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DeleteConfirmationModal.svelte
@@ -1,8 +1,8 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { datasources } from "stores/builder"
+  import { datasources } from "@/stores/builder"
   import { notifications } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
 
   export let datasource
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index d7a98c564a..8d85bee556 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -8,12 +8,12 @@
     views,
     viewsV2,
     userSelectedResourceMap,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import QueryNavItem from "./QueryNavItem.svelte"
-  import NavItem from "components/common/NavItem.svelte"
-  import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
+  import NavItem from "@/components/common/NavItem.svelte"
+  import TableNavigator from "@/components/backend/TableNavigator/TableNavigator.svelte"
   import DatasourceNavItem from "./DatasourceNavItem/DatasourceNavItem.svelte"
-  import { TableNames } from "constants"
+  import { TableNames } from "@/constants"
   import { enrichDatasources } from "./datasourceUtils"
   import { onMount } from "svelte"
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte b/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte
index a0cdabc63c..1f6b0060d2 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/IntegrationIcon.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getIcon } from "./icons"
-  import CustomSVG from "components/common/CustomSVG.svelte"
+  import CustomSVG from "@/components/common/CustomSVG.svelte"
 
   export let integrationType
   export let schema
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte b/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte
index 8d7d6dc5d3..5b611cc4df 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte
@@ -3,16 +3,16 @@
     customQueryIconText,
     customQueryIconColor,
     customQueryText,
-  } from "helpers/data/utils"
+  } from "@/helpers/data/utils"
   import { goto as gotoStore, isActive } from "@roxi/routify"
   import {
     datasources,
     queries,
     userSelectedResourceMap,
     contextMenuStore,
-  } from "stores/builder"
-  import NavItem from "components/common/NavItem.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  } from "@/stores/builder"
+  import NavItem from "@/components/common/NavItem.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { notifications, Icon } from "@budibase/bbui"
 
   export let datasource
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/datasourceUtils.js b/packages/builder/src/components/backend/DatasourceNavigator/datasourceUtils.js
index bc7fa53b49..5e38cc9bfe 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/datasourceUtils.js
+++ b/packages/builder/src/components/backend/DatasourceNavigator/datasourceUtils.js
@@ -1,4 +1,4 @@
-import { TableNames } from "constants"
+import { TableNames } from "@/constants"
 
 const showDatasourceOpen = ({
   selected,
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
index 88359c2782..5b48834b5b 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
@@ -16,7 +16,7 @@ import Firebase from "./Firebase.svelte"
 import Redis from "./Redis.svelte"
 import Snowflake from "./Snowflake.svelte"
 import Custom from "./Custom.svelte"
-import { integrations } from "stores/builder"
+import { integrations } from "@/stores/builder"
 import { get } from "svelte/store"
 
 const ICONS = {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
index 1de322c203..37610061ac 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
@@ -12,7 +12,7 @@
     TextArea,
     Dropzone,
   } from "@budibase/bbui"
-  import { datasources, queries } from "stores/builder"
+  import { datasources, queries } from "@/stores/builder"
   import { writable } from "svelte/store"
 
   export let navigateDatasource = false
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte
index e6d6026f7c..df1cf5f589 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte
@@ -1,8 +1,8 @@
 <script>
   import { get } from "svelte/store"
-  import { datasources, integrations } from "stores/builder"
+  import { datasources, integrations } from "@/stores/builder"
   import { notifications, Input, ModalContent, Modal } from "@budibase/bbui"
-  import { integrationForDatasource } from "stores/selectors"
+  import { integrationForDatasource } from "@/stores/selectors"
 
   let error = ""
   let modal
@@ -33,7 +33,7 @@
       ...datasource,
       name,
     }
-    await datasources.update({
+    await datasources.save({
       datasource: updatedDatasource,
       integration: integrationForDatasource(get(integrations), datasource),
     })
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
index 70f2ffef46..569f77d5ce 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/ConfigInput.svelte
@@ -12,6 +12,7 @@
   export let name
   export let config
   export let showModal = () => {}
+  export let placeholder
 
   const selectComponent = type => {
     if (type === "object") {
@@ -40,6 +41,7 @@
   {name}
   {config}
   {showModal}
+  {placeholder}
   on:blur
   on:change
 />
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/LongForm.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/LongForm.svelte
index efbeb007e8..6b366a882e 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/LongForm.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/LongForm.svelte
@@ -5,11 +5,12 @@
   export let name
   export let value
   export let error
+  export let placeholder
 </script>
 
 <div class="form-row">
   <Label>{name}</Label>
-  <TextArea on:blur on:change {type} {value} {error} />
+  <TextArea on:blur on:change {type} {value} {error} {placeholder} />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Object.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Object.svelte
index e92655cc59..6dbfc7f6d9 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Object.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Object.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Label, Button } from "@budibase/bbui"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
 
   export let name
   export let value
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Select.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Select.svelte
index 3185a6c22c..6caf3f25b6 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Select.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/Select.svelte
@@ -6,6 +6,7 @@
   export let value
   export let error
   export let config
+  export let placeholder
 </script>
 
 <div class="form-row">
@@ -17,6 +18,7 @@
     {type}
     value={value || undefined}
     {error}
+    {placeholder}
   />
 </div>
 
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
index 1940488819..4e42a3f1fc 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/fields/String.svelte
@@ -1,11 +1,12 @@
 <script>
   import { Label, EnvDropdown } from "@budibase/bbui"
-  import { environment, licensing } from "stores/portal"
+  import { environment, licensing } from "@/stores/portal"
 
   export let type
   export let name
   export let value
   export let error
+  export let placeholder
   export let showModal = () => {}
 
   async function handleUpgradePanel() {
@@ -22,6 +23,7 @@
     type={type === "port" ? "string" : type}
     {value}
     {error}
+    {placeholder}
     variables={$environment.variables}
     environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
     {showModal}
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte b/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte
index 14191868b6..058b4348cc 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte
@@ -8,12 +8,12 @@
     ModalContent,
   } from "@budibase/bbui"
   import { processStringSync } from "@budibase/string-templates"
-  import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
+  import CreateEditVariableModal from "@/components/portal/environment/CreateEditVariableModal.svelte"
   import ConfigInput from "./ConfigInput.svelte"
   import { createValidatedConfigStore } from "./stores/validatedConfig"
   import { createValidatedNameStore } from "./stores/validatedName"
   import { get } from "svelte/store"
-  import { environment } from "stores/portal"
+  import { environment } from "@/stores/portal"
 
   export let integration
   export let config
@@ -85,7 +85,7 @@
     />
   {/if}
 
-  {#each $configStore.validatedConfig as { type, key, value, error, name, hidden, config }}
+  {#each $configStore.validatedConfig as { type, key, value, error, name, hidden, config, placeholder }}
     {#if hidden === undefined || !eval(processStringSync(hidden, $configStore.config))}
       <ConfigInput
         {type}
@@ -93,6 +93,7 @@
         {error}
         {name}
         {config}
+        {placeholder}
         showModal={() =>
           showModal(newValue => configStore.updateFieldValue(key, newValue))}
         on:blur={() => configStore.markFieldActive(key)}
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js b/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js
index edd39cc49f..df2bab1dd9 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedConfig.js
@@ -1,6 +1,6 @@
 import { derived, writable, get } from "svelte/store"
 import { getValidatorFields } from "./validation"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import { notifications } from "@budibase/bbui"
 import { object } from "yup"
 
@@ -114,6 +114,7 @@ export const createValidatedConfigStore = (integration, config) => {
           value: getValue(),
           error: $errorsStore[key],
           name: capitalise(properties.display || key),
+          placeholder: properties.placeholder,
           type: properties.type,
           hidden: properties.hidden,
           config: properties.config,
diff --git a/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedName.js b/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedName.js
index d4179a8c45..0e7a9c81bc 100644
--- a/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedName.js
+++ b/packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validatedName.js
@@ -1,5 +1,5 @@
 import { derived, get, writable } from "svelte/store"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import { string } from "yup"
 
 export const createValidatedNameStore = (name, isVisible) => {
diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
index 7e11c98768..97d3de6874 100644
--- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
+++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
@@ -2,7 +2,7 @@
   import {
     RelationshipType,
     PrettyRelationshipDefinitions,
-  } from "constants/backend"
+  } from "@/constants/backend"
   import {
     keepOpen,
     Button,
@@ -13,10 +13,10 @@
     Body,
     Helpers,
   } from "@budibase/bbui"
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
   import { RelationshipErrorChecker } from "./relationshipErrors"
   import { onMount } from "svelte"
-  import RelationshipSelector from "components/common/RelationshipSelector.svelte"
+  import RelationshipSelector from "@/components/common/RelationshipSelector.svelte"
 
   export let save
   export let datasource
diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte
index d2682597d4..1bfe87617d 100644
--- a/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte
+++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationshipModal.svelte
@@ -2,8 +2,8 @@
   import { Modal } from "@budibase/bbui"
   import { get } from "svelte/store"
   import CreateEditRelationship from "./CreateEditRelationship.svelte"
-  import { integrations, datasources } from "stores/builder"
-  import { integrationForDatasource } from "stores/selectors"
+  import { integrations, datasources } from "@/stores/builder"
+  import { integrationForDatasource } from "@/stores/selectors"
 
   export let datasource
   export let tables
@@ -41,7 +41,7 @@
         get(integrations),
         datasource
       )
-      await datasources.update({ datasource, integration })
+      await datasources.save({ datasource, integration })
 
       await afterSave({ datasource, action })
     } catch (err) {
diff --git a/packages/builder/src/components/backend/Datasources/TableImportSelection/index.svelte b/packages/builder/src/components/backend/Datasources/TableImportSelection/index.svelte
index 3bc2457c99..66968a7ea2 100644
--- a/packages/builder/src/components/backend/Datasources/TableImportSelection/index.svelte
+++ b/packages/builder/src/components/backend/Datasources/TableImportSelection/index.svelte
@@ -6,8 +6,8 @@
     Layout,
     ModalContent,
   } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
-  import { IntegrationTypes } from "constants/backend"
+  import Spinner from "@/components/common/Spinner.svelte"
+  import { IntegrationTypes } from "@/constants/backend"
   import { createTableSelectionStore } from "./tableSelectionStore"
 
   export let integration
diff --git a/packages/builder/src/components/backend/Datasources/TableImportSelection/tableSelectionStore.js b/packages/builder/src/components/backend/Datasources/TableImportSelection/tableSelectionStore.js
index e9bd06d69b..31a94f0a96 100644
--- a/packages/builder/src/components/backend/Datasources/TableImportSelection/tableSelectionStore.js
+++ b/packages/builder/src/components/backend/Datasources/TableImportSelection/tableSelectionStore.js
@@ -1,6 +1,6 @@
 import { derived, writable, get } from "svelte/store"
 import { keepOpen, notifications } from "@budibase/bbui"
-import { datasources, tables } from "stores/builder"
+import { datasources, tables } from "@/stores/builder"
 
 export const createTableSelectionStore = (integration, datasource) => {
   const tableNamesStore = writable([])
diff --git a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
index 84badeb6b2..60afefd8c6 100644
--- a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
@@ -2,7 +2,7 @@
   import { getBezierPath, BaseEdge, EdgeLabelRenderer } from "@xyflow/svelte"
   import { Icon, TooltipPosition } from "@budibase/bbui"
   import { getContext, onMount } from "svelte"
-  import { roles } from "stores/builder"
+  import { roles } from "@/stores/builder"
 
   export let sourceX
   export let sourceY
diff --git a/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte b/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
index 90c0a9fca8..a9d1aed1e4 100644
--- a/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
@@ -23,9 +23,9 @@
   import { setContext, tick } from "svelte"
   import Controls from "./Controls.svelte"
   import { GridResolution, MaxAutoZoom, ZoomDuration } from "./constants"
-  import { roles } from "stores/builder"
-  import { Roles } from "constants/backend"
-  import { getSequentialName } from "helpers/duplicate"
+  import { roles } from "@/stores/builder"
+  import { Roles } from "@/constants/backend"
+  import { getSequentialName } from "@/helpers/duplicate"
   import { derivedMemo } from "@budibase/frontend-core"
 
   const flow = useSvelteFlow()
diff --git a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
index 32a95f4278..c01ae43362 100644
--- a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
@@ -10,8 +10,8 @@
   } from "@budibase/bbui"
   import { NodeWidth, NodeHeight } from "./constants"
   import { getContext } from "svelte"
-  import { roles } from "stores/builder"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { roles } from "@/stores/builder"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
 
   export let data
   export let id
diff --git a/packages/builder/src/components/backend/RoleEditor/utils.js b/packages/builder/src/components/backend/RoleEditor/utils.js
index a958fc6401..4a7f40ce31 100644
--- a/packages/builder/src/components/backend/RoleEditor/utils.js
+++ b/packages/builder/src/components/backend/RoleEditor/utils.js
@@ -9,8 +9,8 @@ import {
   EmptyStateID,
 } from "./constants"
 import { getNodesBounds, Position } from "@xyflow/svelte"
-import { Roles } from "constants/backend"
-import { roles } from "stores/builder"
+import { Roles } from "@/constants/backend"
+import { roles } from "@/stores/builder"
 import { get } from "svelte/store"
 
 // Calculates the bounds of all custom nodes
diff --git a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
index ce966d0daa..beddf447df 100644
--- a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
@@ -5,10 +5,10 @@
     SourceName,
   } from "@budibase/types"
   import { Select, Toggle, Multiselect, Label, Layout } from "@budibase/bbui"
-  import { DB_TYPE_INTERNAL } from "constants/backend"
-  import { API } from "api"
+  import { DB_TYPE_INTERNAL } from "@/constants/backend"
+  import { API } from "@/api"
   import { parseFile } from "./utils"
-  import { tables, datasources } from "stores/builder"
+  import { tables, datasources } from "@/stores/builder"
 
   let error = null
   let fileName = null
@@ -128,11 +128,7 @@
     allValid = false
 
     if (rows.length > 0) {
-      const response = await API.validateExistingTableImport({
-        rows,
-        tableId,
-      })
-
+      const response = await API.validateExistingTableImport(rows, tableId)
       validation = response.schemaValidation
       invalidColumns = response.invalidColumns
       allValid = response.allValid
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 1694ec8b0e..a7d2b2e6d7 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Select, Icon, Layout, Label } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
+  import { FIELDS } from "@/constants/backend"
   import { utils } from "@budibase/shared-core"
   import { canBeDisplayColumn } from "@budibase/frontend-core"
-  import { API } from "api"
+  import { API } from "@/api"
   import { parseFile } from "./utils"
 
   export let rows = []
@@ -147,7 +147,7 @@
     loading = true
     try {
       if (rows.length > 0) {
-        const response = await API.validateNewTableImport({ rows, schema })
+        const response = await API.validateNewTableImport(rows, schema)
         validation = response.schemaValidation
         allValid = response.allValid
         errors = response.errors
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte
index c0e030845f..183a803902 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte
@@ -1,9 +1,9 @@
 <script>
   import { goto, params } from "@roxi/routify"
-  import { appStore, tables, datasources, screenStore } from "stores/builder"
+  import { appStore, tables, datasources, screenStore } from "@/stores/builder"
   import { InlineAlert, Link, Input, notifications } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DB_TYPE_EXTERNAL } from "constants/backend"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
 
   export let table
 
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/EditModal.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/EditModal.svelte
index f0b49ca8cd..e3bb83f621 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/EditModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavItem/EditModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { cloneDeep } from "lodash/fp"
-  import { tables, datasources } from "stores/builder"
+  import { tables, datasources } from "@/stores/builder"
   import { Input, Modal, ModalContent, notifications } from "@budibase/bbui"
 
   export let table
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte
index 6b64096e2e..f3deccb3c9 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte
@@ -3,14 +3,14 @@
     tables as tablesStore,
     userSelectedResourceMap,
     contextMenuStore,
-  } from "stores/builder"
-  import { TableNames } from "constants"
-  import NavItem from "components/common/NavItem.svelte"
+  } from "@/stores/builder"
+  import { TableNames } from "@/constants"
+  import NavItem from "@/components/common/NavItem.svelte"
   import { isActive } from "@roxi/routify"
   import EditModal from "./EditModal.svelte"
   import DeleteConfirmationModal from "./DeleteConfirmationModal.svelte"
   import { Icon } from "@budibase/bbui"
-  import { DB_TYPE_EXTERNAL } from "constants/backend"
+  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
 
   export let table
   export let idx
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 5596ade573..cc3876208b 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -1,13 +1,13 @@
 <script>
   import { goto, url } from "@roxi/routify"
-  import { tables, datasources } from "stores/builder"
+  import { tables, datasources } from "@/stores/builder"
   import { notifications, Input, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import {
     BUDIBASE_INTERNAL_DB_ID,
     BUDIBASE_DATASOURCE_TYPE,
     DB_TYPE_INTERNAL,
-  } from "constants/backend"
+  } from "@/constants/backend"
 
   $: tableNames = $tables.list.map(table => table.name)
   $: selectedSource = $datasources.list.find(
diff --git a/packages/builder/src/components/backend/TableNavigator/utils.js b/packages/builder/src/components/backend/TableNavigator/utils.js
index a76a14c1a4..2889d90cc0 100644
--- a/packages/builder/src/components/backend/TableNavigator/utils.js
+++ b/packages/builder/src/components/backend/TableNavigator/utils.js
@@ -1,5 +1,5 @@
-import { API } from "api"
-import { FIELDS } from "constants/backend"
+import { API } from "@/api"
+import { FIELDS } from "@/constants/backend"
 
 const BYTES_IN_MB = 1000000
 const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 51a688fc72..4598b44873 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -7,7 +7,7 @@
     Detail,
     notifications,
   } from "@budibase/bbui"
-  import { API } from "api"
+  import { API } from "@/api"
   import { goto } from "@roxi/routify"
   import {
     automationStore,
@@ -19,8 +19,8 @@
     queries,
     tables,
     views,
-  } from "stores/builder"
-  import { themeStore } from "stores/portal"
+  } from "@/stores/builder"
+  import { themeStore } from "@/stores/portal"
   import { getContext } from "svelte"
   import { ThemeOptions } from "@budibase/shared-core"
 
diff --git a/packages/builder/src/components/common/AIFieldConfiguration.svelte b/packages/builder/src/components/common/AIFieldConfiguration.svelte
index cb7ac77b75..24908e0fe2 100644
--- a/packages/builder/src/components/common/AIFieldConfiguration.svelte
+++ b/packages/builder/src/components/common/AIFieldConfiguration.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Helpers, Multiselect, Select } from "@budibase/bbui"
-  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
-  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
+  import ServerBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
+  import ModalBindableInput from "@/components/common/bindings/ModalBindableInput.svelte"
   import {
     AIOperations,
     OperationFields,
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index c3e4835f96..f94d26603d 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -43,7 +43,7 @@
   import { Compartment, EditorState } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes } from "./"
-  import { themeStore } from "stores/portal"
+  import { themeStore } from "@/stores/portal"
 
   export let label
   export let completions = []
diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
index 48177ff870..94cc9ccd0d 100644
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@@ -26,8 +26,8 @@
 
 <script>
   import { Label } from "@budibase/bbui"
-  import CodeMirror from "components/integration/codemirror"
-  import { themeStore } from "stores/portal"
+  import CodeMirror from "@/components/integration/codemirror"
+  import { themeStore } from "@/stores/portal"
   import { createEventDispatcher, onMount } from "svelte"
 
   export let mode = EditorModes.JS
diff --git a/packages/builder/src/components/common/Dropzone.spec.js b/packages/builder/src/components/common/Dropzone.spec.js
index 8bf202223b..0ffa7e51a1 100644
--- a/packages/builder/src/components/common/Dropzone.spec.js
+++ b/packages/builder/src/components/common/Dropzone.spec.js
@@ -2,7 +2,7 @@ import { it, expect, describe, vi } from "vitest"
 import Dropzone from "./Dropzone.svelte"
 import { render, fireEvent } from "@testing-library/svelte"
 import { notifications } from "@budibase/bbui"
-import { admin } from "stores/portal"
+import { admin } from "@/stores/portal"
 
 vi.spyOn(notifications, "error").mockImplementation(() => {})
 
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 8cd85e2530..149462a97a 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Dropzone, notifications } from "@budibase/bbui"
-  import { admin } from "stores/portal"
-  import { API } from "api"
+  import { admin } from "@/stores/portal"
+  import { API } from "@/api"
 
   export let value = []
   export let label
diff --git a/packages/builder/src/components/common/EditableIcon.svelte b/packages/builder/src/components/common/EditableIcon.svelte
index 6c0986e601..150a23ecb7 100644
--- a/packages/builder/src/components/common/EditableIcon.svelte
+++ b/packages/builder/src/components/common/EditableIcon.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon, Modal } from "@budibase/bbui"
-  import ChooseIconModal from "components/start/ChooseIconModal.svelte"
+  import ChooseIconModal from "@/components/start/ChooseIconModal.svelte"
 
   export let name
   export let size = "M"
diff --git a/packages/builder/src/components/common/HelpMenu.svelte b/packages/builder/src/components/common/HelpMenu.svelte
index bba55e88dc..db2b496c12 100644
--- a/packages/builder/src/components/common/HelpMenu.svelte
+++ b/packages/builder/src/components/common/HelpMenu.svelte
@@ -1,9 +1,9 @@
 <script>
   import FontAwesomeIcon from "./FontAwesomeIcon.svelte"
   import { Popover, Heading, Body } from "@budibase/bbui"
-  import { licensing } from "stores/portal"
-  import { isPremiumOrAbove } from "helpers/planTitle"
-  import { ChangelogURL } from "constants"
+  import { licensing } from "@/stores/portal"
+  import { isPremiumOrAbove } from "@/helpers/planTitle"
+  import { ChangelogURL } from "@/constants"
 
   $: premiumOrAboveLicense = isPremiumOrAbove($licensing?.license?.plan?.type)
 
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index 009d943456..8875b8896b 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { tables } from "stores/builder"
-  import { API } from "api"
+  import { tables } from "@/stores/builder"
+  import { API } from "@/api"
   import { Select, Label, Multiselect } from "@budibase/bbui"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
   import { createEventDispatcher } from "svelte"
 
   export let schema
diff --git a/packages/builder/src/components/common/NavHeader.svelte b/packages/builder/src/components/common/NavHeader.svelte
index 2c67a3f9b3..d83d7f578b 100644
--- a/packages/builder/src/components/common/NavHeader.svelte
+++ b/packages/builder/src/components/common/NavHeader.svelte
@@ -1,7 +1,7 @@
 <script>
   import { tick } from "svelte"
   import { Icon, Body } from "@budibase/bbui"
-  import { keyUtils } from "helpers/keyUtils"
+  import { keyUtils } from "@/helpers/keyUtils"
 
   export let title
   export let placeholder
diff --git a/packages/builder/src/components/common/RoleIcon.svelte b/packages/builder/src/components/common/RoleIcon.svelte
index 3b48935e0c..e6c5af6ee0 100644
--- a/packages/builder/src/components/common/RoleIcon.svelte
+++ b/packages/builder/src/components/common/RoleIcon.svelte
@@ -1,6 +1,6 @@
 <script>
   import { StatusLight } from "@budibase/bbui"
-  import { roles } from "stores/builder"
+  import { roles } from "@/stores/builder"
 
   export let id
   export let size = "M"
diff --git a/packages/builder/src/components/common/RoleSelect.svelte b/packages/builder/src/components/common/RoleSelect.svelte
index 38b84e964d..62c33458bf 100644
--- a/packages/builder/src/components/common/RoleSelect.svelte
+++ b/packages/builder/src/components/common/RoleSelect.svelte
@@ -1,11 +1,11 @@
 <script>
   import { Select, FancySelect } from "@budibase/bbui"
-  import { roles } from "stores/builder"
-  import { licensing } from "stores/portal"
+  import { roles } from "@/stores/builder"
+  import { licensing } from "@/stores/portal"
 
   import { Constants } from "@budibase/frontend-core"
   import { createEventDispatcher } from "svelte"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
 
   export let value
   export let error
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte
index 4fbd8b1fb8..a72e846011 100644
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Layout, Detail, Button, Modal } from "@budibase/bbui"
-  import TemplateCard from "components/common/TemplateCard.svelte"
-  import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { licensing } from "stores/portal"
-  import { Content, SideNav, SideNavItem } from "components/portal/page"
+  import TemplateCard from "@/components/common/TemplateCard.svelte"
+  import CreateAppModal from "@/components/start/CreateAppModal.svelte"
+  import { licensing } from "@/stores/portal"
+  import { Content, SideNav, SideNavItem } from "@/components/portal/page"
 
   export let templates
 
diff --git a/packages/builder/src/components/common/UndoRedoControl.svelte b/packages/builder/src/components/common/UndoRedoControl.svelte
index bd197f3d38..b6407b7aa1 100644
--- a/packages/builder/src/components/common/UndoRedoControl.svelte
+++ b/packages/builder/src/components/common/UndoRedoControl.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Icon, ActionButton } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { isBuilderInputFocused } from "helpers"
+  import { isBuilderInputFocused } from "@/helpers"
 
   export let store
   export let showButtonGroup = false
diff --git a/packages/builder/src/components/common/UpdateAppForm.svelte b/packages/builder/src/components/common/UpdateAppForm.svelte
index 0e07c5c918..b399d3f063 100644
--- a/packages/builder/src/components/common/UpdateAppForm.svelte
+++ b/packages/builder/src/components/common/UpdateAppForm.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Button, Label, Icon, Input, notifications } from "@budibase/bbui"
-  import { AppStatus } from "constants"
-  import { appStore, initialise } from "stores/builder"
-  import { appsStore } from "stores/portal"
-  import { API } from "api"
+  import { AppStatus } from "@/constants"
+  import { appStore, initialise } from "@/stores/builder"
+  import { appsStore } from "@/stores/portal"
+  import { API } from "@/api"
   import { writable } from "svelte/store"
-  import { createValidationStore } from "helpers/validation/yup"
-  import * as appValidation from "helpers/validation/yup/app"
-  import EditableIcon from "components/common/EditableIcon.svelte"
+  import { createValidationStore } from "@/helpers/validation/yup"
+  import * as appValidation from "@/helpers/validation/yup/app"
+  import EditableIcon from "@/components/common/EditableIcon.svelte"
   import { isEqual } from "lodash"
   import { createEventDispatcher } from "svelte"
 
diff --git a/packages/builder/src/components/common/VerificationPromptBanner.svelte b/packages/builder/src/components/common/VerificationPromptBanner.svelte
index e9109ae0b1..d707eb640d 100644
--- a/packages/builder/src/components/common/VerificationPromptBanner.svelte
+++ b/packages/builder/src/components/common/VerificationPromptBanner.svelte
@@ -1,6 +1,6 @@
 <script>
   import { notifications, Button, Icon, Body } from "@budibase/bbui"
-  import { admin, auth } from "stores/portal"
+  import { admin, auth } from "@/stores/portal"
 
   $: user = $auth.user
   let loading = false
diff --git a/packages/builder/src/components/common/bindings/BindableCombobox.svelte b/packages/builder/src/components/common/bindings/BindableCombobox.svelte
index 3754abd341..b3b7511ccd 100644
--- a/packages/builder/src/components/common/bindings/BindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/BindableCombobox.svelte
@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
+  } from "@/dataBinding"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 4186cb54cc..4d1de22a57 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -14,7 +14,7 @@
     processObjectSync,
     processStringSync,
   } from "@budibase/string-templates"
-  import { readableToRuntimeBinding } from "dataBinding"
+  import { readableToRuntimeBinding } from "@/dataBinding"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
   import {
     getHelperCompletions,
@@ -29,9 +29,9 @@
   import SnippetSidePanel from "./SnippetSidePanel.svelte"
   import { BindingHelpers } from "./utils"
   import formatHighlight from "json-format-highlight"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
   import { Utils } from "@budibase/frontend-core"
-  import { licensing } from "stores/portal"
+  import { licensing } from "@/stores/portal"
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index f364b39ba9..c45d7999e5 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -2,7 +2,7 @@
   import groupBy from "lodash/fp/groupBy"
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
-  import { handlebarsCompletions } from "constants/completions"
+  import { handlebarsCompletions } from "@/constants/completions"
 
   export let addHelper
   export let addBinding
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 4aa7ced9dc..6d329a8321 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { previewStore, snippets } from "stores/builder"
+  import { previewStore, snippets } from "@/stores/builder"
   import { onMount } from "svelte"
 
   export let bindings = []
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index a4a1a2b356..77eb280bb7 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -3,8 +3,8 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
-  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  } from "@/dataBinding"
+  import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 65831b652a..aec23f6ccc 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -3,11 +3,11 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
-  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  } from "@/dataBinding"
+  import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
-  import { builderStore } from "stores/builder"
+  import { builderStore } from "@/stores/builder"
 
   export let panel = ClientBindingPanel
   export let value = ""
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index e41a740229..6fda04480c 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -3,10 +3,10 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
+  } from "@/dataBinding"
   import { FieldType } from "@budibase/types"
 
-  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding, findHBSBlocks } from "@budibase/string-templates"
 
diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index 3261dc6b74..dcd62f4eed 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -1,5 +1,5 @@
 <script>
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 </script>
 
 <DrawerBindableInput
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index df0da768e0..19a466db6b 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { snippets } from "stores/builder"
+  import { snippets } from "@/stores/builder"
 
   export let bindings = []
   export let value = ""
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index d8e56b059a..90ca6ffd9f 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -8,11 +8,11 @@
     TooltipType,
     notifications,
   } from "@budibase/bbui"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import BindingPanel from "@/components/common/bindings/BindingPanel.svelte"
   import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
-  import { snippets } from "stores/builder"
-  import { getSequentialName } from "helpers/duplicate"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { snippets } from "@/stores/builder"
+  import { getSequentialName } from "@/helpers/duplicate"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { ValidSnippetNameRegex } from "@budibase/shared-core"
 
   export let snippet
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
index 2cc27b91cd..95f40005c0 100644
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -9,11 +9,11 @@
     Body,
     Button,
   } from "@budibase/bbui"
-  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import { EditorModes } from "components/common/CodeEditor"
+  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
+  import { EditorModes } from "@/components/common/CodeEditor"
   import SnippetDrawer from "./SnippetDrawer.svelte"
-  import { licensing } from "stores/portal"
-  import UpgradeButton from "pages/builder/portal/_components/UpgradeButton.svelte"
+  import { licensing } from "@/stores/portal"
+  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
 
   export let addSnippet
   export let snippets
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index 77e4a1dfb1..9fc147a420 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -1,5 +1,5 @@
 import { decodeJSBinding } from "@budibase/string-templates"
-import { hbInsert, jsInsert } from "components/common/CodeEditor"
+import { hbInsert, jsInsert } from "@/components/common/CodeEditor"
 
 export const BindingType = {
   READABLE: "readableBinding",
diff --git a/packages/builder/src/components/common/renderers/CapitaliseRenderer.svelte b/packages/builder/src/components/common/renderers/CapitaliseRenderer.svelte
index b5155fc044..bc019a3c71 100644
--- a/packages/builder/src/components/common/renderers/CapitaliseRenderer.svelte
+++ b/packages/builder/src/components/common/renderers/CapitaliseRenderer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
 
   export let value
 </script>
diff --git a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
index bd7f5b50c7..46597a57c8 100644
--- a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@@ -1,7 +1,10 @@
 <script>
   import { FancyForm, FancyInput } from "@budibase/bbui"
-  import { createValidationStore, requiredValidator } from "helpers/validation"
-  import { admin } from "stores/portal"
+  import {
+    createValidationStore,
+    requiredValidator,
+  } from "@/helpers/validation"
+  import { admin } from "@/stores/portal"
 
   export let password
   export let passwordForm
diff --git a/packages/builder/src/components/common/users/UpgradeModal.svelte b/packages/builder/src/components/common/users/UpgradeModal.svelte
index 52d5e1f9e9..fd2cc4f680 100644
--- a/packages/builder/src/components/common/users/UpgradeModal.svelte
+++ b/packages/builder/src/components/common/users/UpgradeModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ModalContent } from "@budibase/bbui"
-  import { licensing } from "stores/portal"
+  import { licensing } from "@/stores/portal"
 
   export let isOwner
 </script>
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 9ba46832f4..f57563b2ab 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -11,13 +11,13 @@
     StatusLight,
     AbsTooltip,
   } from "@budibase/bbui"
-  import RevertModal from "components/deploy/RevertModal.svelte"
-  import VersionModal from "components/deploy/VersionModal.svelte"
+  import RevertModal from "@/components/deploy/RevertModal.svelte"
+  import VersionModal from "@/components/deploy/VersionModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import analytics, { Events, EventSource } from "analytics"
-  import { API } from "api"
-  import { appsStore } from "stores/portal"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import analytics, { Events, EventSource } from "@/analytics"
+  import { API } from "@/api"
+  import { appsStore } from "@/stores/portal"
   import {
     previewStore,
     builderStore,
@@ -26,9 +26,9 @@
     deploymentStore,
     sortedScreens,
     appPublished,
-  } from "stores/builder"
-  import TourWrap from "components/portal/onboarding/TourWrap.svelte"
-  import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
+  } from "@/stores/builder"
+  import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
+  import { TOUR_STEP_KEYS } from "@/components/portal/onboarding/tours.js"
   import { goto } from "@roxi/routify"
 
   export let application
diff --git a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
index 899d1659e8..927d69f43c 100644
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
   import { ModalContent } from "@budibase/bbui"
   import { onMount } from "svelte"
   import WebhookDisplay from "../automation/Shared/WebhookDisplay.svelte"
-  import { TriggerStepID } from "constants/backend/automations"
+  import { TriggerStepID } from "@/constants/backend/automations"
 
   let webhookUrls = []
 
diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 02ac583839..ebdcb6e5e8 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Input, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { appsStore } from "stores/portal"
-  import { API } from "api"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import { appsStore } from "@/stores/portal"
+  import { API } from "@/api"
 
   export let appId
   export let appName
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index dc97c81c22..a8c7b04d9f 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Input, Modal, notifications, ModalContent } from "@budibase/bbui"
-  import { appStore, initialise } from "stores/builder"
-  import { API } from "api"
+  import { appStore, initialise } from "@/stores/builder"
+  import { API } from "@/api"
 
   export let onComplete = () => {}
 
diff --git a/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte b/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte
index ed40a101d0..b9092e8baa 100644
--- a/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte
+++ b/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { API } from "api"
+  import { API } from "@/api"
   import clientVersions from "./clientVersions.json"
-  import { appStore } from "stores/builder"
+  import { appStore } from "@/stores/builder"
   import { Select } from "@budibase/bbui"
 
   export let revertableVersion
diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index 653aa09fa6..f8fe2fff5d 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/packages/builder/src/components/deploy/VersionModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { admin } from "stores/portal"
+  import { admin } from "@/stores/portal"
   import {
     Modal,
     notifications,
@@ -9,10 +9,10 @@
     StatusLight,
     Link,
   } from "@budibase/bbui"
-  import { appStore, initialise } from "stores/builder"
-  import { API } from "api"
+  import { appStore, initialise } from "@/stores/builder"
+  import { API } from "@/api"
   import RevertModalVersionSelect from "./RevertModalVersionSelect.svelte"
-  import { ChangelogURL } from "constants"
+  import { ChangelogURL } from "@/constants"
 
   export function show() {
     updateModal.show()
diff --git a/packages/builder/src/components/design/ScreenDetailsModal.svelte b/packages/builder/src/components/design/ScreenDetailsModal.svelte
index 34872daf8c..3f8e08d031 100644
--- a/packages/builder/src/components/design/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/ScreenDetailsModal.svelte
@@ -1,8 +1,8 @@
 <script>
   import { ModalContent, Input } from "@budibase/bbui"
-  import sanitizeUrl from "helpers/sanitizeUrl"
+  import sanitizeUrl from "@/helpers/sanitizeUrl"
   import { get } from "svelte/store"
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
 
   export let onConfirm
   export let onCancel
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index ede48b84ba..724a544823 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -1,5 +1,5 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
-import { licensing } from "stores/portal"
+import { licensing } from "@/stores/portal"
 import { get } from "svelte/store"
 import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
@@ -19,7 +19,7 @@ import URLSelect from "./controls/URLSelect.svelte"
 import OptionsEditor from "./controls/OptionsEditor/OptionsEditor.svelte"
 import FormFieldSelect from "./controls/FormFieldSelect.svelte"
 import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
-import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
 import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import GridColumnEditor from "./controls/GridColumnConfiguration/GridColumnConfiguration.svelte"
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 471207dcff..5266c9ce07 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -16,7 +16,7 @@
     getActionBindings,
     makeStateBinding,
     updateReferencesInObject,
-  } from "dataBinding"
+  } from "@/dataBinding"
   import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150
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 6e7c5874fc..19ec3df010 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,9 +1,9 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "dataBinding"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import { getActionProviders } from "@/dataBinding"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte
index 0b0fe0cfb7..af31519081 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "dataBinding"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import { getActionProviders } from "@/dataBinding"
 
   export let parameters
   export let nested
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte
index ad44ae0f2a..cd289e3f61 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Label, Select, Body } from "@budibase/bbui"
-  import { findAllMatchingComponents } from "helpers/components"
-  import { selectedScreen } from "stores/builder"
+  import { findAllMatchingComponents } from "@/helpers/components"
+  import { selectedScreen } from "@/stores/builder"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
index 12d4bad05a..c72fbf3c0f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Label } from "@budibase/bbui"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ContinueIf.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ContinueIf.svelte
index 91b70e0c45..2bd9d1ea7d 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ContinueIf.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ContinueIf.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Body } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings
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 410e4bb56e..da5a1168d5 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,7 +1,7 @@
 <script>
   import { Select, Label, Checkbox, Body } from "@budibase/bbui"
-  import { tables, viewsV2 } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { tables, viewsV2 } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DownloadFile.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DownloadFile.svelte
index babaf2815b..7487bff37c 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DownloadFile.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DownloadFile.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
   import { FieldType } from "@budibase/types"
-  import { tables, viewsV2 } from "stores/builder"
+  import { tables, viewsV2 } from "@/stores/builder"
 
   export let parameters
   export let bindings = []
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 e92991ad70..cc3ad058b6 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
@@ -5,11 +5,11 @@
     componentStore,
     tables,
     viewsV2,
-  } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { getSchemaForDatasourcePlus } from "dataBinding"
+  } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { getSchemaForDatasourcePlus } from "@/dataBinding"
   import SaveFields from "./SaveFields.svelte"
-  import { getDatasourceLikeProviders } from "components/design/settings/controls/ButtonActionEditor/actions/utils"
+  import { getDatasourceLikeProviders } from "@/components/design/settings/controls/ButtonActionEditor/actions/utils"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte
index 498d9b4a66..a92ef11639 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExecuteQuery.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Select, Layout, Checkbox } from "@budibase/bbui"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { datasources, integrations, queries } from "stores/builder"
-  import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
-  import IntegrationQueryEditor from "components/integration/index.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { datasources, integrations, queries } from "@/stores/builder"
+  import BindingBuilder from "@/components/integration/QueryBindingBuilder.svelte"
+  import IntegrationQueryEditor from "@/components/integration/index.svelte"
   import {
     BUDIBASE_INTERNAL_DB_ID,
     BUDIBASE_DATASOURCE_TYPE,
-  } from "constants/backend"
+  } from "@/constants/backend"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte
index a857bc7ede..a2de49935b 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte
@@ -2,8 +2,8 @@
   import { Label, Select, Body } from "@budibase/bbui"
   import { onMount } from "svelte"
   import ColumnEditor from "../../ColumnEditor/ColumnEditor.svelte"
-  import { findAllMatchingComponents } from "helpers/components"
-  import { selectedScreen } from "stores/builder"
+  import { findAllMatchingComponents } from "@/helpers/components"
+  import { selectedScreen } from "@/stores/builder"
 
   export let parameters
 
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 61b7494ab2..db86cee171 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,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { tables, viewsV2 } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { tables, viewsV2 } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/LogOut.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/LogOut.svelte
index f0606d86b3..7a1019fb5e 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/LogOut.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Label, Body, Layout } from "@budibase/bbui"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/NavigateTo.svelte
index 86f454d6bc..54943c19c4 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/NavigateTo.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
   import { onMount } from "svelte"
   import { Label, Checkbox, Select } from "@budibase/bbui"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableCombobox from "@/components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenModal.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenModal.svelte
index 8e61b8763f..4bc2f2017a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenModal.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "helpers/components"
+  import { selectedScreen } from "@/stores/builder"
+  import { findAllMatchingComponents } from "@/helpers/components"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte
index 1eb1c1116b..50a4ef9453 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "helpers/components"
+  import { selectedScreen } from "@/stores/builder"
+  import { findAllMatchingComponents } from "@/helpers/components"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte
index 77fb579aa4..e883a92ec2 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Body, Label } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte
index 3a56689f82..9cbe4baf7f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "dataBinding"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import { getActionProviders } from "@/dataBinding"
 
   export let parameters
   export let nested
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RowAction.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RowAction.svelte
index 8158d2dea5..2b45bdbdc4 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RowAction.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RowAction.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label, Checkbox } from "@budibase/bbui"
-  import { tables, viewsV2, rowActions } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { tables, viewsV2, rowActions } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte
index 11bd58a860..e3390b9b1a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "helpers/components"
+  import { selectedScreen } from "@/stores/builder"
+  import { findAllMatchingComponents } from "@/helpers/components"
 
   export let parameters
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
index e03af75207..c6c912b1a7 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   const dispatch = createEventDispatcher()
 
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 819ed10880..a3d09693d2 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
@@ -5,11 +5,11 @@
     componentStore,
     tables,
     viewsV2,
-  } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { getSchemaForDatasourcePlus } from "dataBinding"
+  } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { getSchemaForDatasourcePlus } from "@/dataBinding"
   import SaveFields from "./SaveFields.svelte"
-  import { getDatasourceLikeProviders } from "components/design/settings/controls/ButtonActionEditor/actions/utils"
+  import { getDatasourceLikeProviders } from "@/components/design/settings/controls/ButtonActionEditor/actions/utils"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte
index af16c4d197..074189627a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { selectedScreen, componentStore } from "stores/builder"
+  import { selectedScreen, componentStore } from "@/stores/builder"
   import { Label, Combobox, Select } from "@budibase/bbui"
-  import { getActionProviders, buildFormSchema } from "dataBinding"
-  import { findComponent } from "helpers/components"
+  import { getActionProviders, buildFormSchema } from "@/dataBinding"
+  import { findComponent } from "@/helpers/components"
 
   export let parameters
   export let nested
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
index ef6232b382..e515590297 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label, Checkbox } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index 5cd5658063..e6e89d13aa 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Select, Label, Input, Checkbox, Icon, Body } from "@budibase/bbui"
-  import { automationStore } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { TriggerStepID, ActionStepID } from "constants/backend/automations"
+  import { automationStore } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { TriggerStepID, ActionStepID } from "@/constants/backend/automations"
 
   export let parameters = {}
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
index 9c843e35d6..a8e3eceeba 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Select, Label, Combobox } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders, buildFormSchema } from "dataBinding"
-  import { findComponent } from "helpers/components"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import { getActionProviders, buildFormSchema } from "@/dataBinding"
+  import { findComponent } from "@/helpers/components"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
index fda05ef45a..025170e780 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Select, Label, Combobox, Checkbox, Body } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { getAllStateVariables } from "dataBinding"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import { getAllStateVariables } from "@/dataBinding"
 
   export let parameters
   export let bindings = []
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte
index f44b68d4c6..8eec588794 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import { getActionProviders } from "dataBinding"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import { getActionProviders } from "@/dataBinding"
 
   export let parameters
   export let nested
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
index ba7955f1a5..30ec0039d9 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
@@ -1,5 +1,5 @@
-import { getAllComponentContexts } from "dataBinding"
-import { capitalise } from "helpers"
+import { getAllComponentContexts } from "@/dataBinding"
+import { capitalise } from "@/helpers"
 
 // Generates bindings for all components that provider "datasource like"
 // contexts. This includes "form" contexts and "schema" contexts. This is used
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js
index e8da0f74df..8602cbf064 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js
@@ -1,6 +1,6 @@
 import * as ActionComponents from "./actions"
 import { get } from "svelte/store"
-import { appStore } from "stores/builder"
+import { appStore } from "@/stores/builder"
 // @ts-ignore
 import ActionDefinitions from "./manifest.json"
 
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index 6f3a13a745..6bb9c54e18 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -3,10 +3,10 @@
   import ButtonSetting from "./ButtonSetting.svelte"
   import { createEventDispatcher } from "svelte"
   import { Helpers, Menu, MenuItem, Popover } from "@budibase/bbui"
-  import { componentStore } from "stores/builder"
-  import { getEventContextBindings } from "dataBinding"
+  import { componentStore } from "@/stores/builder"
+  import { getEventContextBindings } from "@/dataBinding"
   import { cloneDeep, isEqual } from "lodash/fp"
-  import { getRowActionButtonTemplates } from "templates/rowActions"
+  import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
   export let componentInstance
   export let componentBindings
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
index 2387fda683..726f3cdbea 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -1,7 +1,7 @@
 <script>
   import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
-  import { runtimeToReadableBinding } from "dataBinding"
+  import { runtimeToReadableBinding } from "@/dataBinding"
   import { isJSBinding } from "@budibase/string-templates"
 
   export let item
diff --git a/packages/builder/src/components/design/settings/controls/ColorPicker.svelte b/packages/builder/src/components/design/settings/controls/ColorPicker.svelte
index e4e27a2fe5..7f013e3717 100644
--- a/packages/builder/src/components/design/settings/controls/ColorPicker.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColorPicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { themeStore } from "stores/builder"
+  import { themeStore } from "@/stores/builder"
 
   export let value
 </script>
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 d2e0ddc1b0..13db369893 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
@@ -7,8 +7,8 @@
     Layout,
     Label,
   } from "@budibase/bbui"
-  import { themeStore, previewStore } from "stores/builder"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { themeStore, previewStore } from "@/stores/builder"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   export let column
 
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
index 4a11211662..5e27b591f8 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
@@ -4,8 +4,11 @@
   import { createEventDispatcher } from "svelte"
   import ColumnDrawer from "./ColumnDrawer.svelte"
   import { cloneDeep } from "lodash/fp"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen, tables } from "stores/builder"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { selectedScreen, tables } from "@/stores/builder"
 
   export let componentInstance
   export let value = []
diff --git a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
index 2e74cac0f4..310a22e73e 100644
--- a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { makePropSafe } from "@budibase/string-templates"
-  import { selectedScreen } from "stores/builder"
-  import { findAllMatchingComponents } from "helpers/components"
+  import { selectedScreen } from "@/stores/builder"
+  import { findAllMatchingComponents } from "@/helpers/components"
 
   export let value
 
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index e79ed75d76..e7a30e68dd 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
@@ -2,7 +2,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
+  } from "@/dataBinding"
   import {
     Button,
     Popover,
@@ -26,15 +26,15 @@
     componentStore,
     datasources,
     integrations,
-  } from "stores/builder"
-  import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
-  import IntegrationQueryEditor from "components/integration/index.svelte"
+  } from "@/stores/builder"
+  import BindingBuilder from "@/components/integration/QueryBindingBuilder.svelte"
+  import IntegrationQueryEditor from "@/components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
-  import { findAllComponents } from "helpers/components"
-  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
-  import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
-  import { API } from "api"
-  import { datasourceSelect as format } from "helpers/data/format"
+  import { findAllComponents } from "@/helpers/components"
+  import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
+  import DataSourceCategory from "@/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
+  import { API } from "@/api"
+  import { datasourceSelect as format } from "@/helpers/data/format"
 
   export let value = {}
   export let otherSources
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index a491561f93..211f73cb3f 100644
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Icon, Popover, Layout } from "@budibase/bbui"
-  import { componentStore } from "stores/builder"
+  import { componentStore } from "@/stores/builder"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
-  import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import ComponentSettingsSection from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
 
   export let anchor
   export let componentInstance
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
index 7fbac09827..085ac5702c 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
   import {
     BindingValue,
     Block,
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
index 811283ba51..f01b176704 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
@@ -1,13 +1,13 @@
 <script>
   import { decodeJSBinding } from "@budibase/string-templates"
-  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import { EditorModes } from "components/common/CodeEditor"
+  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
+  import { EditorModes } from "@/components/common/CodeEditor"
   import {
     runtimeToReadableBinding,
     getDatasourceForProvider,
-  } from "dataBinding"
-  import { tables, selectedScreen, selectedComponent } from "stores/builder"
-  import { getBindings } from "components/backend/DataTable/formula"
+  } from "@/dataBinding"
+  import { tables, selectedScreen, selectedComponent } from "@/stores/builder"
+  import { getBindings } from "@/components/backend/DataTable/formula"
 
   export let value
   $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index 42ae9ed783..177f2edcd3 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -16,7 +16,7 @@
     DateAsNumber,
   } from "./lines"
   import subjects from "./subjects"
-  import { appStore } from "stores/builder"
+  import { appStore } from "@/stores/builder"
 
   export let tableHref = () => {}
   export let schema
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
index ef2616f562..b7e0693d76 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Text } from "../typography"
   import { FieldType } from "@budibase/types"
-  import { FIELDS } from "constants/backend"
+  import { FIELDS } from "@/constants/backend"
   import subjects from "../subjects"
 
   export let schema
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
index ccb33798d7..0541856737 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
@@ -2,7 +2,7 @@
   import { Line, InfoWord, DocumentationLink, Text } from "../typography"
   import subjects from "../subjects"
   import * as explanation from "../explanation"
-  import { componentStore } from "stores/builder"
+  import { componentStore } from "@/stores/builder"
 
   export let setExplanationSubject
   export let support
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 4d1a4a2f69..e1a718c210 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -6,8 +6,8 @@
     getSchemaForDatasource,
     getBindableProperties,
     getComponentBindableProperties,
-  } from "dataBinding"
-  import { selectedScreen, componentStore } from "stores/builder"
+  } from "@/dataBinding"
+  import { selectedScreen, componentStore } from "@/stores/builder"
   import DraggableList from "../DraggableList/DraggableList.svelte"
   import { createEventDispatcher } from "svelte"
   import FieldSetting from "./FieldSetting.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
index 27590a9858..d39af94ce1 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@@ -3,9 +3,9 @@
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
-  import { runtimeToReadableBinding } from "dataBinding"
+  import { runtimeToReadableBinding } from "@/dataBinding"
   import { isJSBinding } from "@budibase/string-templates"
-  import { componentStore } from "stores/builder"
+  import { componentStore } from "@/stores/builder"
 
   export let item
   export let componentBindings
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index aab7eb60a5..f6d0190562 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -1,7 +1,10 @@
 <script>
   import { Select, ContextTooltip } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { selectedScreen } from "@/stores/builder"
   import { createEventDispatcher } from "svelte"
   import { Explanation } from "./Explanation"
   import { debounce } from "lodash"
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
index 7e3cf5d3ec..010216cb4d 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
@@ -1,11 +1,11 @@
 <script>
-  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import { CoreFilterBuilder } from "@budibase/frontend-core"
-  import { tables } from "stores/builder"
+  import { tables } from "@/stores/builder"
   import {
     runtimeToReadableBinding,
     readableToRuntimeBinding,
-  } from "dataBinding"
+  } from "@/dataBinding"
 
   export let schemaFields
   export let filters
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
index b8a6b86b4d..2776411050 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
@@ -7,9 +7,12 @@
     DrawerContent,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
   import FilterBuilder from "./FilterBuilder.svelte"
-  import { tables, selectedScreen } from "stores/builder"
+  import { tables, selectedScreen } from "@/stores/builder"
   import { search, Utils } from "@budibase/frontend-core"
   import { utils } from "@budibase/shared-core"
 
diff --git a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte
index b418cb3111..0ddca2b0e9 100644
--- a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Combobox } from "@budibase/bbui"
-  import { selectedScreen } from "stores/builder"
-  import { getComponentFieldOptions } from "helpers/formFields"
+  import { selectedScreen } from "@/stores/builder"
+  import { getComponentFieldOptions } from "@/helpers/formFields"
 
   export let componentInstance
   export let value
diff --git a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
index 6e7297a245..380ff73848 100644
--- a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
@@ -1,8 +1,12 @@
 <script>
   import { createEventDispatcher, setContext } from "svelte"
-  import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
-  import { getDatasourceForProvider } from "dataBinding"
-  import { selectedScreen, componentStore, previewStore } from "stores/builder"
+  import ComponentSettingsSection from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import { getDatasourceForProvider } from "@/dataBinding"
+  import {
+    selectedScreen,
+    componentStore,
+    previewStore,
+  } from "@/stores/builder"
   import { Helpers } from "@budibase/bbui"
   import { derived, writable } from "svelte/store"
   import { Utils } from "@budibase/frontend-core"
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
index 149ec7265a..fef6a99a4d 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
@@ -3,7 +3,7 @@
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
-  import { FIELDS } from "constants/backend"
+  import { FIELDS } from "@/constants/backend"
   import { Constants } from "@budibase/frontend-core"
   import { FieldType } from "@budibase/types"
 
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
index 39f9e37658..46aea2a6c4 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
@@ -1,13 +1,16 @@
 <script>
   import { enrichSchemaWithRelColumns } from "@budibase/frontend-core"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen, componentStore } from "stores/builder"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { selectedScreen, componentStore } from "@/stores/builder"
   import DraggableList from "../DraggableList/DraggableList.svelte"
   import { createEventDispatcher } from "svelte"
   import FieldSetting from "./FieldSetting.svelte"
   import PrimaryColumnFieldSetting from "./PrimaryColumnFieldSetting.svelte"
   import getColumns from "./getColumns.js"
-  import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
 
   export let value
   export let componentInstance
@@ -23,12 +26,14 @@
   const getSchema = (asset, datasource) => {
     const schema = getSchemaForDatasource(asset, datasource).schema
 
-    // Don't show ID and rev in tables
-    if (schema) {
-      delete schema._id
-      delete schema._rev
+    if (!schema) {
+      return
     }
 
+    // Don't show ID and rev in tables
+    delete schema._id
+    delete schema._rev
+
     const result = enrichSchemaWithRelColumns(schema)
     return result
   }
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
index 57423e8667..c4c2b3eafb 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
@@ -4,7 +4,7 @@
   import { setContext } from "svelte"
   import { writable } from "svelte/store"
   import { FieldTypeToComponentMap } from "../FieldConfiguration/utils"
-  import { componentStore } from "stores/builder"
+  import { componentStore } from "@/stores/builder"
 
   export let item
   export let anchor
diff --git a/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte b/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte
index a7966eb671..3065a90406 100644
--- a/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/LayoutSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { layoutStore } from "stores/builder"
+  import { layoutStore } from "@/stores/builder"
   import { Select } from "@budibase/bbui"
 
   export let value
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 7fa784ed77..2a936dd3a3 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -1,7 +1,10 @@
 <script>
   import { Multiselect, ContextTooltip } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { selectedScreen } from "@/stores/builder"
   import { createEventDispatcher } from "svelte"
   import { Explanation } from "./Explanation"
   import { params } from "@roxi/routify"
diff --git a/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte b/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte
index c28bc49e3d..e41c533adc 100644
--- a/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Tag, Tags } from "@budibase/bbui"
-  import { getFormattedPlanName } from "helpers/planTitle"
+  import { getFormattedPlanName } from "@/helpers/planTitle"
 
   export let license
 
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 4db9a03d80..65b3ed9395 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -3,8 +3,8 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
-  import { builderStore } from "stores/builder"
+  } from "@/dataBinding"
+  import { builderStore } from "@/stores/builder"
   import { onDestroy } from "svelte"
 
   export let label = ""
diff --git a/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte b/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte
index 43f158bef3..da27512942 100644
--- a/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte
@@ -2,9 +2,12 @@
   import {
     findClosestMatchingComponent,
     findComponent,
-  } from "helpers/components"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { tables, selectedScreen, componentStore } from "stores/builder"
+  } from "@/helpers/components"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { tables, selectedScreen, componentStore } from "@/stores/builder"
   import FilterEditor from "./FilterEditor/FilterEditor.svelte"
 
   export let componentInstance
diff --git a/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte b/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte
index b716c04619..ae88b78ec5 100644
--- a/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte
+++ b/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte
@@ -1,9 +1,9 @@
 <script>
   import { ActionButton, notifications } from "@budibase/bbui"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import { findClosestMatchingComponent } from "helpers/components"
-  import { makeDatasourceFormComponents } from "templates/commonComponents"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import { findClosestMatchingComponent } from "@/helpers/components"
+  import { makeDatasourceFormComponents } from "@/templates/commonComponents"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
 
   export let componentInstance
 
diff --git a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
index b99e58f205..b0b968c403 100644
--- a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { roles } from "stores/builder"
+  import { roles } from "@/stores/builder"
 
   export let value
   export let error
diff --git a/packages/builder/src/components/design/settings/controls/S3DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/S3DataSourceSelect.svelte
index c52532508c..0c0045fe74 100644
--- a/packages/builder/src/components/design/settings/controls/S3DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/S3DataSourceSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { datasources } from "stores/builder"
+  import { datasources } from "@/stores/builder"
 
   export let value = null
 
diff --git a/packages/builder/src/components/design/settings/controls/SearchFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/SearchFieldSelect.svelte
index 064e53cf0d..919d58fb70 100644
--- a/packages/builder/src/components/design/settings/controls/SearchFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/SearchFieldSelect.svelte
@@ -1,8 +1,11 @@
 <script>
   import { Multiselect } from "@budibase/bbui"
   import { search } from "@budibase/frontend-core"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen, tables } from "stores/builder"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { selectedScreen, tables } from "@/stores/builder"
   import { createEventDispatcher } from "svelte"
 
   export let componentInstance = {}
diff --git a/packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte
index 0f9290ec8d..3d984de0f8 100644
--- a/packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte
@@ -1,7 +1,10 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "@/dataBinding"
+  import { selectedScreen } from "@/stores/builder"
   import { createEventDispatcher } from "svelte"
   import { canBeSortColumn } from "@budibase/frontend-core"
 
diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 05770a3c5c..0575ba8dbf 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -14,7 +14,7 @@
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
   import ColorPicker from "./ColorPicker.svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
   import { QueryUtils, Constants, FilterUsers } from "@budibase/frontend-core"
   import { generate } from "shortid"
   import { FieldType, FormulaType } from "@budibase/types"
diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index 545110a8cc..706c4ca74e 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
-  import { tables as tablesStore, viewsV2 } from "stores/builder"
-  import { tableSelect as format } from "helpers/data/format"
+  import { tables as tablesStore, viewsV2 } from "@/stores/builder"
+  import { tableSelect as format } from "@/helpers/data/format"
 
   export let value
 
diff --git a/packages/builder/src/components/design/settings/controls/URLSelect.svelte b/packages/builder/src/components/design/settings/controls/URLSelect.svelte
index d087af95b0..3166b17e5a 100644
--- a/packages/builder/src/components/design/settings/controls/URLSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/URLSelect.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { screenStore } from "stores/builder"
-  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+  import { screenStore } from "@/stores/builder"
+  import DrawerBindableCombobox from "@/components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let value
   export let bindings
diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
index f70c0910e0..c49822504d 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
@@ -10,10 +10,13 @@
     Input,
     DatePicker,
   } from "@budibase/bbui"
-  import { selectedScreen, selectedComponent } from "stores/builder"
-  import { findClosestMatchingComponent } from "helpers/components"
-  import { getSchemaForDatasource, getDatasourceForProvider } from "dataBinding"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { selectedScreen, selectedComponent } from "@/stores/builder"
+  import { findClosestMatchingComponent } from "@/helpers/components"
+  import {
+    getSchemaForDatasource,
+    getDatasourceForProvider,
+  } from "@/dataBinding"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
   import { generate } from "shortid"
 
   export let fieldName = null
diff --git a/packages/builder/src/components/integration/AccessLevelSelect.svelte b/packages/builder/src/components/integration/AccessLevelSelect.svelte
index 02ea50e780..fc84369c11 100644
--- a/packages/builder/src/components/integration/AccessLevelSelect.svelte
+++ b/packages/builder/src/components/integration/AccessLevelSelect.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Label, notifications } from "@budibase/bbui"
-  import { permissions } from "stores/builder"
+  import { permissions } from "@/stores/builder"
   import { Constants } from "@budibase/frontend-core"
-  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
+  import RoleSelect from "@/components/design/settings/controls/RoleSelect.svelte"
 
   export let query
   export let label
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 6f69e71ccb..e42703f9c6 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -10,8 +10,8 @@
     MenuItem,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { lowercase } from "helpers"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { lowercase } from "@/helpers"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 
   let dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/integration/QueryBindingBuilder.svelte b/packages/builder/src/components/integration/QueryBindingBuilder.svelte
index 88d46de0a0..f79c967cda 100644
--- a/packages/builder/src/components/integration/QueryBindingBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryBindingBuilder.svelte
@@ -3,8 +3,8 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  } from "@/dataBinding"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 995451b7e3..b518bab2d6 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -2,7 +2,7 @@
   import CodeMirror from "./codemirror"
   import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
-  import { themeStore } from "stores/portal"
+  import { themeStore } from "@/stores/portal"
   import { Theme } from "@budibase/types"
 
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 340dc7839c..898a834651 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -2,7 +2,7 @@
   import { Label, Layout, Input } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
 
   export let fields = {}
   export let schema
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 99635323ca..0f2ed24177 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { datasources, integrations, queries } from "stores/builder"
+  import { datasources, integrations, queries } from "@/stores/builder"
   import {
     Icon,
     Select,
@@ -12,13 +12,13 @@
     Divider,
     Button,
   } from "@budibase/bbui"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
-  import IntegrationQueryEditor from "components/integration/index.svelte"
+  import IntegrationQueryEditor from "@/components/integration/index.svelte"
   import QueryViewerSidePanel from "./QueryViewerSidePanel/index.svelte"
   import { cloneDeep } from "lodash/fp"
-  import BindingBuilder from "components/integration/QueryViewerBindingBuilder.svelte"
-  import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
+  import BindingBuilder from "@/components/integration/QueryViewerBindingBuilder.svelte"
+  import CodeMirrorEditor from "@/components/common/CodeMirrorEditor.svelte"
   import { ValidQueryNameRegex } from "@budibase/shared-core"
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
   import QueryViewerSavePromptModal from "./QueryViewerSavePromptModal.svelte"
diff --git a/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte b/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte
index 7e79209d8b..8e8977b2c4 100644
--- a/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte
@@ -1,6 +1,6 @@
 <script>
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import { getUserBindings } from "dataBinding"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
+  import { getUserBindings } from "@/dataBinding"
 
   export let queryBindings = []
 
diff --git a/packages/builder/src/components/integration/QueryViewerSidePanel/PreviewPanel.svelte b/packages/builder/src/components/integration/QueryViewerSidePanel/PreviewPanel.svelte
index 29f15bca40..2009f49f1c 100644
--- a/packages/builder/src/components/integration/QueryViewerSidePanel/PreviewPanel.svelte
+++ b/packages/builder/src/components/integration/QueryViewerSidePanel/PreviewPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Table from "components/backend/DataTable/Table.svelte"
+  import Table from "@/components/backend/DataTable/Table.svelte"
   import { cloneDeep } from "lodash/fp"
 
   export let schema = {}
diff --git a/packages/builder/src/components/integration/QueryViewerSidePanel/SchemaPanel.svelte b/packages/builder/src/components/integration/QueryViewerSidePanel/SchemaPanel.svelte
index 05579275ef..eea724a3f7 100644
--- a/packages/builder/src/components/integration/QueryViewerSidePanel/SchemaPanel.svelte
+++ b/packages/builder/src/components/integration/QueryViewerSidePanel/SchemaPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import KeyValueBuilder from "../KeyValueBuilder.svelte"
-  import { SchemaTypeOptionsExpanded } from "constants/backend"
+  import { SchemaTypeOptionsExpanded } from "@/constants/backend"
 
   export let schema
   export let onSchemaChange = () => {}
diff --git a/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte b/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte
index c08dc5801c..6191503c31 100644
--- a/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte
+++ b/packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Panel from "components/design/Panel.svelte"
+  import Panel from "@/components/design/Panel.svelte"
   import { ActionButton } from "@budibase/bbui"
   import JSONPanel from "./JSONPanel.svelte"
   import SchemaPanel from "./SchemaPanel.svelte"
diff --git a/packages/builder/src/components/integration/RestBodyInput.svelte b/packages/builder/src/components/integration/RestBodyInput.svelte
index 4e3b645373..3bea4ffa0c 100644
--- a/packages/builder/src/components/integration/RestBodyInput.svelte
+++ b/packages/builder/src/components/integration/RestBodyInput.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Body } from "@budibase/bbui"
-  import { RawRestBodyTypes } from "constants/backend"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import { RawRestBodyTypes } from "@/constants/backend"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import CodeMirrorEditor, {
     EditorModes,
-  } from "components/common/CodeMirrorEditor.svelte"
+  } from "@/components/common/CodeMirrorEditor.svelte"
 
   const objectTypes = [RawRestBodyTypes.FORM, RawRestBodyTypes.ENCODED]
   const textTypes = [
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index 3b1356efe2..8468bf7017 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto, params } from "@roxi/routify"
-  import { datasources, flags, integrations, queries } from "stores/builder"
-  import { environment } from "stores/portal"
+  import { datasources, flags, integrations, queries } from "@/stores/builder"
+  import { environment } from "@/stores/portal"
   import {
     Banner,
     Body,
@@ -19,24 +19,24 @@
     Tabs,
     TextArea,
   } from "@budibase/bbui"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import EditableLabel from "components/common/inputs/EditableLabel.svelte"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
+  import EditableLabel from "@/components/common/inputs/EditableLabel.svelte"
   import CodeMirrorEditor, {
     EditorModes,
-  } from "components/common/CodeMirrorEditor.svelte"
+  } from "@/components/common/CodeMirrorEditor.svelte"
   import RestBodyInput from "./RestBodyInput.svelte"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
   import { onMount } from "svelte"
-  import restUtils from "helpers/data/utils"
+  import restUtils from "@/helpers/data/utils"
   import {
     PaginationLocations,
     PaginationTypes,
     RawRestBodyTypes,
     RestBodyTypes as bodyTypes,
     SchemaTypeOptionsExpanded,
-  } from "constants/backend"
-  import JSONPreview from "components/integration/JSONPreview.svelte"
-  import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
+  } from "@/constants/backend"
+  import JSONPreview from "@/components/integration/JSONPreview.svelte"
+  import AccessLevelSelect from "@/components/integration/AccessLevelSelect.svelte"
   import DynamicVariableModal from "./DynamicVariableModal.svelte"
   import Placeholder from "assets/bb-spaceship.svg"
   import { cloneDeep } from "lodash/fp"
@@ -48,7 +48,7 @@
     runtimeToReadableBinding,
     runtimeToReadableMap,
     toBindingsArray,
-  } from "dataBinding"
+  } from "@/dataBinding"
 
   export let queryId
 
@@ -176,7 +176,7 @@
       notifications.success(`Request saved successfully`)
       if (dynamicVariables) {
         datasource.config.dynamicVariables = rebuildVariables(saveId)
-        datasource = await datasources.update({
+        datasource = await datasources.save({
           integration: integrationInfo,
           datasource,
         })
diff --git a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
index 5c69b151a6..dc5bb6c8f8 100644
--- a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
+++ b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
@@ -8,8 +8,8 @@
     notifications,
     Context,
   } from "@budibase/bbui"
-  import { environment } from "stores/portal"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { environment } from "@/stores/portal"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { getContext } from "svelte"
 
   const modalContext = getContext(Context.Modal)
diff --git a/packages/builder/src/components/portal/licensing/AccountDowngradedModal.svelte b/packages/builder/src/components/portal/licensing/AccountDowngradedModal.svelte
index 2278b4f6df..51b5c4c427 100644
--- a/packages/builder/src/components/portal/licensing/AccountDowngradedModal.svelte
+++ b/packages/builder/src/components/portal/licensing/AccountDowngradedModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Modal, ModalContent, Body } from "@budibase/bbui"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
 
   export let onDismiss = () => {}
   export let onShow = () => {}
diff --git a/packages/builder/src/components/portal/licensing/AppLimitModal.svelte b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
index bdecbcab3d..64529f8d69 100644
--- a/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
+++ b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Modal, ModalContent, Body } from "@budibase/bbui"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
 
   export let onDismiss = () => {}
 
diff --git a/packages/builder/src/components/portal/licensing/EnterpriseBasicTrialBanner.svelte b/packages/builder/src/components/portal/licensing/EnterpriseBasicTrialBanner.svelte
index 350ebb0f11..ad218b1126 100644
--- a/packages/builder/src/components/portal/licensing/EnterpriseBasicTrialBanner.svelte
+++ b/packages/builder/src/components/portal/licensing/EnterpriseBasicTrialBanner.svelte
@@ -3,7 +3,7 @@
   import Portal from "svelte-portal"
   import { fly } from "svelte/transition"
   import { Banner, BANNER_TYPES } from "@budibase/bbui"
-  import { licensing } from "stores/portal"
+  import { licensing } from "@/stores/portal"
 
   export let show = true
 
diff --git a/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte b/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
index e2c52e3448..3de2b464e0 100644
--- a/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
+++ b/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { licensing, auth, temporalStore } from "stores/portal"
+  import { licensing, auth, temporalStore } from "@/stores/portal"
   import { onMount } from "svelte"
   import PaymentFailedModal from "./PaymentFailedModal.svelte"
   import AccountDowngradedModal from "./AccountDowngradedModal.svelte"
diff --git a/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte b/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte
index 502d43d644..239c611ccb 100644
--- a/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte
+++ b/packages/builder/src/components/portal/licensing/PaymentFailedModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Modal, ModalContent, Body, TooltipWrapper } from "@budibase/bbui"
-  import { auth, admin, licensing } from "stores/portal"
+  import { auth, admin, licensing } from "@/stores/portal"
   import { onMount } from "svelte"
 
   export let onDismiss = () => {}
diff --git a/packages/builder/src/components/portal/licensing/licensingBanners.js b/packages/builder/src/components/portal/licensing/licensingBanners.js
index a9f3d21ffc..230b9fe6f6 100644
--- a/packages/builder/src/components/portal/licensing/licensingBanners.js
+++ b/packages/builder/src/components/portal/licensing/licensingBanners.js
@@ -1,5 +1,5 @@
 import { ExpiringKeys } from "./constants"
-import { admin, auth, licensing, temporalStore } from "stores/portal"
+import { admin, auth, licensing, temporalStore } from "@/stores/portal"
 import { get } from "svelte/store"
 import { BANNER_TYPES } from "@budibase/bbui"
 
diff --git a/packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte b/packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte
index e195b52106..f9dab7c06b 100644
--- a/packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte
+++ b/packages/builder/src/components/portal/onboarding/EnterpriseBasicTrialModal.svelte
@@ -2,8 +2,8 @@
   import { Modal, ModalContent } from "@budibase/bbui"
   import FreeTrial from "../../../../assets/FreeTrial.svelte"
   import { get } from "svelte/store"
-  import { auth, licensing, admin } from "stores/portal"
-  import { API } from "api"
+  import { auth, licensing, admin } from "@/stores/portal"
+  import { API } from "@/api"
   import { PlanType } from "@budibase/types"
 
   let freeTrialModal
diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index 732ee40e11..dabbde098b 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -2,7 +2,7 @@
   import { Popover, Layout, Heading, Body, Button, Link } from "@budibase/bbui"
   import { TOURS, getCurrentStepIdx } from "./tours.js"
   import { goto, layout, isActive } from "@roxi/routify"
-  import { builderStore } from "stores/builder"
+  import { builderStore } from "@/stores/builder"
 
   let popoverAnchor
   let popover
diff --git a/packages/builder/src/components/portal/onboarding/TourWrap.svelte b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
index 05b3935f23..db0841a05b 100644
--- a/packages/builder/src/components/portal/onboarding/TourWrap.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
@@ -2,7 +2,7 @@
   import { tourHandler } from "./tourHandler"
   import { TOURSBYSTEP, TOURS, getCurrentStepIdx } from "./tours"
   import { onMount, onDestroy } from "svelte"
-  import { builderStore } from "stores/builder"
+  import { builderStore } from "@/stores/builder"
 
   export let stepKeys = []
 
diff --git a/packages/builder/src/components/portal/onboarding/tourHandler.js b/packages/builder/src/components/portal/onboarding/tourHandler.js
index 6268e980db..c89475438d 100644
--- a/packages/builder/src/components/portal/onboarding/tourHandler.js
+++ b/packages/builder/src/components/portal/onboarding/tourHandler.js
@@ -1,4 +1,4 @@
-import { builderStore } from "stores/builder"
+import { builderStore } from "@/stores/builder"
 import { get } from "svelte/store"
 
 const registerNode = async (node, tourStepKey) => {
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 6a3fe1daf0..ad62bdde4d 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
-import { builderStore } from "stores/builder"
-import { auth } from "stores/portal"
-import analytics from "analytics"
+import { builderStore } from "@/stores/builder"
+import { auth } from "@/stores/portal"
+import analytics from "@/analytics"
 import {
   OnboardingData,
   OnboardingDesign,
@@ -9,7 +9,7 @@ import {
   NewViewUpdateFormRowId,
   NewFormSteps,
 } from "./steps"
-import { API } from "api"
+import { API } from "@/api"
 
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
diff --git a/packages/builder/src/components/settings/APIKeyModal.svelte b/packages/builder/src/components/settings/APIKeyModal.svelte
index 06b1d095fc..f5bff9281d 100644
--- a/packages/builder/src/components/settings/APIKeyModal.svelte
+++ b/packages/builder/src/components/settings/APIKeyModal.svelte
@@ -6,7 +6,7 @@
     notifications,
     CopyInput,
   } from "@budibase/bbui"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { onMount } from "svelte"
 
   let apiKey = null
diff --git a/packages/builder/src/components/settings/ChangePasswordModal.svelte b/packages/builder/src/components/settings/ChangePasswordModal.svelte
index 32b8b53fa9..353e260d57 100644
--- a/packages/builder/src/components/settings/ChangePasswordModal.svelte
+++ b/packages/builder/src/components/settings/ChangePasswordModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { ModalContent, Body, notifications } from "@budibase/bbui"
-  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
-  import { auth } from "stores/portal"
+  import PasswordRepeatInput from "@/components/common/users/PasswordRepeatInput.svelte"
+  import { auth } from "@/stores/portal"
 
   let password
   let error
diff --git a/packages/builder/src/components/settings/ProfileModal.svelte b/packages/builder/src/components/settings/ProfileModal.svelte
index caaf5154b3..55deb6387a 100644
--- a/packages/builder/src/components/settings/ProfileModal.svelte
+++ b/packages/builder/src/components/settings/ProfileModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
   import { writable } from "svelte/store"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
 
   const values = writable({
     firstName: $auth.user.firstName,
diff --git a/packages/builder/src/components/settings/ThemeModal.svelte b/packages/builder/src/components/settings/ThemeModal.svelte
index 7bc3c1efa3..d8f5446e49 100644
--- a/packages/builder/src/components/settings/ThemeModal.svelte
+++ b/packages/builder/src/components/settings/ThemeModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ModalContent, Select } from "@budibase/bbui"
-  import { themeStore } from "stores/portal"
+  import { themeStore } from "@/stores/portal"
   import { ThemeOptions } from "@budibase/shared-core"
 </script>
 
diff --git a/packages/builder/src/components/start/AppContextMenuModals.svelte b/packages/builder/src/components/start/AppContextMenuModals.svelte
index f4921c4312..186e0d8601 100644
--- a/packages/builder/src/components/start/AppContextMenuModals.svelte
+++ b/packages/builder/src/components/start/AppContextMenuModals.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Modal } from "@budibase/bbui"
-  import DeleteModal from "components/deploy/DeleteModal.svelte"
+  import DeleteModal from "@/components/deploy/DeleteModal.svelte"
   import ExportAppModal from "./ExportAppModal.svelte"
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
-  import { licensing } from "stores/portal"
+  import { licensing } from "@/stores/portal"
 
   export let app
 
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 2f0b30ded9..bf1e899a84 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -1,14 +1,14 @@
 <script>
   import { Heading, Body, Button, Icon } from "@budibase/bbui"
   import { processStringSync } from "@budibase/string-templates"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { goto } from "@roxi/routify"
   import { UserAvatars } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import AppContextMenuModals from "./AppContextMenuModals.svelte"
   import getAppContextMenuItems from "./getAppContextMenuItems.js"
-  import FavouriteAppButton from "pages/builder/portal/apps/FavouriteAppButton.svelte"
-  import { contextMenuStore } from "stores/builder"
+  import FavouriteAppButton from "@/pages/builder/portal/apps/FavouriteAppButton.svelte"
+  import { contextMenuStore } from "@/stores/builder"
 
   export let app
   export let lockedAction
diff --git a/packages/builder/src/components/start/ChooseIconModal.svelte b/packages/builder/src/components/start/ChooseIconModal.svelte
index 463567b12a..3128b70807 100644
--- a/packages/builder/src/components/start/ChooseIconModal.svelte
+++ b/packages/builder/src/components/start/ChooseIconModal.svelte
@@ -6,7 +6,7 @@
     Label,
     notifications,
   } from "@budibase/bbui"
-  import { appsStore } from "stores/portal"
+  import { appsStore } from "@/stores/portal"
   import { createEventDispatcher } from "svelte"
 
   export let app
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 83ed089006..af122ee02e 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -7,15 +7,15 @@
     ModalContent,
     Dropzone,
   } from "@budibase/bbui"
-  import { initialise } from "stores/builder"
-  import { API } from "api"
-  import { appsStore, admin, auth } from "stores/portal"
+  import { initialise } from "@/stores/builder"
+  import { API } from "@/api"
+  import { appsStore, admin, auth } from "@/stores/portal"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
-  import { createValidationStore } from "helpers/validation/yup"
-  import * as appValidation from "helpers/validation/yup/app"
-  import TemplateCard from "components/common/TemplateCard.svelte"
-  import { lowercase } from "helpers"
+  import { createValidationStore } from "@/helpers/validation/yup"
+  import * as appValidation from "@/helpers/validation/yup/app"
+  import TemplateCard from "@/components/common/TemplateCard.svelte"
+  import { lowercase } from "@/helpers"
   import { sdk } from "@budibase/shared-core"
 
   export let template
@@ -26,6 +26,7 @@
   const values = writable({ name: "", url: null })
   const validation = createValidationStore()
   const encryptionValidation = createValidationStore()
+  const isEncryptedRegex = /^.*\.enc.*\.tar\.gz$/gm
 
   $: {
     const { url } = $values
@@ -37,7 +38,9 @@
     encryptionValidation.check({ ...$values })
   }
 
-  $: encryptedFile = $values.file?.name?.endsWith(".enc.tar.gz")
+  // filename should be separated to avoid updates everytime any other form element changes
+  $: filename = $values.file?.name
+  $: encryptedFile = isEncryptedRegex.test(filename)
 
   onMount(async () => {
     const lastChar = $auth.user?.firstName
@@ -171,7 +174,7 @@
           try {
             await createNewApp()
           } catch (error) {
-            notifications.error("Error creating app")
+            notifications.error(`Error creating app - ${error.message}`)
           }
         }
       },
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
index 0db92ff76d..2db6a99762 100644
--- a/packages/builder/src/components/start/DuplicateAppModal.svelte
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -6,12 +6,12 @@
     Layout,
     keepOpen,
   } from "@budibase/bbui"
-  import { createValidationStore } from "helpers/validation/yup"
+  import { createValidationStore } from "@/helpers/validation/yup"
   import { writable, get } from "svelte/store"
-  import * as appValidation from "helpers/validation/yup/app"
-  import { appsStore, auth } from "stores/portal"
+  import * as appValidation from "@/helpers/validation/yup/app"
+  import { appsStore, auth } from "@/stores/portal"
   import { onMount } from "svelte"
-  import { API } from "api"
+  import { API } from "@/api"
   import { sdk } from "@budibase/shared-core"
 
   export let appId
@@ -68,7 +68,7 @@
     }
 
     try {
-      const app = await API.duplicateApp(data, appId)
+      const app = await API.duplicateApp(appId, data)
       appsStore.load()
       if (!sdk.users.isBuilder($auth.user, app?.duplicateAppId)) {
         // Refresh for access to created applications
diff --git a/packages/builder/src/components/start/ExportAppModal.svelte b/packages/builder/src/components/start/ExportAppModal.svelte
index 3fba522b09..88615af44d 100644
--- a/packages/builder/src/components/start/ExportAppModal.svelte
+++ b/packages/builder/src/components/start/ExportAppModal.svelte
@@ -9,7 +9,7 @@
     notifications,
   } from "@budibase/bbui"
   import { downloadFile } from "@budibase/frontend-core"
-  import { createValidationStore } from "helpers/validation/yup"
+  import { createValidationStore } from "@/helpers/validation/yup"
 
   export let app
   export let published
diff --git a/packages/builder/src/components/start/ImportAppModal.svelte b/packages/builder/src/components/start/ImportAppModal.svelte
index 4c88593514..209e8bedc7 100644
--- a/packages/builder/src/components/start/ImportAppModal.svelte
+++ b/packages/builder/src/components/start/ImportAppModal.svelte
@@ -8,8 +8,8 @@
     notifications,
     Body,
   } from "@budibase/bbui"
-  import { API } from "api"
-  import { initialise } from "stores/builder"
+  import { API } from "@/api"
+  import { initialise } from "@/stores/builder"
 
   export let app
 
diff --git a/packages/builder/src/components/usage/Usage.svelte b/packages/builder/src/components/usage/Usage.svelte
index da1bb4489a..ee2f5ddb4b 100644
--- a/packages/builder/src/components/usage/Usage.svelte
+++ b/packages/builder/src/components/usage/Usage.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Body, ProgressBar, Heading, Icon, Link } from "@budibase/bbui"
-  import { admin, auth } from "stores/portal"
+  import { admin, auth } from "@/stores/portal"
   import { onMount } from "svelte"
 
   export let usage
diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index c89221f163..1272c9eb6d 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -7,7 +7,7 @@ import {
   findComponent,
   findComponentPath,
   getComponentContexts,
-} from "helpers/components"
+} from "@/helpers/components"
 import {
   componentStore,
   screenStore,
@@ -17,7 +17,7 @@ import {
   tables as tablesStore,
   roles as rolesStore,
   selectedScreen,
-} from "stores/builder"
+} from "@/stores/builder"
 import {
   makePropSafe,
   isJSBinding,
@@ -27,10 +27,10 @@ import {
 } from "@budibase/string-templates"
 import { TableNames } from "./constants"
 import { JSONUtils, Constants } 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"
-import { FIELDS, DB_TYPE_INTERNAL } from "constants/backend"
+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"
+import { FIELDS, DB_TYPE_INTERNAL } from "@/constants/backend"
 import { FieldType } from "@budibase/types"
 
 const { ContextScopes } = Constants
@@ -900,7 +900,7 @@ export const getSchemaForDatasourcePlus = (resourceId, options) => {
  *   optional and only needed for "provider" datasource types.
  * @param datasource the datasource definition
  * @param options options for generating the schema
- * @return {{schema: Object, table: Object}}
+ * @return {{schema: Object, table: Table}}
  */
 export const getSchemaForDatasource = (asset, datasource, options) => {
   options = options || {}
@@ -1507,7 +1507,12 @@ export const updateReferencesInObject = ({
 
 // Migrate references
 // Switch all bindings to reference their ids
-export const migrateReferencesInObject = ({ obj, label = "steps", steps }) => {
+export const migrateReferencesInObject = ({
+  obj,
+  label = "steps",
+  steps,
+  originalIndex,
+}) => {
   const stepIndexRegex = new RegExp(`{{\\s*${label}\\.(\\d+)\\.`, "g")
   const updateActionStep = (str, index, replaceWith) =>
     str.replace(`{{ ${label}.${index}.`, `{{ ${label}.${replaceWith}.`)
@@ -1528,6 +1533,7 @@ export const migrateReferencesInObject = ({ obj, label = "steps", steps }) => {
       migrateReferencesInObject({
         obj: obj[key],
         steps,
+        originalIndex,
       })
     }
   }
diff --git a/packages/builder/src/dataBinding.test.js b/packages/builder/src/dataBinding.test.js
index 6cea9b166b..5e3b484e22 100644
--- a/packages/builder/src/dataBinding.test.js
+++ b/packages/builder/src/dataBinding.test.js
@@ -3,7 +3,7 @@ import {
   runtimeToReadableBinding,
   readableToRuntimeBinding,
   updateReferencesInObject,
-} from "dataBinding"
+} from "@/dataBinding"
 
 describe("Builder dataBinding", () => {
   beforeEach(() => {
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index adf4a47070..a13d491416 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -61,7 +61,7 @@ a {
   height: 8px;
 }
 ::-webkit-scrollbar-track {
-  background: var(--spectrum-alias-background-color-default);
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
   background-color: var(--spectrum-global-color-gray-400);
@@ -71,6 +71,5 @@ a {
   background: var(--spectrum-alias-background-color-default);
 }
 html * {
-  scrollbar-color: var(--spectrum-global-color-gray-400)
-    var(--spectrum-alias-background-color-default);
+  scrollbar-color: var(--spectrum-global-color-gray-400) transparent;
 }
diff --git a/packages/builder/src/helpers/components.js b/packages/builder/src/helpers/components.js
index ca1be3c736..b1116d7750 100644
--- a/packages/builder/src/helpers/components.js
+++ b/packages/builder/src/helpers/components.js
@@ -1,4 +1,4 @@
-import { componentStore } from "stores/builder"
+import { componentStore } from "@/stores/builder"
 import { get } from "svelte/store"
 import { Helpers } from "@budibase/bbui"
 import {
@@ -6,7 +6,7 @@ import {
   encodeJSBinding,
   findHBSBlocks,
 } from "@budibase/string-templates"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import { Constants } from "@budibase/frontend-core"
 
 const { ContextScopes } = Constants
diff --git a/packages/builder/src/helpers/data/utils.js b/packages/builder/src/helpers/data/utils.js
index a592b57a26..7194dc13ee 100644
--- a/packages/builder/src/helpers/data/utils.js
+++ b/packages/builder/src/helpers/data/utils.js
@@ -1,4 +1,4 @@
-import { IntegrationTypes } from "constants/backend"
+import { IntegrationTypes } from "@/constants/backend"
 import { findHBSBlocks } from "@budibase/string-templates"
 
 export function breakQueryString(qs) {
diff --git a/packages/builder/src/helpers/fetchData.js b/packages/builder/src/helpers/fetchData.js
index 9208419c4e..085d0ae5b4 100644
--- a/packages/builder/src/helpers/fetchData.js
+++ b/packages/builder/src/helpers/fetchData.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 export default function (url) {
   const store = writable({ status: "LOADING", data: {}, error: {} })
diff --git a/packages/builder/src/helpers/formFields.js b/packages/builder/src/helpers/formFields.js
index 693fd35d4d..ec5d625917 100644
--- a/packages/builder/src/helpers/formFields.js
+++ b/packages/builder/src/helpers/formFields.js
@@ -1,5 +1,5 @@
-import { findClosestMatchingComponent } from "helpers/components"
-import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+import { findClosestMatchingComponent } from "@/helpers/components"
+import { getDatasourceForProvider, getSchemaForDatasource } from "@/dataBinding"
 
 export const getComponentFieldOptions = (asset, id, type, loose = true) => {
   const form = findClosestMatchingComponent(
diff --git a/packages/builder/src/helpers/utils.js b/packages/builder/src/helpers/utils.js
index f3d48331e7..27f459d6f2 100644
--- a/packages/builder/src/helpers/utils.js
+++ b/packages/builder/src/helpers/utils.js
@@ -1,13 +1,13 @@
 import { FieldType } from "@budibase/types"
-import { ActionStepID } from "constants/backend/automations"
-import { TableNames } from "constants"
+import { ActionStepID } from "@/constants/backend/automations"
+import { TableNames } from "@/constants"
 import {
   AUTO_COLUMN_DISPLAY_NAMES,
   AUTO_COLUMN_SUB_TYPES,
   FIELDS,
   isAutoColumnUserRelationship,
-} from "constants/backend"
-import { isEnabled } from "helpers/featureFlags"
+} from "@/constants/backend"
+import { isEnabled } from "@/helpers/featureFlags"
 
 export function getAutoColumnInformation(enabled = true) {
   let info = {}
diff --git a/packages/builder/src/helpers/validation/yup/app.js b/packages/builder/src/helpers/validation/yup/app.js
index 3a00b7a49f..ff2be34d09 100644
--- a/packages/builder/src/helpers/validation/yup/app.js
+++ b/packages/builder/src/helpers/validation/yup/app.js
@@ -1,5 +1,5 @@
 import { string, mixed } from "yup"
-import { APP_NAME_REGEX, APP_URL_REGEX } from "constants"
+import { APP_NAME_REGEX, APP_URL_REGEX } from "@/constants"
 
 export const name = (validation, { apps, currentApp } = { apps: [] }) => {
   validation.addValidator(
diff --git a/packages/builder/src/helpers/validation/yup/index.js b/packages/builder/src/helpers/validation/yup/index.js
index b10ed2369e..7323f5b723 100644
--- a/packages/builder/src/helpers/validation/yup/index.js
+++ b/packages/builder/src/helpers/validation/yup/index.js
@@ -1,4 +1,4 @@
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import { object, string, number } from "yup"
 import { writable, get } from "svelte/store"
 import { notifications } from "@budibase/bbui"
diff --git a/packages/builder/src/index.d.ts b/packages/builder/src/index.d.ts
deleted file mode 100644
index 1cbad4f12c..0000000000
--- a/packages/builder/src/index.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-declare module "api" {
-  const API: {
-    getPlugins: () => Promise<any>
-    createPlugin: (plugin: object) => Promise<any>
-    uploadPlugin: (plugin: FormData) => Promise<any>
-    deletePlugin: (id: string) => Promise<void>
-  }
-}
diff --git a/packages/builder/src/pages/builder/Branding.svelte b/packages/builder/src/pages/builder/Branding.svelte
index e51ca1c70d..8e47879950 100644
--- a/packages/builder/src/pages/builder/Branding.svelte
+++ b/packages/builder/src/pages/builder/Branding.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { organisation, auth } from "stores/portal"
+  import { organisation, auth } from "@/stores/portal"
   import { onMount } from "svelte"
 
   let loaded = false
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 13067c5836..209cf2746d 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -1,11 +1,11 @@
 <script>
   import { isActive, redirect, params } from "@roxi/routify"
-  import { admin, auth, licensing, navigation } from "stores/portal"
+  import { admin, auth, licensing, navigation } from "@/stores/portal"
   import { onMount } from "svelte"
   import { CookieUtils, Constants } from "@budibase/frontend-core"
-  import { API } from "api"
+  import { API } from "@/api"
   import Branding from "./Branding.svelte"
-  import ContextMenu from "components/ContextMenu.svelte"
+  import ContextMenu from "@/components/ContextMenu.svelte"
 
   let loaded = false
 
diff --git a/packages/builder/src/pages/builder/admin/_layout.svelte b/packages/builder/src/pages/builder/admin/_layout.svelte
index f03a7b8285..afc065b4bb 100644
--- a/packages/builder/src/pages/builder/admin/_layout.svelte
+++ b/packages/builder/src/pages/builder/admin/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { admin } from "stores/portal"
+  import { admin } from "@/stores/portal"
   import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
 
@@ -9,7 +9,7 @@
   $: useAccountPortal = cloud && !$admin.disableAccountPortal
 
   onMount(() => {
-    if ($admin?.checklist?.adminUser.checked || useAccountPortal) {
+    if ($admin?.checklist?.adminUser?.checked || useAccountPortal) {
       $redirect("../")
     } else {
       loaded = true
diff --git a/packages/builder/src/pages/builder/admin/index.svelte b/packages/builder/src/pages/builder/admin/index.svelte
index 2921f065d3..8a9aaf273b 100644
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@@ -9,8 +9,8 @@
     FancyInput,
   } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { API } from "api"
-  import { admin, auth } from "stores/portal"
+  import { API } from "@/api"
+  import { admin, auth } from "@/stores/portal"
   import Logo from "assets/bb-emblem.svg"
   import { TestimonialPage } from "@budibase/frontend-core/src/components"
   import { passwordsMatch, handleError } from "../auth/_components/utils"
@@ -36,10 +36,7 @@
       await API.createAdminUser(adminUser)
       notifications.success("Admin user created")
       await admin.init()
-      await auth.login({
-        username: formData?.email.trim(),
-        password: formData?.password,
-      })
+      await auth.login(formData?.email.trim(), formData?.password)
       $goto("../portal")
     } catch (error) {
       submitted = false
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 687678c08a..88e034a96b 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -14,7 +14,7 @@
     Button,
     FancySelect,
   } from "@budibase/bbui"
-  import { builderStore, appStore, roles, appPublished } from "stores/builder"
+  import { builderStore, appStore, roles, appPublished } from "@/stores/builder"
   import {
     groups,
     licensing,
@@ -22,7 +22,7 @@
     users,
     auth,
     admin,
-  } from "stores/portal"
+  } from "@/stores/portal"
   import {
     fetchData,
     Constants,
@@ -30,11 +30,11 @@
     RoleUtils,
   } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
-  import { API } from "api"
+  import { API } from "@/api"
   import GroupIcon from "../../../portal/users/groups/_components/GroupIcon.svelte"
-  import RoleSelect from "components/common/RoleSelect.svelte"
-  import UpgradeModal from "components/common/users/UpgradeModal.svelte"
-  import { emailValidator } from "helpers/validation"
+  import RoleSelect from "@/components/common/RoleSelect.svelte"
+  import UpgradeModal from "@/components/common/users/UpgradeModal.svelte"
+  import { emailValidator } from "@/helpers/validation"
   import { fly } from "svelte/transition"
   import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
 
@@ -368,20 +368,22 @@
     const payload = [
       {
         email: newUserEmail,
-        builder: {
-          global: creationRoleType === Constants.BudibaseRoles.Admin,
-          creator: creationRoleType === Constants.BudibaseRoles.Creator,
+        userInfo: {
+          builder: {
+            global: creationRoleType === Constants.BudibaseRoles.Admin,
+            creator: creationRoleType === Constants.BudibaseRoles.Creator,
+          },
+          admin: { 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]
+      payload[0].userInfo.builder.apps = [prodAppId]
     } else if (notCreatingAdmin && !isCreator) {
-      payload[0].apps = { [prodAppId]: creationAccessType }
+      payload[0].userInfo.apps = { [prodAppId]: creationAccessType }
     }
 
     let userInviteResponse
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
index d77744a809..e57ede854b 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
@@ -6,7 +6,7 @@
     themeStore,
     selectedScreen,
     appStore,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import { ProgressCircle } from "@budibase/bbui"
 
   $: route = $selectedScreen?.routing.route || "/"
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 8e109d3145..27b27e7685 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -7,8 +7,8 @@
     previewStore,
     userStore,
     deploymentStore,
-  } from "stores/builder"
-  import { auth, appsStore } from "stores/portal"
+  } from "@/stores/builder"
+  import { auth, appsStore } from "@/stores/portal"
   import {
     Icon,
     Tabs,
@@ -18,21 +18,21 @@
     notifications,
     TooltipPosition,
   } from "@budibase/bbui"
-  import AppActions from "components/deploy/AppActions.svelte"
-  import { API } from "api"
+  import AppActions from "@/components/deploy/AppActions.svelte"
+  import { API } from "@/api"
   import { isActive, url, goto, layout, redirect } from "@roxi/routify"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
   import { onMount, onDestroy } from "svelte"
-  import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
-  import CommandPalette from "components/commandPalette/CommandPalette.svelte"
-  import TourWrap from "components/portal/onboarding/TourWrap.svelte"
-  import TourPopover from "components/portal/onboarding/TourPopover.svelte"
+  import VerificationPromptBanner from "@/components/common/VerificationPromptBanner.svelte"
+  import CommandPalette from "@/components/commandPalette/CommandPalette.svelte"
+  import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
+  import TourPopover from "@/components/portal/onboarding/TourPopover.svelte"
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
   import { UserAvatars } from "@budibase/frontend-core"
-  import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
+  import { TOUR_KEYS } from "@/components/portal/onboarding/tours.js"
   import PreviewOverlay from "./_components/PreviewOverlay.svelte"
-  import EnterpriseBasicTrialModal from "components/portal/onboarding/EnterpriseBasicTrialModal.svelte"
-  import UpdateAppTopNav from "components/common/UpdateAppTopNav.svelte"
+  import EnterpriseBasicTrialModal from "@/components/portal/onboarding/EnterpriseBasicTrialModal.svelte"
+  import UpdateAppTopNav from "@/components/common/UpdateAppTopNav.svelte"
 
   export let application
 
@@ -105,9 +105,6 @@
     if (!hasSynced && application) {
       try {
         await API.syncApp(application)
-        // check if user has beta access
-        // const betaResponse = await API.checkBetaAccess($auth?.user?.email)
-        // betaAccess = betaResponse.access
       } catch (error) {
         notifications.error("Failed to sync with production database")
       }
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
index 9d5f716e0e..f6899c0fa4 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
   import { params } from "@roxi/routify"
 
   if ($params.automation) {
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
index 1a15ed48c6..d2c2cbc94c 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/[automationId]/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+  import AutomationBuilder from "@/components/automation/AutomationBuilder/AutomationBuilder.svelte"
 </script>
 
 <AutomationBuilder />
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index c5c28d1e1e..f0f7f9be20 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -1,24 +1,21 @@
 <script>
-  import { Heading, Body, Layout, Button, Modal, Icon } from "@budibase/bbui"
-  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
-  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
-  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
+  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
+  import AutomationPanel from "@/components/automation/AutomationPanel/AutomationPanel.svelte"
+  import CreateAutomationModal from "@/components/automation/AutomationPanel/CreateAutomationModal.svelte"
+  import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
+  import TestPanel from "@/components/automation/AutomationBuilder/TestPanel.svelte"
   import { onDestroy, onMount } from "svelte"
-  import { syncURLToState } from "helpers/urlStateSync"
+  import { syncURLToState } from "@/helpers/urlStateSync"
   import * as routify from "@roxi/routify"
   import {
     builderStore,
     automationStore,
     selectedAutomation,
-  } from "stores/builder"
-  import { createLocalStorageStore } from "@budibase/frontend-core"
-  import { fly } from "svelte/transition"
+  } from "@/stores/builder"
 
   $: automationId = $selectedAutomation?.data?._id
   $: builderStore.selectResource(automationId)
 
-  const surveyDismissed = createLocalStorageStore("automation-survey", false)
   const stopSyncing = syncURLToState({
     urlParam: "automationId",
     stateKey: "selectedAutomationId",
@@ -31,11 +28,9 @@
 
   let modal
   let webhookModal
-  let mounted = false
 
   onMount(() => {
     $automationStore.showTestPanel = false
-    mounted = true
   })
 
   onDestroy(stopSyncing)
@@ -83,43 +78,6 @@
   </Modal>
 </div>
 
-{#if !$surveyDismissed && mounted}
-  <div
-    class="survey"
-    in:fly={{ x: 600, duration: 260, delay: 1000 }}
-    out:fly={{ x: 600, duration: 260 }}
-  >
-    <div class="survey__body">
-      <div class="survey__title">We value your feedback!</div>
-      <div class="survey__text">
-        <a
-          href="https://t.maze.co/310149185"
-          target="_blank"
-          rel="noopener noreferrer"
-          on:click={() => surveyDismissed.set(true)}
-        >
-          Complete our survey on Automations</a
-        >
-        and receive a $20 thank-you gift.
-        <a
-          href="https://drive.google.com/file/d/12-qk_2F9g5PdbM6wuKoz2KkIyLI-feMX/view?usp=sharing"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Terms apply.
-        </a>
-      </div>
-    </div>
-    <Icon
-      name="Close"
-      hoverable
-      color="var(--spectrum-global-color-static-gray-300)"
-      hoverColor="var(--spectrum-global-color-static-gray-100)"
-      on:click={() => surveyDismissed.set(true)}
-    />
-  </div>
-{/if}
-
 <style>
   .root {
     flex: 1 1 auto;
@@ -164,39 +122,4 @@
     grid-column: 3;
     overflow: auto;
   }
-
-  /* Survey */
-  .survey {
-    position: absolute;
-    bottom: 32px;
-    right: 32px;
-    background: var(--spectrum-semantic-positive-color-background);
-    display: flex;
-    flex-direction: row;
-    padding: var(--spacing-l) var(--spacing-xl);
-    border-radius: 4px;
-    gap: var(--spacing-xl);
-  }
-  .survey * {
-    color: var(--spectrum-global-color-static-gray-300);
-    white-space: nowrap;
-  }
-  .survey a {
-    text-decoration: underline;
-    transition: color 130ms ease-out;
-  }
-  .survey a:hover {
-    color: var(--spectrum-global-color-static-gray-100);
-    cursor: pointer;
-  }
-  .survey__body {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .survey__title {
-    font-weight: 600;
-    font-size: 15px;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/index.svelte b/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
index ffd9b5d34c..3899947631 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
 
   $: {
     if ($automationStore.automations?.length) {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte
index 3d36b018c7..a5f484caff 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ModalContent, Body, Layout, Link } from "@budibase/bbui"
-  import { organisation } from "stores/portal"
+  import { organisation } from "@/stores/portal"
   import GoogleButton from "./GoogleButton.svelte"
 
   $: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleButton.svelte
index 3024fe1395..924d1ee060 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import GoogleLogo from "assets/google-logo.png"
-  import { auth } from "stores/portal"
-  import { appStore } from "stores/builder"
+  import { auth } from "@/stores/portal"
+  import { appStore } from "@/stores/builder"
 
   export let disabled
   export let samePage
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
index e24b95a0fe..ecefe5356b 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
@@ -1,16 +1,16 @@
 <script>
   import { Modal, keepOpen, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { IntegrationTypes } from "constants/backend"
+  import { IntegrationTypes } from "@/constants/backend"
   import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte"
 
   import { get } from "svelte/store"
-  import TableImportSelection from "components/backend/Datasources/TableImportSelection/index.svelte"
-  import DatasourceConfigEditor from "components/backend/Datasources/ConfigEditor/index.svelte"
-  import { datasources } from "stores/builder"
+  import TableImportSelection from "@/components/backend/Datasources/TableImportSelection/index.svelte"
+  import DatasourceConfigEditor from "@/components/backend/Datasources/ConfigEditor/index.svelte"
+  import { datasources } from "@/stores/builder"
   import { createOnGoogleAuthStore } from "./stores/onGoogleAuth.js"
   import { createDatasourceCreationStore } from "./stores/datasourceCreation.js"
-  import { configFromIntegration } from "stores/selectors"
+  import { configFromIntegration } from "@/stores/selectors"
 
   export let loading = false
   const store = createDatasourceCreationStore()
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js
index 9b39f1f658..01c89cfabb 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js
@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store"
-import { shouldIntegrationFetchTableNames } from "stores/selectors"
+import { shouldIntegrationFetchTableNames } from "@/stores/selectors"
 
 export const defaultStore = {
   finished: false,
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js
index 1cb3842c89..9552dcbf20 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js
@@ -5,7 +5,7 @@ import {
 } from "./datasourceCreation"
 import { get } from "svelte/store"
 
-vi.mock("stores/selectors", () => ({
+vi.mock("@/stores/selectors", () => ({
   shouldIntegrationFetchTableNames: vi.fn(),
 }))
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js
index 57dd5ee419..c93425b987 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js
@@ -1,7 +1,7 @@
 import { derived } from "svelte/store"
 import { params } from "@roxi/routify"
-import { integrations } from "stores/builder"
-import { IntegrationTypes } from "constants/backend"
+import { integrations } from "@/stores/builder"
+import { IntegrationTypes } from "@/constants/backend"
 
 export const createOnGoogleAuthStore = () => {
   return derived([params, integrations], ([$params, $integrations]) => {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js
index edf133ea0d..3bd0f47bb1 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js
@@ -4,14 +4,14 @@ import { writable, get } from "svelte/store"
 // eslint-disable-next-line
 import { params } from "@roxi/routify"
 // eslint-disable-next-line
-import { integrations } from "stores/builder"
-import { IntegrationTypes } from "constants/backend"
+import { integrations } from "@/stores/builder"
+import { IntegrationTypes } from "@/constants/backend"
 
 vi.mock("@roxi/routify", () => ({
   params: vi.fn(),
 }))
 
-vi.mock("stores/builder", () => ({
+vi.mock("@/stores/builder", () => ({
   integrations: vi.fn(),
 }))
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte
index a23b960f21..6fee783363 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Modal, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import CreateTableModal from "@/components/backend/TableNavigator/modals/CreateTableModal.svelte"
 
   let modal
   let promptUpload = false
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index 869110c2f4..0dc60505c7 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
-  import Panel from "components/design/Panel.svelte"
+  import DatasourceNavigator from "@/components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
+  import Panel from "@/components/design/Panel.svelte"
   import { isActive, redirect, goto, params } from "@roxi/routify"
-  import { datasources } from "stores/builder"
-  import NavHeader from "components/common/NavHeader.svelte"
+  import { datasources } from "@/stores/builder"
+  import NavHeader from "@/components/common/NavHeader.svelte"
 
   let searchValue
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfig.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfig.svelte
index c4f0861f45..2bc8a1ba18 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfig.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfig.svelte
@@ -1,8 +1,8 @@
 <script>
   import { keepOpen, Modal, notifications } from "@budibase/bbui"
-  import { integrationForDatasource } from "stores/selectors"
-  import { datasources, integrations } from "stores/builder"
-  import DatasourceConfigEditor from "components/backend/Datasources/ConfigEditor/index.svelte"
+  import { integrationForDatasource } from "@/stores/selectors"
+  import { datasources, integrations } from "@/stores/builder"
+  import DatasourceConfigEditor from "@/components/backend/Datasources/ConfigEditor/index.svelte"
   import EditDatasourceConfigButton from "./EditDatasourceConfigButton.svelte"
 
   export let datasource
@@ -13,7 +13,7 @@
 
   async function saveDatasource({ config, name }) {
     try {
-      await datasources.update({
+      await datasources.save({
         integration,
         datasource: { ...datasource, config, name },
       })
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfigButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfigButton.svelte
index 298677ef52..5048cbef6a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfigButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfigButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Body } from "@budibase/bbui"
-  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
-  import { IntegrationTypes } from "constants/backend"
+  import FontAwesomeIcon from "@/components/common/FontAwesomeIcon.svelte"
+  import { IntegrationTypes } from "@/constants/backend"
 
   export let datasource
   const getSubtitle = datasource => {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/PromptQueryModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/PromptQueryModal.svelte
index 9e7f04fd78..165f732b55 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/PromptQueryModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/PromptQueryModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto as gotoStore, params as paramsStore } from "@roxi/routify"
   import { Modal, ModalContent, Body, Heading } from "@budibase/bbui"
-  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
+  import FontAwesomeIcon from "@/components/common/FontAwesomeIcon.svelte"
 
   const handleOpen = (modal, params) => {
     if (params["?promptQuery"] && modal?.show) {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
index a4ba056cc5..9b562182b7 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationModal.svelte
@@ -11,10 +11,10 @@
     notifications,
   } from "@budibase/bbui"
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
-  import { BindableCombobox } from "components/common/bindings"
-  import { getAuthBindings, getEnvironmentBindings } from "dataBinding"
-  import { environment, licensing, auth } from "stores/portal"
-  import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
+  import { BindableCombobox } from "@/components/common/bindings"
+  import { getAuthBindings, getEnvironmentBindings } from "@/dataBinding"
+  import { environment, licensing, auth } from "@/stores/portal"
+  import CreateEditVariableModal from "@/components/portal/environment/CreateEditVariableModal.svelte"
 
   export let configs
   export let currentConfig
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Headers.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Headers.svelte
index 6e7ed89d84..4dd6a90a44 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Headers.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Headers.svelte
@@ -1,11 +1,11 @@
 <script>
   import { ActionButton } from "@budibase/bbui"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import {
     getRestBindings,
     readableToRuntimeBinding,
     runtimeToReadableMap,
-  } from "dataBinding"
+  } from "@/dataBinding"
   import { cloneDeep } from "lodash/fp"
   import SaveDatasourceButton from "./SaveDatasourceButton.svelte"
   import Panel from "./Panel.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportQueriesModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportQueriesModal.svelte
index 87f90551a4..dd90acf367 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportQueriesModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportQueriesModal.svelte
@@ -12,7 +12,7 @@
     TextArea,
     Dropzone,
   } from "@budibase/bbui"
-  import { datasources, queries } from "stores/builder"
+  import { datasources, queries } from "@/stores/builder"
   import { writable } from "svelte/store"
 
   export let navigateDatasource = false
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/index.svelte
index 93f1e87672..b70b55e8d4 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/index.svelte
@@ -1,8 +1,8 @@
 <script>
   import { goto } from "@roxi/routify"
   import { Button, Table } from "@budibase/bbui"
-  import { queries } from "stores/builder"
-  import CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte"
+  import { queries } from "@/stores/builder"
+  import CapitaliseRenderer from "@/components/common/renderers/CapitaliseRenderer.svelte"
   import RestImportButton from "./RestImportButton.svelte"
   import Panel from "../Panel.svelte"
   import Tooltip from "../Tooltip.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Relationships.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Relationships.svelte
index dd35abf001..4ccb353847 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Relationships.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Relationships.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Button, Table, notifications } from "@budibase/bbui"
-  import CreateEditRelationshipModal from "components/backend/Datasources/CreateEditRelationshipModal.svelte"
+  import CreateEditRelationshipModal from "@/components/backend/Datasources/CreateEditRelationshipModal.svelte"
   import {
     tables as tablesStore,
     integrations as integrationsStore,
     datasources as datasourcesStore,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import { DatasourceFeature } from "@budibase/types"
-  import { API } from "api"
+  import { API } from "@/api"
   import Panel from "./Panel.svelte"
   import Tooltip from "./Tooltip.svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/SaveDatasourceButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/SaveDatasourceButton.svelte
index 83a8e13c9e..4bbeba728a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/SaveDatasourceButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/SaveDatasourceButton.svelte
@@ -1,8 +1,8 @@
 <script>
   import { get } from "svelte/store"
   import { isEqual } from "lodash"
-  import { integrationForDatasource } from "stores/selectors"
-  import { integrations, datasources } from "stores/builder"
+  import { integrationForDatasource } from "@/stores/selectors"
+  import { integrations, datasources } from "@/stores/builder"
   import { notifications, Button } from "@budibase/bbui"
 
   export let datasource
@@ -16,7 +16,7 @@
         get(integrations),
         updatedDatasource
       )
-      await datasources.update({ datasource: updatedDatasource, integration })
+      await datasources.save({ datasource: updatedDatasource, integration })
       notifications.success(
         `Datasource ${updatedDatasource.name} updated successfully`
       )
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Settings.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Settings.svelte
index 894b705a30..1cc25f3799 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Settings.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Settings.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Body, Button, Layout, notifications } from "@budibase/bbui"
   import Panel from "./Panel.svelte"
-  import { API } from "api"
+  import { API } from "@/api"
   import { downloadText } from "@budibase/frontend-core"
 
   export let datasource
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/Controls.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/Controls.svelte
index 612ea5fc35..eaf517a30a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/Controls.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/Controls.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Button, Modal } from "@budibase/bbui"
-  import { integrations, tables } from "stores/builder"
+  import { integrations, tables } from "@/stores/builder"
   import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
-  import TableImportSelection from "components/backend/Datasources/TableImportSelection/index.svelte"
-  import { integrationForDatasource } from "stores/selectors"
+  import TableImportSelection from "@/components/backend/Datasources/TableImportSelection/index.svelte"
+  import { integrationForDatasource } from "@/stores/selectors"
 
   export let datasource
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/CreateExternalTableModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/CreateExternalTableModal.svelte
index b5a8dfc8ac..74295e1d42 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/CreateExternalTableModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/CreateExternalTableModal.svelte
@@ -1,8 +1,8 @@
 <script>
   import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
-  import { tables, datasources } from "stores/builder"
+  import { tables, datasources } from "@/stores/builder"
   import { goto } from "@roxi/routify"
-  import { DB_TYPE_EXTERNAL } from "constants/backend"
+  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
 
   export let datasource
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/index.svelte
index 831936fb28..6346c3cba1 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/index.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import { Table } from "@budibase/bbui"
-  import ArrayRenderer from "components/common/renderers/ArrayRenderer.svelte"
+  import ArrayRenderer from "@/components/common/renderers/ArrayRenderer.svelte"
   import Controls from "./Controls.svelte"
   import Panel from "../Panel.svelte"
   import Tooltip from "../Tooltip.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/ViewDynamicVariables.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/ViewDynamicVariables.svelte
index 2d37c71999..a19beb9083 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/ViewDynamicVariables.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/ViewDynamicVariables.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Body, Table, BoldRenderer, CodeRenderer } from "@budibase/bbui"
-  import { queries } from "stores/builder"
+  import { queries } from "@/stores/builder"
   import { goto } from "@roxi/routify"
 
   export let datasource
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte
index b50d5e7611..0e0dba066a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Variables/index.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Heading, Layout } from "@budibase/bbui"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import ViewDynamicVariables from "./ViewDynamicVariables.svelte"
-  import { getEnvironmentBindings } from "dataBinding"
-  import { licensing } from "stores/portal"
-  import { queries } from "stores/builder"
+  import { getEnvironmentBindings } from "@/dataBinding"
+  import { licensing } from "@/stores/portal"
+  import { queries } from "@/stores/builder"
   import { cloneDeep } from "lodash/fp"
   import SaveDatasourceButton from "../SaveDatasourceButton.svelte"
   import Panel from "../Panel.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_layout.svelte
index 417f750ab5..7f66c7ce53 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_layout.svelte
@@ -1,7 +1,7 @@
 <script>
   import { params } from "@roxi/routify"
-  import { datasources, builderStore } from "stores/builder"
-  import { syncURLToState } from "helpers/urlStateSync"
+  import { datasources, builderStore } from "@/stores/builder"
+  import { syncURLToState } from "@/helpers/urlStateSync"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
index 3757ed7dee..9aa0c5b7e8 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Tabs, Tab, Heading, Body, Layout } from "@budibase/bbui"
-  import { datasources, integrations } from "stores/builder"
-  import ICONS from "components/backend/DatasourceNavigator/icons"
+  import { datasources, integrations } from "@/stores/builder"
+  import ICONS from "@/components/backend/DatasourceNavigator/icons"
   import EditDatasourceConfig from "./_components/EditDatasourceConfig.svelte"
   import TablesPanel from "./_components/panels/Tables/index.svelte"
   import RelationshipsPanel from "./_components/panels/Relationships.svelte"
@@ -12,8 +12,8 @@
   import PromptQueryModal from "./_components/PromptQueryModal.svelte"
   import SettingsPanel from "./_components/panels/Settings.svelte"
   import { helpers } from "@budibase/shared-core"
-  import { admin } from "stores/portal"
-  import { IntegrationTypes } from "constants/backend"
+  import { admin } from "@/stores/portal"
+  import { IntegrationTypes } from "@/constants/backend"
 
   let selectedPanel = null
   let panelOptions = []
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
index 57b851bb25..c37ca6d606 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
@@ -1,12 +1,15 @@
 <script>
   import { Button, Heading, Body, Layout, Modal, Divider } from "@budibase/bbui"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
-  import ICONS from "components/backend/DatasourceNavigator/icons"
-  import { tables, datasources, builderStore } from "stores/builder"
+  import CreateTableModal from "@/components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import ICONS from "@/components/backend/DatasourceNavigator/icons"
+  import { tables, datasources, builderStore } from "@/stores/builder"
   import { goto } from "@roxi/routify"
   import { onMount } from "svelte"
-  import { BUDIBASE_INTERNAL_DB_ID, DB_TYPE_EXTERNAL } from "constants/backend"
-  import { TableNames } from "constants"
+  import {
+    BUDIBASE_INTERNAL_DB_ID,
+    DB_TYPE_EXTERNAL,
+  } from "@/constants/backend"
+  import { TableNames } from "@/constants"
 
   let modal
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/index.svelte
index 789d6c5443..96a0201238 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/index.svelte
@@ -1,10 +1,13 @@
 <script>
   import { Button, Heading, Body, Layout, Modal, Divider } from "@budibase/bbui"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
-  import ICONS from "components/backend/DatasourceNavigator/icons"
-  import { tables, datasources, builderStore } from "stores/builder"
+  import CreateTableModal from "@/components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import ICONS from "@/components/backend/DatasourceNavigator/icons"
+  import { tables, datasources, builderStore } from "@/stores/builder"
   import { goto } from "@roxi/routify"
-  import { DEFAULT_BB_DATASOURCE_ID, DB_TYPE_EXTERNAL } from "constants/backend"
+  import {
+    DEFAULT_BB_DATASOURCE_ID,
+    DB_TYPE_EXTERNAL,
+  } from "@/constants/backend"
   import { onMount } from "svelte"
 
   let modal
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
index c77ff0dce9..5daf3c3e6e 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { datasources } from "stores/builder"
+  import { datasources } from "@/stores/builder"
   import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
index ff9a27a14b..2f40adc162 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
@@ -1,7 +1,7 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { TableNames } from "constants"
-  import { datasources } from "stores/builder"
+  import { TableNames } from "@/constants"
+  import { datasources } from "@/stores/builder"
 
   $: {
     if ($datasources.hasData) {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index 20efd3667b..2ba23686ab 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -1,20 +1,20 @@
 <script>
-  import { API } from "api"
+  import { API } from "@/api"
   import {
     tables,
     datasources,
     sortedIntegrations as integrations,
-  } from "stores/builder"
+  } from "@/stores/builder"
 
-  import { hasData } from "stores/selectors"
+  import { hasData } from "@/stores/selectors"
   import { notifications, Body, Icon, AbsTooltip } from "@budibase/bbui"
   import { params, goto } from "@roxi/routify"
   import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
   import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
   import DatasourceOption from "./_components/DatasourceOption.svelte"
-  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
-  import CreationPage from "components/common/CreationPage.svelte"
-  import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
+  import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import CreationPage from "@/components/common/CreationPage.svelte"
+  import ICONS from "@/components/backend/DatasourceNavigator/icons/index.js"
 
   let internalTableModal
   let externalDatasourceModal
diff --git a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/_layout.svelte
index 580c0d557a..8f7218dfe9 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { queries, builderStore } from "stores/builder"
-  import { syncURLToState } from "helpers/urlStateSync"
+  import { queries, builderStore } from "@/stores/builder"
+  import { syncURLToState } from "@/helpers/urlStateSync"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
index 754bf9c83d..7d67c8cb73 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { queries, datasources } from "stores/builder"
-  import QueryViewer from "components/integration/QueryViewer.svelte"
-  import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
-  import { IntegrationTypes } from "constants/backend"
+  import { queries, datasources } from "@/stores/builder"
+  import QueryViewer from "@/components/integration/QueryViewer.svelte"
+  import RestQueryViewer from "@/components/integration/RestQueryViewer.svelte"
+  import { IntegrationTypes } from "@/constants/backend"
   import { cloneDeep } from "lodash/fp"
 
   $: query = $queries.selected
diff --git a/packages/builder/src/pages/builder/app/[application]/data/query/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/query/index.svelte
index 277970defa..cd961e15e5 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/query/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/query/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { queries } from "stores/builder"
+  import { queries } from "@/stores/builder"
   import { redirect } from "@roxi/routify"
 
   onMount(async () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/query/new/[datasourceId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/query/new/[datasourceId]/index.svelte
index 7d27b05d67..e3690f21ae 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/query/new/[datasourceId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/query/new/[datasourceId]/index.svelte
@@ -1,9 +1,9 @@
 <script>
   import { params, redirect } from "@roxi/routify"
-  import QueryViewer from "components/integration/QueryViewer.svelte"
-  import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
-  import { IntegrationTypes } from "constants/backend"
-  import { datasources } from "stores/builder"
+  import QueryViewer from "@/components/integration/QueryViewer.svelte"
+  import RestQueryViewer from "@/components/integration/RestQueryViewer.svelte"
+  import { IntegrationTypes } from "@/constants/backend"
+  import { datasources } from "@/stores/builder"
 
   $: datasource = $datasources.list.find(ds => ds._id === $params.datasourceId)
   $: {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/roles.svelte b/packages/builder/src/pages/builder/app/[application]/data/roles.svelte
index 0177577730..1edbdfb75c 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/roles.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/roles.svelte
@@ -1,6 +1,6 @@
 <script>
-  import RoleEditor from "components/backend/RoleEditor/RoleEditor.svelte"
-  import { builderStore } from "stores/builder"
+  import RoleEditor from "@/components/backend/RoleEditor/RoleEditor.svelte"
+  import { builderStore } from "@/stores/builder"
 
   builderStore.selectResource("roles")
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte
index 9c1baa723e..4a12047c37 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { viewsV2, builderStore } from "stores/builder"
-  import { syncURLToState } from "helpers/urlStateSync"
+  import { viewsV2, builderStore } from "@/stores/builder"
+  import { syncURLToState } from "@/helpers/urlStateSync"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte
index 39b1dc4768..9ac7ccd715 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte
@@ -1,19 +1,19 @@
 <script>
-  import { viewsV2, rowActions } from "stores/builder"
-  import { admin, themeStore, featureFlags } from "stores/portal"
+  import { viewsV2, rowActions } from "@/stores/builder"
+  import { admin, themeStore, featureFlags } from "@/stores/portal"
   import { Grid } from "@budibase/frontend-core"
-  import { API } from "api"
+  import { API } from "@/api"
   import { notifications } from "@budibase/bbui"
-  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"
-  import GridSortButton from "components/backend/DataTable/buttons/grid/GridSortButton.svelte"
-  import GridColumnsSettingButton from "components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte"
-  import GridSizeButton from "components/backend/DataTable/buttons/grid/GridSizeButton.svelte"
-  import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
-  import GridScreensButton from "components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
-  import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
-  import GridViewCalculationButton from "components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte"
+  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"
+  import GridSortButton from "@/components/backend/DataTable/buttons/grid/GridSortButton.svelte"
+  import GridColumnsSettingButton from "@/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte"
+  import GridSizeButton from "@/components/backend/DataTable/buttons/grid/GridSizeButton.svelte"
+  import GridGenerateButton from "@/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
+  import GridScreensButton from "@/components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
+  import GridRowActionsButton from "@/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
+  import GridViewCalculationButton from "@/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte"
   import { ViewV2Type } from "@budibase/types"
 
   let generateButton
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte
index ecc85e7622..06d6359f11 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte
@@ -1,8 +1,8 @@
 <script>
-  import DetailPopover from "components/common/DetailPopover.svelte"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
   import { Input, notifications, Button, Icon, ListItem } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { viewsV2 } from "stores/builder"
+  import { viewsV2 } from "@/stores/builder"
   import { ViewV2Type } from "@budibase/types"
 
   export let table
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte
index 0b5f18b70b..5a23c976f8 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { views, viewsV2 } from "stores/builder"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { views, viewsV2 } from "@/stores/builder"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { notifications } from "@budibase/bbui"
 
   export let view
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte
index 0f39fa063d..165dd2fdca 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { views, viewsV2 } from "stores/builder"
+  import { views, viewsV2 } from "@/stores/builder"
   import { cloneDeep } from "lodash/fp"
   import { notifications, Input, Modal, ModalContent } from "@budibase/bbui"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
index bf3d073f60..e9c5745cc6 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
@@ -5,18 +5,18 @@
     userSelectedResourceMap,
     contextMenuStore,
     appStore,
-  } from "stores/builder"
-  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  } from "@/stores/builder"
+  import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import { Icon, ActionButton, ActionMenu, MenuItem } from "@budibase/bbui"
   import { params, url } from "@roxi/routify"
   import EditViewModal from "./EditViewModal.svelte"
   import DeleteViewModal from "./DeleteViewModal.svelte"
-  import EditTableModal from "components/backend/TableNavigator/TableNavItem/EditModal.svelte"
-  import DeleteTableModal from "components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte"
+  import EditTableModal from "@/components/backend/TableNavigator/TableNavItem/EditModal.svelte"
+  import DeleteTableModal from "@/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte"
   import { UserAvatars } from "@budibase/frontend-core"
-  import { DB_TYPE_EXTERNAL } from "constants/backend"
-  import { TableNames } from "constants"
-  import { alphabetical } from "components/backend/TableNavigator/utils"
+  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
+  import { TableNames } from "@/constants"
+  import { alphabetical } from "@/components/backend/TableNavigator/utils"
   import { tick, onDestroy } from "svelte"
   import { derived } from "svelte/store"
   import CreateViewButton from "./CreateViewButton.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte
index da05196c04..58fcf7c9c3 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { tables, builderStore } from "stores/builder"
+  import { syncURLToState } from "@/helpers/urlStateSync"
+  import { tables, builderStore } from "@/stores/builder"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
   import ViewNavBar from "./_components/ViewNavBar.svelte"
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 5684e77e31..1100b7cf1e 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
@@ -7,25 +7,25 @@
     appStore,
     rowActions,
     roles,
-  } from "stores/builder"
-  import { themeStore, admin, featureFlags } from "stores/portal"
-  import { TableNames } from "constants"
+  } from "@/stores/builder"
+  import { themeStore, admin, featureFlags } from "@/stores/portal"
+  import { TableNames } from "@/constants"
   import { Grid } from "@budibase/frontend-core"
-  import { API } from "api"
-  import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
-  import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
-  import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
-  import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
-  import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
-  import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
-  import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
-  import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
-  import GridUsersTableButton from "components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte"
-  import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
-  import GridScreensButton from "components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
-  import GridAutomationsButton from "components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte"
-  import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
-  import { DB_TYPE_EXTERNAL } from "constants/backend"
+  import { API } from "@/api"
+  import GridAddColumnModal from "@/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
+  import GridCreateEditRowModal from "@/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
+  import GridEditUserModal from "@/components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
+  import GridImportButton from "@/components/backend/DataTable/buttons/grid/GridImportButton.svelte"
+  import GridExportButton from "@/components/backend/DataTable/buttons/grid/GridExportButton.svelte"
+  import GridManageAccessButton from "@/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
+  import GridRelationshipButton from "@/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
+  import GridEditColumnModal from "@/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
+  import GridUsersTableButton from "@/components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte"
+  import GridGenerateButton from "@/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
+  import GridScreensButton from "@/components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
+  import GridAutomationsButton from "@/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte"
+  import GridRowActionsButton from "@/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
+  import { DB_TYPE_EXTERNAL } from "@/constants/backend"
 
   let generateButton
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/_layout.svelte
index df3a18c2bb..001b2b1736 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { views, builderStore } from "stores/builder"
-  import { syncURLToState } from "helpers/urlStateSync"
+  import { views, builderStore } from "@/stores/builder"
+  import { syncURLToState } from "@/helpers/urlStateSync"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/index.svelte
index 2c822569b7..f56b48af17 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/v1/[viewName]/index.svelte
@@ -1,15 +1,15 @@
 <script>
-  import { views, tables } from "stores/builder"
-  import { API } from "api"
-  import Table from "components/backend/DataTable/Table.svelte"
-  import CalculateButton from "components/backend/DataTable/buttons/CalculateButton.svelte"
-  import GroupByButton from "components/backend/DataTable/buttons/GroupByButton.svelte"
-  import ViewFilterButton from "components/backend/DataTable/buttons/ViewFilterButton.svelte"
-  import ExportButton from "components/backend/DataTable/buttons/ExportButton.svelte"
-  import ManageAccessButton from "components/backend/DataTable/buttons/ManageAccessButton.svelte"
-  import HideAutocolumnButton from "components/backend/DataTable/buttons/HideAutocolumnButton.svelte"
+  import { views, tables } from "@/stores/builder"
+  import { API } from "@/api"
+  import Table from "@/components/backend/DataTable/Table.svelte"
+  import CalculateButton from "@/components/backend/DataTable/buttons/CalculateButton.svelte"
+  import GroupByButton from "@/components/backend/DataTable/buttons/GroupByButton.svelte"
+  import ViewFilterButton from "@/components/backend/DataTable/buttons/ViewFilterButton.svelte"
+  import ExportButton from "@/components/backend/DataTable/buttons/ExportButton.svelte"
+  import ManageAccessButton from "@/components/backend/DataTable/buttons/ManageAccessButton.svelte"
+  import HideAutocolumnButton from "@/components/backend/DataTable/buttons/HideAutocolumnButton.svelte"
   import { notifications } from "@budibase/bbui"
-  import { ROW_EXPORT_FORMATS } from "constants/backend"
+  import { ROW_EXPORT_FORMATS } from "@/constants/backend"
 
   let hideAutocolumns = true
   let data = []
@@ -43,8 +43,7 @@
       return
     }
     try {
-      data = await API.fetchViewData({
-        name,
+      data = await API.fetchViewData(name, {
         calculation,
         field,
         groupBy,
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte
index 3f21e48672..22b786bd00 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/index.svelte
@@ -1,8 +1,8 @@
 <script>
   import { onMount } from "svelte"
-  import { datasources, tables } from "stores/builder"
+  import { datasources, tables } from "@/stores/builder"
   import { redirect } from "@roxi/routify"
-  import { TableNames } from "constants"
+  import { TableNames } from "@/constants"
 
   onMount(() => {
     if ($tables.selected) {
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 ee72c0fbf5..30f11e6cab 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,23 +1,23 @@
 <script>
-  import Panel from "components/design/Panel.svelte"
+  import Panel from "@/components/design/Panel.svelte"
   import {
     selectedScreen,
     componentStore,
     selectedComponent,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
-  import { getComponentName } from "helpers/components"
+  import { getComponentName } from "@/helpers/components"
   import {
     getBindableProperties,
     getComponentBindableProperties,
-  } from "dataBinding"
+  } from "@/dataBinding"
   import { ActionButton, notifications } from "@budibase/bbui"
-  import { capitalise } from "helpers"
-  import TourWrap from "components/portal/onboarding/TourWrap.svelte"
-  import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
+  import { capitalise } from "@/helpers"
+  import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
+  import { TOUR_STEP_KEYS } from "@/components/portal/onboarding/tours.js"
 
   const {
     BUILDER_FORM_CREATE_STEPS,
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 d40f28e65a..0b147e867c 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,12 +1,12 @@
 <script>
   import { DetailSummary, notifications } from "@budibase/bbui"
-  import { componentStore, builderStore } from "stores/builder"
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
-  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 { componentStore, builderStore } from "@/stores/builder"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
+  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"
+  import analytics, { Events } from "@/analytics"
   import { shouldDisplaySetting } from "@budibase/frontend-core"
   import { getContext, setContext } from "svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
index c7139a81e2..2309737cb8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
@@ -11,11 +11,11 @@
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
   import { QueryUtils, Constants } from "@budibase/frontend-core"
-  import { selectedComponent, componentStore } from "stores/builder"
-  import { getComponentForSetting } from "components/design/settings/componentSettings"
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+  import { selectedComponent, componentStore } from "@/stores/builder"
+  import { getComponentForSetting } from "@/components/design/settings/componentSettings"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
 
   export let conditions = []
   export let bindings = []
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index fc862a19c8..b40a6af3c6 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -6,7 +6,7 @@
     Button,
     notifications,
   } from "@budibase/bbui"
-  import { componentStore } from "stores/builder"
+  import { componentStore } from "@/stores/builder"
   import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index fea5da244f..30e448774b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -9,13 +9,13 @@
     Icon,
     Body,
   } from "@budibase/bbui"
-  import { selectedScreen, componentStore } from "stores/builder"
-  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import { selectedScreen, componentStore } from "@/stores/builder"
+  import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import {
     getBindableProperties,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "dataBinding"
+  } from "@/dataBinding"
 
   export let componentInstance
   export let componentDefinition
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
index a0a0686412..54940ce29c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
@@ -1,7 +1,7 @@
 <script>
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
   import { DetailSummary, notifications } from "@budibase/bbui"
-  import { componentStore } from "stores/builder"
+  import { componentStore } from "@/stores/builder"
 
   export let name
   export let properties
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
index 7c65b6e6ec..7f0d4caaa9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
@@ -1,5 +1,5 @@
 import { Input, Select } from "@budibase/bbui"
-import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
+import ColorPicker from "@/components/design/settings/controls/ColorPicker.svelte"
 
 export const margin = {
   label: "Margin",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte
index 1355561076..2437645c40 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte
@@ -1,12 +1,12 @@
 <script>
   import { Icon, Popover, RadioGroup } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
-  import RoleSelect from "components/common/RoleSelect.svelte"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableCombobox from "@/components/common/bindings/DrawerBindableCombobox.svelte"
+  import RoleSelect from "@/components/common/RoleSelect.svelte"
   import SubLinksDrawer from "./SubLinksDrawer.svelte"
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
 
   export let anchor
   export let navItem
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte
index 3cea3f7367..e14b1e7d12 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { runtimeToReadableBinding } from "dataBinding"
+  import { runtimeToReadableBinding } from "@/dataBinding"
   import EditNavItemPopover from "./EditNavItemPopover.svelte"
   import { Icon } from "@budibase/bbui"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
index db55f501f0..95881b1bed 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { navigationStore } from "stores/builder"
-  import DraggableList from "components/design/settings/controls/DraggableList/DraggableList.svelte"
+  import { navigationStore } from "@/stores/builder"
+  import DraggableList from "@/components/design/settings/controls/DraggableList/DraggableList.svelte"
   import NavItem from "./NavItem.svelte"
   import { generate } from "shortid"
-  import { getSequentialName } from "helpers/duplicate"
+  import { getSequentialName } from "@/helpers/duplicate"
   import { Constants } from "@budibase/frontend-core"
 
   export let bindings
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte
index b1958e4d3d..56bbbd1dab 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte
@@ -11,8 +11,8 @@
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
-  import { screenStore } from "stores/builder"
-  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+  import { screenStore } from "@/stores/builder"
+  import DrawerBindableCombobox from "@/components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let value = []
   export let onChange
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
index 7c8b03caca..cdc0c4056d 100644
--- 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
@@ -1,7 +1,7 @@
 <script>
   import NavItemConfiguration from "./NavItemConfiguration.svelte"
   import { get } from "svelte/store"
-  import Panel from "components/design/Panel.svelte"
+  import Panel from "@/components/design/Panel.svelte"
   import {
     Toggle,
     DetailSummary,
@@ -15,14 +15,14 @@
     screenStore,
     componentStore,
     navigationStore as nav,
-  } from "stores/builder"
-  import { DefaultAppTheme } from "constants"
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
-  import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
-  import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
-  import { getBindableProperties } from "dataBinding"
+  } from "@/stores/builder"
+  import { DefaultAppTheme } from "@/constants"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
+  import BarButtonList from "@/components/design/settings/controls/BarButtonList.svelte"
+  import ColorPicker from "@/components/design/settings/controls/ColorPicker.svelte"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableCombobox from "@/components/common/bindings/DrawerBindableCombobox.svelte"
+  import { getBindableProperties } from "@/dataBinding"
 
   const positionOptions = [
     { value: "Top", barIcon: "PaddingTop" },
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
index eb7a839b22..3bd683bec4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { notifications } from "@budibase/bbui"
-  import { themeStore, appStore } from "stores/builder"
+  import { themeStore, appStore } from "@/stores/builder"
   import { ThemeOptions, getThemeClassNames } from "@budibase/shared-core"
 
   const onChangeTheme = async theme => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 62fe593602..3a6e7a702c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -8,13 +8,13 @@
     Select,
     notifications,
   } from "@budibase/bbui"
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
-  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-  import { selectedScreen, screenStore } from "stores/builder"
-  import sanitizeUrl from "helpers/sanitizeUrl"
-  import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
-  import { getBindableProperties } from "dataBinding"
-  import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
+  import RoleSelect from "@/components/design/settings/controls/RoleSelect.svelte"
+  import { selectedScreen, screenStore } from "@/stores/builder"
+  import sanitizeUrl from "@/helpers/sanitizeUrl"
+  import ButtonActionEditor from "@/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
+  import { getBindableProperties } from "@/dataBinding"
+  import BarButtonList from "@/components/design/settings/controls/BarButtonList.svelte"
 
   $: bindings = getBindableProperties($selectedScreen, null)
   $: screenSettings = getScreenSettings($selectedScreen)
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
index 8b3128f852..af693a872f 100644
--- 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
@@ -7,11 +7,11 @@
     Icon,
     Body,
   } from "@budibase/bbui"
-  import { themeStore, appStore } from "stores/builder"
-  import { DefaultAppTheme } from "constants"
+  import { themeStore, appStore } from "@/stores/builder"
+  import { DefaultAppTheme } from "@/constants"
   import AppThemeSelect from "./AppThemeSelect.svelte"
   import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
-  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+  import PropertyControl from "@/components/design/settings/controls/PropertyControl.svelte"
 
   $: customTheme = $themeStore.customTheme || {}
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
index 405b8b0c21..d2fed41655 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
@@ -1,9 +1,9 @@
 <script>
   import GeneralPanel from "./GeneralPanel.svelte"
   import ThemePanel from "./ThemePanel.svelte"
-  import { selectedScreen } from "stores/builder"
-  import Panel from "components/design/Panel.svelte"
-  import { capitalise } from "helpers"
+  import { selectedScreen } from "@/stores/builder"
+  import Panel from "@/components/design/Panel.svelte"
+  import { capitalise } from "@/helpers"
   import { ActionButton, Layout } from "@budibase/bbui"
 
   let activeTab = "general"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 15a9c773ef..16fe7d9c2f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -1,14 +1,14 @@
 <script>
-  import { syncURLToState } from "helpers/urlStateSync"
+  import { syncURLToState } from "@/helpers/urlStateSync"
   import {
     builderStore,
     screenStore,
     selectedScreen,
     componentStore,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
-  import { findComponent } from "helpers/components"
+  import { findComponent } from "@/helpers/components"
   import ComponentSettingsPanel from "./_components/Component/ComponentSettingsPanel.svelte"
   import NavigationPanel from "./_components/Navigation/index.svelte"
   import ScreenSettingsPanel from "./_components/Screen/index.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index 361e07a026..aa0b26f6b7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Panel from "components/design/Panel.svelte"
+  import Panel from "@/components/design/Panel.svelte"
   import { goto } from "@roxi/routify"
   import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
   import structure from "./componentStructure.json"
@@ -8,10 +8,10 @@
     selectedScreen,
     componentStore,
     selectedComponent,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import { onMount } from "svelte"
   import { fly } from "svelte/transition"
-  import { findComponentPath } from "helpers/components"
+  import { findComponentPath } from "@/helpers/components"
 
   let searchString
   let searchRef
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 4617814485..29e2ce03ff 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,8 +1,8 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { screenStore, appStore } from "stores/builder"
-  import UndoRedoControl from "components/common/UndoRedoControl.svelte"
+  import { screenStore, appStore } from "@/stores/builder"
+  import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
 </script>
 
 <div class="app-panel">
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 1e8868f03c..55a4dc4de4 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
@@ -12,11 +12,11 @@
     hoverStore,
     componentTreeNodesStore,
     snippets,
-  } from "stores/builder"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  } from "@/stores/builder"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { Layout, Heading, Body, Icon, notifications } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
-  import { findComponent, findComponentPath } from "helpers/components"
+  import { findComponent, findComponentPath } from "@/helpers/components"
   import { isActive, goto } from "@roxi/routify"
   import { ClientAppSkeleton } from "@budibase/frontend-core"
   import { getThemeClassNames, ThemeClassPrefix } from "@budibase/shared-core"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index 6b27d79c15..ca8a08368a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -5,11 +5,11 @@
     componentStore,
     selectedComponent,
     componentTreeNodesStore,
-  } from "stores/builder"
-  import { findComponent, getChildIdsForComponent } from "helpers/components"
+  } from "@/stores/builder"
+  import { findComponent, getChildIdsForComponent } from "@/helpers/components"
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
 
   let confirmDeleteDialog
   let confirmEjectDialog
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 997fac6f10..a6f404d61b 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
@@ -1,5 +1,5 @@
 <script>
-  import NavItem from "components/common/NavItem.svelte"
+  import NavItem from "@/components/common/NavItem.svelte"
   import { Icon, notifications } from "@budibase/bbui"
   import {
     selectedScreen,
@@ -9,12 +9,12 @@
     hoverStore,
     componentTreeNodesStore,
     contextMenuStore,
-  } from "stores/builder"
+  } from "@/stores/builder"
   import {
     findComponentPath,
     getComponentText,
     getComponentName,
-  } from "helpers/components"
+  } from "@/helpers/components"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
   import getComponentContextMenuItems from "./getComponentContextMenuItems"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
index 0ab78b387f..2361abce89 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
-import { findComponentParent, findComponentPath } from "helpers/components"
-import { selectedScreen, componentStore } from "stores/builder"
+import { findComponentParent, findComponentPath } from "@/helpers/components"
+import { selectedScreen, componentStore } from "@/stores/builder"
 
 export const DropPosition = {
   ABOVE: "above",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getComponentContextMenuItems.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getComponentContextMenuItems.js
index f2dfb73a68..76f42b518e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getComponentContextMenuItems.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getComponentContextMenuItems.js
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { componentStore } from "stores/builder"
+import { componentStore } from "@/stores/builder"
 
 const getContextMenuItems = (component, componentCollapsed) => {
   const definition = componentStore.getDefinition(component?._component)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getScreenContextMenuItems.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getScreenContextMenuItems.js
index 25f2e908e6..3a514db260 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getScreenContextMenuItems.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getScreenContextMenuItems.js
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { componentStore } from "stores/builder"
+import { componentStore } from "@/stores/builder"
 import { notifications } from "@budibase/bbui"
 
 const getContextMenuItems = (component, showCopy) => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
index fce8c12800..eb5a57ec9c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -8,8 +8,8 @@
     userSelectedResourceMap,
     hoverStore,
     contextMenuStore,
-  } from "stores/builder"
-  import NavItem from "components/common/NavItem.svelte"
+  } from "@/stores/builder"
+  import NavItem from "@/components/common/NavItem.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore, DropPosition } from "./dndStore.js"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
index 9c0df03f12..436571dd2e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ActionGroup, ActionButton } from "@budibase/bbui"
-  import { previewStore } from "stores/builder"
+  import { previewStore } from "@/stores/builder"
 </script>
 
 <ActionGroup compact quiet>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index ab078a3a5b..fa3ad5f6be 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { getHorizontalResizeActions } from "components/common/resizable"
+  import { getHorizontalResizeActions } from "@/components/common/resizable"
 
   const [resizable, resizableHandle] = getHorizontalResizeActions()
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
index 09e29d806a..807c0208a2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Tooltip, StatusLight } from "@budibase/bbui"
-  import { roles } from "stores/builder"
-  import { Roles } from "constants/backend"
+  import { roles } from "@/stores/builder"
+  import { Roles } from "@/constants/backend"
 
   export let roleId
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/ScreenNavItem.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/ScreenNavItem.svelte
index e533145fa1..6377e1ca33 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/ScreenNavItem.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/ScreenNavItem.svelte
@@ -6,14 +6,14 @@
     userSelectedResourceMap,
     contextMenuStore,
     componentStore,
-  } from "stores/builder"
-  import NavItem from "components/common/NavItem.svelte"
+  } from "@/stores/builder"
+  import NavItem from "@/components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
-  import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
-  import sanitizeUrl from "helpers/sanitizeUrl"
-  import { makeComponentUnique } from "helpers/components"
-  import { capitalise } from "helpers"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ScreenDetailsModal from "@/components/design/ScreenDetailsModal.svelte"
+  import sanitizeUrl from "@/helpers/sanitizeUrl"
+  import { makeComponentUnique } from "@/helpers/components"
+  import { capitalise } from "@/helpers"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
 
   export let screen
 
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
index 5c9da100e4..a5f00f2c7a 100644
--- 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
@@ -1,10 +1,10 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import { sortedScreens } from "stores/builder"
+  import { sortedScreens } from "@/stores/builder"
   import ScreenNavItem from "./ScreenNavItem.svelte"
   import { goto } from "@roxi/routify"
-  import { getVerticalResizeActions } from "components/common/resizable"
-  import NavHeader from "components/common/NavHeader.svelte"
+  import { getVerticalResizeActions } from "@/components/common/resizable"
+  import NavHeader from "@/components/common/NavHeader.svelte"
 
   const [resizable, resizableHandle] = getVerticalResizeActions()
 
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 ac87b53db2..c990971c3d 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,8 +1,8 @@
 <script>
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { screenStore, selectedScreen } from "stores/builder"
+  import { syncURLToState } from "@/helpers/urlStateSync"
+  import { screenStore, selectedScreen } from "@/stores/builder"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 
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 e71dba1280..ed553bd452 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,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
 
   $redirect(`./${$screenStore.selectedScreenId}-screen`)
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index 47d7c765d6..edc502bbb4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
+  import ScreenDetailsModal from "@/components/design/ScreenDetailsModal.svelte"
   import DatasourceModal from "./DatasourceModal.svelte"
   import TypeModal from "./TypeModal.svelte"
   import tableTypes from "./tableTypes"
@@ -12,13 +12,13 @@
     builderStore,
     datasources,
     appStore,
-  } from "stores/builder"
-  import { auth } from "stores/portal"
+  } from "@/stores/builder"
+  import { auth } from "@/stores/portal"
   import { goto } from "@roxi/routify"
-  import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
-  import * as screenTemplating from "templates/screenTemplating"
-  import { Roles } from "constants/backend"
-  import { AutoScreenTypes } from "constants"
+  import { TOUR_KEYS } from "@/components/portal/onboarding/tours.js"
+  import * as screenTemplating from "@/templates/screenTemplating"
+  import { Roles } from "@/constants/backend"
+  import { AutoScreenTypes } from "@/constants"
   import { makeTableOption, makeViewOption } from "./utils"
 
   let mode
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
index d32e8e3fc7..4c37d626bd 100644
--- 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
@@ -1,8 +1,8 @@
 <script>
   import { Body, ModalContent, Layout } from "@budibase/bbui"
-  import { datasources as datasourcesStore } from "stores/builder"
-  import ICONS from "components/backend/DatasourceNavigator/icons"
-  import { IntegrationNames } from "constants"
+  import { datasources as datasourcesStore } from "@/stores/builder"
+  import ICONS from "@/components/backend/DatasourceNavigator/icons"
+  import { IntegrationNames } from "@/constants"
   import { createEventDispatcher } from "svelte"
   import TableOrViewOption from "./TableOrViewOption.svelte"
   import { makeTableOption, makeViewOption } from "./utils"
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
index 3101ce41ea..bbd6fda256 100644
--- 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
@@ -1,11 +1,11 @@
 <script>
   import { Body } from "@budibase/bbui"
-  import CreationPage from "components/common/CreationPage.svelte"
+  import CreationPage from "@/components/common/CreationPage.svelte"
   import blank from "./images/blank.svg"
   import table from "./images/tableInline.svg"
   import form from "./images/formUpdate.svg"
   import CreateScreenModal from "./CreateScreenModal.svelte"
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
 
   export let onClose = null
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/utils.js b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/utils.js
index 1f2461d2cb..212a475462 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/utils.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/utils.js
@@ -1,4 +1,4 @@
-import * as format from "helpers/data/format"
+import * as format from "@/helpers/data/format"
 
 export const makeViewOption = view => ({
   icon: "Remove",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index b9fca41695..93761fe596 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
 
   $: {
     if ($screenStore.screens.length > 0) {
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 a9af09a3a1..5b1772c5bf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -1,6 +1,6 @@
 <script>
   import NewScreen from "./_components/NewScreen/index.svelte"
-  import { screenStore } from "stores/builder"
+  import { screenStore } from "@/stores/builder"
   import { goto } from "@roxi/routify"
 
   $: onClose = getOnClose($screenStore)
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 67befddcb9..5691c2556b 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { Content, SideNav, SideNavItem } from "components/portal/page"
+  import { Content, SideNav, SideNavItem } from "@/components/portal/page"
   import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
-  import DeleteModal from "components/deploy/DeleteModal.svelte"
-  import { isOnlyUser, appStore } from "stores/builder"
+  import DeleteModal from "@/components/deploy/DeleteModal.svelte"
+  import { isOnlyUser, appStore } from "@/stores/builder"
 
   let deleteModal
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automations/_components/HistoryDetailsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automations/_components/HistoryDetailsPanel.svelte
index 6dc95b0a13..cfe912699f 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automations/_components/HistoryDetailsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automations/_components/HistoryDetailsPanel.svelte
@@ -8,10 +8,10 @@
     Icon,
   } from "@budibase/bbui"
   import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
+  import DateTimeRenderer from "@/components/common/renderers/DateTimeRenderer.svelte"
+  import TestDisplay from "@/components/automation/AutomationBuilder/TestDisplay.svelte"
   import { goto } from "@roxi/routify"
-  import { automationStore } from "stores/builder"
+  import { automationStore } from "@/stores/builder"
 
   export let history
   export let appId
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
index dd332c92a9..71faa5762f 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
@@ -11,14 +11,14 @@
     Toggle,
     notifications,
   } from "@budibase/bbui"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import DateTimeRenderer from "@/components/common/renderers/DateTimeRenderer.svelte"
   import StatusRenderer from "./_components/StatusRenderer.svelte"
   import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
-  import { automationStore, appStore } from "stores/builder"
-  import { createPaginationStore } from "helpers/pagination"
+  import { automationStore, appStore } from "@/stores/builder"
+  import { createPaginationStore } from "@/helpers/pagination"
   import { getContext, onDestroy, onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin, appsStore } from "stores/portal"
+  import { auth, licensing, admin, appsStore } from "@/stores/portal"
   import { Constants } from "@budibase/frontend-core"
   import Portal from "svelte-portal"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
index 3e88fb5541..93d6f0ae81 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
@@ -9,11 +9,11 @@
     AbsTooltip,
     TooltipPosition,
   } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import CreateRestoreModal from "./CreateRestoreModal.svelte"
   import { createEventDispatcher } from "svelte"
-  import { isOnlyUser } from "stores/builder"
-  import { BackupType } from "constants/backend/backups"
+  import { isOnlyUser } from "@/stores/builder"
+  import { BackupType } from "@/constants/backend/backups"
 
   export let row
 
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
index 62ef3e239d..09528be113 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/CreateRestoreModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ModalContent, Input, Body } from "@budibase/bbui"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
 
   export let confirm
 
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
index 9fd15c22df..23a1f6411e 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/_components/TypeRenderer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { BackupTrigger } from "constants/backend/backups"
+  import { BackupTrigger } from "@/constants/backend/backups"
 
   export let row
 
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
index e8a67b2ae1..0e01cdcbff 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
@@ -12,9 +12,9 @@
     Tag,
     Table,
   } from "@budibase/bbui"
-  import { backups, licensing, auth, admin } from "stores/portal"
-  import { appStore } from "stores/builder"
-  import { createPaginationStore } from "helpers/pagination"
+  import { backups, licensing, auth, admin } from "@/stores/portal"
+  import { appStore } from "@/stores/builder"
+  import { createPaginationStore } from "@/helpers/pagination"
   import TimeAgoRenderer from "./_components/TimeAgoRenderer.svelte"
   import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
   import ActionsRenderer from "./_components/ActionsRenderer.svelte"
@@ -22,9 +22,9 @@
   import StatusRenderer from "./_components/StatusRenderer.svelte"
   import TypeRenderer from "./_components/TypeRenderer.svelte"
   import BackupsDefault from "assets/backups-default.png"
-  import { BackupTrigger, BackupType } from "constants/backend/backups"
+  import { BackupTrigger, BackupType } from "@/constants/backend/backups"
   import { onMount } from "svelte"
-  import DateRangePicker from "components/common/DateRangePicker.svelte"
+  import DateRangePicker from "@/components/common/DateRangePicker.svelte"
 
   let loading = true
   let backupData = null
@@ -99,21 +99,18 @@
   }
 
   async function fetchBackups(filters, page, dateRange = []) {
-    const body = {
-      appId: $appStore.appId,
+    const opts = {
       ...filters,
       page,
     }
-
     const [startDate, endDate] = dateRange
     if (startDate) {
-      body.startDate = startDate
+      opts.startDate = startDate
     }
     if (endDate) {
-      body.endDate = endDate
+      opts.endDate = endDate
     }
-
-    const response = await backups.searchBackups(body)
+    const response = await backups.searchBackups($appStore.appId, opts)
     pageInfo.fetched(response.hasNextPage, response.nextPage)
 
     // flatten so we have an easier structure to use for the table schema
@@ -123,9 +120,7 @@
   async function createManualBackup() {
     try {
       loading = true
-      let response = await backups.createManualBackup({
-        appId: $appStore.appId,
-      })
+      let response = await backups.createManualBackup($appStore.appId)
       await fetchBackups(filterOpt, page)
       notifications.success(response.message)
     } catch (err) {
@@ -149,24 +144,14 @@
 
   async function handleButtonClick({ detail }) {
     if (detail.type === "backupDelete") {
-      await backups.deleteBackup({
-        appId: $appStore.appId,
-        backupId: detail.backupId,
-      })
+      await backups.deleteBackup($appStore.appId, detail.backupId)
       await fetchBackups(filterOpt, page)
     } else if (detail.type === "backupRestore") {
-      await backups.restoreBackup({
-        appId: $appStore.appId,
-        backupId: detail.backupId,
-        name: detail.restoreBackupName,
-      })
-      await fetchBackups(filterOpt, page)
-    } else if (detail.type === "backupUpdate") {
-      await backups.updateBackup({
-        appId: $appStore.appId,
-        backupId: detail.backupId,
-        name: detail.name,
-      })
+      await backups.restoreBackup(
+        $appStore.appId,
+        detail.backupId,
+        detail.restoreBackupName
+      )
       await fetchBackups(filterOpt, page)
     }
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index 5f82447e36..5b820f8ada 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -9,9 +9,9 @@
     Icon,
     notifications,
   } from "@budibase/bbui"
-  import { AppStatus } from "constants"
-  import { appsStore } from "stores/portal"
-  import { appStore } from "stores/builder"
+  import { AppStatus } from "@/constants"
+  import { appsStore } from "@/stores/portal"
+  import { appStore } from "@/stores/builder"
 
   $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte b/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
index 417b5e4872..9b27a7dc03 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
@@ -7,11 +7,11 @@
     ActionButton,
     Modal,
   } from "@budibase/bbui"
-  import { AppStatus } from "constants"
-  import { appsStore } from "stores/portal"
-  import { appStore } from "stores/builder"
-  import ExportAppModal from "components/start/ExportAppModal.svelte"
-  import ImportAppModal from "components/start/ImportAppModal.svelte"
+  import { AppStatus } from "@/constants"
+  import { appsStore } from "@/stores/portal"
+  import { appStore } from "@/stores/builder"
+  import ExportAppModal from "@/components/start/ExportAppModal.svelte"
+  import ImportAppModal from "@/components/start/ImportAppModal.svelte"
 
   $: filteredApps = $appsStore.apps.filter(app => app.devId === $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
index e91b8ac3a8..846dacc002 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Layout, Divider, Heading, Body } from "@budibase/bbui"
-  import UpdateAppForm from "components/common/UpdateAppForm.svelte"
+  import UpdateAppForm from "@/components/common/UpdateAppForm.svelte"
 </script>
 
 <Layout noPadding>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/version.svelte b/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
index bd592fa308..6a780555a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/version.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
-  import { isOnlyUser, appStore } from "stores/builder"
-  import VersionModal from "components/deploy/VersionModal.svelte"
+  import { isOnlyUser, appStore } from "@/stores/builder"
+  import VersionModal from "@/components/deploy/VersionModal.svelte"
 
   let versionModal
 
diff --git a/packages/builder/src/pages/builder/app/_layout.svelte b/packages/builder/src/pages/builder/app/_layout.svelte
index 17f70bf815..0b81999dfa 100644
--- a/packages/builder/src/pages/builder/app/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
 </script>
 
 {#if $auth.user}
diff --git a/packages/builder/src/pages/builder/app/updating/[application].svelte b/packages/builder/src/pages/builder/app/updating/[application].svelte
index 1f92861edf..34468e3c71 100644
--- a/packages/builder/src/pages/builder/app/updating/[application].svelte
+++ b/packages/builder/src/pages/builder/app/updating/[application].svelte
@@ -2,7 +2,7 @@
   import { Updating } from "@budibase/frontend-core"
   import { redirect, params } from "@roxi/routify"
 
-  import { API } from "api"
+  import { API } from "@/api"
 
   async function isMigrationDone() {
     const response = await API.getMigrationStatus()
diff --git a/packages/builder/src/pages/builder/apps/_layout.svelte b/packages/builder/src/pages/builder/apps/_layout.svelte
index 17f70bf815..0b81999dfa 100644
--- a/packages/builder/src/pages/builder/apps/_layout.svelte
+++ b/packages/builder/src/pages/builder/apps/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
 </script>
 
 {#if $auth.user}
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index 632478748d..8bf96d0240 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -19,12 +19,12 @@
     groups,
     licensing,
     enrichedApps,
-  } from "stores/portal"
+  } from "@/stores/portal"
   import { goto } from "@roxi/routify"
-  import { AppStatus } from "constants"
-  import { gradient } from "actions"
-  import ProfileModal from "components/settings/ProfileModal.svelte"
-  import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
+  import { AppStatus } from "@/constants"
+  import { gradient } from "@/actions"
+  import ProfileModal from "@/components/settings/ProfileModal.svelte"
+  import ChangePasswordModal from "@/components/settings/ChangePasswordModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
   import Spaceman from "assets/bb-space-man.svg"
   import Logo from "assets/bb-emblem.svg"
diff --git a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
index 812f744087..c27f08a8c3 100644
--- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import { FancyButton } from "@budibase/bbui"
   import GoogleLogo from "assets/google-logo.png"
-  import { auth, organisation } from "stores/portal"
+  import { auth, organisation } from "@/stores/portal"
 
   export let samePage
   let show
diff --git a/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte b/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
index f5dcbe7466..52ab905651 100644
--- a/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
@@ -6,7 +6,7 @@
   import OktaLogo from "assets/okta-logo.png"
   import OneLoginLogo from "assets/onelogin-logo.png"
 
-  import { oidc, organisation, auth } from "stores/portal"
+  import { oidc, organisation, auth } from "@/stores/portal"
   import { onMount } from "svelte"
 
   export let samePage
diff --git a/packages/builder/src/pages/builder/auth/_layout.svelte b/packages/builder/src/pages/builder/auth/_layout.svelte
index 1a40847aa0..1978d0c985 100644
--- a/packages/builder/src/pages/builder/auth/_layout.svelte
+++ b/packages/builder/src/pages/builder/auth/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
   import { redirect } from "@roxi/routify"
   import { CookieUtils } from "@budibase/frontend-core"
 
diff --git a/packages/builder/src/pages/builder/auth/forgot.svelte b/packages/builder/src/pages/builder/auth/forgot.svelte
index 3ec0416c73..c775bf33fb 100644
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@@ -9,7 +9,7 @@
     FancyForm,
     FancyInput,
   } from "@budibase/bbui"
-  import { organisation, auth } from "stores/portal"
+  import { organisation, auth } from "@/stores/portal"
   import Logo from "assets/bb-emblem.svg"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
diff --git a/packages/builder/src/pages/builder/auth/index.svelte b/packages/builder/src/pages/builder/auth/index.svelte
index 72b3a8c7cf..330ac7462e 100644
--- a/packages/builder/src/pages/builder/auth/index.svelte
+++ b/packages/builder/src/pages/builder/auth/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
   import { onMount } from "svelte"
   import { notifications } from "@budibase/bbui"
 
diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte
index 7bb2a3ad49..41e56fa9c2 100644
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@@ -12,7 +12,7 @@
     FancyInput,
   } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { auth, organisation, oidc, admin } from "stores/portal"
+  import { auth, organisation, oidc, admin } from "@/stores/portal"
   import GoogleButton from "./_components/GoogleButton.svelte"
   import OIDCButton from "./_components/OIDCButton.svelte"
   import { handleError } from "./_components/utils"
@@ -35,10 +35,7 @@
       return
     }
     try {
-      await auth.login({
-        username: formData?.username.trim(),
-        password: formData?.password,
-      })
+      await auth.login(formData?.username.trim(), formData?.password)
       if ($auth?.user?.forceResetPassword) {
         $goto("./reset")
       } else {
diff --git a/packages/builder/src/pages/builder/auth/org.svelte b/packages/builder/src/pages/builder/auth/org.svelte
index 8fd94463d9..ee5a5e606c 100644
--- a/packages/builder/src/pages/builder/auth/org.svelte
+++ b/packages/builder/src/pages/builder/auth/org.svelte
@@ -9,7 +9,7 @@
     notifications,
   } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
   import Logo from "assets/bb-emblem.svg"
   import { get } from "svelte/store"
   import { onMount } from "svelte"
diff --git a/packages/builder/src/pages/builder/auth/reset.svelte b/packages/builder/src/pages/builder/auth/reset.svelte
index e1464aba77..1179618e40 100644
--- a/packages/builder/src/pages/builder/auth/reset.svelte
+++ b/packages/builder/src/pages/builder/auth/reset.svelte
@@ -8,7 +8,7 @@
     notifications,
   } from "@budibase/bbui"
   import { goto, params } from "@roxi/routify"
-  import { auth, organisation } from "stores/portal"
+  import { auth, organisation } from "@/stores/portal"
   import Logo from "assets/bb-emblem.svg"
   import { TestimonialPage } from "@budibase/frontend-core/src/components"
   import { onMount } from "svelte"
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index c6d9d3c1c3..da8e49ad9a 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   auth.checkQueryString()
diff --git a/packages/builder/src/pages/builder/invite/index.svelte b/packages/builder/src/pages/builder/invite/index.svelte
index 597deed7c9..cf0c293254 100644
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@@ -9,7 +9,7 @@
     FancyInput,
   } from "@budibase/bbui"
   import { goto, params } from "@roxi/routify"
-  import { users, organisation, auth, admin } from "stores/portal"
+  import { users, organisation, auth, admin } from "@/stores/portal"
   import Logo from "assets/bb-emblem.svg"
   import { TestimonialPage } from "@budibase/frontend-core/src/components"
   import { onMount } from "svelte"
@@ -66,10 +66,7 @@
 
   async function login() {
     try {
-      await auth.login({
-        username: formData.email.trim(),
-        password: formData.password.trim(),
-      })
+      await auth.login(formData.email.trim(), formData.password.trim())
       notifications.success("Logged in successfully")
       $goto("../portal")
     } catch (err) {
diff --git a/packages/builder/src/pages/builder/maintenance/index.svelte b/packages/builder/src/pages/builder/maintenance/index.svelte
index f7eb16ab81..017b4356ba 100644
--- a/packages/builder/src/pages/builder/maintenance/index.svelte
+++ b/packages/builder/src/pages/builder/maintenance/index.svelte
@@ -1,7 +1,7 @@
 <script>
   import { MaintenanceType } from "@budibase/types"
   import { Heading, Body, Button, Layout } from "@budibase/bbui"
-  import { admin } from "stores/portal"
+  import { admin } from "@/stores/portal"
   import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte"
 
   $: {
diff --git a/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte b/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte
index 1df724099b..75c0ce7aec 100644
--- a/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/LockedFeature.svelte
@@ -10,7 +10,7 @@
     Tags,
     Tag,
   } from "@budibase/bbui"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
 
   export let title
   export let planType
diff --git a/packages/builder/src/pages/builder/portal/_components/Logo.svelte b/packages/builder/src/pages/builder/portal/_components/Logo.svelte
index 0d928d68ca..817d93adfa 100644
--- a/packages/builder/src/pages/builder/portal/_components/Logo.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/Logo.svelte
@@ -1,7 +1,7 @@
 <script>
   import Logo from "assets/bb-emblem.svg"
   import { goto } from "@roxi/routify"
-  import { organisation } from "stores/portal"
+  import { organisation } from "@/stores/portal"
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
diff --git a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte
index 9b4938e0d5..256199f3d7 100644
--- a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte
@@ -1,12 +1,12 @@
 <script>
   import { Layout } from "@budibase/bbui"
-  import { SideNav, SideNavItem } from "components/portal/page"
+  import { SideNav, SideNavItem } from "@/components/portal/page"
   import { createEventDispatcher } from "svelte"
   import { isActive } from "@roxi/routify"
   import UpgradeButton from "./UpgradeButton.svelte"
   import { fade } from "svelte/transition"
   import Logo from "./Logo.svelte"
-  import { menu } from "stores/portal"
+  import { menu } from "@/stores/portal"
 
   export let visible = false
 
diff --git a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
index 7131285b55..3c2e65ebf5 100644
--- a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Button } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { auth, admin, licensing } from "stores/portal"
+  import { auth, admin, licensing } from "@/stores/portal"
   import { sdk } from "@budibase/shared-core"
 </script>
 
diff --git a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
index 9faae70aa9..d2a7be8237 100644
--- a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
@@ -1,11 +1,11 @@
 <script>
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { ActionMenu, MenuItem, Icon, Modal } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import ProfileModal from "components/settings/ProfileModal.svelte"
-  import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
-  import ThemeModal from "components/settings/ThemeModal.svelte"
-  import APIKeyModal from "components/settings/APIKeyModal.svelte"
+  import ProfileModal from "@/components/settings/ProfileModal.svelte"
+  import ChangePasswordModal from "@/components/settings/ChangePasswordModal.svelte"
+  import ThemeModal from "@/components/settings/ThemeModal.svelte"
+  import APIKeyModal from "@/components/settings/APIKeyModal.svelte"
   import { UserAvatar } from "@budibase/frontend-core"
 
   let themeModal
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 73152a1cd5..323b231037 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -8,16 +8,16 @@
     appsStore,
     licensing,
     admin,
-  } from "stores/portal"
+  } from "@/stores/portal"
   import { onMount } from "svelte"
   import UpgradeButton from "./_components/UpgradeButton.svelte"
   import MobileMenu from "./_components/MobileMenu.svelte"
   import Logo from "./_components/Logo.svelte"
   import UserDropdown from "./_components/UserDropdown.svelte"
-  import HelpMenu from "components/common/HelpMenu.svelte"
-  import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
+  import HelpMenu from "@/components/common/HelpMenu.svelte"
+  import VerificationPromptBanner from "@/components/common/VerificationPromptBanner.svelte"
   import { sdk } from "@budibase/shared-core"
-  import EnterpriseBasicTrialBanner from "components/portal/licensing/EnterpriseBasicTrialBanner.svelte"
+  import EnterpriseBasicTrialBanner from "@/components/portal/licensing/EnterpriseBasicTrialBanner.svelte"
   import { Constants } from "@budibase/frontend-core"
 
   let loaded = false
diff --git a/packages/builder/src/pages/builder/portal/account/_layout.svelte b/packages/builder/src/pages/builder/portal/account/_layout.svelte
index 892e853aad..27cc3cbd85 100644
--- a/packages/builder/src/pages/builder/portal/account/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/account/_layout.svelte
@@ -1,8 +1,8 @@
 <script>
   import { goto, isActive } from "@roxi/routify"
   import { Page } from "@budibase/bbui"
-  import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { menu } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "@/components/portal/page"
+  import { menu } from "@/stores/portal"
 
   $: wide = $isActive("./auditLogs")
   $: pages = $menu.find(x => x.title === "Account")?.subPages || []
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
index 41254af970..bc30dab77f 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -17,16 +17,16 @@
     Divider,
     ActionButton,
   } from "@budibase/bbui"
-  import { licensing, users, appsStore, auditLogs } from "stores/portal"
+  import { licensing, users, appsStore, auditLogs } from "@/stores/portal"
   import LockedFeature from "../../_components/LockedFeature.svelte"
-  import { createPaginationStore } from "helpers/pagination"
+  import { createPaginationStore } from "@/helpers/pagination"
   import { onMount, setContext } from "svelte"
   import ViewDetailsRenderer from "./_components/ViewDetailsRenderer.svelte"
   import UserRenderer from "./_components/UserRenderer.svelte"
   import TimeRenderer from "./_components/TimeRenderer.svelte"
   import AppColumnRenderer from "./_components/AppColumnRenderer.svelte"
   import { cloneDeep } from "lodash"
-  import DateRangePicker from "components/common/DateRangePicker.svelte"
+  import DateRangePicker from "@/components/common/DateRangePicker.svelte"
   import dayjs from "dayjs"
 
   const schema = {
@@ -152,16 +152,16 @@
       logsPageInfo.loading()
       await auditLogs.search({
         bookmark: logsPage,
-        startDate: dateRange[0],
-        endDate: dateRange[1],
+        startDate: dateRange[0] || undefined,
+        endDate: dateRange[1] || undefined,
         fullSearch: logSearchTerm,
         userIds: selectedUsers,
         appIds: selectedApps,
         events: selectedEvents,
       })
       logsPageInfo.fetched(
-        $auditLogs.logs.hasNextPage,
-        $auditLogs.logs.bookmark
+        $auditLogs.logs?.hasNextPage,
+        $auditLogs.logs?.bookmark
       )
     } catch (error) {
       notifications.error(`Error getting audit logs - ${error}`)
@@ -200,6 +200,8 @@
       return Object.entries(obj).map(([id, label]) => {
         return { id, label }
       })
+    } else {
+      return []
     }
   }
 
@@ -316,7 +318,7 @@
     <Table
       on:click={({ detail }) => viewDetails(detail)}
       {customRenderers}
-      data={$auditLogs.logs.data}
+      data={$auditLogs.logs?.data}
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
diff --git a/packages/builder/src/pages/builder/portal/account/systemLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/systemLogs/index.svelte
index f9634d0b9a..aaf2e783a0 100644
--- a/packages/builder/src/pages/builder/portal/account/systemLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/systemLogs/index.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Layout, Heading, Body, Button } from "@budibase/bbui"
   import { downloadStream } from "@budibase/frontend-core"
-  import Spinner from "components/common/Spinner.svelte"
+  import Spinner from "@/components/common/Spinner.svelte"
 
-  import { API } from "api"
+  import { API } from "@/api"
 
   let loading = false
 
diff --git a/packages/builder/src/pages/builder/portal/account/upgrade.svelte b/packages/builder/src/pages/builder/portal/account/upgrade.svelte
index dbdedb6805..3440cd71ea 100644
--- a/packages/builder/src/pages/builder/portal/account/upgrade.svelte
+++ b/packages/builder/src/pages/builder/portal/account/upgrade.svelte
@@ -13,11 +13,11 @@
     CopyInput,
     File,
   } from "@budibase/bbui"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
   import { redirect } from "@roxi/routify"
   import { processStringSync } from "@budibase/string-templates"
-  import DeleteLicenseKeyModal from "components/portal/licensing/DeleteLicenseKeyModal.svelte"
-  import { API } from "api"
+  import DeleteLicenseKeyModal from "@/components/portal/licensing/DeleteLicenseKeyModal.svelte"
+  import { API } from "@/api"
   import { onMount } from "svelte"
   import { sdk } from "@budibase/shared-core"
 
@@ -64,7 +64,7 @@
 
   const activateLicenseKey = async () => {
     try {
-      await API.activateLicenseKey({ licenseKey })
+      await API.activateLicenseKey(licenseKey)
       await auth.getSelf()
       await getLicenseKey()
       notifications.success("Successfully activated")
@@ -119,7 +119,7 @@
 
   async function activateOfflineLicense(offlineLicenseToken) {
     try {
-      await API.activateOfflineLicense({ offlineLicenseToken })
+      await API.activateOfflineLicense(offlineLicenseToken)
       await auth.getSelf()
       await getOfflineLicense()
       notifications.success("Successfully activated")
diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte
index cb0f5ea512..d318f04e09 100644
--- a/packages/builder/src/pages/builder/portal/account/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/account/usage.svelte
@@ -10,12 +10,12 @@
     TooltipWrapper,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { admin, auth, licensing } from "stores/portal"
+  import { admin, auth, licensing } from "@/stores/portal"
   import { Constants } from "@budibase/frontend-core"
-  import { DashCard, Usage } from "components/usage"
-  import { PlanModel } from "constants"
+  import { DashCard, Usage } from "@/components/usage"
+  import { PlanModel } from "@/constants"
   import { sdk } from "@budibase/shared-core"
-  import { getFormattedPlanName } from "helpers/planTitle"
+  import { getFormattedPlanName } from "@/helpers/planTitle"
 
   let staticUsage = []
   let monthlyUsage = []
diff --git a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
index 7d6b4d81a9..04cad5d763 100644
--- a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon, TooltipPosition, TooltipType } from "@budibase/bbui"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
 
   export let app
   export let size = "S"
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
index 871326eb91..fd8964d5df 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { params, redirect } from "@roxi/routify"
-  import { appsStore } from "stores/portal"
+  import { appsStore } from "@/stores/portal"
 
   $: app = $appsStore.apps.find(app => app.appId === $params.appId)
   $: {
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index cc03ec01dc..feba4dceaf 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -6,9 +6,9 @@
     auth,
     sideBarCollapsed,
     enrichedApps,
-  } from "stores/portal"
-  import AppContextMenuModals from "components/start/AppContextMenuModals.svelte"
-  import getAppContextMenuItems from "components/start/getAppContextMenuItems.js"
+  } from "@/stores/portal"
+  import AppContextMenuModals from "@/components/start/AppContextMenuModals.svelte"
+  import getAppContextMenuItems from "@/components/start/getAppContextMenuItems.js"
   import FavouriteAppButton from "../FavouriteAppButton.svelte"
   import {
     Link,
@@ -19,10 +19,10 @@
     TooltipType,
   } from "@budibase/bbui"
   import { sdk, getThemeClassNames } from "@budibase/shared-core"
-  import { API } from "api"
+  import { API } from "@/api"
   import ErrorSVG from "./ErrorSVG.svelte"
   import { ClientAppSkeleton } from "@budibase/frontend-core"
-  import { contextMenuStore } from "stores/builder"
+  import { contextMenuStore } from "@/stores/builder"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/AppNavItem.svelte b/packages/builder/src/pages/builder/portal/apps/_components/AppNavItem.svelte
index 92d04897fe..eb18a8db83 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/AppNavItem.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/AppNavItem.svelte
@@ -1,13 +1,13 @@
 <script>
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { params, goto } from "@roxi/routify"
-  import NavItem from "components/common/NavItem.svelte"
-  import AppContextMenuModals from "components/start/AppContextMenuModals.svelte"
-  import getAppContextMenuItems from "components/start/getAppContextMenuItems.js"
+  import NavItem from "@/components/common/NavItem.svelte"
+  import AppContextMenuModals from "@/components/start/AppContextMenuModals.svelte"
+  import getAppContextMenuItems from "@/components/start/getAppContextMenuItems.js"
   import FavouriteAppButton from "../FavouriteAppButton.svelte"
   import { sdk } from "@budibase/shared-core"
   import { Icon } from "@budibase/bbui"
-  import { contextMenuStore } from "stores/builder"
+  import { contextMenuStore } from "@/stores/builder"
 
   export let app
 
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index 0f72accf9f..a11bb2b45a 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { sideBarCollapsed, enrichedApps } from "stores/portal"
+  import { sideBarCollapsed, enrichedApps } from "@/stores/portal"
   import { params, goto } from "@roxi/routify"
-  import NavItem from "components/common/NavItem.svelte"
-  import NavHeader from "components/common/NavHeader.svelte"
+  import NavItem from "@/components/common/NavItem.svelte"
+  import NavHeader from "@/components/common/NavHeader.svelte"
   import AppNavItem from "./AppNavItem.svelte"
 
   let searchString
diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
index 00719dc6d5..560c1394fb 100644
--- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
@@ -7,7 +7,7 @@
     licensing,
     groups,
     auth,
-  } from "stores/portal"
+  } from "@/stores/portal"
   import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
   import { sdk } from "@budibase/shared-core"
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index 1248c41cf8..1f3a0cb052 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -2,11 +2,11 @@
   import { url } from "@roxi/routify"
   import FirstAppOnboarding from "./onboarding/index.svelte"
   import { Layout, Page, Button, Modal } from "@budibase/bbui"
-  import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
-  import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import { appsStore, templates, licensing } from "stores/portal"
-  import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
+  import CreateAppModal from "@/components/start/CreateAppModal.svelte"
+  import TemplateDisplay from "@/components/common/TemplateDisplay.svelte"
+  import AppLimitModal from "@/components/portal/licensing/AppLimitModal.svelte"
+  import { appsStore, templates, licensing } from "@/stores/portal"
+  import { Breadcrumbs, Breadcrumb, Header } from "@/components/portal/page"
 
   let template
   let creationModal = false
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index c3fcfd65ff..f94bad2147 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -11,13 +11,13 @@
     Body,
     Search,
   } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
-  import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import AccountLockedModal from "components/portal/licensing/AccountLockedModal.svelte"
+  import Spinner from "@/components/common/Spinner.svelte"
+  import CreateAppModal from "@/components/start/CreateAppModal.svelte"
+  import AppLimitModal from "@/components/portal/licensing/AppLimitModal.svelte"
+  import AccountLockedModal from "@/components/portal/licensing/AccountLockedModal.svelte"
   import { sdk } from "@budibase/shared-core"
-  import { automationStore, initialise } from "stores/builder"
-  import { API } from "api"
+  import { automationStore, initialise } from "@/stores/builder"
+  import { API } from "@/api"
   import { onMount } from "svelte"
   import {
     appsStore,
@@ -27,9 +27,9 @@
     environment,
     enrichedApps,
     sortBy,
-  } from "stores/portal"
+  } from "@/stores/portal"
   import { goto } from "@roxi/routify"
-  import AppRow from "components/start/AppRow.svelte"
+  import AppRow from "@/components/start/AppRow.svelte"
   import Logo from "assets/bb-space-man.svg"
 
   let template
@@ -139,7 +139,7 @@
       await auth.setInitInfo({})
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
-      notifications.error("Error creating app")
+      notifications.error(`Error creating app - ${error.message}`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
index d27d75a90d..cc414b7434 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Button, FancyForm, FancyInput } from "@budibase/bbui"
   import PanelHeader from "./PanelHeader.svelte"
-  import { APP_URL_REGEX } from "constants"
+  import { APP_URL_REGEX } from "@/constants"
 
   export let disabled
   export let name = ""
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte
index 49b8032726..356f6c412e 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/PanelHeader.svelte
@@ -1,5 +1,5 @@
 <script>
-  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
+  import FontAwesomeIcon from "@/components/common/FontAwesomeIcon.svelte"
   import { Heading, Body } from "@budibase/bbui"
 
   export let onBack = null
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
index 7426dd902e..062a37315f 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
@@ -4,8 +4,8 @@
   import ExampleApp from "./_components/ExampleApp.svelte"
   import { notifications } from "@budibase/bbui"
   import { SplitPage } from "@budibase/frontend-core"
-  import { API } from "api"
-  import { auth, admin } from "stores/portal"
+  import { API } from "@/api"
+  import { auth, admin } from "@/stores/portal"
 
   let name = "My first app"
   let url = "my-first-app"
diff --git a/packages/builder/src/pages/builder/portal/apps/templates.svelte b/packages/builder/src/pages/builder/portal/apps/templates.svelte
index f9d44a34c7..87139da9a9 100644
--- a/packages/builder/src/pages/builder/portal/apps/templates.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/templates.svelte
@@ -1,9 +1,9 @@
 <script>
   import { url } from "@roxi/routify"
   import { Layout, Page } from "@budibase/bbui"
-  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
-  import { templates } from "stores/portal"
-  import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
+  import TemplateDisplay from "@/components/common/TemplateDisplay.svelte"
+  import { templates } from "@/stores/portal"
+  import { Breadcrumbs, Breadcrumb, Header } from "@/components/portal/page"
 </script>
 
 <Page>
diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/AddPluginModal.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/AddPluginModal.svelte
index fe3b9056e9..ead80f1ded 100644
--- a/packages/builder/src/pages/builder/portal/plugins/_components/AddPluginModal.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/_components/AddPluginModal.svelte
@@ -8,9 +8,9 @@
     Body,
     notifications,
   } from "@budibase/bbui"
-  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import { plugins } from "stores/portal"
-  import { PluginSource } from "constants"
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
+  import { plugins } from "@/stores/portal"
+  import { PluginSource } from "@/constants"
 
   function opt(name, optional) {
     if (optional) {
diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte
index 1782b44f2b..b41776dcfe 100644
--- a/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Body, ModalContent, notifications } from "@budibase/bbui"
-  import { plugins } from "stores/portal"
+  import { plugins } from "@/stores/portal"
   import { createEventDispatcher } from "svelte"
 
   export let plugin
diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte
index e16da42e10..9da048030f 100644
--- a/packages/builder/src/pages/builder/portal/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte
@@ -12,7 +12,7 @@
     Table,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { plugins, admin } from "stores/portal"
+  import { plugins, admin } from "@/stores/portal"
   import AddPluginModal from "./_components/AddPluginModal.svelte"
   import PluginNameRenderer from "./_components/PluginNameRenderer.svelte"
   import EditPluginRenderer from "./_components/EditPluginRenderer.svelte"
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
index ac22eda5f4..81a0047153 100644
--- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
@@ -1,8 +1,8 @@
 <script>
   import { goto, isActive } from "@roxi/routify"
   import { Page } from "@budibase/bbui"
-  import { Content, SideNav, SideNavItem } from "components/portal/page"
-  import { menu } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "@/components/portal/page"
+  import { menu } from "@/stores/portal"
 
   $: wide = $isActive("./email/:template")
   $: pages = $menu.find(x => x.title === "Settings")?.subPages || []
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js b/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
index e797a1c5bd..bfd4311aa0 100644
--- a/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
+++ b/packages/builder/src/pages/builder/portal/settings/ai/AISettings.spec.js
@@ -1,7 +1,7 @@
 import { it, expect, describe, vi } from "vitest"
 import AISettings from "./index.svelte"
 import { render, fireEvent } from "@testing-library/svelte"
-import { admin, licensing, featureFlags } from "stores/portal"
+import { admin, licensing, featureFlags } from "@/stores/portal"
 import { notifications } from "@budibase/bbui"
 
 vi.spyOn(notifications, "error").mockImplementation(vi.fn)
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/index.svelte b/packages/builder/src/pages/builder/portal/settings/ai/index.svelte
index ec0ff31e58..7ff3969115 100644
--- a/packages/builder/src/pages/builder/portal/settings/ai/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/ai/index.svelte
@@ -12,8 +12,8 @@
     Tags,
     Tag,
   } from "@budibase/bbui"
-  import { admin, licensing, featureFlags } from "stores/portal"
-  import { API } from "api"
+  import { admin, licensing, featureFlags } from "@/stores/portal"
+  import { API } from "@/api"
   import AIConfigModal from "./ConfigModal.svelte"
   import AIConfigTile from "./AIConfigTile.svelte"
 
diff --git a/packages/builder/src/pages/builder/portal/settings/auth/google.svelte b/packages/builder/src/pages/builder/portal/settings/auth/google.svelte
index 795f384fde..7693b56f29 100644
--- a/packages/builder/src/pages/builder/portal/settings/auth/google.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/auth/google.svelte
@@ -16,8 +16,8 @@
     Link,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { API } from "api"
-  import { organisation, admin } from "stores/portal"
+  import { API } from "@/api"
+  import { organisation, admin } from "@/stores/portal"
 
   const ConfigTypes = {
     Google: "google",
diff --git a/packages/builder/src/pages/builder/portal/settings/auth/index.svelte b/packages/builder/src/pages/builder/portal/settings/auth/index.svelte
index 3ef3737249..a1151ad991 100644
--- a/packages/builder/src/pages/builder/portal/settings/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/auth/index.svelte
@@ -24,8 +24,8 @@
     Link,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { API } from "api"
-  import { organisation, admin, licensing } from "stores/portal"
+  import { API } from "@/api"
+  import { organisation, admin, licensing } from "@/stores/portal"
   import Scim from "./scim.svelte"
   import Google from "./google.svelte"
 
@@ -140,10 +140,7 @@
     if (image) {
       let data = new FormData()
       data.append("file", image)
-      await API.uploadOIDCLogo({
-        name: image.name,
-        data,
-      })
+      await API.uploadOIDCLogo(image.name, data)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte b/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte
index 11c5929efb..68a6ff02ae 100644
--- a/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte
@@ -12,8 +12,8 @@
     Helpers,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { API } from "api"
-  import { organisation, auth } from "stores/portal"
+  import { API } from "@/api"
+  import { organisation, auth } from "@/stores/portal"
 
   const configType = "scim"
 
diff --git a/packages/builder/src/pages/builder/portal/settings/branding.svelte b/packages/builder/src/pages/builder/portal/settings/branding.svelte
index 17da5b87d7..51b6307a04 100644
--- a/packages/builder/src/pages/builder/portal/settings/branding.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/branding.svelte
@@ -14,8 +14,8 @@
     Label,
     TextArea,
   } from "@budibase/bbui"
-  import { auth, organisation, licensing, admin } from "stores/portal"
-  import { API } from "api"
+  import { auth, organisation, licensing, admin } from "@/stores/portal"
+  import { API } from "@/api"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
   import { sdk } from "@budibase/shared-core"
diff --git a/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte b/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte
index 98cee021ef..08bc7a844e 100644
--- a/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte
@@ -9,9 +9,9 @@
     Icon,
     TextArea,
   } from "@budibase/bbui"
-  import { auth, admin } from "stores/portal"
+  import { auth, admin } from "@/stores/portal"
   import { redirect } from "@roxi/routify"
-  import { API } from "api"
+  import { API } from "@/api"
   import { onMount } from "svelte"
   import { sdk } from "@budibase/shared-core"
 
diff --git a/packages/builder/src/pages/builder/portal/settings/email/[template].svelte b/packages/builder/src/pages/builder/portal/settings/email/[template].svelte
index b31800adf0..a9c0275367 100644
--- a/packages/builder/src/pages/builder/portal/settings/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/settings/email/[template].svelte
@@ -10,10 +10,10 @@
     Tab,
   } from "@budibase/bbui"
   import { url } from "@roxi/routify"
-  import { email } from "stores/portal"
-  import Editor from "components/integration/QueryEditor.svelte"
+  import { email } from "@/stores/portal"
+  import Editor from "@/components/integration/QueryEditor.svelte"
   import TemplateBindings from "./_components/TemplateBindings.svelte"
-  import { Breadcrumbs, Breadcrumb } from "components/portal/page"
+  import { Breadcrumbs, Breadcrumb } from "@/components/portal/page"
 
   // this is the email purpose
   export let template
diff --git a/packages/builder/src/pages/builder/portal/settings/email/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/email/_layout.svelte
index e371c2daae..c0d4d4463e 100644
--- a/packages/builder/src/pages/builder/portal/settings/email/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/email/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { email } from "stores/portal"
+  import { email } from "@/stores/portal"
   import { notifications } from "@budibase/bbui"
 
   onMount(async () => {
diff --git a/packages/builder/src/pages/builder/portal/settings/email/index.svelte b/packages/builder/src/pages/builder/portal/settings/email/index.svelte
index 71687bcc70..3b055cc7d8 100644
--- a/packages/builder/src/pages/builder/portal/settings/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/email/index.svelte
@@ -13,8 +13,8 @@
     Table,
     Checkbox,
   } from "@budibase/bbui"
-  import { email, admin } from "stores/portal"
-  import { API } from "api"
+  import { email, admin } from "@/stores/portal"
+  import { API } from "@/api"
   import { cloneDeep } from "lodash/fp"
 
   const ConfigTypes = {
@@ -69,10 +69,7 @@
   async function deleteSmtp() {
     // Delete the SMTP config
     try {
-      await API.deleteConfig({
-        id: smtpConfig._id,
-        rev: smtpConfig._rev,
-      })
+      await API.deleteConfig(smtpConfig._id, smtpConfig._rev)
       smtpConfig = {
         type: ConfigTypes.SMTP,
         config: {
@@ -180,7 +177,7 @@
       <Button
         secondary
         on:click={deleteSmtp}
-        disabled={!$admin.checklist.smtp.checked}
+        disabled={!$admin.checklist?.smtp?.checked}
       >
         Reset
       </Button>
diff --git a/packages/builder/src/pages/builder/portal/settings/environment/_components/EditVariableColumn.svelte b/packages/builder/src/pages/builder/portal/settings/environment/_components/EditVariableColumn.svelte
index fd754fa006..8f60b3f3ca 100644
--- a/packages/builder/src/pages/builder/portal/settings/environment/_components/EditVariableColumn.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/environment/_components/EditVariableColumn.svelte
@@ -1,8 +1,8 @@
 <script>
   import { ActionButton, Modal } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { environment } from "stores/portal"
-  import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import { environment } from "@/stores/portal"
+  import CreateEditVariableModal from "@/components/portal/environment/CreateEditVariableModal.svelte"
 
   export let row
 
diff --git a/packages/builder/src/pages/builder/portal/settings/environment/index.svelte b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
index 0d4c7e1479..13892c61d3 100644
--- a/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
@@ -7,9 +7,9 @@
     InlineAlert,
     notifications,
   } from "@budibase/bbui"
-  import { environment, licensing } from "stores/portal"
+  import { environment, licensing } from "@/stores/portal"
   import { onMount } from "svelte"
-  import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
+  import CreateEditVariableModal from "@/components/portal/environment/CreateEditVariableModal.svelte"
   import EditVariableColumn from "./_components/EditVariableColumn.svelte"
   import LockedFeature from "../../_components/LockedFeature.svelte"
 
diff --git a/packages/builder/src/pages/builder/portal/settings/index.svelte b/packages/builder/src/pages/builder/portal/settings/index.svelte
index 26688e3861..016b28aebc 100644
--- a/packages/builder/src/pages/builder/portal/settings/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { featureFlags } from "stores/portal"
+  import { featureFlags } from "@/stores/portal"
 
   if ($featureFlags.AI_CUSTOM_CONFIGS) {
     $redirect("./ai")
diff --git a/packages/builder/src/pages/builder/portal/settings/organisation.svelte b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
index c107a7339e..7e473bf8f2 100644
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@@ -10,7 +10,7 @@
     notifications,
     Toggle,
   } from "@budibase/bbui"
-  import { auth, organisation, admin } from "stores/portal"
+  import { auth, organisation, admin } from "@/stores/portal"
   import { writable } from "svelte/store"
   import { redirect } from "@roxi/routify"
   import { sdk } from "@budibase/shared-core"
diff --git a/packages/builder/src/pages/builder/portal/settings/version.svelte b/packages/builder/src/pages/builder/portal/settings/version.svelte
index 032c077557..62e405d0d3 100644
--- a/packages/builder/src/pages/builder/portal/settings/version.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/version.svelte
@@ -9,8 +9,8 @@
     Label,
     Link,
   } from "@budibase/bbui"
-  import { API } from "api"
-  import { auth, admin } from "stores/portal"
+  import { API } from "@/api"
+  import { auth, admin } from "@/stores/portal"
   import { redirect } from "@roxi/routify"
   import { sdk } from "@budibase/shared-core"
 
diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte
index d53da89613..c13fa2a8b5 100644
--- a/packages/builder/src/pages/builder/portal/users/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte
@@ -1,9 +1,9 @@
 <script>
   import { Page, notifications } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { SideNav, SideNavItem, Content } from "components/portal/page"
+  import { SideNav, SideNavItem, Content } from "@/components/portal/page"
   import { isActive, goto } from "@roxi/routify"
-  import { menu, features } from "stores/portal"
+  import { menu, features } from "@/stores/portal"
 
   $: wide = $isActive("./users/index") || $isActive("./groups/index")
   $: pages = $menu.find(x => x.title === "Users")?.subPages || []
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 36ec43b6b3..312d87f873 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@@ -10,10 +10,10 @@
     notifications,
   } from "@budibase/bbui"
   import { goto, url } from "@roxi/routify"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { Breadcrumb, Breadcrumbs } from "components/portal/page"
-  import { roles } from "stores/builder"
-  import { appsStore, auth, groups } from "stores/portal"
+  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import { Breadcrumb, Breadcrumbs } from "@/components/portal/page"
+  import { roles } from "@/stores/builder"
+  import { appsStore, auth, groups } from "@/stores/portal"
   import { onMount, setContext } from "svelte"
   import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte"
   import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte"
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
index 5071d40add..75600c6fc0 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
@@ -1,8 +1,8 @@
 <script>
   import { keepOpen, Body, ModalContent, Select } from "@budibase/bbui"
-  import { appsStore, groups } from "stores/portal"
-  import { roles } from "stores/builder"
-  import RoleSelect from "components/common/RoleSelect.svelte"
+  import { appsStore, groups } from "@/stores/portal"
+  import { roles } from "@/stores/builder"
+  import RoleSelect from "@/components/common/RoleSelect.svelte"
 
   export let group
 
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte
index 8cec28a0ef..1e7e15d1b4 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Button, Popover, notifications } from "@budibase/bbui"
-  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-  import { createPaginationStore } from "helpers/pagination"
-  import { groups, users } from "stores/portal"
+  import UserGroupPicker from "@/components/settings/UserGroupPicker.svelte"
+  import { createPaginationStore } from "@/helpers/pagination"
+  import { groups, users } from "@/stores/portal"
 
   export let groupId
   export let onUsersUpdated
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
index 9f6703964a..8d99d406fd 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
@@ -4,8 +4,8 @@
   import { Heading, Pagination, Table, Search } from "@budibase/bbui"
   import { fetchData } from "@budibase/frontend-core"
   import { goto } from "@roxi/routify"
-  import { API } from "api"
-  import { groups } from "stores/portal"
+  import { API } from "@/api"
+  import { groups } from "@/stores/portal"
   import { setContext } from "svelte"
 
   import RemoveUserTableRenderer from "../_components/RemoveUserTableRenderer.svelte"
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte
index 4d71c71ae6..406a499f51 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   export let value
diff --git a/packages/builder/src/pages/builder/portal/users/groups/index.svelte b/packages/builder/src/pages/builder/portal/users/groups/index.svelte
index 5636d555ae..77b0dc5734 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte
@@ -13,7 +13,7 @@
     Search,
     notifications,
   } from "@budibase/bbui"
-  import { groups, auth, licensing, admin } from "stores/portal"
+  import { groups, auth, licensing, admin } from "@/stores/portal"
   import { onMount } from "svelte"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import { cloneDeep } from "lodash/fp"
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 3547a4876e..94fe3081c3 100644
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@@ -18,14 +18,14 @@
     Table,
   } from "@budibase/bbui"
   import { onMount, setContext } from "svelte"
-  import { users, auth, groups, appsStore, licensing } from "stores/portal"
-  import { roles } from "stores/builder"
+  import { users, auth, groups, appsStore, licensing } from "@/stores/portal"
+  import { roles } from "@/stores/builder"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
-  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
+  import UserGroupPicker from "@/components/settings/UserGroupPicker.svelte"
   import DeleteUserModal from "./_components/DeleteUserModal.svelte"
   import GroupIcon from "../groups/_components/GroupIcon.svelte"
   import { Constants, UserAvatar } from "@budibase/frontend-core"
-  import { Breadcrumbs, Breadcrumb } from "components/portal/page"
+  import { Breadcrumbs, Breadcrumb } from "@/components/portal/page"
   import RemoveGroupTableRenderer from "./_components/RemoveGroupTableRenderer.svelte"
   import GroupNameTableRenderer from "../groups/_components/GroupNameTableRenderer.svelte"
   import AppNameTableRenderer from "./_components/AppNameTableRenderer.svelte"
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
index 36709ae9c0..9122ff09ab 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte
@@ -9,10 +9,10 @@
     Layout,
     Icon,
   } from "@budibase/bbui"
-  import { groups, licensing } from "stores/portal"
+  import { groups, licensing } from "@/stores/portal"
   import { Constants } from "@budibase/frontend-core"
-  import { emailValidator } from "helpers/validation"
-  import { capitalise } from "helpers"
+  import { emailValidator } from "@/helpers/validation"
+  import { capitalise } from "@/helpers"
 
   export let showOnboardingTypeModal
 
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 03a3e626a4..9429cfbc23 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
@@ -1,8 +1,8 @@
 <script>
   import { StatusLight } from "@budibase/bbui"
   import { Constants } from "@budibase/frontend-core"
-  import { roles } from "stores/builder"
-  import { capitalise } from "helpers"
+  import { roles } from "@/stores/builder"
+  import { capitalise } from "@/helpers"
 
   export let value
 
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 28057f609c..54d220b67a 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
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { appsStore } from "stores/portal"
+  import { appsStore } from "@/stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   export let value
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/DeleteUserModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/DeleteUserModal.svelte
index 946fa430d2..ea1070090f 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/DeleteUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/DeleteUserModal.svelte
@@ -2,7 +2,7 @@
   import { goto } from "@roxi/routify"
   import { Body, ModalContent, notifications } from "@budibase/bbui"
 
-  import { users } from "stores/portal"
+  import { users } from "@/stores/portal"
 
   export let user
 
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/ForceResetPasswordModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/ForceResetPasswordModal.svelte
index 36fdcccbce..7f8ad3d492 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/ForceResetPasswordModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/ForceResetPasswordModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
-  import { users } from "stores/portal"
+  import { users } from "@/stores/portal"
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte
index 432fb7abb7..b8aca87459 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/ImportUsersModal.svelte
@@ -7,10 +7,10 @@
     notifications,
     Icon,
   } from "@budibase/bbui"
-  import { groups, licensing, admin } from "stores/portal"
-  import { emailValidator } from "helpers/validation"
+  import { groups, licensing, admin } from "@/stores/portal"
+  import { emailValidator } from "@/helpers/validation"
   import { Constants } from "@budibase/frontend-core"
-  import { capitalise } from "helpers"
+  import { capitalise } from "@/helpers"
 
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte
index afac8ae74b..19ff7e6f46 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/OnboardingTypeModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ModalContent, Body, Layout, Icon } from "@budibase/bbui"
-  import { OnboardingType } from "constants"
+  import { OnboardingType } from "@/constants"
 
   export let chooseCreationType
 
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte
index ce9c41d4ac..e5d7b32b94 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Body, ModalContent, Table, Icon } from "@budibase/bbui"
   import PasswordCopyTableRenderer from "./PasswordCopyTableRenderer.svelte"
-  import { parseToCsv } from "helpers/data/utils"
+  import { parseToCsv } from "@/helpers/data/utils"
   import { onMount } from "svelte"
   import InviteResponseRenderer from "./InviteResponseRenderer.svelte"
 
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte
index 5eacdec944..96c13acc8c 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   export let value
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 0006cc4be0..eae8e5e910 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
@@ -1,5 +1,5 @@
 <script>
-  import { users } from "stores/portal"
+  import { users } from "@/stores/portal"
   import { Constants } from "@budibase/frontend-core"
 
   export let row
diff --git a/packages/builder/src/pages/builder/portal/users/users/index.svelte b/packages/builder/src/pages/builder/portal/users/users/index.svelte
index 9c4e8f70c7..80772ccbee 100644
--- a/packages/builder/src/pages/builder/portal/users/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte
@@ -20,10 +20,10 @@
     licensing,
     organisation,
     admin,
-  } from "stores/portal"
+  } from "@/stores/portal"
   import { onMount } from "svelte"
-  import DeleteRowsButton from "components/backend/DataTable/buttons/DeleteRowsButton.svelte"
-  import UpgradeModal from "components/common/users/UpgradeModal.svelte"
+  import DeleteRowsButton from "@/components/backend/DataTable/buttons/DeleteRowsButton.svelte"
+  import UpgradeModal from "@/components/common/users/UpgradeModal.svelte"
   import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
   import AppsTableRenderer from "./_components/AppsTableRenderer.svelte"
   import RoleTableRenderer from "./_components/RoleTableRenderer.svelte"
@@ -35,8 +35,8 @@
   import ImportUsersModal from "./_components/ImportUsersModal.svelte"
   import { get } from "svelte/store"
   import { Constants, Utils, fetchData } from "@budibase/frontend-core"
-  import { API } from "api"
-  import { OnboardingType } from "constants"
+  import { API } from "@/api"
+  import { OnboardingType } from "@/constants"
   import { sdk } from "@budibase/shared-core"
 
   const fetch = fetchData({
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 5bd8d4c3f4..2f13074c9f 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
-  import { auth } from "stores/portal"
+  import { auth } from "@/stores/portal"
   import { onMount } from "svelte"
   import { notifications } from "@budibase/bbui"
 
diff --git a/packages/builder/src/stores/BudiStore.js b/packages/builder/src/stores/BudiStore.js
deleted file mode 100644
index e854aa6588..0000000000
--- a/packages/builder/src/stores/BudiStore.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { writable } from "svelte/store"
-
-export default class BudiStore {
-  constructor(init, opts) {
-    const store = writable({ ...init })
-
-    /**
-     * Internal Svelte store
-     */
-    this.store = store
-
-    /**
-     * Exposes the svelte subscribe fn to allow $ notation access
-     * @example
-     * $navigation.selectedScreenId
-     */
-    this.subscribe = this.store.subscribe
-
-    /**
-     * Exposes the svelte update fn.
-     * *Store modification should be kept to a minimum
-     */
-    this.update = this.store.update
-    this.set = this.store.set
-
-    /**
-     * Optional debug mode to output the store updates to console
-     */
-    if (opts?.debug) {
-      this.subscribe(state => {
-        console.warn(`${this.constructor.name}`, state)
-      })
-    }
-  }
-}
diff --git a/packages/builder/src/stores/BudiStore.ts b/packages/builder/src/stores/BudiStore.ts
new file mode 100644
index 0000000000..d5bbc99328
--- /dev/null
+++ b/packages/builder/src/stores/BudiStore.ts
@@ -0,0 +1,69 @@
+import { writable, Writable, Readable } from "svelte/store"
+import {
+  createLocalStorageStore,
+  createSessionStorageStore,
+} from "@budibase/frontend-core"
+
+export enum PersistenceType {
+  NONE = "none",
+  LOCAL = "local",
+  SESSION = "session",
+}
+
+interface BudiStoreOpts {
+  debug?: boolean
+  persistence?: {
+    type: PersistenceType
+    key: string
+  }
+}
+
+export class BudiStore<T> {
+  store: Writable<T>
+  subscribe: Writable<T>["subscribe"]
+  update: Writable<T>["update"]
+  set: Writable<T>["set"]
+
+  constructor(init: T, opts?: BudiStoreOpts) {
+    if (opts?.persistence) {
+      switch (opts.persistence.type) {
+        case PersistenceType.LOCAL:
+          this.store = createLocalStorageStore(opts.persistence.key, init)
+          break
+        case PersistenceType.SESSION:
+          this.store = createSessionStorageStore(opts.persistence.key, init)
+          break
+        default:
+          this.store = writable<T>(init)
+      }
+    } else {
+      this.store = writable<T>(init)
+    }
+
+    this.subscribe = this.store.subscribe
+    this.update = this.store.update
+    this.set = this.store.set
+
+    // Optional debug mode to output the store updates to console
+    if (opts?.debug) {
+      this.subscribe(state => {
+        console.warn(`${this.constructor.name}`, state)
+      })
+    }
+  }
+}
+
+export class DerivedBudiStore<T, DerivedT extends T> extends BudiStore<T> {
+  derivedStore: Readable<DerivedT>
+  subscribe: Readable<DerivedT>["subscribe"]
+
+  constructor(
+    init: T,
+    makeDerivedStore: (store: Writable<T>) => Readable<DerivedT>,
+    opts?: BudiStoreOpts
+  ) {
+    super(init, opts)
+    this.derivedStore = makeDerivedStore(this.store)
+    this.subscribe = this.derivedStore.subscribe
+  }
+}
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.ts
similarity index 55%
rename from packages/builder/src/stores/builder/app.js
rename to packages/builder/src/stores/builder/app.ts
index e57a079185..3c8ed4afc1 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.ts
@@ -1,7 +1,54 @@
-import { API } from "api"
-import BudiStore from "../BudiStore"
+import { API } from "@/api"
+import { BudiStore } from "../BudiStore"
+import {
+  App,
+  AppFeatures,
+  AppIcon,
+  AutomationSettings,
+  Plugin,
+} from "@budibase/types"
 
-export const INITIAL_APP_META_STATE = {
+interface ClientFeatures {
+  spectrumThemes: boolean
+  intelligentLoading: boolean
+  deviceAwareness: boolean
+  state: boolean
+  rowSelection: boolean
+  customThemes: boolean
+  devicePreview: boolean
+  messagePassing: boolean
+  continueIfAction: boolean
+  showNotificationAction: boolean
+  sidePanel: boolean
+}
+
+interface TypeSupportPresets {
+  [key: string]: any
+}
+
+interface AppMetaState {
+  appId: string
+  name: string
+  url: string
+  libraries: string[]
+  clientFeatures: ClientFeatures
+  typeSupportPresets: TypeSupportPresets
+  features: AppFeatures
+  clientLibPath: string
+  hasLock: boolean
+  appInstance: { _id: string } | null
+  initialised: boolean
+  hasAppPackage: boolean
+  usedPlugins: Plugin[] | null
+  automations: AutomationSettings
+  routes: { [key: string]: any }
+  version?: string
+  revertableVersion?: string
+  upgradableVersion?: string
+  icon?: AppIcon
+}
+
+export const INITIAL_APP_META_STATE: AppMetaState = {
   appId: "",
   name: "",
   url: "",
@@ -34,7 +81,7 @@ export const INITIAL_APP_META_STATE = {
   routes: {},
 }
 
-export class AppMetaStore extends BudiStore {
+export class AppMetaStore extends BudiStore<AppMetaState> {
   constructor() {
     super(INITIAL_APP_META_STATE)
   }
@@ -43,14 +90,18 @@ export class AppMetaStore extends BudiStore {
     this.store.set({ ...INITIAL_APP_META_STATE })
   }
 
-  syncAppPackage(pkg) {
+  syncAppPackage(pkg: {
+    application: App
+    clientLibPath: string
+    hasLock: boolean
+  }) {
     const { application: app, clientLibPath, hasLock } = pkg
 
     this.update(state => ({
       ...state,
       name: app.name,
       appId: app.appId,
-      url: app.url,
+      url: app.url || "",
       hasLock,
       clientLibPath,
       libraries: app.componentLibraries,
@@ -58,8 +109,8 @@ export class AppMetaStore extends BudiStore {
       appInstance: app.instance,
       revertableVersion: app.revertableVersion,
       upgradableVersion: app.upgradableVersion,
-      usedPlugins: app.usedPlugins,
-      icon: app.icon || {},
+      usedPlugins: app.usedPlugins || null,
+      icon: app.icon,
       features: {
         ...INITIAL_APP_META_STATE.features,
         ...app.features,
@@ -70,7 +121,7 @@ export class AppMetaStore extends BudiStore {
     }))
   }
 
-  syncClientFeatures(features) {
+  syncClientFeatures(features: Partial<ClientFeatures>) {
     this.update(state => ({
       ...state,
       clientFeatures: {
@@ -80,7 +131,7 @@ export class AppMetaStore extends BudiStore {
     }))
   }
 
-  syncClientTypeSupportPresets(typeSupportPresets) {
+  syncClientTypeSupportPresets(typeSupportPresets: TypeSupportPresets) {
     this.update(state => ({
       ...state,
       typeSupportPresets,
@@ -96,7 +147,7 @@ export class AppMetaStore extends BudiStore {
   }
 
   // Returned from socket
-  syncMetadata(metadata) {
+  syncMetadata(metadata: { name: string; url: string; icon?: AppIcon }) {
     const { name, url, icon } = metadata
     this.update(state => ({
       ...state,
diff --git a/packages/builder/src/stores/builder/automations.js b/packages/builder/src/stores/builder/automations.ts
similarity index 65%
rename from packages/builder/src/stores/builder/automations.js
rename to packages/builder/src/stores/builder/automations.ts
index 771ae97cf8..c43a856cc4 100644
--- a/packages/builder/src/stores/builder/automations.js
+++ b/packages/builder/src/stores/builder/automations.ts
@@ -1,31 +1,58 @@
-import { writable, get, derived } from "svelte/store"
-import { API } from "api"
+import { derived, get } from "svelte/store"
+import { API } from "@/api"
 import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
-import { createHistoryStore } from "stores/builder/history"
-import { licensing } from "stores/portal"
-import { tables } from "stores/builder"
+import { createHistoryStore } from "@/stores/builder/history"
+import { licensing } from "@/stores/portal"
+import { tables, appStore } from "@/stores/builder"
 import { notifications } from "@budibase/bbui"
 import {
   getEnvironmentBindings,
   migrateReferencesInObject,
   getUserBindings,
   getSettingBindings,
-} from "dataBinding"
+} from "@/dataBinding"
 import {
   AutomationTriggerStepId,
   AutomationEventType,
   AutomationStepType,
   AutomationActionStepId,
+  Automation,
+  AutomationStep,
+  Table,
+  Branch,
+  AutomationTrigger,
+  AutomationStatus,
+  UILogicalOperator,
+  EmptyFilterOption,
+  AutomationIOType,
+  AutomationStepSchema,
+  AutomationTriggerSchema,
+  BranchPath,
+  BlockDefinitions,
 } from "@budibase/types"
-import { ActionStepID } from "constants/backend/automations"
-import { FIELDS } from "constants/backend"
+import { ActionStepID } from "@/constants/backend/automations"
+import { FIELDS } from "@/constants/backend"
 import { sdk } from "@budibase/shared-core"
 import { rowActions } from "./rowActions"
-import { getNewStepName } from "helpers/automations/nameHelpers"
+import { getNewStepName } from "@/helpers/automations/nameHelpers"
 import { QueryUtils } from "@budibase/frontend-core"
+import { BudiStore, DerivedBudiStore } from "@/stores/BudiStore"
 
-const initialAutomationState = {
+interface AutomationState {
+  automations: Automation[]
+  testResults: any | null
+  showTestPanel: boolean
+  blockDefinitions: BlockDefinitions
+  selectedAutomationId: string | null
+}
+
+interface DerivedAutomationState extends AutomationState {
+  data: Automation | null
+  blockRefs: Record<string, any>
+}
+
+const initialAutomationState: AutomationState = {
   automations: [],
   testResults: null,
   showTestPanel: false,
@@ -37,25 +64,11 @@ const initialAutomationState = {
   selectedAutomationId: null,
 }
 
-// If this functions, remove the actions elements
-export const createAutomationStore = () => {
-  const store = writable(initialAutomationState)
-
-  store.actions = automationActions(store)
-
-  // Setup history for automations
-  const history = createHistoryStore({
-    getDoc: store.actions.getDefinition,
-    selectDoc: store.actions.select,
-  })
-
-  store.actions.save = history.wrapSaveDoc(store.actions.save)
-  store.actions.delete = history.wrapDeleteDoc(store.actions.delete)
-  return { store, history }
-}
-
-const getFinalDefinitions = (triggers, actions) => {
-  const creatable = {}
+const getFinalDefinitions = (
+  triggers: Record<string, any>,
+  actions: Record<string, any>
+): BlockDefinitions => {
+  const creatable: Record<string, any> = {}
   Object.entries(triggers).forEach(entry => {
     if (entry[0] === AutomationTriggerStepId.ROW_ACTION) {
       return
@@ -69,7 +82,7 @@ const getFinalDefinitions = (triggers, actions) => {
   }
 }
 
-const automationActions = store => ({
+const automationActions = (store: AutomationStore) => ({
   /**
    * Move a given block from one location on the tree to another.
    *
@@ -77,7 +90,11 @@ const automationActions = store => ({
    * @param {Object} destPath the destinationPart
    * @param {Object} automation the automaton to be mutated
    */
-  moveBlock: async (sourcePath, destPath, automation) => {
+  moveBlock: async (
+    sourcePath: BranchPath[],
+    destPath: BranchPath[],
+    automation: Automation
+  ) => {
     // The last part of the source node address, containing the id.
     const pathSource = sourcePath.at(-1)
 
@@ -85,13 +102,13 @@ const automationActions = store => ({
     const pathEnd = destPath.at(-1)
 
     // Check if dragging a step into its own drag zone
-    const isOwnDragzone = pathSource.id === pathEnd.id
+    const isOwnDragzone = pathSource?.id === pathEnd?.id
 
     // Check if dragging the first branch step into the branch node drag zone
     const isFirstBranchStep =
-      pathEnd.branchStepId &&
-      pathEnd.branchIdx === pathSource.branchIdx &&
-      pathSource.stepIdx === 0
+      pathEnd?.branchStepId &&
+      pathEnd.branchIdx === pathSource?.branchIdx &&
+      pathSource?.stepIdx === 0
 
     // If dragging into an area that will not affect the tree structure
     // Ignore the drag and drop.
@@ -108,19 +125,21 @@ const automationActions = store => ({
 
     // Traverse again as deleting the node from its original location
     // will redefine all proceding node locations
-    const newRefs = {}
+    const newRefs: Record<string, any> = {}
     store.actions.traverse(newRefs, newAutomation)
 
     let finalPath
     // If dropping in a branch-step dropzone you need to find
     // the updated parent step route then add the branch details again
-    if (pathEnd.branchStepId) {
+    if (pathEnd?.branchStepId) {
       const branchStepRef = newRefs[pathEnd.branchStepId]
       finalPath = branchStepRef.pathTo
       finalPath.push(pathEnd)
     } else {
       // Place the target 1 after the drop
-      finalPath = newRefs[pathEnd.id].pathTo
+      if (pathEnd?.id) {
+        finalPath = newRefs[pathEnd.id].pathTo
+      }
       finalPath.at(-1).stepIdx += 1
     }
 
@@ -140,7 +159,6 @@ const automationActions = store => ({
       console.error("Error moving automation block ", e)
     }
   },
-
   /**
    * Core delete function that will delete the node at the provided
    * location. Loops require 2 deletes so the function returns an array.
@@ -150,7 +168,7 @@ const automationActions = store => ({
    * @param {*} automation the automation to alter.
    * @returns {Object} contains the deleted nodes and new updated automation
    */
-  deleteBlock: (pathTo, automation) => {
+  deleteBlock: (pathTo: Array<BranchPath>, automation: Automation) => {
     let newAutomation = cloneDeep(automation)
 
     const steps = [
@@ -158,20 +176,20 @@ const automationActions = store => ({
       ...newAutomation.definition.steps,
     ]
 
-    let cache
+    let cache: any
     pathTo.forEach((path, pathIdx, array) => {
       const final = pathIdx === array.length - 1
       const { stepIdx, branchIdx } = path
 
-      const deleteCore = (steps, idx) => {
+      const deleteCore = (steps: AutomationStep[], idx: number) => {
         const targetBlock = steps[idx]
         // By default, include the id of the target block
         const idsToDelete = [targetBlock.id]
-        const blocksDeleted = []
+        const blocksDeleted: AutomationStep[] = []
 
         // If deleting a looped block, ensure all related block references are
         // collated beforehand. Delete can then be handled atomically
-        const loopSteps = {}
+        const loopSteps: Record<string, string> = {}
         steps.forEach(child => {
           const { blockToLoop, id: loopBlockId } = child
           if (blockToLoop) {
@@ -228,7 +246,6 @@ const automationActions = store => ({
     // should be 1-2 blocks in an array
     return cache
   },
-
   /**
    * Build metadata for the automation tree. Store the path and
    * note any loop information used when rendering
@@ -236,8 +253,12 @@ const automationActions = store => ({
    * @param {Object} block
    * @param {Array<Object>} pathTo
    */
-  registerBlock: (blocks, block, pathTo, terminating) => {
-    // Directly mutate the `blocks` object without reassigning
+  registerBlock: (
+    blocks: Record<string, any>,
+    block: AutomationStep | AutomationTrigger,
+    pathTo: Array<BranchPath>,
+    terminating: boolean
+  ) => {
     blocks[block.id] = {
       ...(blocks[block.id] || {}),
       pathTo,
@@ -253,20 +274,21 @@ const automationActions = store => ({
       }
     }
   },
+
   /**
    * Build a sequential list of all steps on the step path provided
    *
    * @param {Array<Object>} pathWay e.g. [{stepIdx:2},{branchIdx:0, stepIdx:2},...]
    * @returns {Array<Object>} all steps encountered on the provided path
    */
-  getPathSteps: (pathWay, automation) => {
+  getPathSteps: (pathWay: Array<BranchPath>, automation: Automation) => {
     // Base Steps, including trigger
     const steps = [
       automation.definition.trigger,
       ...automation.definition.steps,
     ]
 
-    let result
+    let result: (AutomationStep | AutomationTrigger)[] = []
     pathWay.forEach(path => {
       const { stepIdx, branchIdx } = path
       let last = result ? result[result.length - 1] : []
@@ -275,13 +297,14 @@ const automationActions = store => ({
         result = steps.slice(0, stepIdx + 1)
         return
       }
-
-      if (Number.isInteger(branchIdx)) {
-        const branchId = last.inputs.branches[branchIdx].id
-        const children = last.inputs.children[branchId]
-        const stepChildren = children.slice(0, stepIdx + 1)
-        // Preceeding steps.
-        result = result.concat(stepChildren)
+      if (last && "inputs" in last) {
+        if (Number.isInteger(branchIdx)) {
+          const branchId = last.inputs.branches[branchIdx].id
+          const children = last.inputs.children[branchId]
+          const stepChildren = children.slice(0, stepIdx + 1)
+          // Preceeding steps.
+          result = result.concat(stepChildren)
+        }
       }
     })
     return result
@@ -298,18 +321,27 @@ const automationActions = store => ({
    * @param {Boolean} insert defaults to false
    * @returns
    */
-  updateStep: (pathWay, automation, update, insert = false) => {
+  updateStep: (
+    pathWay: Array<BranchPath>,
+    automation: Automation,
+    update: AutomationStep | AutomationTrigger,
+    insert = false
+  ) => {
     let newAutomation = cloneDeep(automation)
 
-    const finalise = (dest, idx, update) => {
+    const finalise = (
+      dest: AutomationStep[],
+      idx: number,
+      update: AutomationStep | AutomationTrigger
+    ) => {
       dest.splice(
         idx,
-        insert ? 0 : update.length || 1,
+        insert ? 0 : Array.isArray(update) ? update.length : 1,
         ...(Array.isArray(update) ? update : [update])
       )
     }
 
-    let cache = null
+    let cache: any = null
     pathWay.forEach((path, idx, array) => {
       const { stepIdx, branchIdx } = path
       let final = idx === array.length - 1
@@ -365,7 +397,7 @@ const automationActions = store => ({
    * @returns {Array<Object>} all available user bindings
    */
   buildUserBindings: () => {
-    return getUserBindings().map(binding => {
+    return getUserBindings().map((binding: any) => {
       return {
         ...binding,
         category: "User",
@@ -393,7 +425,6 @@ const automationActions = store => ({
       }
     })
   },
-
   /**
    * Take the supplied step id and aggregate all bindings for every
    * step preceding it.
@@ -401,15 +432,14 @@ const automationActions = store => ({
    * @param {string} id the step id of the target
    * @returns {Array<Object>} all bindings on the path to this step
    */
-  getPathBindings: id => {
-    const block = get(selectedAutomation).blockRefs[id]
-    const bindings = store.actions.getAvailableBindings(
+  getPathBindings: (id: string) => {
+    const block = get(selectedAutomation)?.blockRefs[id]
+    return store.actions.getAvailableBindings(
       block,
-      get(selectedAutomation).data
+      get(selectedAutomation)?.data
     )
-
-    return bindings
   },
+
   /**
    * Takes the provided automation and traverses all possible paths.
    * References to all nodes/steps encountered on the way are stored
@@ -418,8 +448,8 @@ const automationActions = store => ({
    *
    * @param {Object} automation
    */
-  traverse: (blockRefs, automation) => {
-    let blocks = []
+  traverse: (blockRefs: Record<string, any>, automation: Automation) => {
+    let blocks: (AutomationStep | AutomationTrigger)[] = []
     if (!automation || !blockRefs) {
       return
     }
@@ -428,7 +458,13 @@ const automationActions = store => ({
     }
     blocks = blocks.concat(automation.definition.steps || [])
 
-    const treeTraverse = (block, pathTo, stepIdx, branchIdx, terminating) => {
+    const treeTraverse = (
+      block: AutomationStep | AutomationTrigger,
+      pathTo: Array<any> | null,
+      stepIdx: number,
+      branchIdx: number | null,
+      terminating: boolean
+    ) => {
       const pathToCurrentNode = [
         ...(pathTo || []),
         {
@@ -437,14 +473,16 @@ const automationActions = store => ({
           id: block.id,
         },
       ]
-      const branches = block.inputs?.branches || []
+      const branches: Branch[] = block.inputs?.branches || []
 
       branches.forEach((branch, bIdx) => {
-        block.inputs?.children[branch.id].forEach((bBlock, sIdx, array) => {
-          const ended =
-            array.length - 1 === sIdx && !bBlock.inputs?.branches?.length
-          treeTraverse(bBlock, pathToCurrentNode, sIdx, bIdx, ended)
-        })
+        block.inputs?.children[branch.id].forEach(
+          (bBlock: AutomationStep, sIdx: number, array: AutomationStep[]) => {
+            const ended =
+              array.length - 1 === sIdx && !bBlock.inputs?.branches?.length
+            treeTraverse(bBlock, pathToCurrentNode, sIdx, bIdx, ended)
+          }
+        )
       })
 
       store.actions.registerBlock(
@@ -463,21 +501,13 @@ const automationActions = store => ({
     return blockRefs
   },
 
-  /**
-   * Build a list of all bindings specifically on the path
-   * preceding the provided block.
-   *
-   * @param {Object} block step object
-   * @param {Object} automation The complete automation
-   * @returns
-   */
-  getAvailableBindings: (block, automation) => {
+  getAvailableBindings: (block: any, automation: Automation | null) => {
     if (!block || !automation?.definition) {
       return []
     }
 
     // Registered blocks
-    const blocks = get(selectedAutomation).blockRefs
+    const blocks = get(selectedAutomation)?.blockRefs
 
     // Get all preceeding steps, including the trigger
     // Filter out the target step as we don't want to include itself
@@ -490,19 +520,34 @@ const automationActions = store => ({
       .getPathSteps(block.pathTo, automation)
       .at(-1)
 
-    // Extract all outputs from all previous steps as available bindingsx§x
-    let bindings = []
-    const addBinding = (name, value, icon, idx, isLoopBlock, bindingName) => {
+    // Extract all outputs from all previous steps as available bindings
+    let bindings: any[] = []
+    const addBinding = (
+      name: string,
+      value: any,
+      icon: string,
+      idx: number,
+      isLoopBlock: boolean,
+      bindingName?: string
+    ) => {
       if (!name) return
-      const runtimeBinding = determineRuntimeBinding(
+      const runtimeBinding = store.actions.determineRuntimeBinding(
         name,
         idx,
         isLoopBlock,
-        bindingName
+        bindingName,
+        automation,
+        currentBlock,
+        pathSteps
+      )
+      const categoryName = store.actions.determineCategoryName(
+        idx,
+        isLoopBlock,
+        bindingName,
+        loopBlockCount
       )
-      const categoryName = determineCategoryName(idx, isLoopBlock, bindingName)
       bindings.push(
-        createBindingObject(
+        store.actions.createBindingObject(
           name,
           value,
           icon,
@@ -516,93 +561,6 @@ const automationActions = store => ({
       )
     }
 
-    const determineRuntimeBinding = (name, idx, isLoopBlock) => {
-      let runtimeName
-
-      /* Begin special cases for generating custom schemas based on triggers */
-      if (
-        idx === 0 &&
-        automation.definition.trigger?.event === AutomationEventType.APP_TRIGGER
-      ) {
-        return `trigger.fields.${name}`
-      }
-
-      if (
-        idx === 0 &&
-        (automation.definition.trigger?.event ===
-          AutomationEventType.ROW_UPDATE ||
-          automation.definition.trigger?.event === AutomationEventType.ROW_SAVE)
-      ) {
-        let noRowKeywordBindings = ["id", "revision", "oldRow"]
-        if (!noRowKeywordBindings.includes(name)) return `trigger.row.${name}`
-      }
-      /* End special cases for generating custom schemas based on triggers */
-
-      if (isLoopBlock) {
-        runtimeName = `loop.${name}`
-      } else if (idx === 0) {
-        runtimeName = `trigger.${name}`
-      } else if (
-        currentBlock?.stepId === AutomationActionStepId.EXECUTE_SCRIPT
-      ) {
-        const stepId = pathSteps[idx].id
-        if (!stepId) {
-          notifications.error("Error generating binding: Step ID not found.")
-          return null
-        }
-        runtimeName = `steps["${stepId}"].${name}`
-      } else {
-        const stepId = pathSteps[idx].id
-        if (!stepId) {
-          notifications.error("Error generating binding: Step ID not found.")
-          return null
-        }
-        runtimeName = `steps.${stepId}.${name}`
-      }
-
-      return runtimeName
-    }
-
-    const determineCategoryName = (idx, isLoopBlock, bindingName) => {
-      if (idx === 0) return "Trigger outputs"
-      if (isLoopBlock) return "Loop Outputs"
-      return bindingName
-        ? `${bindingName} outputs`
-        : `Step ${idx - loopBlockCount} outputs`
-    }
-
-    const createBindingObject = (
-      name,
-      value,
-      icon,
-      idx,
-      loopBlockCount,
-      isLoopBlock,
-      runtimeBinding,
-      categoryName,
-      bindingName
-    ) => {
-      const field = Object.values(FIELDS).find(
-        field => field.type === value.type && field.subtype === value.subtype
-      )
-      return {
-        readableBinding:
-          bindingName && !isLoopBlock && idx !== 0
-            ? `steps.${bindingName}.${name}`
-            : runtimeBinding,
-        runtimeBinding,
-        type: value.type,
-        description: value.description,
-        icon,
-        category: categoryName,
-        display: {
-          type: field?.name || value.type,
-          name,
-          rank: isLoopBlock ? idx + 1 : idx - loopBlockCount,
-        },
-      }
-    }
-
     let loopBlockCount = 0
 
     for (let blockIdx = 0; blockIdx < pathSteps.length; blockIdx++) {
@@ -611,20 +569,18 @@ const automationActions = store => ({
         automation.definition.stepNames?.[pathBlock.id] || pathBlock.name
 
       let schema = cloneDeep(pathBlock?.schema?.outputs?.properties) ?? {}
-
-      const isLoopBlock =
-        pathBlock.stepId === ActionStepID.LOOP &&
-        pathBlock.blockToLoop in blocks
-
+      let isLoopBlock = false
+      if (pathBlock.blockToLoop) {
+        isLoopBlock =
+          pathBlock.stepId === ActionStepID.LOOP &&
+          pathBlock.blockToLoop in blocks
+      }
       const isTrigger = pathBlock.type === AutomationStepType.TRIGGER
 
-      // Add the loop schema
-      // Should only be visible for blocks[pathBlock.id].looped
-      // Only a once otherwise there will be 1 per loop block
       if (isLoopBlock && loopBlockCount == 0) {
         schema = {
           currentItem: {
-            type: "string",
+            type: AutomationIOType.STRING,
             description: "the item currently being executed",
           },
         }
@@ -641,17 +597,16 @@ const automationActions = store => ({
           pathBlock.event === AutomationEventType.ROW_UPDATE ||
           pathBlock.event === AutomationEventType.ROW_SAVE
         ) {
-          let table = get(tables).list.find(
-            table => table._id === pathBlock.inputs.tableId
+          let table: any = get(tables).list.find(
+            (table: Table) => table._id === pathBlock.inputs.tableId
           )
-          // We want to generate our own schema for the bindings from the table schema itself
+
           for (const key in table?.schema) {
             schema[key] = {
               type: table.schema[key].type,
               subtype: table.schema[key].subtype,
             }
           }
-          // remove the original binding
           delete schema.row
         } else if (pathBlock.event === AutomationEventType.APP_TRIGGER) {
           schema = Object.fromEntries(
@@ -686,117 +641,113 @@ const automationActions = store => ({
     }
     return bindings
   },
-  definitions: async () => {
-    const response = await API.getAutomationDefinitions()
-    store.update(state => {
-      state.blockDefinitions = getFinalDefinitions(
-        response.trigger,
-        response.action
-      )
-      return state
-    })
-    return response
-  },
-  fetch: async () => {
-    const [automationResponse, definitions] = await Promise.all([
-      API.getAutomations(),
-      API.getAutomationDefinitions(),
-    ])
-    store.update(state => {
-      state.automations = automationResponse.automations
-      state.automations.sort((a, b) => {
-        return a.name < b.name ? -1 : 1
-      })
-      state.blockDefinitions = getFinalDefinitions(
-        definitions.trigger,
-        definitions.action
-      )
-      return state
-    })
-  },
-  create: async (name, trigger) => {
-    const automation = {
-      name,
-      type: "automation",
-      definition: {
-        steps: [],
-        trigger,
-      },
-      disabled: false,
-    }
-    const response = await store.actions.save(automation)
-    return response
-  },
-  duplicate: async automation => {
-    const response = await store.actions.save({
-      ...automation,
-      name: `${automation.name} - copy`,
-      _id: undefined,
-      _ref: undefined,
-    })
-    return response
-  },
-  save: async automation => {
-    const response = await API.updateAutomation(automation)
 
-    await store.actions.fetch()
-    store.actions.select(response._id)
-    return response.automation
-  },
-  delete: async automation => {
-    const isRowAction = sdk.automations.isRowAction(automation)
-    if (isRowAction) {
-      await rowActions.delete(
-        automation.definition.trigger.inputs.tableId,
-        automation.definition.trigger.inputs.rowActionId
-      )
+  determineRuntimeBinding: (
+    name: string,
+    idx: number,
+    isLoopBlock: boolean,
+    bindingName: string | undefined,
+    automation: Automation,
+    currentBlock: AutomationStep | AutomationTrigger | undefined,
+    pathSteps: (AutomationStep | AutomationTrigger)[]
+  ) => {
+    let runtimeName: string | null
+
+    /* Begin special cases for generating custom schemas based on triggers */
+    if (
+      idx === 0 &&
+      automation.definition.trigger?.event === AutomationEventType.APP_TRIGGER
+    ) {
+      return `trigger.fields.${name}`
+    }
+
+    if (
+      idx === 0 &&
+      (automation.definition.trigger?.event ===
+        AutomationEventType.ROW_UPDATE ||
+        automation.definition.trigger?.event === AutomationEventType.ROW_SAVE)
+    ) {
+      let noRowKeywordBindings = ["id", "revision", "oldRow"]
+      if (!noRowKeywordBindings.includes(name)) return `trigger.row.${name}`
+    }
+    /* End special cases for generating custom schemas based on triggers */
+
+    if (isLoopBlock) {
+      runtimeName = `loop.${name}`
+    } else if (idx === 0) {
+      runtimeName = `trigger.${name}`
+    } else if (currentBlock?.stepId === AutomationActionStepId.EXECUTE_SCRIPT) {
+      const stepId = pathSteps[idx].id
+      if (!stepId) {
+        notifications.error("Error generating binding: Step ID not found.")
+        return null
+      }
+      runtimeName = `steps["${stepId}"].${name}`
     } else {
-      await API.deleteAutomation({
-        automationId: automation?._id,
-        automationRev: automation?._rev,
-      })
+      const stepId = pathSteps[idx].id
+      if (!stepId) {
+        notifications.error("Error generating binding: Step ID not found.")
+        return null
+      }
+      runtimeName = `steps.${stepId}.${name}`
     }
 
-    store.update(state => {
-      // Remove the automation
-      state.automations = state.automations.filter(
-        x => x._id !== automation._id
-      )
-
-      // Select a new automation if required
-      if (automation._id === state.selectedAutomationId) {
-        state.selectedAutomationId = state.automations[0]?._id || null
-      }
-
-      return state
-    })
+    return runtimeName
   },
-  toggleDisabled: async automationId => {
-    let automation
-    try {
-      automation = store.actions.getDefinition(automationId)
-      if (!automation) {
-        return
-      }
-      automation.disabled = !automation.disabled
-      await store.actions.save(automation)
-      notifications.success(
-        `Automation ${
-          automation.disabled ? "disabled" : "enabled"
-        } successfully`
-      )
-    } catch (error) {
-      notifications.error(
-        `Error ${
-          automation && automation.disabled ? "disabling" : "enabling"
-        } automation`
-      )
+
+  determineCategoryName: (
+    idx: number,
+    isLoopBlock: boolean,
+    bindingName: string | undefined,
+    loopBlockCount: number
+  ) => {
+    if (idx === 0) return "Trigger outputs"
+    if (isLoopBlock) return "Loop Outputs"
+    return bindingName
+      ? `${bindingName} outputs`
+      : `Step ${idx - loopBlockCount} outputs`
+  },
+
+  createBindingObject: (
+    name: string,
+    value: any,
+    icon: string,
+    idx: number,
+    loopBlockCount: number,
+    isLoopBlock: boolean,
+    runtimeBinding: string | null,
+    categoryName: string,
+    bindingName?: string
+  ) => {
+    const field = Object.values(FIELDS).find(
+      field =>
+        field.type === value.type &&
+        ("subtype" in field ? field.subtype === value.subtype : true)
+    )
+    return {
+      readableBinding:
+        bindingName && !isLoopBlock && idx !== 0
+          ? `steps.${bindingName}.${name}`
+          : runtimeBinding,
+      runtimeBinding,
+      type: value.type,
+      description: value.description,
+      icon,
+      category: categoryName,
+      display: {
+        type: field?.name || value.type,
+        name,
+        rank: isLoopBlock ? idx + 1 : idx - loopBlockCount,
+      },
     }
   },
 
-  processBlockInputs: async (block, data) => {
+  processBlockInputs: async (
+    block: AutomationStep,
+    data: Record<string, any>
+  ) => {
     // Create new modified block
-    let newBlock = {
+    let newBlock: AutomationStep & { inputs: any } = {
       ...block,
       inputs: {
         ...block.inputs,
@@ -813,7 +764,10 @@ const automationActions = store => ({
     })
 
     // Create new modified automation
-    const automation = get(selectedAutomation).data
+    const automation = get(selectedAutomation)?.data
+    if (!automation) {
+      return false
+    }
     const newAutomation = store.actions.getUpdatedDefinition(
       automation,
       newBlock
@@ -826,21 +780,23 @@ const automationActions = store => ({
 
     return newAutomation
   },
-  updateBlockInputs: async (block, data) => {
+
+  updateBlockInputs: async (
+    block: AutomationStep,
+    data: Record<string, any>
+  ) => {
     const newAutomation = await store.actions.processBlockInputs(block, data)
     if (newAutomation === false) {
       return
     }
     await store.actions.save(newAutomation)
   },
-  test: async (automation, testData) => {
-    let result
+
+  test: async (automation: Automation, testData: any) => {
+    let result: any
     try {
-      result = await API.testAutomation({
-        automationId: automation?._id,
-        testData,
-      })
-    } catch (err) {
+      result = await API.testAutomation(automation._id!, testData)
+    } catch (err: any) {
       const message = err.message || err.status || JSON.stringify(err)
       throw `Automation test failed - ${message}`
     }
@@ -855,36 +811,33 @@ const automationActions = store => ({
       return state
     })
   },
-  getDefinition: id => {
-    return get(store).automations?.find(x => x._id === id)
-  },
-  getUpdatedDefinition: (automation, block) => {
-    let newAutomation
+
+  getUpdatedDefinition: (
+    automation: Automation,
+    block: AutomationStep | AutomationTrigger
+  ): Automation => {
+    let newAutomation: Automation
     if (automation.definition.trigger?.id === block.id) {
       newAutomation = cloneDeep(automation)
-      newAutomation.definition.trigger = block
+      newAutomation.definition.trigger = block as AutomationTrigger
     } else {
-      const pathToStep = get(selectedAutomation).blockRefs[block.id].pathTo
-      newAutomation = automationStore.actions.updateStep(
-        pathToStep,
-        automation,
-        block
-      )
+      const pathToStep = get(selectedAutomation)!.blockRefs[block.id].pathTo
+      newAutomation = store.actions.updateStep(pathToStep, automation, block)
     }
     return newAutomation
   },
-  select: id => {
-    if (!id || id === get(store).selectedAutomationId) {
-      return
-    }
-    store.update(state => {
-      state.selectedAutomationId = id
-      state.testResults = null
-      state.showTestPanel = false
-      return state
-    })
-  },
-  getLogs: async ({ automationId, startDate, status, page } = {}) => {
+
+  getLogs: async ({
+    automationId,
+    startDate,
+    status,
+    page,
+  }: {
+    automationId?: string
+    startDate?: string
+    status?: AutomationStatus
+    page?: string
+  } = {}) => {
     return await API.getAutomationLogs({
       automationId,
       startDate,
@@ -892,22 +845,33 @@ const automationActions = store => ({
       page,
     })
   },
-  clearLogErrors: async ({ automationId, appId } = {}) => {
-    return await API.clearAutomationLogErrors({
-      automationId,
-      appId,
-    })
+
+  clearLogErrors: async ({
+    automationId,
+    appId,
+  }: {
+    automationId: string
+    appId: string
+  }) => {
+    if (!automationId || !appId) {
+      throw new Error("automationId and appId are required")
+    }
+    return await API.clearAutomationLogErrors(automationId, appId)
   },
-  addTestDataToAutomation: data => {
-    let newAutomation = cloneDeep(get(selectedAutomation).data)
+
+  addTestDataToAutomation: (data: any) => {
+    let newAutomation = cloneDeep(get(selectedAutomation)?.data)
+    if (!newAutomation) {
+      return newAutomation
+    }
     newAutomation.testData = {
       ...newAutomation.testData,
       ...data,
     }
     return newAutomation
   },
-  constructBlock(type, stepId, blockDefinition) {
-    let newName
+
+  constructBlock: (type: string, stepId: string, blockDefinition: any) => {
     const newStep = {
       ...blockDefinition,
       inputs: blockDefinition.inputs || {},
@@ -915,10 +879,11 @@ const automationActions = store => ({
       type,
       id: generate(),
     }
-    newName = getNewStepName(get(selectedAutomation)?.data, newStep)
+    const newName = getNewStepName(get(selectedAutomation)?.data, newStep)
     newStep.name = newName
     return newStep
   },
+
   /**
    * Generate a new branch block for adding to the automation
    * There are a minimum of 2 empty branches by default.
@@ -926,13 +891,8 @@ const automationActions = store => ({
    * @returns {Object} - a default branch block
    */
   generateBranchBlock: () => {
-    const branchDefinition = get(automationStore).blockDefinitions.ACTION.BRANCH
-    const branchBlock = automationStore.actions.constructBlock(
-      "ACTION",
-      "BRANCH",
-      branchDefinition
-    )
-    return branchBlock
+    const branchDefinition = get(store).blockDefinitions.ACTION.BRANCH
+    return store.actions.constructBlock("ACTION", "BRANCH", branchDefinition)
   },
 
   /**
@@ -942,8 +902,11 @@ const automationActions = store => ({
    * @param {Object} block the new block
    * @param {Array<Object>} pathWay location of insert point
    */
-  addBlockToAutomation: async (block, pathWay) => {
-    const automation = get(selectedAutomation).data
+  addBlockToAutomation: async (block: AutomationStep, pathWay: Array<any>) => {
+    const automation = get(selectedAutomation)?.data
+    if (!automation) {
+      return
+    }
     let newAutomation = cloneDeep(automation)
 
     const steps = [
@@ -951,24 +914,23 @@ const automationActions = store => ({
       ...newAutomation.definition.steps,
     ]
 
-    let cache
+    let cache:
+      | AutomationStepSchema<AutomationActionStepId>
+      | AutomationTriggerSchema<AutomationTriggerStepId>
+
     pathWay.forEach((path, pathIdx, array) => {
       const { stepIdx, branchIdx } = path
       const final = pathIdx === array.length - 1
 
-      const insertBlock = (steps, stepIdx) => {
+      const insertBlock = (steps: AutomationStep[], stepIdx: number) => {
         const isBranchNode = !Number.isInteger(stepIdx)
-
-        // If it's a loop block, insert at the looped block stepIdx
         const insertIdx =
           block.blockToLoop || isBranchNode ? stepIdx : stepIdx + 1
-
         steps.splice(insertIdx, 0, block)
       }
 
       if (!cache) {
         if (final) {
-          // Offset path to accommodate the trigger
           insertBlock(newAutomation.definition.steps, stepIdx - 1)
           cache = block
         } else {
@@ -976,7 +938,6 @@ const automationActions = store => ({
         }
         return
       }
-
       if (Number.isInteger(branchIdx)) {
         const branchId = cache.inputs.branches[branchIdx].id
         const children = cache.inputs.children[branchId]
@@ -1006,8 +967,8 @@ const automationActions = store => ({
    */
   generateDefaultConditions: () => {
     const baseConditionUI = {
-      logicalOperator: "all",
-      onEmptyFilter: "none",
+      logicalOperator: UILogicalOperator.ALL,
+      onEmptyFilter: EmptyFilterOption.RETURN_NONE,
       groups: [],
     }
     return {
@@ -1024,16 +985,16 @@ const automationActions = store => ({
    * @param {Array<Object>} path - the insertion point on the tree.
    * @param {Object} automation - the target automation to update.
    */
-  branchAutomation: async (path, automation) => {
+  branchAutomation: async (path: Array<any>, automation: Automation) => {
     const insertPoint = path.at(-1)
     let newAutomation = cloneDeep(automation)
-    let cache = null
+    let cache: any
     let atRoot = false
 
     // Generate a default empty branch
-    const createBranch = name => {
+    const createBranch = (name: string) => {
       return {
-        name: name,
+        name,
         ...store.actions.generateDefaultConditions(),
         id: generate(),
       }
@@ -1098,7 +1059,7 @@ const automationActions = store => ({
     // Init the branch children. Shift all steps following the new branch step
     // into the 0th branch.
     newBranch.inputs.children = newBranch.inputs.branches.reduce(
-      (acc, branch, idx) => {
+      (acc: Record<string, AutomationStep[]>, branch: Branch, idx: number) => {
         acc[branch.id] = idx == 0 ? cache.slice(insertIdx + 1) : []
         return acc
       },
@@ -1126,14 +1087,20 @@ const automationActions = store => ({
    * @param {Object} automation
    * @param {Object} block
    */
-  branchLeft: async (pathTo, automation, block) => {
+  branchLeft: async (
+    pathTo: Array<any>,
+    automation: Automation,
+    block: AutomationStep
+  ) => {
     const update = store.actions.shiftBranch(pathTo, block)
-    const updatedAuto = store.actions.updateStep(
-      pathTo.slice(0, -1),
-      automation,
-      update
-    )
-    await store.actions.save(updatedAuto)
+    if (update) {
+      const updatedAuto = store.actions.updateStep(
+        pathTo.slice(0, -1),
+        automation,
+        update
+      )
+      await store.actions.save(updatedAuto)
+    }
   },
 
   /**
@@ -1143,14 +1110,20 @@ const automationActions = store => ({
    * @param {Object} automation
    * @param {Object} block
    */
-  branchRight: async (pathTo, automation, block) => {
+  branchRight: async (
+    pathTo: Array<BranchPath>,
+    automation: Automation,
+    block: AutomationStep
+  ) => {
     const update = store.actions.shiftBranch(pathTo, block, 1)
-    const updatedAuto = store.actions.updateStep(
-      pathTo.slice(0, -1),
-      automation,
-      update
-    )
-    await store.actions.save(updatedAuto)
+    if (update) {
+      const updatedAuto = store.actions.updateStep(
+        pathTo.slice(0, -1),
+        automation,
+        update
+      )
+      await store.actions.save(updatedAuto)
+    }
   },
 
   /**
@@ -1160,7 +1133,7 @@ const automationActions = store => ({
    * @param {Number} direction - the direction of the swap. Defaults to -1 for left, add 1 for right
    * @returns
    */
-  shiftBranch(pathTo, block, direction = -1) {
+  shiftBranch: (pathTo: Array<any>, block: AutomationStep, direction = -1) => {
     let newBlock = cloneDeep(block)
     const branchPath = pathTo.at(-1)
     const targetIdx = branchPath.branchIdx
@@ -1171,10 +1144,7 @@ const automationActions = store => ({
     }
 
     let [neighbour] = newBlock.inputs.branches.splice(targetIdx + direction, 1)
-
-    // Put it back in the previous position.
     newBlock.inputs.branches.splice(targetIdx, 0, neighbour)
-
     return newBlock
   },
 
@@ -1186,9 +1156,9 @@ const automationActions = store => ({
    * @param {Array<Object>} path
    * @param {Array<Object>} automation
    */
-  deleteBranch: async (path, automation) => {
+  deleteBranch: async (path: Array<any>, automation: Automation) => {
     let newAutomation = cloneDeep(automation)
-    let cache = []
+    let cache: any = []
 
     path.forEach((path, pathIdx, array) => {
       const { stepIdx, branchIdx } = path
@@ -1255,15 +1225,14 @@ const automationActions = store => ({
     }
   },
 
-  saveAutomationName: async (blockId, name) => {
-    const automation = get(selectedAutomation).data
+  saveAutomationName: async (blockId: string, name: string) => {
+    const automation = get(selectedAutomation)?.data
     let newAutomation = cloneDeep(automation)
     if (!newAutomation) {
       return
     }
 
     const newName = name.trim()
-
     newAutomation.definition.stepNames = {
       ...newAutomation.definition.stepNames,
       [blockId]: newName,
@@ -1271,13 +1240,14 @@ const automationActions = store => ({
 
     await store.actions.save(newAutomation)
   },
-  deleteAutomationName: async blockId => {
-    const automation = get(selectedAutomation).data
+
+  deleteAutomationName: async (blockId: string) => {
+    const automation = get(selectedAutomation)?.data
     let newAutomation = cloneDeep(automation)
-    if (!automation) {
+    if (!automation || !newAutomation) {
       return
     }
-    if (newAutomation.definition.stepNames) {
+    if (newAutomation?.definition.stepNames) {
       delete newAutomation.definition.stepNames[blockId]
     }
 
@@ -1290,8 +1260,11 @@ const automationActions = store => ({
    *
    * @param {Array<Object>} pathTo the path to the target node
    */
-  deleteAutomationBlock: async pathTo => {
+  deleteAutomationBlock: async (pathTo: Array<BranchPath>) => {
     const automation = get(selectedAutomation)?.data
+    if (!automation) {
+      return
+    }
 
     const { newAutomation } = store.actions.deleteBlock(pathTo, automation)
 
@@ -1303,83 +1276,240 @@ const automationActions = store => ({
     }
   },
 
-  replace: async (automationId, automation) => {
+  replace: (automationId: string, automation?: Automation) => {
     if (!automation) {
-      store.update(state => {
-        // Remove the automation
+      store.store.update(state => {
         state.automations = state.automations.filter(
           x => x._id !== automationId
         )
-        // Select a new automation if required
         if (automationId === state.selectedAutomationId) {
-          store.actions.select(state.automations[0]?._id)
+          store.actions.select(state.automations[0]?._id || null)
         }
         return state
       })
     } else {
-      const index = get(store).automations.findIndex(
+      const index = get(store.store).automations.findIndex(
         x => x._id === automation._id
       )
       if (index === -1) {
-        // Automation addition
-        store.update(state => ({
+        store.store.update(state => ({
           ...state,
           automations: [...state.automations, automation],
         }))
       } else {
-        // Automation update
-        store.update(state => {
+        store.store.update(state => {
           state.automations[index] = automation
           return state
         })
       }
     }
   },
+
+  create: async (name: string, trigger: AutomationTrigger) => {
+    const automation: Automation = {
+      name,
+      type: "automation",
+      appId: get(appStore).appId,
+      definition: {
+        steps: [],
+        trigger,
+      },
+      disabled: false,
+    }
+    const response = await store.actions.save(automation)
+    return response
+  },
+
+  duplicate: async (automation: Automation) => {
+    const response = await store.actions.save({
+      ...automation,
+      name: `${automation.name} - copy`,
+      _id: undefined,
+      _rev: undefined,
+    })
+    return response
+  },
+
+  toggleDisabled: async (automationId: string) => {
+    let automation: Automation | undefined
+    try {
+      automation = store.actions.getDefinition(automationId)
+      if (!automation) {
+        return
+      }
+      automation.disabled = !automation.disabled
+      await store.actions.save(automation)
+      notifications.success(
+        `Automation ${
+          automation.disabled ? "disabled" : "enabled"
+        } successfully`
+      )
+    } catch (error) {
+      notifications.error(
+        `Error ${automation?.disabled ? "disabling" : "enabling"} automation`
+      )
+    }
+  },
+
+  definitions: async () => {
+    const response = await API.getAutomationDefinitions()
+    store.update(state => {
+      state.blockDefinitions = getFinalDefinitions(
+        response.trigger,
+        response.action
+      )
+      return state
+    })
+    return response
+  },
+
+  fetch: async () => {
+    const [automationResponse, definitions] = await Promise.all([
+      API.getAutomations(),
+      API.getAutomationDefinitions(),
+    ])
+    store.update(state => {
+      state.automations = automationResponse.automations
+      state.automations.sort((a, b) => {
+        return a.name < b.name ? -1 : 1
+      })
+      state.blockDefinitions = getFinalDefinitions(
+        definitions.trigger,
+        definitions.action
+      )
+      return state
+    })
+  },
+
+  select: (id: string | null) => {
+    if (!id || id === get(store).selectedAutomationId) {
+      return
+    }
+    store.update(state => {
+      state.selectedAutomationId = id
+      state.testResults = null
+      state.showTestPanel = false
+      return state
+    })
+  },
+
+  getDefinition: (id: string): Automation | undefined => {
+    return get(store.store).automations?.find(x => x._id === id)
+  },
+
+  save: async (automation: Automation) => {
+    const response = await API.updateAutomation(automation)
+    await store.actions.fetch()
+    store.actions.select(response.automation._id!)
+    return response.automation
+  },
+
+  delete: async (automation: Automation) => {
+    const isRowAction = sdk.automations.isRowAction(automation)
+    if (isRowAction) {
+      await rowActions.delete(
+        automation.definition.trigger.inputs.tableId,
+        automation.definition.trigger.inputs.rowActionId
+      )
+    } else {
+      await API.deleteAutomation(automation._id!, automation._rev!)
+    }
+
+    store.update(state => {
+      state.automations = state.automations.filter(
+        x => x._id !== automation._id
+      )
+      if (automation._id === state.selectedAutomationId) {
+        state.selectedAutomationId = state.automations[0]?._id || null
+      }
+      return state
+    })
+  },
 })
 
-const automations = createAutomationStore()
+class AutomationStore extends BudiStore<AutomationState> {
+  history: any
+  actions: ReturnType<typeof automationActions>
 
-export const automationStore = automations.store
-
-export const automationHistoryStore = automations.history
-
-// Derived automation state
-export const selectedAutomation = derived(automationStore, $automationStore => {
-  if (!$automationStore.selectedAutomationId) {
-    return null
-  }
-
-  const selected = $automationStore.automations?.find(
-    x => x._id === $automationStore.selectedAutomationId
-  )
-
-  // Traverse the entire tree and record all nodes found
-  // Also store any info relevant to the UX
-  const blockRefs = {}
-  automationStore.actions.traverse(blockRefs, selected)
-
-  // Parse the steps for references to sequential binding
-  // Replace all bindings with id based alternatives
-  const updatedAuto = cloneDeep(selected)
-  Object.values(blockRefs)
-    .filter(blockRef => {
-      // Pulls out all distinct terminating nodes
-      return blockRef.terminating
-    })
-    .forEach(blockRef => {
-      automationStore.actions
-        .getPathSteps(blockRef.pathTo, updatedAuto)
-        .forEach((step, idx, steps) => {
-          migrateReferencesInObject({
-            obj: step,
-            originalIndex: idx,
-            steps,
-          })
-        })
+  constructor() {
+    super(initialAutomationState)
+    this.actions = automationActions(this)
+    this.history = createHistoryStore({
+      getDoc: this.actions.getDefinition.bind(this),
+      selectDoc: this.actions.select.bind(this),
+      beforeAction: () => {},
+      afterAction: () => {},
     })
 
-  return {
-    data: updatedAuto,
-    blockRefs,
+    // Then wrap save and delete with history
+    const originalSave = this.actions.save.bind(this.actions)
+    const originalDelete = this.actions.delete.bind(this.actions)
+    this.actions.save = this.history.wrapSaveDoc(originalSave)
+    this.actions.delete = this.history.wrapDeleteDoc(originalDelete)
   }
-})
+}
+
+export const automationStore = new AutomationStore()
+export const automationHistoryStore = automationStore.history
+
+export class SelectedAutomationStore extends DerivedBudiStore<
+  AutomationState,
+  DerivedAutomationState
+> {
+  constructor(automationStore: AutomationStore) {
+    const makeDerivedStore = () => {
+      return derived(automationStore, $store => {
+        if (!$store.selectedAutomationId) {
+          return {
+            data: null,
+            blockRefs: {},
+            ...$store,
+          }
+        }
+
+        const selected = $store.automations?.find(
+          x => x._id === $store.selectedAutomationId
+        )
+
+        if (!selected) {
+          return {
+            data: null,
+            blockRefs: {},
+            ...$store,
+          }
+        }
+
+        const blockRefs: Record<string, any> = {}
+        const updatedAuto = cloneDeep(selected)
+
+        // Only traverse if we have a valid automation
+        if (updatedAuto) {
+          automationStore.actions.traverse(blockRefs, updatedAuto)
+
+          Object.values(blockRefs)
+            .filter(blockRef => blockRef.terminating)
+            .forEach(blockRef => {
+              automationStore.actions
+                .getPathSteps(blockRef.pathTo, updatedAuto)
+                .forEach((step, idx, steps) => {
+                  migrateReferencesInObject({
+                    obj: step,
+                    originalIndex: idx,
+                    steps,
+                  })
+                })
+            })
+        }
+
+        return {
+          data: updatedAuto,
+          blockRefs,
+          ...$store,
+        }
+      })
+    }
+
+    super(initialAutomationState, makeDerivedStore)
+  }
+}
+export const selectedAutomation = new SelectedAutomationStore(automationStore)
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.ts
similarity index 70%
rename from packages/builder/src/stores/builder/builder.js
rename to packages/builder/src/stores/builder/builder.ts
index d002062da9..e4cbbba7f1 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.ts
@@ -1,10 +1,28 @@
 import { get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
+import { Socket } from "socket.io-client"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import BudiStore from "../BudiStore.js"
-import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
+import { BudiStore } from "../BudiStore.js"
+import { TOUR_KEYS } from "@/components/portal/onboarding/tours.js"
+import { App } from "@budibase/types"
 
-export const INITIAL_BUILDER_STATE = {
+interface BuilderState {
+  previousTopNavPath: Record<string, string>
+  highlightedSetting: {
+    key: string
+    type: "info" | string
+  } | null
+  propertyFocus: string | null
+  builderSidePanel: boolean
+  onboarding: boolean
+  tourNodes: Record<string, HTMLElement> | null
+  tourKey: string | null
+  tourStepKey: string | null
+  hoveredComponentId: string | null
+  websocket?: Socket
+}
+
+export const INITIAL_BUILDER_STATE: BuilderState = {
   previousTopNavPath: {},
   highlightedSetting: null,
   propertyFocus: null,
@@ -16,7 +34,9 @@ export const INITIAL_BUILDER_STATE = {
   hoveredComponentId: null,
 }
 
-export class BuilderStore extends BudiStore {
+export class BuilderStore extends BudiStore<BuilderState> {
+  websocket?: Socket
+
   constructor() {
     super({ ...INITIAL_BUILDER_STATE })
 
@@ -32,11 +52,9 @@ export class BuilderStore extends BudiStore {
     this.registerTourNode = this.registerTourNode.bind(this)
     this.destroyTourNode = this.destroyTourNode.bind(this)
     this.startBuilderOnboarding = this.startBuilderOnboarding.bind(this)
-
-    this.websocket
   }
 
-  init(app) {
+  init(app: App) {
     if (!app?.appId) {
       console.error("BuilderStore: No appId supplied for websocket")
       return
@@ -47,23 +65,24 @@ export class BuilderStore extends BudiStore {
   }
 
   refresh() {
-    this.store.set(this.store.get())
+    const currentState = get(this.store)
+    this.store.set(currentState)
   }
 
   reset() {
     this.store.set({ ...INITIAL_BUILDER_STATE })
     this.websocket?.disconnect()
-    this.websocket = null
+    this.websocket = undefined
   }
 
-  highlightSetting(key, type) {
+  highlightSetting(key?: string, type?: string) {
     this.update(state => ({
       ...state,
       highlightedSetting: key ? { key, type: type || "info" } : null,
     }))
   }
 
-  propertyFocus(key) {
+  propertyFocus(key: string | null) {
     this.update(state => ({
       ...state,
       propertyFocus: key,
@@ -84,7 +103,7 @@ export class BuilderStore extends BudiStore {
     }))
   }
 
-  setPreviousTopNavPath(route, url) {
+  setPreviousTopNavPath(route: string, url: string) {
     this.update(state => ({
       ...state,
       previousTopNavPath: {
@@ -94,13 +113,13 @@ export class BuilderStore extends BudiStore {
     }))
   }
 
-  selectResource(id) {
-    this.websocket.emit(BuilderSocketEvent.SelectResource, {
+  selectResource(id: string) {
+    this.websocket?.emit(BuilderSocketEvent.SelectResource, {
       resourceId: id,
     })
   }
 
-  registerTourNode(tourStepKey, node) {
+  registerTourNode(tourStepKey: string, node: HTMLElement) {
     this.update(state => {
       const update = {
         ...state,
@@ -113,7 +132,7 @@ export class BuilderStore extends BudiStore {
     })
   }
 
-  destroyTourNode(tourStepKey) {
+  destroyTourNode(tourStepKey: string) {
     const store = get(this.store)
     if (store.tourNodes?.[tourStepKey]) {
       const nodes = { ...store.tourNodes }
@@ -140,12 +159,12 @@ export class BuilderStore extends BudiStore {
     }))
   }
 
-  setTour(tourKey) {
+  setTour(tourKey?: string | null) {
     this.update(state => ({
       ...state,
       tourStepKey: null,
       tourNodes: null,
-      tourKey: tourKey,
+      tourKey: tourKey || null,
     }))
   }
 }
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js
deleted file mode 100644
index a8e09a2051..0000000000
--- a/packages/builder/src/stores/builder/componentTreeNodes.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { get } from "svelte/store"
-import { createSessionStorageStore } from "@budibase/frontend-core"
-import { selectedScreen as selectedScreenStore } from "./screens"
-import { findComponentPath } from "helpers/components"
-
-const baseStore = createSessionStorageStore("openNodes", {})
-
-const toggleNode = componentId => {
-  baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = !openNodes[`nodeOpen-${componentId}`]
-
-    return openNodes
-  })
-}
-
-const expandNodes = componentIds => {
-  baseStore.update(openNodes => {
-    const newNodes = Object.fromEntries(
-      componentIds.map(id => [`nodeOpen-${id}`, true])
-    )
-
-    return { ...openNodes, ...newNodes }
-  })
-}
-
-const collapseNodes = componentIds => {
-  baseStore.update(openNodes => {
-    const newNodes = Object.fromEntries(
-      componentIds.map(id => [`nodeOpen-${id}`, false])
-    )
-
-    return { ...openNodes, ...newNodes }
-  })
-}
-
-// Will ensure all parents of a node are expanded so that it is visible in the tree
-const makeNodeVisible = componentId => {
-  const selectedScreen = get(selectedScreenStore)
-
-  const path = findComponentPath(selectedScreen.props, componentId)
-
-  const componentIds = path.map(component => component._id)
-
-  baseStore.update(openNodes => {
-    const newNodes = Object.fromEntries(
-      componentIds.map(id => [`nodeOpen-${id}`, true])
-    )
-
-    return { ...openNodes, ...newNodes }
-  })
-}
-
-const isNodeExpanded = componentId => {
-  const openNodes = get(baseStore)
-  return !!openNodes[`nodeOpen-${componentId}`]
-}
-
-const store = {
-  subscribe: baseStore.subscribe,
-  toggleNode,
-  expandNodes,
-  makeNodeVisible,
-  collapseNodes,
-  isNodeExpanded,
-}
-
-export default store
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts
new file mode 100644
index 0000000000..420c540e37
--- /dev/null
+++ b/packages/builder/src/stores/builder/componentTreeNodes.ts
@@ -0,0 +1,73 @@
+import { get } from "svelte/store"
+import { selectedScreen as selectedScreenStore } from "./screens"
+import { findComponentPath } from "@/helpers/components"
+import { Screen, Component } from "@budibase/types"
+import { BudiStore, PersistenceType } from "@/stores/BudiStore"
+
+interface OpenNodesState {
+  [key: string]: boolean
+}
+
+export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
+  constructor() {
+    super({} as OpenNodesState, {
+      persistence: {
+        type: PersistenceType.SESSION,
+        key: "openNodes",
+      },
+    })
+  }
+
+  toggleNode(componentId: string) {
+    this.update((openNodes: OpenNodesState) => {
+      openNodes[`nodeOpen-${componentId}`] =
+        !openNodes[`nodeOpen-${componentId}`]
+
+      return openNodes
+    })
+  }
+
+  expandNodes(componentIds: string[]) {
+    this.update((openNodes: OpenNodesState) => {
+      const newNodes = Object.fromEntries(
+        componentIds.map(id => [`nodeOpen-${id}`, true])
+      )
+
+      return { ...openNodes, ...newNodes }
+    })
+  }
+
+  collapseNodes(componentIds: string[]) {
+    this.update((openNodes: OpenNodesState) => {
+      const newNodes = Object.fromEntries(
+        componentIds.map(id => [`nodeOpen-${id}`, false])
+      )
+
+      return { ...openNodes, ...newNodes }
+    })
+  }
+
+  // Will ensure all parents of a node are expanded so that it is visible in the tree
+  makeNodeVisible(componentId: string) {
+    const selectedScreen: Screen = get(selectedScreenStore)
+
+    const path = findComponentPath(selectedScreen.props, componentId)
+
+    const componentIds = path.map((component: Component) => component._id)
+
+    this.update((openNodes: OpenNodesState) => {
+      const newNodes = Object.fromEntries(
+        componentIds.map((id: string) => [`nodeOpen-${id}`, true])
+      )
+
+      return { ...openNodes, ...newNodes }
+    })
+  }
+
+  isNodeExpanded(componentId: string): boolean {
+    const openNodes = get(this)
+    return !!openNodes[`nodeOpen-${componentId}`]
+  }
+}
+
+export default new ComponentTreeNodesStore()
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.ts
similarity index 83%
rename from packages/builder/src/stores/builder/components.js
rename to packages/builder/src/stores/builder/components.ts
index faa6a086ca..9ad9a75f84 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.ts
@@ -1,8 +1,8 @@
 import { get, derived } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { API } from "api"
+import { API } from "@/api"
 import { Helpers } from "@budibase/bbui"
-import analytics, { Events } from "analytics"
+import analytics, { Events } from "@/analytics"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import {
   findComponentPath,
@@ -11,8 +11,8 @@ import {
   findComponentParent,
   findAllMatchingComponents,
   makeComponentUnique,
-} from "helpers/components"
-import { getComponentFieldOptions } from "helpers/formFields"
+} from "@/helpers/components"
+import { getComponentFieldOptions } from "@/helpers/formFields"
 import { selectedScreen } from "./screens"
 import {
   screenStore,
@@ -20,20 +20,50 @@ import {
   previewStore,
   tables,
   componentTreeNodesStore,
-} from "stores/builder"
-import { buildFormSchema, getSchemaForDatasource } from "dataBinding"
+} from "@/stores/builder"
+import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
   BUDIBASE_INTERNAL_DB_ID,
   DEFAULT_BB_DATASOURCE_ID,
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
-} from "constants/backend"
-import BudiStore from "../BudiStore"
+} from "@/constants/backend"
+import { BudiStore } from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
-import { FieldType } from "@budibase/types"
+import { Component, FieldType, Screen, Table } from "@budibase/types"
 import { utils } from "@budibase/shared-core"
 
-export const INITIAL_COMPONENTS_STATE = {
+interface ComponentDefinition {
+  component: string
+  name: string
+  friendlyName?: string
+  hasChildren?: boolean
+  settings?: ComponentSetting[]
+  features?: Record<string, boolean>
+  typeSupportPresets?: Record<string, any>
+}
+
+interface ComponentSetting {
+  key: string
+  type: string
+  section?: string
+  name?: string
+  defaultValue?: any
+  selectAllFields?: boolean
+  resetOn?: string | string[]
+  settings?: ComponentSetting[]
+}
+
+interface ComponentState {
+  components: Record<string, ComponentDefinition>
+  customComponents: string[]
+  selectedComponentId: string | null
+  componentToPaste?: Component | null
+  settingsCache: Record<string, ComponentSetting[]>
+  selectedScreenId?: string | null
+}
+
+export const INITIAL_COMPONENTS_STATE: ComponentState = {
   components: {},
   customComponents: [],
   selectedComponentId: null,
@@ -41,7 +71,7 @@ export const INITIAL_COMPONENTS_STATE = {
   settingsCache: {},
 }
 
-export class ComponentStore extends BudiStore {
+export class ComponentStore extends BudiStore<ComponentState> {
   constructor() {
     super(INITIAL_COMPONENTS_STATE)
 
@@ -89,14 +119,14 @@ export class ComponentStore extends BudiStore {
    * @param {string} appId
    * @returns
    */
-  async refreshDefinitions(appId) {
+  async refreshDefinitions(appId: string) {
     if (!appId) {
       return
     }
 
     // Fetch definitions and filter out custom component definitions so we
     // can flag them
-    const components = await API.fetchComponentLibDefinitions(appId)
+    const components: any = await API.fetchComponentLibDefinitions(appId)
     const customComponents = Object.keys(components).filter(key =>
       key.startsWith("plugin/")
     )
@@ -122,7 +152,7 @@ export class ComponentStore extends BudiStore {
    * '@budibase/standard-components/container'
    * @returns {object}
    */
-  getDefinition(componentType) {
+  getDefinition(componentType: string) {
     if (!componentType) {
       return null
     }
@@ -169,7 +199,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} enrichedComponent
    * @returns {object} migrated Component
    */
-  migrateSettings(enrichedComponent) {
+  migrateSettings(enrichedComponent: Component) {
     const componentPrefix = "@budibase/standard-components"
     let migrated = false
 
@@ -224,7 +254,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} opts
    * @returns
    */
-  enrichEmptySettings(component, opts) {
+  enrichEmptySettings(component: Component, opts: any) {
     if (!component?._component) {
       return
     }
@@ -235,7 +265,7 @@ export class ComponentStore extends BudiStore {
     if (!screen) {
       return
     }
-    settings.forEach(setting => {
+    settings.forEach((setting: ComponentSetting) => {
       const value = component[setting.key]
 
       // Fill empty settings
@@ -257,7 +287,7 @@ export class ComponentStore extends BudiStore {
         } else if (setting.type === "dataProvider") {
           // Pick closest data provider where required
           const path = findComponentPath(screen.props, treeId)
-          const providers = path.filter(component =>
+          const providers = path.filter((component: Component) =>
             component._component?.endsWith("/dataprovider")
           )
           if (providers.length) {
@@ -278,7 +308,8 @@ export class ComponentStore extends BudiStore {
           const form = findClosestMatchingComponent(
             screen.props,
             treeId,
-            x => x._component === "@budibase/standard-components/form"
+            (x: Component) =>
+              x._component === "@budibase/standard-components/form"
           )
           const usedFields = Object.keys(buildFormSchema(form) || {})
 
@@ -302,7 +333,8 @@ export class ComponentStore extends BudiStore {
           // Validate data provider exists, or else clear it
           const providers = findAllMatchingComponents(
             screen?.props,
-            x => x._component === "@budibase/standard-components/dataprovider"
+            (x: Component) =>
+              x._component === "@budibase/standard-components/dataprovider"
           )
           const valid = providers?.some(dp => value.includes?.(dp._id))
           if (!valid) {
@@ -325,10 +357,14 @@ export class ComponentStore extends BudiStore {
       if (cardKeys.every(key => !component[key]) && !component.cardImageURL) {
         const { _id, dataSource } = component
         if (dataSource) {
-          const { schema, table } = getSchemaForDatasource(screen, dataSource)
+          const {
+            schema,
+            table,
+          }: { schema: Record<string, any>; table: Table } =
+            getSchemaForDatasource(screen, dataSource, {})
 
           // Finds fields by types from the schema of the configured datasource
-          const findFieldTypes = fieldTypes => {
+          const findFieldTypes = (fieldTypes: any) => {
             if (!Array.isArray(fieldTypes)) {
               fieldTypes = [fieldTypes]
             }
@@ -345,7 +381,11 @@ export class ComponentStore extends BudiStore {
           }
 
           // Inserts a card binding for a certain setting
-          const addBinding = (key, fallback, ...parts) => {
+          const addBinding = (
+            key: string,
+            fallback: string | null,
+            ...parts: any[]
+          ) => {
             if (parts.some(x => x == null)) {
               component[key] = fallback
             } else {
@@ -363,7 +403,7 @@ export class ComponentStore extends BudiStore {
             ...findFieldTypes(FieldType.NUMBER),
           ]
           const longFields = findFieldTypes(FieldType.LONGFORM)
-          if (schema?.[table?.primaryDisplay]) {
+          if (table?.primaryDisplay && schema?.[table.primaryDisplay]) {
             shortFields.unshift(table.primaryDisplay)
           }
 
@@ -399,7 +439,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} parent
    * @returns
    */
-  createInstance(componentName, presetProps, parent) {
+  createInstance(componentName: string, presetProps: any, parent: any) {
     const definition = this.getDefinition(componentName)
     if (!definition) {
       return null
@@ -433,7 +473,7 @@ export class ComponentStore extends BudiStore {
     }
 
     // Custom post processing for creation only
-    let extras = {}
+    let extras: any = {}
     if (definition.hasChildren) {
       extras._children = []
     }
@@ -443,10 +483,11 @@ export class ComponentStore extends BudiStore {
       const parentForm = findClosestMatchingComponent(
         get(selectedScreen).props,
         get(selectedComponent)._id,
-        component => component._component.endsWith("/form")
+        (component: Component) => component._component.endsWith("/form")
       )
-      const formSteps = findAllMatchingComponents(parentForm, component =>
-        component._component.endsWith("/formstep")
+      const formSteps = findAllMatchingComponents(
+        parentForm,
+        (component: Component) => component._component.endsWith("/formstep")
       )
       extras.step = formSteps.length + 1
       extras._instanceName = `Step ${formSteps.length + 1}`
@@ -466,7 +507,12 @@ export class ComponentStore extends BudiStore {
    * @param {number} index
    * @returns
    */
-  async create(componentName, presetProps, parent, index) {
+  async create(
+    componentName: string,
+    presetProps: any,
+    parent: any,
+    index: number
+  ) {
     const state = get(this.store)
     const componentInstance = this.createInstance(
       componentName,
@@ -479,23 +525,23 @@ export class ComponentStore extends BudiStore {
 
     // Insert in position if specified
     if (parent && index != null) {
-      await screenStore.patch(screen => {
+      await screenStore.patch((screen: Screen) => {
         let parentComponent = findComponent(screen.props, parent)
         if (!parentComponent._children?.length) {
           parentComponent._children = [componentInstance]
         } else {
           parentComponent._children.splice(index, 0, componentInstance)
         }
-      })
+      }, null)
     }
 
     // Otherwise we work out where this component should be inserted
     else {
-      await screenStore.patch(screen => {
+      await screenStore.patch((screen: Screen) => {
         // Find the selected component
         let selectedComponentId = state.selectedComponentId
-        if (selectedComponentId.startsWith(`${screen._id}-`)) {
-          selectedComponentId = screen?.props._id
+        if (selectedComponentId?.startsWith(`${screen._id}-`)) {
+          selectedComponentId = screen.props._id || null
         }
         const currentComponent = findComponent(
           screen.props,
@@ -533,7 +579,7 @@ export class ComponentStore extends BudiStore {
           parentComponent._children = []
         }
         parentComponent._children.push(componentInstance)
-      })
+      }, null)
     }
 
     // Select new component
@@ -559,18 +605,22 @@ export class ComponentStore extends BudiStore {
    * @param {string} screenId
    * @returns
    */
-  async patch(patchFn, componentId, screenId) {
+  async patch(
+    patchFn: (component: Component, screen: Screen) => any,
+    componentId?: string,
+    screenId?: string
+  ) {
     // Use selected component by default
     if (!componentId || !screenId) {
       const state = get(this.store)
-      componentId = componentId || state.selectedComponentId
+      componentId = componentId ?? state.selectedComponentId ?? undefined
       const screenState = get(screenStore)
       screenId = screenId || screenState.selectedScreenId
     }
     if (!componentId || !screenId || !patchFn) {
       return
     }
-    const patchScreen = screen => {
+    const patchScreen = (screen: Screen) => {
       let component = findComponent(screen.props, componentId)
       if (!component) {
         return false
@@ -594,7 +644,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} component
    * @returns
    */
-  async delete(component) {
+  async delete(component: Component) {
     if (!component) {
       return
     }
@@ -602,7 +652,7 @@ export class ComponentStore extends BudiStore {
     // Determine the next component to select, and select it before deletion
     // to avoid an intermediate state of no component selection
     const state = get(this.store)
-    let nextId
+    let nextId: string | null = ""
     if (state.selectedComponentId === component._id) {
       nextId = this.getNext()
       if (!nextId) {
@@ -621,7 +671,7 @@ export class ComponentStore extends BudiStore {
     }
 
     // Patch screen
-    await screenStore.patch(screen => {
+    await screenStore.patch((screen: Screen) => {
       // Check component exists
       component = findComponent(screen.props, component._id)
       if (!component) {
@@ -634,12 +684,12 @@ export class ComponentStore extends BudiStore {
         return false
       }
       parent._children = parent._children.filter(
-        child => child._id !== component._id
+        (child: Component) => child._id !== component._id
       )
-    })
+    }, null)
   }
 
-  copy(component, cut = false, selectParent = true) {
+  copy(component: Component, cut = false, selectParent = true) {
     // Update store with copied component
     this.update(state => {
       state.componentToPaste = cloneDeep(component)
@@ -665,7 +715,7 @@ export class ComponentStore extends BudiStore {
    *
    * @param {string} componentId
    */
-  select(componentId) {
+  select(componentId: string) {
     this.update(state => {
       state.selectedComponentId = componentId
       return state
@@ -679,12 +729,17 @@ export class ComponentStore extends BudiStore {
    * @param {object} targetScreen
    * @returns
    */
-  async paste(targetComponent, mode, targetScreen, selectComponent = true) {
+  async paste(
+    targetComponent: Component,
+    mode: string,
+    targetScreen: Screen,
+    selectComponent = true
+  ) {
     const state = get(this.store)
     if (!state.componentToPaste) {
       return
     }
-    let newComponentId
+    let newComponentId: string | null = ""
 
     // Remove copied component if cutting, regardless if pasting works
     let componentToPaste = cloneDeep(state.componentToPaste)
@@ -696,7 +751,7 @@ export class ComponentStore extends BudiStore {
     }
 
     // Patch screen
-    const patch = screen => {
+    const patch = (screen: Screen) => {
       // Get up to date ref to target
       targetComponent = findComponent(screen.props, targetComponent._id)
       if (!targetComponent) {
@@ -712,7 +767,7 @@ export class ComponentStore extends BudiStore {
       if (!cut) {
         componentToPaste = makeComponentUnique(componentToPaste)
       }
-      newComponentId = componentToPaste._id
+      newComponentId = componentToPaste._id!
 
       // Strip grid position metadata if pasting into a new screen, but keep
       // alignment metadata
@@ -732,7 +787,7 @@ export class ComponentStore extends BudiStore {
         const parent = findComponentParent(screen.props, originalId)
         if (parent?._children) {
           parent._children = parent._children.filter(
-            component => component._id !== originalId
+            (component: Component) => component._id !== originalId
           )
         }
       }
@@ -740,7 +795,7 @@ export class ComponentStore extends BudiStore {
       // Check inside is valid
       if (mode === "inside") {
         const definition = this.getDefinition(targetComponent._component)
-        if (!definition.hasChildren) {
+        if (!definition?.hasChildren) {
           mode = "below"
         }
       }
@@ -758,14 +813,16 @@ export class ComponentStore extends BudiStore {
         if (!parent?._children) {
           return false
         }
-        const targetIndex = parent._children.findIndex(component => {
-          return component._id === targetComponent._id
-        })
+        const targetIndex = parent._children.findIndex(
+          (component: Component) => {
+            return component._id === targetComponent._id
+          }
+        )
         const index = mode === "above" ? targetIndex : targetIndex + 1
         parent._children.splice(index, 0, componentToPaste)
       }
     }
-    const targetScreenId = targetScreen?._id || state.selectedScreenId
+    const targetScreenId = targetScreen?._id ?? state.selectedScreenId ?? null
     await screenStore.patch(patch, targetScreenId)
 
     // Select the new component
@@ -785,7 +842,9 @@ export class ComponentStore extends BudiStore {
     const componentId = state.selectedComponentId
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
-    const index = parent?._children.findIndex(x => x._id === componentId)
+    const index = parent?._children.findIndex(
+      (x: Component) => x._id === componentId
+    )
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -832,7 +891,9 @@ export class ComponentStore extends BudiStore {
     const componentId = component?._id
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
-    const index = parent?._children.findIndex(x => x._id === componentId)
+    const index = parent?._children.findIndex(
+      (x: Component) => x._id === componentId
+    )
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -862,7 +923,7 @@ export class ComponentStore extends BudiStore {
     let target = parent
     let targetParent = findComponentParent(screen.props, target._id)
     let targetIndex = targetParent?._children.findIndex(
-      child => child._id === target._id
+      (child: Component) => child._id === target._id
     )
     while (
       targetParent != null &&
@@ -871,7 +932,7 @@ export class ComponentStore extends BudiStore {
       target = targetParent
       targetParent = findComponentParent(screen.props, target._id)
       targetIndex = targetParent?._children.findIndex(
-        child => child._id === target._id
+        (child: Component) => child._id === target._id
       )
     }
     if (targetParent) {
@@ -901,13 +962,15 @@ export class ComponentStore extends BudiStore {
     }
   }
 
-  async moveUp(component) {
-    await screenStore.patch(screen => {
+  async moveUp(component: Component) {
+    await screenStore.patch((screen: Screen) => {
       const componentId = component?._id
       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)
+      const index = parent?._children.findIndex(
+        (x: Component) => x._id === componentId
+      )
       if (!parent || (index === 0 && parent._id === screen.props._id)) {
         return
       }
@@ -915,7 +978,7 @@ export class ComponentStore extends BudiStore {
       // Copy original component and remove it from the parent
       const originalComponent = cloneDeep(parent._children[index])
       parent._children = parent._children.filter(
-        component => component._id !== componentId
+        (component: Component) => component._id !== componentId
       )
 
       // If we have siblings above us, move up
@@ -925,7 +988,7 @@ export class ComponentStore extends BudiStore {
         const previousSibling = parent._children[index - 1]
         const definition = this.getDefinition(previousSibling._component)
         if (
-          definition.hasChildren &&
+          definition?.hasChildren &&
           componentTreeNodesStore.isNodeExpanded(previousSibling._id)
         ) {
           previousSibling._children.push(originalComponent)
@@ -942,15 +1005,15 @@ export class ComponentStore extends BudiStore {
       else if (parent._id !== screen.props._id) {
         const grandParent = findComponentParent(screen.props, parent._id)
         const parentIndex = grandParent._children.findIndex(
-          child => child._id === parent._id
+          (child: Component) => child._id === parent._id
         )
         grandParent._children.splice(parentIndex, 0, originalComponent)
       }
-    })
+    }, null)
   }
 
-  async moveDown(component) {
-    await screenStore.patch(screen => {
+  async moveDown(component: Component) {
+    await screenStore.patch((screen: Screen) => {
       const componentId = component?._id
       const parent = findComponentParent(screen.props, componentId)
 
@@ -960,7 +1023,9 @@ export class ComponentStore extends BudiStore {
       }
 
       // Check we aren't right at the bottom of the tree
-      const index = parent._children.findIndex(x => x._id === componentId)
+      const index = parent._children.findIndex(
+        (x: Component) => x._id === componentId
+      )
       if (
         index === parent._children.length - 1 &&
         parent._id === screen.props._id
@@ -971,7 +1036,7 @@ export class ComponentStore extends BudiStore {
       // Copy the original component and remove from parent
       const originalComponent = cloneDeep(parent._children[index])
       parent._children = parent._children.filter(
-        component => component._id !== componentId
+        (component: Component) => component._id !== componentId
       )
 
       // Move below the next sibling if we are not the last sibling
@@ -980,7 +1045,7 @@ export class ComponentStore extends BudiStore {
         const nextSibling = parent._children[index]
         const definition = this.getDefinition(nextSibling._component)
         if (
-          definition.hasChildren &&
+          definition?.hasChildren &&
           componentTreeNodesStore.isNodeExpanded(nextSibling._id)
         ) {
           nextSibling._children.splice(0, 0, originalComponent)
@@ -996,15 +1061,15 @@ export class ComponentStore extends BudiStore {
       else {
         const grandParent = findComponentParent(screen.props, parent._id)
         const parentIndex = grandParent._children.findIndex(
-          child => child._id === parent._id
+          (child: Component) => child._id === parent._id
         )
         grandParent._children.splice(parentIndex + 1, 0, originalComponent)
       }
-    })
+    }, null)
   }
 
-  async updateStyle(name, value) {
-    await this.patch(component => {
+  async updateStyle(name: string, value: string) {
+    await this.patch((component: Component) => {
       if (value == null || value === "") {
         delete component._styles.normal[name]
       } else {
@@ -1013,8 +1078,8 @@ export class ComponentStore extends BudiStore {
     })
   }
 
-  async updateStyles(styles, id) {
-    const patchFn = component => {
+  async updateStyles(styles: Record<string, string>, id: string) {
+    const patchFn = (component: Component) => {
       component._styles.normal = {
         ...component._styles.normal,
         ...styles,
@@ -1023,24 +1088,24 @@ export class ComponentStore extends BudiStore {
     await this.patch(patchFn, id)
   }
 
-  async updateCustomStyle(style) {
-    await this.patch(component => {
+  async updateCustomStyle(style: Record<string, string>) {
+    await this.patch((component: Component) => {
       component._styles.custom = style
     })
   }
 
-  async updateConditions(conditions) {
-    await this.patch(component => {
+  async updateConditions(conditions: Record<string, any>) {
+    await this.patch((component: Component) => {
       component._conditions = conditions
     })
   }
 
-  async updateSetting(name, value) {
+  async updateSetting(name: string, value: any) {
     await this.patch(this.updateComponentSetting(name, value))
   }
 
-  updateComponentSetting(name, value) {
-    return component => {
+  updateComponentSetting(name: string, value: any) {
+    return (component: Component) => {
       if (!name || !component) {
         return false
       }
@@ -1050,10 +1115,12 @@ export class ComponentStore extends BudiStore {
       }
 
       const settings = this.getComponentSettings(component._component)
-      const updatedSetting = settings.find(setting => setting.key === name)
+      const updatedSetting = settings.find(
+        (setting: ComponentSetting) => setting.key === name
+      )
 
       // Reset dependent fields
-      settings.forEach(setting => {
+      settings.forEach((setting: ComponentSetting) => {
         const needsReset =
           name === setting.resetOn ||
           (Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
@@ -1066,15 +1133,16 @@ export class ComponentStore extends BudiStore {
         updatedSetting?.type === "dataSource" ||
         updatedSetting?.type === "table"
       ) {
-        const { schema } = getSchemaForDatasource(null, value)
+        const { schema }: { schema: Record<string, any> } =
+          getSchemaForDatasource(null, value, null)
         const columnNames = Object.keys(schema || {})
         const multifieldKeysToSelectAll = settings
-          .filter(setting => {
+          .filter((setting: ComponentSetting) => {
             return setting.type === "multifield" && setting.selectAllFields
           })
-          .map(setting => setting.key)
+          .map((setting: ComponentSetting) => setting.key)
 
-        multifieldKeysToSelectAll.forEach(key => {
+        multifieldKeysToSelectAll.forEach((key: string) => {
           component[key] = columnNames
         })
       }
@@ -1083,14 +1151,14 @@ export class ComponentStore extends BudiStore {
     }
   }
 
-  requestEjectBlock(componentId) {
+  requestEjectBlock(componentId: string) {
     previewStore.sendEvent("eject-block", componentId)
   }
 
-  async handleEjectBlock(componentId, ejectedDefinition) {
-    let nextSelectedComponentId
+  async handleEjectBlock(componentId: string, ejectedDefinition: Component) {
+    let nextSelectedComponentId: string | null = null
 
-    await screenStore.patch(screen => {
+    await screenStore.patch((screen: Screen) => {
       const block = findComponent(screen.props, componentId)
       const parent = findComponentParent(screen.props, componentId)
 
@@ -1108,7 +1176,7 @@ export class ComponentStore extends BudiStore {
       // _containsSlot flag to know where to insert them
       const slotContainer = findAllMatchingComponents(
         ejectedDefinition,
-        x => x._containsSlot
+        (x: Component) => x._containsSlot
       )[0]
       if (slotContainer) {
         delete slotContainer._containsSlot
@@ -1120,10 +1188,12 @@ export class ComponentStore extends BudiStore {
 
       // Replace block with ejected definition
       ejectedDefinition = makeComponentUnique(ejectedDefinition)
-      const index = parent._children.findIndex(x => x._id === componentId)
+      const index = parent._children.findIndex(
+        (x: Component) => x._id === componentId
+      )
       parent._children[index] = ejectedDefinition
-      nextSelectedComponentId = ejectedDefinition._id
-    })
+      nextSelectedComponentId = ejectedDefinition._id ?? null
+    }, null)
 
     // Select new root component
     if (nextSelectedComponentId) {
@@ -1134,7 +1204,7 @@ export class ComponentStore extends BudiStore {
     }
   }
 
-  async addParent(componentId, parentType) {
+  async addParent(componentId: string, parentType: string) {
     if (!componentId || !parentType) {
       return
     }
@@ -1146,7 +1216,7 @@ export class ComponentStore extends BudiStore {
     }
 
     // Replace component with a version wrapped in a new parent
-    await screenStore.patch(screen => {
+    await screenStore.patch((screen: Screen) => {
       // Get this component definition and parent definition
       let definition = findComponent(screen.props, componentId)
       let oldParentDefinition = findComponentParent(screen.props, componentId)
@@ -1156,7 +1226,7 @@ export class ComponentStore extends BudiStore {
 
       // Replace component with parent
       const index = oldParentDefinition._children.findIndex(
-        component => component._id === componentId
+        (component: Component) => component._id === componentId
       )
       if (index === -1) {
         return false
@@ -1165,7 +1235,7 @@ export class ComponentStore extends BudiStore {
         ...newParentDefinition,
         _children: [definition],
       }
-    })
+    }, null)
 
     // Select the new parent
     this.update(state => {
@@ -1181,7 +1251,7 @@ export class ComponentStore extends BudiStore {
    * '@budibase/standard-components/container'
    * @returns {boolean}
    */
-  isCached(componentType) {
+  isCached(componentType: string) {
     const settings = get(this.store).settingsCache
     return componentType in settings
   }
@@ -1194,8 +1264,8 @@ export class ComponentStore extends BudiStore {
    * '@budibase/standard-components/container'
    * @returns {array} the settings
    */
-  cacheSettings(componentType, definition) {
-    let settings = []
+  cacheSettings(componentType: string, definition: ComponentDefinition | null) {
+    let settings: ComponentSetting[] = []
     if (definition) {
       settings = definition.settings?.filter(setting => !setting.section) ?? []
       definition.settings
@@ -1229,7 +1299,7 @@ export class ComponentStore extends BudiStore {
    * '@budibase/standard-components/container'
    * @returns {Array<object>}
    */
-  getComponentSettings(componentType) {
+  getComponentSettings(componentType: string) {
     if (!componentType) {
       return []
     }
diff --git a/packages/builder/src/stores/builder/contextMenu.js b/packages/builder/src/stores/builder/contextMenu.js
deleted file mode 100644
index 2b8808570e..0000000000
--- a/packages/builder/src/stores/builder/contextMenu.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { writable } from "svelte/store"
-
-export const INITIAL_CONTEXT_MENU_STATE = {
-  id: null,
-  items: [],
-  position: { x: 0, y: 0 },
-  visible: false,
-}
-
-export function createViewsStore() {
-  const store = writable({ ...INITIAL_CONTEXT_MENU_STATE })
-
-  const open = (id, items, position) => {
-    store.set({ id, items, position, visible: true })
-  }
-
-  const close = () => {
-    store.set({ ...INITIAL_CONTEXT_MENU_STATE })
-  }
-
-  return {
-    subscribe: store.subscribe,
-    open,
-    close,
-  }
-}
-
-export const contextMenuStore = createViewsStore()
diff --git a/packages/builder/src/stores/builder/contextMenu.ts b/packages/builder/src/stores/builder/contextMenu.ts
new file mode 100644
index 0000000000..dc205c7fea
--- /dev/null
+++ b/packages/builder/src/stores/builder/contextMenu.ts
@@ -0,0 +1,46 @@
+import { writable } from "svelte/store"
+
+interface Position {
+  x: number
+  y: number
+}
+
+interface MenuItem {
+  label: string
+  icon?: string
+  action: () => void
+}
+
+interface ContextMenuState {
+  id: string | null
+  items: MenuItem[]
+  position: Position
+  visible: boolean
+}
+
+export const INITIAL_CONTEXT_MENU_STATE: ContextMenuState = {
+  id: null,
+  items: [],
+  position: { x: 0, y: 0 },
+  visible: false,
+}
+
+export function createViewsStore() {
+  const store = writable<ContextMenuState>({ ...INITIAL_CONTEXT_MENU_STATE })
+
+  const open = (id: string, items: MenuItem[], position: Position): void => {
+    store.set({ id, items, position, visible: true })
+  }
+
+  const close = (): void => {
+    store.set({ ...INITIAL_CONTEXT_MENU_STATE })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    open,
+    close,
+  }
+}
+
+export const contextMenuStore = createViewsStore()
diff --git a/packages/builder/src/stores/builder/datasources.js b/packages/builder/src/stores/builder/datasources.js
deleted file mode 100644
index 6a2a026ae4..0000000000
--- a/packages/builder/src/stores/builder/datasources.js
+++ /dev/null
@@ -1,222 +0,0 @@
-import { writable, derived, get } from "svelte/store"
-import {
-  IntegrationTypes,
-  DEFAULT_BB_DATASOURCE_ID,
-  BUDIBASE_INTERNAL_DB_ID,
-} from "constants/backend"
-import { tables } from "./tables"
-import { queries } from "./queries"
-import { API } from "api"
-import { DatasourceFeature } from "@budibase/types"
-import { TableNames } from "constants"
-
-class TableImportError extends Error {
-  constructor(errors) {
-    super()
-    this.name = "TableImportError"
-    this.errors = errors
-  }
-
-  get description() {
-    let message = ""
-    for (const key in this.errors) {
-      message += `${key}: ${this.errors[key]}\n`
-    }
-    return message
-  }
-}
-
-export function createDatasourcesStore() {
-  const store = writable({
-    list: [],
-    selectedDatasourceId: null,
-  })
-
-  const derivedStore = derived([store, tables], ([$store, $tables]) => {
-    // Set the internal datasource entities from the table list, which we're
-    // able to keep updated unlike the egress generated definition of the
-    // internal datasource
-    let internalDS = $store.list?.find(ds => ds._id === BUDIBASE_INTERNAL_DB_ID)
-    let otherDS = $store.list?.filter(ds => ds._id !== BUDIBASE_INTERNAL_DB_ID)
-    if (internalDS) {
-      internalDS = {
-        ...internalDS,
-        entities: $tables.list?.filter(table => {
-          return (
-            table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
-            table._id !== TableNames.USERS
-          )
-        }),
-      }
-    }
-
-    // Build up enriched DS list
-    // Only add the internal DS if we have at least one non-users table
-    let list = []
-    if (internalDS?.entities?.length) {
-      list.push(internalDS)
-    }
-    list = list.concat(otherDS || [])
-
-    return {
-      ...$store,
-      list,
-      selected: list?.find(ds => ds._id === $store.selectedDatasourceId),
-      hasDefaultData: list?.some(ds => ds._id === DEFAULT_BB_DATASOURCE_ID),
-      hasData: list?.length > 0,
-    }
-  })
-
-  const fetch = async () => {
-    const datasources = await API.getDatasources()
-    store.update(state => ({
-      ...state,
-      list: datasources,
-    }))
-  }
-
-  const select = id => {
-    store.update(state => ({
-      ...state,
-      selectedDatasourceId: id,
-    }))
-  }
-
-  const updateDatasource = (response, { ignoreErrors } = {}) => {
-    const { datasource, errors } = response
-    if (!ignoreErrors && errors && Object.keys(errors).length > 0) {
-      throw new TableImportError(errors)
-    }
-    replaceDatasource(datasource._id, datasource)
-    select(datasource._id)
-    return datasource
-  }
-
-  const updateSchema = async (datasource, tablesFilter) => {
-    const response = await API.buildDatasourceSchema({
-      datasourceId: datasource?._id,
-      tablesFilter,
-    })
-    updateDatasource(response)
-  }
-
-  const sourceCount = source => {
-    return get(store).list.filter(datasource => datasource.source === source)
-      .length
-  }
-
-  const checkDatasourceValidity = async (integration, datasource) => {
-    if (integration.features?.[DatasourceFeature.CONNECTION_CHECKING]) {
-      const { connected, error } = await API.validateDatasource(datasource)
-      if (connected) {
-        return
-      }
-
-      throw new Error(`Unable to connect: ${error}`)
-    }
-  }
-
-  const create = async ({ integration, config }) => {
-    const count = sourceCount(integration.name)
-    const nameModifier = count === 0 ? "" : ` ${count + 1}`
-
-    const datasource = {
-      type: "datasource",
-      source: integration.name,
-      config,
-      name: `${integration.friendlyName}${nameModifier}`,
-      plus: integration.plus && integration.name !== IntegrationTypes.REST,
-      isSQL: integration.isSQL,
-    }
-
-    if (await checkDatasourceValidity(integration, datasource)) {
-      throw new Error("Unable to connect")
-    }
-
-    const response = await API.createDatasource({
-      datasource,
-      fetchSchema: integration.plus,
-    })
-
-    return updateDatasource(response, { ignoreErrors: true })
-  }
-
-  const update = async ({ integration, datasource }) => {
-    if (await checkDatasourceValidity(integration, datasource)) {
-      throw new Error("Unable to connect")
-    }
-
-    const response = await API.updateDatasource(datasource)
-
-    return updateDatasource(response)
-  }
-
-  const deleteDatasource = async datasource => {
-    if (!datasource?._id || !datasource?._rev) {
-      return
-    }
-    await API.deleteDatasource({
-      datasourceId: datasource._id,
-      datasourceRev: datasource._rev,
-    })
-    replaceDatasource(datasource._id, null)
-  }
-
-  const replaceDatasource = (datasourceId, datasource) => {
-    if (!datasourceId) {
-      return
-    }
-
-    // Handle deletion
-    if (!datasource) {
-      store.update(state => ({
-        ...state,
-        list: state.list.filter(x => x._id !== datasourceId),
-      }))
-      tables.removeDatasourceTables(datasourceId)
-      queries.removeDatasourceQueries(datasourceId)
-      return
-    }
-
-    // Add new datasource
-    const index = get(store).list.findIndex(x => x._id === datasource._id)
-    if (index === -1) {
-      store.update(state => ({
-        ...state,
-        list: [...state.list, datasource],
-      }))
-
-      // If this is a new datasource then we should refresh the tables list,
-      // because otherwise we'll never see the new tables
-      tables.fetch()
-    }
-
-    // Update existing datasource
-    else if (datasource) {
-      store.update(state => {
-        state.list[index] = datasource
-        return state
-      })
-    }
-  }
-
-  const getTableNames = async datasource => {
-    const info = await API.fetchInfoForDatasource(datasource)
-    return info.tableNames || []
-  }
-
-  return {
-    subscribe: derivedStore.subscribe,
-    fetch,
-    init: fetch,
-    select,
-    updateSchema,
-    create,
-    update,
-    delete: deleteDatasource,
-    replaceDatasource,
-    getTableNames,
-  }
-}
-
-export const datasources = createDatasourcesStore()
diff --git a/packages/builder/src/stores/builder/datasources.ts b/packages/builder/src/stores/builder/datasources.ts
new file mode 100644
index 0000000000..6b00911830
--- /dev/null
+++ b/packages/builder/src/stores/builder/datasources.ts
@@ -0,0 +1,296 @@
+import { derived, get, Writable } from "svelte/store"
+import {
+  IntegrationTypes,
+  DEFAULT_BB_DATASOURCE_ID,
+  BUDIBASE_INTERNAL_DB_ID,
+} from "@/constants/backend"
+import { tables } from "./tables"
+import { queries } from "./queries"
+import { API } from "@/api"
+import {
+  DatasourceFeature,
+  Datasource,
+  Table,
+  Integration,
+  UIIntegration,
+  SourceName,
+} from "@budibase/types"
+import { TableNames } from "@/constants"
+import { DerivedBudiStore } from "@/stores/BudiStore"
+
+// when building the internal DS - seems to represent it slightly differently to the backend typing of a DS
+interface InternalDatasource extends Omit<Datasource, "entities"> {
+  entities: Table[]
+}
+
+class TableImportError extends Error {
+  errors: Record<string, string>
+
+  constructor(errors: Record<string, string>) {
+    super()
+    this.name = "TableImportError"
+    this.errors = errors
+  }
+
+  get description() {
+    let message = ""
+    for (const key in this.errors) {
+      message += `${key}: ${this.errors[key]}\n`
+    }
+    return message
+  }
+}
+
+// when building the internal DS - seems to represent it slightly differently to the backend typing of a DS
+interface InternalDatasource extends Omit<Datasource, "entities"> {
+  entities: Table[]
+}
+
+interface BuilderDatasourceStore {
+  rawList: Datasource[]
+  selectedDatasourceId: null | string
+}
+
+interface DerivedDatasourceStore extends BuilderDatasourceStore {
+  list: (Datasource | InternalDatasource)[]
+  selected?: Datasource | InternalDatasource
+  hasDefaultData: boolean
+  hasData: boolean
+}
+
+export class DatasourceStore extends DerivedBudiStore<
+  BuilderDatasourceStore,
+  DerivedDatasourceStore
+> {
+  constructor() {
+    const makeDerivedStore = (store: Writable<BuilderDatasourceStore>) => {
+      return derived([store, tables], ([$store, $tables]) => {
+        // Set the internal datasource entities from the table list, which we're
+        // able to keep updated unlike the egress generated definition of the
+        // internal datasource
+        let internalDS: Datasource | InternalDatasource | undefined =
+          $store.rawList?.find(ds => ds._id === BUDIBASE_INTERNAL_DB_ID)
+        let otherDS = $store.rawList?.filter(
+          ds => ds._id !== BUDIBASE_INTERNAL_DB_ID
+        )
+        if (internalDS) {
+          const tables: Table[] = $tables.list?.filter((table: Table) => {
+            return (
+              table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
+              table._id !== TableNames.USERS
+            )
+          })
+          internalDS = {
+            ...internalDS,
+            entities: tables,
+          }
+        }
+
+        // Build up enriched DS list
+        // Only add the internal DS if we have at least one non-users table
+        let list: (InternalDatasource | Datasource)[] = []
+        if (internalDS?.entities?.length) {
+          list.push(internalDS)
+        }
+        list = list.concat(otherDS || [])
+
+        return {
+          ...$store,
+          list,
+          selected: list?.find(ds => ds._id === $store.selectedDatasourceId),
+          hasDefaultData: list?.some(ds => ds._id === DEFAULT_BB_DATASOURCE_ID),
+          hasData: list?.length > 0,
+        }
+      })
+    }
+
+    super(
+      {
+        rawList: [],
+        selectedDatasourceId: null,
+      },
+      makeDerivedStore
+    )
+
+    this.fetch = this.fetch.bind(this)
+    this.init = this.fetch.bind(this)
+    this.select = this.select.bind(this)
+    this.updateSchema = this.updateSchema.bind(this)
+    this.create = this.create.bind(this)
+    this.delete = this.deleteDatasource.bind(this)
+    this.save = this.save.bind(this)
+    this.replaceDatasource = this.replaceDatasource.bind(this)
+    this.getTableNames = this.getTableNames.bind(this)
+  }
+
+  async fetch() {
+    const datasources = await API.getDatasources()
+    this.store.update(state => ({
+      ...state,
+      rawList: datasources,
+    }))
+  }
+
+  async init() {
+    return this.fetch()
+  }
+
+  select(id: string) {
+    this.store.update(state => ({
+      ...state,
+      selectedDatasourceId: id,
+    }))
+  }
+
+  private updateDatasourceInStore(
+    response: { datasource: Datasource; errors?: Record<string, string> },
+    { ignoreErrors }: { ignoreErrors?: boolean } = {}
+  ) {
+    const { datasource, errors } = response
+    if (!ignoreErrors && errors && Object.keys(errors).length > 0) {
+      throw new TableImportError(errors)
+    }
+    this.replaceDatasource(datasource._id!, datasource)
+    this.select(datasource._id!)
+    return datasource
+  }
+
+  async updateSchema(datasource: Datasource, tablesFilter: string[]) {
+    const response = await API.buildDatasourceSchema(
+      datasource?._id!,
+      tablesFilter
+    )
+    this.updateDatasourceInStore(response)
+  }
+
+  sourceCount(source: string) {
+    return get(this.store).rawList.filter(
+      datasource => datasource.source === source
+    ).length
+  }
+
+  async checkDatasourceValidity(
+    integration: Integration,
+    datasource: Datasource
+  ): Promise<{ valid: boolean; error?: string }> {
+    if (integration.features?.[DatasourceFeature.CONNECTION_CHECKING]) {
+      const { connected, error } = await API.validateDatasource(datasource)
+      if (connected) {
+        return { valid: true }
+      } else {
+        return { valid: false, error }
+      }
+    }
+    return { valid: true }
+  }
+
+  async create({
+    integration,
+    config,
+  }: {
+    integration: UIIntegration
+    config: Record<string, any>
+  }) {
+    const count = this.sourceCount(integration.name)
+    const nameModifier = count === 0 ? "" : ` ${count + 1}`
+
+    const datasource: Datasource = {
+      type: "datasource",
+      source: integration.name as SourceName,
+      config,
+      name: `${integration.friendlyName}${nameModifier}`,
+      plus: integration.plus && integration.name !== IntegrationTypes.REST,
+      isSQL: integration.isSQL,
+    }
+
+    const { valid, error } = await this.checkDatasourceValidity(
+      integration,
+      datasource
+    )
+    if (!valid) {
+      throw new Error(`Unable to connect - ${error}`)
+    }
+
+    const response = await API.createDatasource({
+      datasource,
+      fetchSchema: integration.plus,
+    })
+
+    return this.updateDatasourceInStore(response, { ignoreErrors: true })
+  }
+
+  async save({
+    integration,
+    datasource,
+  }: {
+    integration: Integration
+    datasource: Datasource
+  }) {
+    if (!(await this.checkDatasourceValidity(integration, datasource)).valid) {
+      throw new Error("Unable to connect")
+    }
+
+    const response = await API.updateDatasource(datasource)
+
+    return this.updateDatasourceInStore(response)
+  }
+
+  async deleteDatasource(datasource: Datasource) {
+    if (!datasource?._id || !datasource?._rev) {
+      return
+    }
+    await API.deleteDatasource(datasource._id, datasource._rev)
+    this.replaceDatasource(datasource._id)
+  }
+
+  async delete(datasource: Datasource) {
+    return this.deleteDatasource(datasource)
+  }
+
+  replaceDatasource(datasourceId: string, datasource?: Datasource) {
+    if (!datasourceId) {
+      return
+    }
+
+    // Handle deletion
+    if (!datasource) {
+      this.store.update(state => ({
+        ...state,
+        rawList: state.rawList.filter(x => x._id !== datasourceId),
+      }))
+      tables.removeDatasourceTables(datasourceId)
+      queries.removeDatasourceQueries(datasourceId)
+      return
+    }
+
+    // Add new datasource
+    const index = get(this.store).rawList.findIndex(
+      x => x._id === datasource._id
+    )
+    if (index === -1) {
+      this.store.update(state => ({
+        ...state,
+        rawList: [...state.rawList, datasource],
+      }))
+
+      // If this is a new datasource then we should refresh the tables list,
+      // because otherwise we'll never see the new tables
+      tables.fetch()
+    }
+
+    // Update existing datasource
+    else if (datasource) {
+      this.store.update(state => {
+        state.rawList[index] = datasource
+        return state
+      })
+    }
+  }
+
+  async getTableNames(datasource: Datasource) {
+    const info = await API.fetchInfoForDatasource(datasource)
+    return info.tableNames || []
+  }
+}
+
+export const datasources = new DatasourceStore()
diff --git a/packages/builder/src/stores/builder/deployments.js b/packages/builder/src/stores/builder/deployments.ts
similarity index 58%
rename from packages/builder/src/stores/builder/deployments.js
rename to packages/builder/src/stores/builder/deployments.ts
index dafdb1dabc..122ee43c20 100644
--- a/packages/builder/src/stores/builder/deployments.js
+++ b/packages/builder/src/stores/builder/deployments.ts
@@ -1,11 +1,12 @@
-import { writable } from "svelte/store"
-import { API } from "api"
+import { writable, type Writable } from "svelte/store"
+import { API } from "@/api"
 import { notifications } from "@budibase/bbui"
+import { DeploymentProgressResponse } from "@budibase/types"
 
 export const createDeploymentStore = () => {
-  let store = writable([])
+  let store: Writable<DeploymentProgressResponse[]> = writable([])
 
-  const load = async () => {
+  const load = async (): Promise<void> => {
     try {
       store.set(await API.getAppDeployments())
     } catch (err) {
diff --git a/packages/builder/src/stores/builder/flags.js b/packages/builder/src/stores/builder/flags.js
index 9f1652676c..21236ffb01 100644
--- a/packages/builder/src/stores/builder/flags.js
+++ b/packages/builder/src/stores/builder/flags.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 export function createFlagsStore() {
   const { subscribe, set } = writable({})
@@ -10,14 +10,11 @@ export function createFlagsStore() {
       set(flags)
     },
     updateFlag: async (flag, value) => {
-      await API.updateFlag({
-        flag,
-        value,
-      })
+      await API.updateFlag(flag, value)
       await actions.fetch()
     },
     toggleUiFeature: async feature => {
-      await API.toggleUiFeature({ value: feature })
+      await API.toggleUiFeature(feature)
     },
   }
 
diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js
index 98cdc9e416..e28c74eaf2 100644
--- a/packages/builder/src/stores/builder/hover.js
+++ b/packages/builder/src/stores/builder/hover.js
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
-import { previewStore } from "stores/builder"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
+import { previewStore } from "@/stores/builder"
 
 export const INITIAL_HOVER_STATE = {
   componentId: null,
diff --git a/packages/builder/src/stores/builder/integrations.js b/packages/builder/src/stores/builder/integrations.js
deleted file mode 100644
index 6ee58961c7..0000000000
--- a/packages/builder/src/stores/builder/integrations.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { writable } from "svelte/store"
-import { API } from "api"
-
-const createIntegrationsStore = () => {
-  const store = writable({})
-
-  const init = async () => {
-    const integrations = await API.getIntegrations()
-    store.set(integrations)
-  }
-
-  return {
-    ...store,
-    init,
-  }
-}
-
-export const integrations = createIntegrationsStore()
diff --git a/packages/builder/src/stores/builder/integrations.ts b/packages/builder/src/stores/builder/integrations.ts
new file mode 100644
index 0000000000..b48f45a654
--- /dev/null
+++ b/packages/builder/src/stores/builder/integrations.ts
@@ -0,0 +1,34 @@
+import { writable, type Writable } from "svelte/store"
+import { API } from "@/api"
+import { Integration } from "@budibase/types"
+
+type IntegrationsState = Record<string, Integration>
+
+const INITIAL_STATE: IntegrationsState = {}
+
+const createIntegrationsStore = () => {
+  const store: Writable<IntegrationsState> = writable(INITIAL_STATE)
+
+  const init = async () => {
+    const response = await API.getIntegrations()
+
+    // Filter out undefineds
+    const integrations = Object.entries(response).reduce(
+      (acc, [key, value]) => {
+        if (value) {
+          acc[key] = value
+        }
+        return acc
+      },
+      {} as IntegrationsState
+    )
+    store.set(integrations)
+  }
+
+  return {
+    ...store,
+    init,
+  }
+}
+
+export const integrations = createIntegrationsStore()
diff --git a/packages/builder/src/stores/builder/layouts.js b/packages/builder/src/stores/builder/layouts.js
index 30d6935b19..7617e203f0 100644
--- a/packages/builder/src/stores/builder/layouts.js
+++ b/packages/builder/src/stores/builder/layouts.js
@@ -1,7 +1,7 @@
 import { derived, get } from "svelte/store"
-import { componentStore } from "stores/builder"
-import BudiStore from "../BudiStore"
-import { API } from "api"
+import { componentStore } from "@/stores/builder"
+import { API } from "@/api"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_LAYOUT_STATE = {
   layouts: [],
@@ -59,10 +59,7 @@ export class LayoutStore extends BudiStore {
     if (!layout?._id) {
       return
     }
-    await API.deleteLayout({
-      layoutId: layout._id,
-      layoutRev: layout._rev,
-    })
+    await API.deleteLayout(layout._id, layout._rev)
     this.update(state => {
       state.layouts = state.layouts.filter(x => x._id !== layout._id)
       return state
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index 86e484b0a6..e9a5e6f9dd 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
-import { API } from "api"
-import { appStore } from "stores/builder"
-import BudiStore from "../BudiStore"
+import { API } from "@/api"
+import { appStore } from "@/stores/builder"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",
@@ -35,10 +35,7 @@ export class NavigationStore extends BudiStore {
 
   async save(navigation) {
     const appId = get(appStore).appId
-    const app = await API.saveAppMetadata({
-      appId,
-      metadata: { navigation },
-    })
+    const app = await API.saveAppMetadata(appId, { navigation })
     this.syncAppNavigation(app.navigation)
   }
 
diff --git a/packages/builder/src/stores/builder/permissions.js b/packages/builder/src/stores/builder/permissions.js
index 0113f221c0..a303cd713b 100644
--- a/packages/builder/src/stores/builder/permissions.js
+++ b/packages/builder/src/stores/builder/permissions.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 export function createPermissionStore() {
   const { subscribe } = writable([])
@@ -7,18 +7,10 @@ export function createPermissionStore() {
   return {
     subscribe,
     save: async ({ level, role, resource }) => {
-      return await API.updatePermissionForResource({
-        resourceId: resource,
-        roleId: role,
-        level,
-      })
+      return await API.updatePermissionForResource(resource, role, level)
     },
     remove: async ({ level, role, resource }) => {
-      return await API.removePermissionFromResource({
-        resourceId: resource,
-        roleId: role,
-        level,
-      })
+      return await API.removePermissionFromResource(resource, role, level)
     },
     forResource: async resourceId => {
       return (await API.getPermissionForResource(resourceId)).permissions
diff --git a/packages/builder/src/stores/builder/published.js b/packages/builder/src/stores/builder/published.js
index 6ae9392f40..a59352fb22 100644
--- a/packages/builder/src/stores/builder/published.js
+++ b/packages/builder/src/stores/builder/published.js
@@ -1,5 +1,5 @@
 import { appStore } from "./app"
-import { appsStore } from "stores/portal/apps"
+import { appsStore } from "@/stores/portal/apps"
 import { deploymentStore } from "./deployments"
 import { derived } from "svelte/store"
 
diff --git a/packages/builder/src/stores/builder/queries.js b/packages/builder/src/stores/builder/queries.js
index b717a17f97..7aeb9ff8fd 100644
--- a/packages/builder/src/stores/builder/queries.js
+++ b/packages/builder/src/stores/builder/queries.js
@@ -1,8 +1,8 @@
 import { writable, get, derived } from "svelte/store"
 import { datasources } from "./datasources"
 import { integrations } from "./integrations"
-import { API } from "api"
-import { duplicateName } from "helpers/duplicate"
+import { API } from "@/api"
+import { duplicateName } from "@/helpers/duplicate"
 
 const sortQueries = queryList => {
   queryList.sort((q1, q2) => {
@@ -62,10 +62,7 @@ export function createQueriesStore() {
   }
 
   const importQueries = async ({ data, datasourceId }) => {
-    return await API.importQueries({
-      datasourceId,
-      data,
-    })
+    return await API.importQueries(datasourceId, data)
   }
 
   const select = id => {
@@ -87,10 +84,7 @@ export function createQueriesStore() {
   }
 
   const deleteQuery = async query => {
-    await API.deleteQuery({
-      queryId: query?._id,
-      queryRev: query?._rev,
-    })
+    await API.deleteQuery(query._id, query._rev)
     store.update(state => {
       state.list = state.list.filter(existing => existing._id !== query._id)
       return state
diff --git a/packages/builder/src/stores/builder/roles.js b/packages/builder/src/stores/builder/roles.js
index fd3581f1d4..e718545f14 100644
--- a/packages/builder/src/stores/builder/roles.js
+++ b/packages/builder/src/stores/builder/roles.js
@@ -1,5 +1,5 @@
 import { derived, writable, get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { RoleUtils } from "@budibase/frontend-core"
 
 export function createRolesStore() {
@@ -43,10 +43,7 @@ export function createRolesStore() {
       setRoles(roles)
     },
     delete: async role => {
-      await API.deleteRole({
-        roleId: role?._id,
-        roleRev: role?._rev,
-      })
+      await API.deleteRole(role._id, role._rev)
       await actions.fetch()
     },
     save: async role => {
diff --git a/packages/builder/src/stores/builder/rowActions.js b/packages/builder/src/stores/builder/rowActions.js
index b1f4e7067f..9cc4063b91 100644
--- a/packages/builder/src/stores/builder/rowActions.js
+++ b/packages/builder/src/stores/builder/rowActions.js
@@ -1,10 +1,10 @@
 import { get, derived } from "svelte/store"
-import BudiStore from "stores/BudiStore"
+import { BudiStore } from "@/stores/BudiStore"
 import { tables } from "./tables"
 import { viewsV2 } from "./viewsV2"
 import { automationStore } from "./automations"
-import { API } from "api"
-import { getSequentialName } from "helpers/duplicate"
+import { API } from "@/api"
+import { getSequentialName } from "@/helpers/duplicate"
 
 const initialState = {}
 
@@ -55,15 +55,12 @@ export class RowActionStore extends BudiStore {
     }
 
     // Create the action
-    const res = await API.rowActions.create({
-      name,
-      tableId,
-    })
+    const res = await API.rowActions.create(tableId, name)
 
     // Enable action on this view if adding via a view
     if (viewId) {
       await Promise.all([
-        this.enableView(tableId, viewId, res.id),
+        this.enableView(tableId, res.id, viewId),
         automationStore.actions.fetch(),
       ])
     } else {
@@ -76,21 +73,13 @@ export class RowActionStore extends BudiStore {
     return res
   }
 
-  enableView = async (tableId, viewId, rowActionId) => {
-    await API.rowActions.enableView({
-      tableId,
-      viewId,
-      rowActionId,
-    })
+  enableView = async (tableId, rowActionId, viewId) => {
+    await API.rowActions.enableView(tableId, rowActionId, viewId)
     await this.refreshRowActions(tableId)
   }
 
-  disableView = async (tableId, viewId, rowActionId) => {
-    await API.rowActions.disableView({
-      tableId,
-      viewId,
-      rowActionId,
-    })
+  disableView = async (tableId, rowActionId, viewId) => {
+    await API.rowActions.disableView(tableId, rowActionId, viewId)
     await this.refreshRowActions(tableId)
   }
 
@@ -105,21 +94,14 @@ export class RowActionStore extends BudiStore {
   }
 
   delete = async (tableId, rowActionId) => {
-    await API.rowActions.delete({
-      tableId,
-      rowActionId,
-    })
+    await API.rowActions.delete(tableId, rowActionId)
     await this.refreshRowActions(tableId)
     // We don't need to refresh automations as we can only delete row actions
     // from the automations store, so we already handle the state update there
   }
 
   trigger = async (sourceId, rowActionId, rowId) => {
-    await API.rowActions.trigger({
-      sourceId,
-      rowActionId,
-      rowId,
-    })
+    await API.rowActions.trigger(sourceId, rowActionId, rowId)
   }
 }
 
diff --git a/packages/builder/src/stores/builder/screens.js b/packages/builder/src/stores/builder/screens.js
index 10c4265e73..8298a1469d 100644
--- a/packages/builder/src/stores/builder/screens.js
+++ b/packages/builder/src/stores/builder/screens.js
@@ -2,17 +2,17 @@ import { derived, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import { Helpers } from "@budibase/bbui"
 import { RoleUtils, Utils } from "@budibase/frontend-core"
-import { findAllMatchingComponents } from "helpers/components"
+import { findAllMatchingComponents } from "@/helpers/components"
 import {
   layoutStore,
   appStore,
   componentStore,
   navigationStore,
   selectedComponent,
-} from "stores/builder"
-import { createHistoryStore } from "stores/builder/history"
-import { API } from "api"
-import BudiStore from "../BudiStore"
+} from "@/stores/builder"
+import { createHistoryStore } from "@/stores/builder/history"
+import { API } from "@/api"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_SCREENS_STATE = {
   screens: [],
@@ -274,7 +274,7 @@ export class ScreenStore extends BudiStore {
 
   /**
    * @param {function} patchFn
-   * @param {string} screenId
+   * @param {string | null} screenId
    * @returns
    */
   async patch(patchFn, screenId) {
@@ -344,12 +344,7 @@ export class ScreenStore extends BudiStore {
     let deleteUrls = []
     screensToDelete.forEach(screen => {
       // Delete the screen
-      promises.push(
-        API.deleteScreen({
-          screenId: screen._id,
-          screenRev: screen._rev,
-        })
-      )
+      promises.push(API.deleteScreen(screen._id, screen._rev))
       // Remove links to this screen
       deleteUrls.push(screen.routing.route)
     })
diff --git a/packages/builder/src/stores/builder/snippets.js b/packages/builder/src/stores/builder/snippets.js
index 72ab274730..4e98ef1bdc 100644
--- a/packages/builder/src/stores/builder/snippets.js
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { appStore } from "./app"
 
 const createsnippets = () => {
@@ -14,19 +14,13 @@ const createsnippets = () => {
       ...get(store).filter(snippet => snippet.name !== updatedSnippet.name),
       updatedSnippet,
     ]
-    const app = await API.saveAppMetadata({
-      appId: get(appStore).appId,
-      metadata: { snippets },
-    })
+    const app = await API.saveAppMetadata(get(appStore).appId, { snippets })
     syncMetadata(app)
   }
 
   const deleteSnippet = async snippetName => {
     const snippets = get(store).filter(snippet => snippet.name !== snippetName)
-    const app = await API.saveAppMetadata({
-      appId: get(appStore).appId,
-      metadata: { snippets },
-    })
+    const app = await API.saveAppMetadata(get(appStore).appId, { snippets })
     syncMetadata(app)
   }
 
diff --git a/packages/builder/src/stores/builder/sortedIntegrations.js b/packages/builder/src/stores/builder/sortedIntegrations.js
deleted file mode 100644
index 3f5dd850ab..0000000000
--- a/packages/builder/src/stores/builder/sortedIntegrations.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { integrations } from "./integrations"
-import { derived } from "svelte/store"
-
-import { DatasourceTypes } from "constants/backend"
-
-const getIntegrationOrder = type => {
-  if (type === DatasourceTypes.API) return 1
-  if (type === DatasourceTypes.RELATIONAL) return 2
-  if (type === DatasourceTypes.NON_RELATIONAL) return 3
-
-  // Sort all others arbitrarily by the first character of their name.
-  // Character codes can technically be as low as 0, so make sure the number is at least 4
-  return type.charCodeAt(0) + 4
-}
-
-export const createSortedIntegrationsStore = () => {
-  return derived(integrations, $integrations => {
-    const integrationsAsArray = Object.entries($integrations).map(
-      ([name, integration]) => ({
-        name,
-        ...integration,
-      })
-    )
-
-    return integrationsAsArray.sort((integrationA, integrationB) => {
-      const integrationASortOrder = getIntegrationOrder(integrationA.type)
-      const integrationBSortOrder = getIntegrationOrder(integrationB.type)
-      if (integrationASortOrder === integrationBSortOrder) {
-        return integrationA.friendlyName.localeCompare(
-          integrationB.friendlyName
-        )
-      }
-
-      return integrationASortOrder < integrationBSortOrder ? -1 : 1
-    })
-  })
-}
-
-export const sortedIntegrations = createSortedIntegrationsStore()
diff --git a/packages/builder/src/stores/builder/sortedIntegrations.ts b/packages/builder/src/stores/builder/sortedIntegrations.ts
new file mode 100644
index 0000000000..95c52f4479
--- /dev/null
+++ b/packages/builder/src/stores/builder/sortedIntegrations.ts
@@ -0,0 +1,52 @@
+import { integrations } from "./integrations"
+import { derived } from "svelte/store"
+import { DatasourceTypes } from "@/constants/backend"
+import { UIIntegration, Integration } from "@budibase/types"
+import { BudiStore } from "@/stores/BudiStore"
+
+const getIntegrationOrder = (type: string | undefined) => {
+  // if type is not known, sort to end
+  if (!type) {
+    return Number.MAX_SAFE_INTEGER
+  }
+  if (type === DatasourceTypes.API) return 1
+  if (type === DatasourceTypes.RELATIONAL) return 2
+  if (type === DatasourceTypes.NON_RELATIONAL) return 3
+
+  // Sort all others arbitrarily by the first character of their name.
+  // Character codes can technically be as low as 0, so make sure the number is at least 4
+  return type.charCodeAt(0) + 4
+}
+
+export class SortedIntegrationStore extends BudiStore<UIIntegration[]> {
+  constructor() {
+    super([])
+
+    const derivedStore = derived<typeof integrations, UIIntegration[]>(
+      integrations,
+      $integrations => {
+        const entries: [string, Integration][] = Object.entries($integrations)
+        const integrationsAsArray = entries.map(([name, integration]) => ({
+          name,
+          ...integration,
+        }))
+
+        return integrationsAsArray.sort((integrationA, integrationB) => {
+          const integrationASortOrder = getIntegrationOrder(integrationA.type)
+          const integrationBSortOrder = getIntegrationOrder(integrationB.type)
+          if (integrationASortOrder === integrationBSortOrder) {
+            return integrationA.friendlyName.localeCompare(
+              integrationB.friendlyName
+            )
+          }
+
+          return integrationASortOrder < integrationBSortOrder ? -1 : 1
+        })
+      }
+    )
+
+    this.subscribe = derivedStore.subscribe
+  }
+}
+
+export const sortedIntegrations = new SortedIntegrationStore()
diff --git a/packages/builder/src/stores/builder/tables.js b/packages/builder/src/stores/builder/tables.ts
similarity index 62%
rename from packages/builder/src/stores/builder/tables.js
rename to packages/builder/src/stores/builder/tables.ts
index 88b26929ad..e38731026c 100644
--- a/packages/builder/src/stores/builder/tables.js
+++ b/packages/builder/src/stores/builder/tables.ts
@@ -1,30 +1,64 @@
-import { FieldType } from "@budibase/types"
+import {
+  FieldSchema,
+  FieldType,
+  SaveTableRequest,
+  Table,
+} from "@budibase/types"
 import { SWITCHABLE_TYPES } from "@budibase/shared-core"
-import { get, writable, derived } from "svelte/store"
+import { get, derived, Writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { API } from "api"
+import { API } from "@/api"
+import { DerivedBudiStore } from "@/stores/BudiStore"
 
-export function createTablesStore() {
-  const store = writable({
-    list: [],
-    selectedTableId: null,
-  })
-  const derivedStore = derived(store, $store => ({
-    ...$store,
-    selected: $store.list?.find(table => table._id === $store.selectedTableId),
-  }))
+interface BuilderTableStore {
+  list: Table[]
+  selectedTableId?: string
+}
 
-  const fetch = async () => {
+interface DerivedTableStore extends BuilderTableStore {
+  selected?: Table
+}
+
+export class TableStore extends DerivedBudiStore<
+  BuilderTableStore,
+  DerivedTableStore
+> {
+  constructor() {
+    const makeDerivedStore = (store: Writable<BuilderTableStore>) => {
+      return derived(store, $store => ({
+        ...$store,
+        selected: $store.list?.find(
+          table => table._id === $store.selectedTableId
+        ),
+      }))
+    }
+
+    super(
+      {
+        list: [],
+        selectedTableId: undefined,
+      },
+      makeDerivedStore
+    )
+
+    this.select = this.select.bind(this)
+  }
+
+  async init() {
+    return this.fetch()
+  }
+
+  async fetch() {
     const tables = await API.getTables()
-    store.update(state => ({
+    this.store.update(state => ({
       ...state,
       list: tables,
     }))
   }
 
-  const singleFetch = async tableId => {
+  private async singleFetch(tableId: string) {
     const table = await API.getTable(tableId)
-    store.update(state => {
+    this.store.update(state => {
       const list = []
       // update the list, keep order accurate
       for (let tbl of state.list) {
@@ -39,16 +73,16 @@ export function createTablesStore() {
     })
   }
 
-  const select = tableId => {
-    store.update(state => ({
+  select(tableId: string | undefined) {
+    this.store.update(state => ({
       ...state,
       selectedTableId: tableId,
     }))
   }
 
-  const save = async table => {
-    const updatedTable = cloneDeep(table)
-    const oldTable = get(store).list.filter(t => t._id === table._id)[0]
+  async save(table: Table) {
+    const updatedTable: SaveTableRequest = cloneDeep(table)
+    const oldTable = get(this.store).list.filter(t => t._id === table._id)[0]
 
     const fieldNames = []
     // Update any renamed schema keys to reflect their names
@@ -79,8 +113,8 @@ export function createTablesStore() {
     }
 
     const savedTable = await API.saveTable(updatedTable)
-    replaceTable(savedTable._id, savedTable)
-    select(savedTable._id)
+    this.replaceTable(savedTable._id, savedTable)
+    this.select(savedTable._id)
     // make sure tables up to date (related)
     let newTableIds = []
     for (let column of Object.values(updatedTable?.schema || {})) {
@@ -99,31 +133,30 @@ export function createTablesStore() {
     const tableIdsToFetch = [...new Set([...newTableIds, ...oldTableIds])]
     // too many tables to fetch, just get all
     if (tableIdsToFetch.length > 3) {
-      await fetch()
+      await this.fetch()
     } else {
-      await Promise.all(tableIdsToFetch.map(id => singleFetch(id)))
+      await Promise.all(tableIdsToFetch.map(id => this.singleFetch(id)))
     }
     return savedTable
   }
 
-  const deleteTable = async table => {
-    if (!table?._id) {
-      return
-    }
-    await API.deleteTable({
-      tableId: table._id,
-      tableRev: table._rev || "rev",
-    })
-    replaceTable(table._id, null)
+  async delete(table: { _id: string; _rev: string }) {
+    await API.deleteTable(table._id, table._rev)
+    this.replaceTable(table._id, null)
   }
 
-  const saveField = async ({
+  async saveField({
     originalName,
     field,
     primaryDisplay = false,
     indexes,
-  }) => {
-    let draft = cloneDeep(get(derivedStore).selected)
+  }: {
+    originalName: string
+    field: FieldSchema
+    primaryDisplay: boolean
+    indexes: Record<string, any>
+  }) {
+    const draft: SaveTableRequest = cloneDeep(get(this.derivedStore).selected!)
 
     // delete the original if renaming
     // need to handle if the column had no name, empty string
@@ -142,7 +175,7 @@ export function createTablesStore() {
       const fields = Object.keys(draft.schema)
       // pick another display column randomly if unselecting
       draft.primaryDisplay = fields.filter(
-        name => name !== originalName || name !== field
+        name => name !== originalName || name !== field.name
       )[0]
     }
     if (indexes) {
@@ -153,24 +186,24 @@ export function createTablesStore() {
       [field.name]: cloneDeep(field),
     }
 
-    await save(draft)
+    await this.save(draft)
   }
 
-  const deleteField = async field => {
-    let draft = cloneDeep(get(derivedStore).selected)
+  async deleteField(field: { name: string | number }) {
+    let draft = cloneDeep(get(this.derivedStore).selected!)
     delete draft.schema[field.name]
-    await save(draft)
+    await this.save(draft)
   }
 
   // Handles external updates of tables
-  const replaceTable = (tableId, table) => {
+  replaceTable(tableId: string | undefined, table: Table | null) {
     if (!tableId) {
       return
     }
 
     // Handle deletion
     if (!table) {
-      store.update(state => ({
+      this.store.update(state => ({
         ...state,
         list: state.list.filter(x => x._id !== tableId),
       }))
@@ -178,9 +211,9 @@ export function createTablesStore() {
     }
 
     // Add new table
-    const index = get(store).list.findIndex(x => x._id === table._id)
+    const index = get(this.store).list.findIndex(x => x._id === table._id)
     if (index === -1) {
-      store.update(state => ({
+      this.store.update(state => ({
         ...state,
         list: [...state.list, table],
       }))
@@ -191,7 +224,7 @@ export function createTablesStore() {
       // This function has to merge state as there discrepancies with the table
       // API endpoints. The table list endpoint and get table endpoint use the
       // "type" property to mean different things.
-      store.update(state => {
+      this.store.update(state => {
         state.list[index] = {
           ...table,
           type: state.list[index].type,
@@ -201,26 +234,12 @@ export function createTablesStore() {
     }
   }
 
-  const removeDatasourceTables = datasourceId => {
-    store.update(state => ({
+  removeDatasourceTables(datasourceId: string) {
+    this.store.update(state => ({
       ...state,
       list: state.list.filter(table => table.sourceId !== datasourceId),
     }))
   }
-
-  return {
-    ...store,
-    subscribe: derivedStore.subscribe,
-    fetch,
-    init: fetch,
-    select,
-    save,
-    delete: deleteTable,
-    saveField,
-    deleteField,
-    replaceTable,
-    removeDatasourceTables,
-  }
 }
 
-export const tables = createTablesStore()
+export const tables = new TableStore()
diff --git a/packages/builder/src/stores/builder/tests/app.test.js b/packages/builder/src/stores/builder/tests/app.test.js
index 728f472317..6a7cb85bd5 100644
--- a/packages/builder/src/stores/builder/tests/app.test.js
+++ b/packages/builder/src/stores/builder/tests/app.test.js
@@ -1,6 +1,6 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
 import { get } from "svelte/store"
-import { INITIAL_APP_META_STATE, AppMetaStore } from "stores/builder/app"
+import { INITIAL_APP_META_STATE, AppMetaStore } from "@/stores/builder/app"
 import {
   clientFeaturesResp,
   generateAppPackage,
@@ -8,9 +8,9 @@ import {
   getScreenFixture,
   getScreenDocId,
 } from "./fixtures"
-import { API } from "api"
+import { API } from "@/api"
 
-vi.mock("api", () => {
+vi.mock("@/api", () => {
   return {
     API: {
       fetchAppRoutes: vi.fn(),
diff --git a/packages/builder/src/stores/builder/tests/builder.test.js b/packages/builder/src/stores/builder/tests/builder.test.js
index e6f52689aa..a1ff37df7d 100644
--- a/packages/builder/src/stores/builder/tests/builder.test.js
+++ b/packages/builder/src/stores/builder/tests/builder.test.js
@@ -1,6 +1,6 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
 import { get } from "svelte/store"
-import { INITIAL_BUILDER_STATE, BuilderStore } from "stores/builder/builder"
+import { INITIAL_BUILDER_STATE, BuilderStore } from "@/stores/builder/builder"
 import { createBuilderWebsocket } from "../websocket.js"
 import { BuilderSocketEvent } from "@budibase/shared-core"
 
@@ -65,7 +65,7 @@ describe("Builder store", () => {
     ctx.test.builderStore.reset()
     expect(disconnected).toBe(true)
     expect(ctx.test.store).toStrictEqual(INITIAL_BUILDER_STATE)
-    expect(ctx.test.builderStore.websocket).toBeNull()
+    expect(ctx.test.builderStore.websocket).toBeUndefined()
   })
 
   it("Attempt to emit a resource select event to the websocket on select", ctx => {
diff --git a/packages/builder/src/stores/builder/tests/component.test.js b/packages/builder/src/stores/builder/tests/component.test.js
index 80a0c8077d..9f700cfdbf 100644
--- a/packages/builder/src/stores/builder/tests/component.test.js
+++ b/packages/builder/src/stores/builder/tests/component.test.js
@@ -3,9 +3,9 @@ import { get, writable } from "svelte/store"
 import {
   INITIAL_COMPONENTS_STATE,
   ComponentStore,
-} from "stores/builder/components"
-import { API } from "api"
-import { appStore, tables } from "stores/builder"
+} from "@/stores/builder/components"
+import { API } from "@/api"
+import { appStore, tables } from "@/stores/builder"
 import {
   componentDefinitionMap,
   getComponentFixture,
@@ -22,13 +22,13 @@ import {
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
   DEFAULT_BB_DATASOURCE_ID,
-} from "constants/backend"
+} from "@/constants/backend"
 import { makePropSafe as safe } from "@budibase/string-templates"
 
 // Could move to fixtures
 const COMP_PREFIX = "@budibase/standard-components"
 
-vi.mock("api", () => {
+vi.mock("@/api", () => {
   return {
     API: {
       fetchComponentLibDefinitions: vi.fn(),
@@ -36,7 +36,7 @@ vi.mock("api", () => {
   }
 })
 
-vi.mock("stores/builder", async () => {
+vi.mock("@/stores/builder", async () => {
   const mockAppStore = writable()
   const appStore = {
     subscribe: mockAppStore.subscribe,
diff --git a/packages/builder/src/stores/builder/tests/datasources.spec.js.disabled b/packages/builder/src/stores/builder/tests/datasources.spec.js.disabled
index 772aaf36a2..fa8746306a 100644
--- a/packages/builder/src/stores/builder/tests/datasources.spec.js.disabled
+++ b/packages/builder/src/stores/builder/tests/datasources.spec.js.disabled
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 jest.mock("api")
 
diff --git a/packages/builder/src/stores/builder/tests/fixtures/index.js b/packages/builder/src/stores/builder/tests/fixtures/index.js
index b742397f5c..03b6ceeb52 100644
--- a/packages/builder/src/stores/builder/tests/fixtures/index.js
+++ b/packages/builder/src/stores/builder/tests/fixtures/index.js
@@ -1,13 +1,13 @@
 import { v4 } from "uuid"
-import { Component } from "templates/Component"
-import { Screen } from "templates/screenTemplating/Screen"
+import { Component } from "@/templates/Component"
+import { Screen } from "@/templates/screenTemplating/Screen"
 import { get } from "svelte/store"
 import {
   BUDIBASE_INTERNAL_DB_ID,
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
   DEFAULT_BB_DATASOURCE_ID,
-} from "constants/backend"
+} from "@/constants/backend"
 import { FieldType } from "@budibase/types"
 
 const getDocId = () => {
diff --git a/packages/builder/src/stores/builder/tests/navigation.test.js b/packages/builder/src/stores/builder/tests/navigation.test.js
index 365b7f497b..1d04496c40 100644
--- a/packages/builder/src/stores/builder/tests/navigation.test.js
+++ b/packages/builder/src/stores/builder/tests/navigation.test.js
@@ -1,13 +1,13 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
 import { get, writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import {
   INITIAL_NAVIGATION_STATE,
   NavigationStore,
-} from "stores/builder/navigation"
-import { appStore } from "stores/builder"
+} from "@/stores/builder/navigation"
+import { appStore } from "@/stores/builder"
 
-vi.mock("api", () => {
+vi.mock("@/api", () => {
   return {
     API: {
       saveAppMetadata: vi.fn(),
@@ -15,7 +15,7 @@ vi.mock("api", () => {
   }
 })
 
-vi.mock("stores/builder", async () => {
+vi.mock("@/stores/builder", async () => {
   const mockAppStore = writable()
   const appStore = {
     subscribe: mockAppStore.subscribe,
@@ -264,10 +264,7 @@ describe("Navigation store", () => {
 
     await ctx.test.navigationStore.save(update)
 
-    expect(saveSpy).toHaveBeenCalledWith({
-      appId: "testing_123",
-      metadata: { navigation: update },
-    })
+    expect(saveSpy).toHaveBeenCalledWith("testing_123", { navigation: update })
 
     expect(ctx.test.store.links.length).toBe(3)
 
diff --git a/packages/builder/src/stores/builder/tests/permissions.spec.js.disabled b/packages/builder/src/stores/builder/tests/permissions.spec.js.disabled
index d3c19964f2..83bb0d7381 100644
--- a/packages/builder/src/stores/builder/tests/permissions.spec.js.disabled
+++ b/packages/builder/src/stores/builder/tests/permissions.spec.js.disabled
@@ -1,4 +1,4 @@
-import { API } from "api"
+import { API } from "@/api"
 
 jest.mock("api")
 
diff --git a/packages/builder/src/stores/builder/tests/queries.spec.js.disabled b/packages/builder/src/stores/builder/tests/queries.spec.js.disabled
index 20db8e4a95..ee5bc1d0b8 100644
--- a/packages/builder/src/stores/builder/tests/queries.spec.js.disabled
+++ b/packages/builder/src/stores/builder/tests/queries.spec.js.disabled
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 jest.mock("api")
 
diff --git a/packages/builder/src/stores/builder/tests/roles.spec.js.disabled b/packages/builder/src/stores/builder/tests/roles.spec.js.disabled
index b729c27ce6..1ac35af445 100644
--- a/packages/builder/src/stores/builder/tests/roles.spec.js.disabled
+++ b/packages/builder/src/stores/builder/tests/roles.spec.js.disabled
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 jest.mock("api")
 
diff --git a/packages/builder/src/stores/builder/tests/screens.test.js b/packages/builder/src/stores/builder/tests/screens.test.js
index 51e3a8d830..430605b77a 100644
--- a/packages/builder/src/stores/builder/tests/screens.test.js
+++ b/packages/builder/src/stores/builder/tests/screens.test.js
@@ -1,9 +1,9 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
 import { get, writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { Constants } from "@budibase/frontend-core"
-import { componentStore, appStore } from "stores/builder"
-import { INITIAL_SCREENS_STATE, ScreenStore } from "stores/builder/screens"
+import { componentStore, appStore } from "@/stores/builder"
+import { INITIAL_SCREENS_STATE, ScreenStore } from "@/stores/builder/screens"
 import {
   getScreenFixture,
   getComponentFixture,
@@ -16,7 +16,7 @@ import {
 
 const COMP_PREFIX = "@budibase/standard-components"
 
-vi.mock("stores/builder", async () => {
+vi.mock("@/stores/builder", async () => {
   const mockAppStore = writable()
   const mockComponentStore = writable()
   const mockLayoutStore = writable()
@@ -49,7 +49,7 @@ vi.mock("stores/builder", async () => {
   }
 })
 
-vi.mock("stores/builder/components/utils", () => {
+vi.mock("@/stores/builder/components/utils", () => {
   return {
     findAllMatchingComponents: vi.fn().mockImplementation(() => {
       return []
@@ -57,7 +57,7 @@ vi.mock("stores/builder/components/utils", () => {
   }
 })
 
-vi.mock("api", () => {
+vi.mock("@/api", () => {
   return {
     API: {
       fetchAppPackage: vi.fn(),
diff --git a/packages/builder/src/stores/builder/tests/sortedIntegrations.test.js b/packages/builder/src/stores/builder/tests/sortedIntegrations.test.ts
similarity index 73%
rename from packages/builder/src/stores/builder/tests/sortedIntegrations.test.js
rename to packages/builder/src/stores/builder/tests/sortedIntegrations.test.ts
index d57aa19148..e2d777ed99 100644
--- a/packages/builder/src/stores/builder/tests/sortedIntegrations.test.js
+++ b/packages/builder/src/stores/builder/tests/sortedIntegrations.test.ts
@@ -1,18 +1,22 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
-import { createSortedIntegrationsStore } from "stores/builder/sortedIntegrations"
-import { DatasourceTypes } from "constants/backend"
+import { SortedIntegrationStore } from "@/stores/builder/sortedIntegrations"
+import { DatasourceTypes } from "@/constants/backend"
 
 import { derived } from "svelte/store"
-import { integrations } from "stores/builder/integrations"
+import { integrations } from "@/stores/builder/integrations"
 
 vi.mock("svelte/store", () => ({
-  derived: vi.fn(),
+  derived: vi.fn(() => ({
+    subscribe: vi.fn(),
+  })),
   writable: vi.fn(() => ({
     subscribe: vi.fn(),
   })),
 }))
 
-vi.mock("stores/builder/integrations", () => ({ integrations: vi.fn() }))
+vi.mock("@/stores/builder/integrations", () => ({ integrations: vi.fn() }))
+
+const mockedDerived = vi.mocked(derived)
 
 const inputA = {
   nonRelationalA: {
@@ -104,25 +108,28 @@ const expectedOutput = [
 ]
 
 describe("sorted integrations store", () => {
-  beforeEach(ctx => {
+  interface LocalContext {
+    returnedStore: SortedIntegrationStore
+    derivedCallback: any
+  }
+
+  beforeEach<LocalContext>(ctx => {
     vi.clearAllMocks()
 
-    ctx.returnedStore = createSortedIntegrationsStore()
-
-    ctx.derivedCallback = derived.mock.calls[0][1]
+    ctx.returnedStore = new SortedIntegrationStore()
+    ctx.derivedCallback = mockedDerived.mock.calls[0]?.[1]
   })
 
   it("calls derived with the correct parameters", () => {
-    expect(derived).toHaveBeenCalledTimes(1)
-    expect(derived).toHaveBeenCalledWith(integrations, expect.toBeFunc())
+    expect(mockedDerived).toHaveBeenCalledTimes(1)
+    expect(mockedDerived).toHaveBeenCalledWith(
+      integrations,
+      expect.any(Function)
+    )
   })
 
   describe("derived callback", () => {
-    it("When no integrations are loaded", ctx => {
-      expect(ctx.derivedCallback({})).toEqual([])
-    })
-
-    it("When integrations are present", ctx => {
+    it<LocalContext>("When integrations are present", ctx => {
       expect(ctx.derivedCallback(inputA)).toEqual(expectedOutput)
       expect(ctx.derivedCallback(inputB)).toEqual(expectedOutput)
     })
diff --git a/packages/builder/src/stores/builder/tests/tables.spec.js.disabled b/packages/builder/src/stores/builder/tests/tables.spec.js.disabled
index 26b4d90229..1e4d3d3cb7 100644
--- a/packages/builder/src/stores/builder/tests/tables.spec.js.disabled
+++ b/packages/builder/src/stores/builder/tests/tables.spec.js.disabled
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 jest.mock("api")
 
diff --git a/packages/builder/src/stores/builder/theme.js b/packages/builder/src/stores/builder/theme.js
index 8e03e856b3..ed46e9095a 100644
--- a/packages/builder/src/stores/builder/theme.js
+++ b/packages/builder/src/stores/builder/theme.js
@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
 
 export const createThemeStore = () => {
@@ -20,10 +20,7 @@ export const createThemeStore = () => {
   }
 
   const save = async (theme, appId) => {
-    const app = await API.saveAppMetadata({
-      appId,
-      metadata: { theme },
-    })
+    const app = await API.saveAppMetadata(appId, { theme })
     store.update(state => {
       state.theme = app.theme
       return state
@@ -32,10 +29,7 @@ export const createThemeStore = () => {
 
   const saveCustom = async (theme, appId) => {
     const updated = { ...get(store).customTheme, ...theme }
-    const app = await API.saveAppMetadata({
-      appId,
-      metadata: { customTheme: updated },
-    })
+    const app = await API.saveAppMetadata(appId, { customTheme: updated })
     store.update(state => {
       state.customTheme = app.customTheme
       return state
diff --git a/packages/builder/src/stores/builder/views.js b/packages/builder/src/stores/builder/views.js
index 1d2463e2e2..07c356f56d 100644
--- a/packages/builder/src/stores/builder/views.js
+++ b/packages/builder/src/stores/builder/views.js
@@ -1,6 +1,6 @@
 import { writable, derived } from "svelte/store"
 import { tables } from "./tables"
-import { API } from "api"
+import { API } from "@/api"
 
 export function createViewsStore() {
   const store = writable({
diff --git a/packages/builder/src/stores/builder/viewsV2.js b/packages/builder/src/stores/builder/viewsV2.js
deleted file mode 100644
index 9bd32f4a24..0000000000
--- a/packages/builder/src/stores/builder/viewsV2.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { writable, derived, get } from "svelte/store"
-import { tables } from "./tables"
-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/builder/viewsV2.ts b/packages/builder/src/stores/builder/viewsV2.ts
new file mode 100644
index 0000000000..75a833a80b
--- /dev/null
+++ b/packages/builder/src/stores/builder/viewsV2.ts
@@ -0,0 +1,122 @@
+import { derived, get, Writable } from "svelte/store"
+import { tables } from "./tables"
+import { API } from "@/api"
+import { DerivedBudiStore } from "@/stores/BudiStore"
+import { CreateViewRequest, UpdateViewRequest, ViewV2 } from "@budibase/types"
+import { helpers } from "@budibase/shared-core"
+
+interface BuilderViewV2Store {
+  selectedViewId: string | null
+}
+
+interface DerivedViewV2Store extends BuilderViewV2Store {
+  list: ViewV2[]
+  selected?: ViewV2
+}
+
+export class ViewV2Store extends DerivedBudiStore<
+  BuilderViewV2Store,
+  DerivedViewV2Store
+> {
+  constructor() {
+    const makeDerivedStore = (store: Writable<BuilderViewV2Store>) => {
+      return derived(
+        [store, tables],
+        ([$store, $tables]): DerivedViewV2Store => {
+          let list: ViewV2[] = []
+          $tables.list?.forEach(table => {
+            const views = Object.values(table?.views || {}).filter(
+              helpers.views.isV2
+            )
+            list = list.concat(views)
+          })
+          return {
+            ...$store,
+            list,
+            selected: list.find(view => view.id === $store.selectedViewId),
+          }
+        }
+      )
+    }
+
+    super(
+      {
+        selectedViewId: null,
+      },
+      makeDerivedStore
+    )
+
+    this.select = this.select.bind(this)
+  }
+
+  select(id: string) {
+    this.store.update(state => ({
+      ...state,
+      selectedViewId: id,
+    }))
+  }
+
+  async delete(view: { id: string }) {
+    await API.viewV2.delete(view.id)
+    this.replaceView(view.id, null)
+  }
+
+  async create(view: CreateViewRequest) {
+    const savedViewResponse = await API.viewV2.create(view)
+    const savedView = savedViewResponse.data
+    this.replaceView(savedView.id, savedView)
+    return savedView
+  }
+
+  async save(view: UpdateViewRequest) {
+    const res = await API.viewV2.update(view)
+    const savedView = res?.data
+    this.replaceView(view.id, savedView)
+  }
+
+  // Handles external updates of tables
+  replaceView(viewId: string, view: ViewV2 | null) {
+    const existingView = get(this.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 && existingView) {
+      tables.update(state => {
+        delete state.list[tableIndex].views![existingView.name]
+        return state
+      })
+      return
+    }
+
+    // Add new view
+    else if (!existingView && view) {
+      tables.update(state => {
+        state.list[tableIndex].views ??= {}
+        state.list[tableIndex].views[view.name] = view
+        return state
+      })
+    }
+
+    // Update existing view
+    else if (existingView && view) {
+      tables.update(state => {
+        // Remove old view
+        state.list[tableIndex].views ??= {}
+        delete state.list[tableIndex].views[existingView.name]
+
+        // Add new view
+        state.list[tableIndex].views[view.name] = view
+        return state
+      })
+    }
+  }
+}
+
+export const viewsV2 = new ViewV2Store()
diff --git a/packages/builder/src/stores/builder/websocket.js b/packages/builder/src/stores/builder/websocket.js
index 8a0d83abc1..3944c8cba5 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -10,9 +10,9 @@ import {
   datasources,
   tables,
   roles,
-} from "stores/builder"
+} from "@/stores/builder"
 import { get } from "svelte/store"
-import { auth, appsStore } from "stores/portal"
+import { auth, appsStore } from "@/stores/portal"
 import { screenStore } from "./screens"
 import { SocketEvent, BuilderSocketEvent, helpers } from "@budibase/shared-core"
 import { notifications } from "@budibase/bbui"
diff --git a/packages/builder/src/stores/portal/admin.test.js b/packages/builder/src/stores/portal/admin.test.js
index a3f1e645c3..1528042630 100644
--- a/packages/builder/src/stores/portal/admin.test.js
+++ b/packages/builder/src/stores/portal/admin.test.js
@@ -1,12 +1,11 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
-import { DEFAULT_CONFIG, createAdminStore } from "./admin"
-
+import { createAdminStore } from "./admin"
 import { writable, get } from "svelte/store"
-import { API } from "api"
-import { auth } from "stores/portal"
+import { API } from "@/api"
+import { auth } from "@/stores/portal"
 import { banner } from "@budibase/bbui"
 
-vi.mock("stores/portal", () => {
+vi.mock("@/stores/portal", () => {
   return { auth: vi.fn() }
 })
 
@@ -21,7 +20,7 @@ vi.mock("svelte/store", () => {
   }
 })
 
-vi.mock("api", () => {
+vi.mock("@/api", () => {
   return {
     API: {
       getEnvironment: vi.fn(),
@@ -32,7 +31,12 @@ vi.mock("api", () => {
 })
 
 vi.mock("@budibase/bbui", () => {
-  return { banner: { showStatus: vi.fn() } }
+  return {
+    banner: { showStatus: vi.fn() },
+    Helpers: {
+      uuid: vi.fn(),
+    },
+  }
 })
 
 describe("admin store", () => {
@@ -45,11 +49,6 @@ describe("admin store", () => {
     ctx.returnedStore = createAdminStore()
   })
 
-  it("inits the writable store with the default config", () => {
-    expect(writable).toHaveBeenCalledTimes(1)
-    expect(writable).toHaveBeenCalledWith(DEFAULT_CONFIG)
-  })
-
   it("returns the created store", ctx => {
     expect(ctx.returnedStore).toEqual({
       subscribe: expect.toBe(ctx.writableReturn.subscribe),
diff --git a/packages/builder/src/stores/portal/admin.js b/packages/builder/src/stores/portal/admin.ts
similarity index 77%
rename from packages/builder/src/stores/portal/admin.js
rename to packages/builder/src/stores/portal/admin.ts
index 54757fb314..f262d54bff 100644
--- a/packages/builder/src/stores/portal/admin.js
+++ b/packages/builder/src/stores/portal/admin.ts
@@ -1,28 +1,29 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
-import { auth } from "stores/portal"
+import { API } from "@/api"
+import { auth } from "@/stores/portal"
 import { banner } from "@budibase/bbui"
+import {
+  ConfigChecklistResponse,
+  GetEnvironmentResponse,
+  SystemStatusResponse,
+} from "@budibase/types"
 
-export const DEFAULT_CONFIG = {
-  loaded: false,
-  multiTenancy: false,
-  cloud: false,
-  isDev: false,
-  disableAccountPortal: false,
-  accountPortalUrl: "",
-  importComplete: false,
-  checklist: {
-    apps: { checked: false },
-    smtp: { checked: false },
-    adminUser: { checked: false },
-    sso: { checked: false },
-  },
-  maintenance: [],
-  offlineMode: false,
+interface PortalAdminStore extends GetEnvironmentResponse {
+  loaded: boolean
+  checklist?: ConfigChecklistResponse
+  status?: SystemStatusResponse
 }
 
 export function createAdminStore() {
-  const admin = writable(DEFAULT_CONFIG)
+  const admin = writable<PortalAdminStore>({
+    loaded: false,
+    multiTenancy: false,
+    cloud: false,
+    isDev: false,
+    disableAccountPortal: false,
+    offlineMode: false,
+    maintenance: [],
+  })
 
   async function init() {
     await getChecklist()
diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.ts
similarity index 66%
rename from packages/builder/src/stores/portal/apps.js
rename to packages/builder/src/stores/portal/apps.ts
index 60f17da481..0c3e3b6017 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.ts
@@ -1,19 +1,38 @@
 import { derived } from "svelte/store"
-import { AppStatus } from "constants"
-import { API } from "api"
+import { AppStatus } from "@/constants"
+import { API } from "@/api"
 import { auth } from "./auth"
-import BudiStore from "../BudiStore" // move this
+import { BudiStore } from "../BudiStore"
+import { App, UpdateAppRequest } from "@budibase/types"
 
-// properties that should always come from the dev app, not the deployed
-const DEV_PROPS = ["updatedBy", "updatedAt"]
-
-export const INITIAL_APPS_STATE = {
-  apps: [],
+interface AppIdentifierMetadata {
+  devId?: string
+  devRev?: string
+  prodId?: string
+  prodRev?: string
 }
 
-export class AppsStore extends BudiStore {
+interface AppUIMetadata {
+  deployed: boolean
+  lockedYou: boolean
+  lockedOther: boolean
+  favourite: boolean
+}
+
+interface StoreApp extends App, AppIdentifierMetadata {}
+
+interface EnrichedApp extends StoreApp, AppUIMetadata {}
+
+interface PortalAppsStore {
+  apps: StoreApp[]
+  sortBy?: string
+}
+
+export class AppsStore extends BudiStore<PortalAppsStore> {
   constructor() {
-    super({ ...INITIAL_APPS_STATE })
+    super({
+      apps: [],
+    })
 
     this.extractAppId = this.extractAppId.bind(this)
     this.getProdAppID = this.getProdAppID.bind(this)
@@ -22,12 +41,12 @@ export class AppsStore extends BudiStore {
     this.save = this.save.bind(this)
   }
 
-  extractAppId(id) {
-    const split = id?.split("_") || []
+  extractAppId(appId?: string) {
+    const split = appId?.split("_") || []
     return split.length ? split[split.length - 1] : null
   }
 
-  getProdAppID(appId) {
+  getProdAppID(appId: string) {
     if (!appId) {
       return appId
     }
@@ -47,15 +66,15 @@ export class AppsStore extends BudiStore {
     return `app${separator}${rest}`
   }
 
-  updateSort(sortBy) {
+  async updateSort(sortBy: string) {
     this.update(state => ({
       ...state,
       sortBy,
     }))
-    this.updateUserSort(sortBy)
+    await this.updateUserSort(sortBy)
   }
 
-  async updateUserSort(sortBy) {
+  async updateUserSort(sortBy: string) {
     try {
       await auth.updateSelf({ appSort: sortBy })
     } catch (err) {
@@ -64,16 +83,19 @@ export class AppsStore extends BudiStore {
   }
 
   async load() {
-    const json = await API.getApps()
+    const json = (await API.getApps()) as App[]
     if (Array.isArray(json)) {
       // Merge apps into one sensible list
-      let appMap = {}
+      let appMap: Record<string, StoreApp> = {}
       let devApps = json.filter(app => app.status === AppStatus.DEV)
       let deployedApps = json.filter(app => app.status === AppStatus.DEPLOYED)
 
       // First append all dev app version
       devApps.forEach(app => {
         const id = this.extractAppId(app.appId)
+        if (!id) {
+          return
+        }
         appMap[id] = {
           ...app,
           devId: app.appId,
@@ -84,20 +106,22 @@ export class AppsStore extends BudiStore {
       // Then merge with all prod app versions
       deployedApps.forEach(app => {
         const id = this.extractAppId(app.appId)
+        if (!id) {
+          return
+        }
 
         // Skip any deployed apps which don't have a dev counterpart
         if (!appMap[id]) {
           return
         }
 
-        let devProps = {}
+        // Extract certain properties from the dev app to override the prod app
+        let devProps: Pick<App, "updatedBy" | "updatedAt"> = {}
         if (appMap[id]) {
-          const entries = Object.entries(appMap[id]).filter(
-            ([key]) => DEV_PROPS.indexOf(key) !== -1
-          )
-          entries.forEach(entry => {
-            devProps[entry[0]] = entry[1]
-          })
+          devProps = {
+            updatedBy: appMap[id].updatedBy,
+            updatedAt: appMap[id].updatedAt,
+          }
         }
         appMap[id] = {
           ...appMap[id],
@@ -111,7 +135,10 @@ export class AppsStore extends BudiStore {
       // Transform into an array and clean up
       const apps = Object.values(appMap)
       apps.forEach(app => {
-        app.appId = this.extractAppId(app.devId)
+        const appId = this.extractAppId(app.devId)
+        if (appId) {
+          app.appId = appId
+        }
         delete app._id
         delete app._rev
       })
@@ -127,11 +154,8 @@ export class AppsStore extends BudiStore {
     }
   }
 
-  async save(appId, value) {
-    await API.saveAppMetadata({
-      appId,
-      metadata: value,
-    })
+  async save(appId: string, value: UpdateAppRequest) {
+    await API.saveAppMetadata(appId, value)
     this.update(state => {
       const updatedAppIndex = state.apps.findIndex(
         app => app.instance._id === appId
@@ -156,15 +180,16 @@ export const sortBy = derived([appsStore, auth], ([$store, $auth]) => {
 export const enrichedApps = derived(
   [appsStore, auth, sortBy],
   ([$store, $auth, $sortBy]) => {
-    const enrichedApps = $store.apps
-      ? $store.apps.map(app => ({
-          ...app,
-          deployed: app.status === AppStatus.DEPLOYED,
-          lockedYou: app.lockedBy && app.lockedBy.email === $auth.user?.email,
-          lockedOther: app.lockedBy && app.lockedBy.email !== $auth.user?.email,
-          favourite: $auth.user?.appFavourites?.includes(app.appId),
-        }))
-      : []
+    const enrichedApps: EnrichedApp[] = $store.apps.map(app => {
+      const user = $auth.user
+      return {
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+        lockedYou: app.lockedBy != null && app.lockedBy.email === user?.email,
+        lockedOther: app.lockedBy != null && app.lockedBy.email !== user?.email,
+        favourite: !!user?.appFavourites?.includes(app.appId),
+      }
+    })
 
     if ($sortBy === "status") {
       return enrichedApps.sort((a, b) => {
diff --git a/packages/builder/src/stores/portal/auditLogs.js b/packages/builder/src/stores/portal/auditLogs.js
deleted file mode 100644
index 9abf8ec11b..0000000000
--- a/packages/builder/src/stores/portal/auditLogs.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { writable, get } from "svelte/store"
-import { API } from "api"
-import { licensing } from "stores/portal"
-
-export function createAuditLogsStore() {
-  const { subscribe, update } = writable({
-    events: {},
-    logs: {},
-  })
-
-  async function search(opts = {}) {
-    if (get(licensing).auditLogsEnabled) {
-      const paged = await API.searchAuditLogs(opts)
-
-      update(state => {
-        return { ...state, logs: { ...paged, opts } }
-      })
-
-      return paged
-    }
-  }
-
-  async function getEventDefinitions() {
-    const events = await API.getEventDefinitions()
-
-    update(state => {
-      return { ...state, ...events }
-    })
-  }
-
-  function getDownloadUrl(opts = {}) {
-    return API.getDownloadUrl(opts)
-  }
-
-  return {
-    subscribe,
-    search,
-    getEventDefinitions,
-    getDownloadUrl,
-  }
-}
-
-export const auditLogs = createAuditLogsStore()
diff --git a/packages/builder/src/stores/portal/auditLogs.ts b/packages/builder/src/stores/portal/auditLogs.ts
new file mode 100644
index 0000000000..ff29f0cd1b
--- /dev/null
+++ b/packages/builder/src/stores/portal/auditLogs.ts
@@ -0,0 +1,45 @@
+import { get } from "svelte/store"
+import { API } from "@/api"
+import { licensing } from "./licensing"
+import { BudiStore } from "../BudiStore"
+import {
+  DownloadAuditLogsRequest,
+  SearchAuditLogsRequest,
+  SearchAuditLogsResponse,
+} from "@budibase/types"
+
+interface PortalAuditLogsStore {
+  events?: Record<string, string>
+  logs?: SearchAuditLogsResponse
+}
+
+export class AuditLogsStore extends BudiStore<PortalAuditLogsStore> {
+  constructor() {
+    super({})
+  }
+
+  async search(opts: SearchAuditLogsRequest = {}) {
+    if (get(licensing).auditLogsEnabled) {
+      const res = await API.searchAuditLogs(opts)
+      this.update(state => ({
+        ...state,
+        logs: res,
+      }))
+      return res
+    }
+  }
+
+  async getEventDefinitions() {
+    const res = await API.getEventDefinitions()
+    this.update(state => ({
+      ...state,
+      events: res.events,
+    }))
+  }
+
+  getDownloadUrl(opts: DownloadAuditLogsRequest = {}) {
+    return API.getDownloadUrl(opts)
+  }
+}
+
+export const auditLogs = new AuditLogsStore()
diff --git a/packages/builder/src/stores/portal/auth.js b/packages/builder/src/stores/portal/auth.js
deleted file mode 100644
index 2d2b455b37..0000000000
--- a/packages/builder/src/stores/portal/auth.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import { derived, writable, get } from "svelte/store"
-import { API } from "api"
-import { admin } from "stores/portal"
-import analytics from "analytics"
-
-export function createAuthStore() {
-  const auth = writable({
-    user: null,
-    accountPortalAccess: false,
-    tenantId: "default",
-    tenantSet: false,
-    loaded: false,
-    postLogout: false,
-  })
-  const store = derived(auth, $store => {
-    return {
-      user: $store.user,
-      accountPortalAccess: $store.accountPortalAccess,
-      tenantId: $store.tenantId,
-      tenantSet: $store.tenantSet,
-      loaded: $store.loaded,
-      postLogout: $store.postLogout,
-      isSSO: !!$store.user?.provider,
-    }
-  })
-
-  function setUser(user) {
-    auth.update(store => {
-      store.loaded = true
-      store.user = user
-      store.accountPortalAccess = user?.accountPortalAccess
-      if (user) {
-        store.tenantId = user.tenantId || "default"
-        store.tenantSet = true
-      }
-      return store
-    })
-
-    if (user) {
-      analytics
-        .activate()
-        .then(() => {
-          analytics.identify(user._id)
-        })
-        .catch(() => {
-          // This request may fail due to browser extensions blocking requests
-          // containing the word analytics, so we don't want to spam users with
-          // an error here.
-        })
-    }
-  }
-
-  async function setOrganisation(tenantId) {
-    const prevId = get(store).tenantId
-    auth.update(store => {
-      store.tenantId = tenantId
-      store.tenantSet = !!tenantId
-      return store
-    })
-    if (prevId !== tenantId) {
-      // re-init admin after setting org
-      await admin.init()
-    }
-  }
-
-  async function setInitInfo(info) {
-    await API.setInitInfo(info)
-    auth.update(store => {
-      store.initInfo = info
-      return store
-    })
-    return info
-  }
-
-  function setPostLogout() {
-    auth.update(store => {
-      store.postLogout = true
-      return store
-    })
-  }
-
-  async function getInitInfo() {
-    const info = await API.getInitInfo()
-    auth.update(store => {
-      store.initInfo = info
-      return store
-    })
-    return info
-  }
-
-  const actions = {
-    checkQueryString: async () => {
-      const urlParams = new URLSearchParams(window.location.search)
-      if (urlParams.has("tenantId")) {
-        const tenantId = urlParams.get("tenantId")
-        await setOrganisation(tenantId)
-      }
-    },
-    setOrg: async tenantId => {
-      await setOrganisation(tenantId)
-    },
-    getSelf: async () => {
-      // We need to catch this locally as we never want this to fail, even
-      // though normally we never want to swallow API errors at the store level.
-      // We're either logged in or we aren't.
-      // We also need to always update the loaded flag.
-      try {
-        const user = await API.fetchBuilderSelf()
-        setUser(user)
-      } catch (error) {
-        setUser(null)
-      }
-    },
-    login: async creds => {
-      const tenantId = get(store).tenantId
-      await API.logIn({
-        username: creds.username,
-        password: creds.password,
-        tenantId,
-      })
-      await actions.getSelf()
-    },
-    logout: async () => {
-      await API.logOut()
-      setPostLogout()
-      setUser(null)
-      await setInitInfo({})
-    },
-    updateSelf: async fields => {
-      await API.updateSelf({ ...fields })
-      // Refetch to enrich after update.
-      try {
-        const user = await API.fetchBuilderSelf()
-        setUser(user)
-      } catch (error) {
-        setUser(null)
-      }
-    },
-    forgotPassword: async email => {
-      const tenantId = get(store).tenantId
-      await API.requestForgotPassword({
-        tenantId,
-        email,
-      })
-    },
-    resetPassword: async (password, resetCode) => {
-      const tenantId = get(store).tenantId
-      await API.resetPassword({
-        tenantId,
-        password,
-        resetCode,
-      })
-    },
-    generateAPIKey: async () => {
-      return API.generateAPIKey()
-    },
-    fetchAPIKey: async () => {
-      const info = await API.fetchDeveloperInfo()
-      return info?.apiKey
-    },
-  }
-
-  return {
-    subscribe: store.subscribe,
-    setOrganisation,
-    getInitInfo,
-    setInitInfo,
-    ...actions,
-  }
-}
-
-export const auth = createAuthStore()
diff --git a/packages/builder/src/stores/portal/auth.ts b/packages/builder/src/stores/portal/auth.ts
new file mode 100644
index 0000000000..afbb75646c
--- /dev/null
+++ b/packages/builder/src/stores/portal/auth.ts
@@ -0,0 +1,168 @@
+import { get } from "svelte/store"
+import { API } from "@/api"
+import { admin } from "@/stores/portal"
+import analytics from "@/analytics"
+import { BudiStore } from "@/stores/BudiStore"
+import {
+  isSSOUser,
+  SetInitInfoRequest,
+  UpdateSelfRequest,
+  User,
+} from "@budibase/types"
+
+interface PortalAuthStore {
+  user?: User
+  initInfo?: Record<string, any>
+  accountPortalAccess: boolean
+  loaded: boolean
+  isSSO: boolean
+  tenantId: string
+  tenantSet: boolean
+  postLogout: boolean
+}
+
+class AuthStore extends BudiStore<PortalAuthStore> {
+  constructor() {
+    super({
+      accountPortalAccess: false,
+      tenantId: "default",
+      tenantSet: false,
+      loaded: false,
+      postLogout: false,
+      isSSO: false,
+    })
+  }
+
+  setUser(user?: User) {
+    this.set({
+      loaded: true,
+      user: user,
+      accountPortalAccess: !!user?.accountPortalAccess,
+      tenantId: user?.tenantId || "default",
+      tenantSet: !!user,
+      isSSO: user != null && isSSOUser(user),
+      postLogout: false,
+    })
+
+    if (user) {
+      analytics
+        .activate()
+        .then(() => {
+          analytics.identify(user._id)
+        })
+        .catch(() => {
+          // This request may fail due to browser extensions blocking requests
+          // containing the word analytics, so we don't want to spam users with
+          // an error here.
+        })
+    }
+  }
+
+  async setOrganisation(tenantId: string) {
+    const prevId = get(this.store).tenantId
+    auth.update(store => {
+      store.tenantId = tenantId
+      store.tenantSet = !!tenantId
+      return store
+    })
+    if (prevId !== tenantId) {
+      // re-init admin after setting org
+      await admin.init()
+    }
+  }
+
+  async setInitInfo(info: SetInitInfoRequest) {
+    await API.setInitInfo(info)
+    auth.update(store => {
+      store.initInfo = info
+      return store
+    })
+    return info
+  }
+
+  setPostLogout() {
+    auth.update(store => {
+      store.postLogout = true
+      return store
+    })
+  }
+
+  async getInitInfo() {
+    const info = await API.getInitInfo()
+    auth.update(store => {
+      store.initInfo = info
+      return store
+    })
+    return info
+  }
+
+  async checkQueryString() {
+    const urlParams = new URLSearchParams(window.location.search)
+    const tenantId = urlParams.get("tenantId")
+    if (tenantId) {
+      await this.setOrganisation(tenantId)
+    }
+  }
+
+  async setOrg(tenantId: string) {
+    await this.setOrganisation(tenantId)
+  }
+
+  async getSelf() {
+    // We need to catch this locally as we never want this to fail, even
+    // though normally we never want to swallow API errors at the store level.
+    // We're either logged in or we aren't.
+    // We also need to always update the loaded flag.
+    try {
+      const user = await API.fetchBuilderSelf()
+      this.setUser(user)
+    } catch (error) {
+      this.setUser()
+    }
+  }
+
+  async login(username: string, password: string) {
+    const tenantId = get(this.store).tenantId
+    await API.logIn(tenantId, username, password)
+    await this.getSelf()
+  }
+
+  async logout() {
+    await API.logOut()
+    this.setPostLogout()
+    this.setUser()
+    await this.setInitInfo({})
+  }
+
+  async updateSelf(fields: UpdateSelfRequest) {
+    await API.updateSelf(fields)
+    // Refetch to enrich after update.
+    try {
+      const user = await API.fetchBuilderSelf()
+      this.setUser(user)
+    } catch (error) {
+      this.setUser()
+    }
+  }
+
+  async forgotPassword(email: string) {
+    const tenantId = get(this.store).tenantId
+    await API.requestForgotPassword(tenantId, email)
+  }
+
+  async resetPassword(password: string, resetCode: string) {
+    const tenantId = get(this.store).tenantId
+    await API.resetPassword(tenantId, password, resetCode)
+  }
+
+  async generateAPIKey() {
+    return API.generateAPIKey()
+  }
+
+  async fetchAPIKey() {
+    const info = await API.fetchDeveloperInfo()
+    return info?.apiKey
+  }
+}
+
+export const auth = new AuthStore()
diff --git a/packages/builder/src/stores/portal/backups.js b/packages/builder/src/stores/portal/backups.js
index 6ac70ef36c..7bd98c78ea 100644
--- a/packages/builder/src/stores/portal/backups.js
+++ b/packages/builder/src/stores/portal/backups.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 export function createBackupsStore() {
   const store = writable({})
@@ -11,40 +11,28 @@ export function createBackupsStore() {
     })
   }
 
-  async function searchBackups({
-    appId,
-    trigger,
-    type,
-    page,
-    startDate,
-    endDate,
-  }) {
-    return API.searchBackups({ appId, trigger, type, page, startDate, endDate })
+  async function searchBackups(appId, opts) {
+    return API.searchBackups(appId, opts)
   }
 
-  async function restoreBackup({ appId, backupId, name }) {
-    return API.restoreBackup({ appId, backupId, name })
+  async function restoreBackup(appId, backupId, name) {
+    return API.restoreBackup(appId, backupId, name)
   }
 
-  async function deleteBackup({ appId, backupId }) {
-    return API.deleteBackup({ appId, backupId })
+  async function deleteBackup(appId, backupId) {
+    return API.deleteBackup(appId, backupId)
   }
 
   async function createManualBackup(appId) {
     return API.createManualBackup(appId)
   }
 
-  async function updateBackup({ appId, backupId, name }) {
-    return API.updateBackup({ appId, backupId, name })
-  }
-
   return {
     createManualBackup,
     searchBackups,
     selectBackup,
     deleteBackup,
     restoreBackup,
-    updateBackup,
     subscribe: store.subscribe,
   }
 }
diff --git a/packages/builder/src/stores/portal/backups.test.js b/packages/builder/src/stores/portal/backups.test.js
index 18feb01938..51cd13f91a 100644
--- a/packages/builder/src/stores/portal/backups.test.js
+++ b/packages/builder/src/stores/portal/backups.test.js
@@ -1,8 +1,7 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
 import { createBackupsStore } from "./backups"
-
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 vi.mock("svelte/store", () => {
   return {
@@ -10,17 +9,19 @@ vi.mock("svelte/store", () => {
       subscribe: vi.fn(),
       update: vi.fn(),
     })),
+    derived: vi.fn(() => ({
+      subscribe: vi.fn(),
+    })),
   }
 })
 
-vi.mock("api", () => {
+vi.mock("@/api", () => {
   return {
     API: {
       searchBackups: vi.fn(() => "searchBackupsReturn"),
       restoreBackup: vi.fn(() => "restoreBackupReturn"),
       deleteBackup: vi.fn(() => "deleteBackupReturn"),
       createManualBackup: vi.fn(() => "createManualBackupReturn"),
-      updateBackup: vi.fn(() => "updateBackupReturn"),
     },
   }
 })
@@ -61,8 +62,7 @@ describe("backups store", () => {
       ctx.page = "page"
       ctx.startDate = "startDate"
       ctx.endDate = "endDate"
-      ctx.value = await ctx.returnedStore.searchBackups({
-        appId: ctx.appId,
+      ctx.value = await ctx.returnedStore.searchBackups(ctx.appId, {
         trigger: ctx.trigger,
         type: ctx.type,
         page: ctx.page,
@@ -73,8 +73,7 @@ describe("backups store", () => {
 
     it("calls and returns the API searchBackups method", ctx => {
       expect(API.searchBackups).toHaveBeenCalledTimes(1)
-      expect(API.searchBackups).toHaveBeenCalledWith({
-        appId: ctx.appId,
+      expect(API.searchBackups).toHaveBeenCalledWith(ctx.appId, {
         trigger: ctx.trigger,
         type: ctx.type,
         page: ctx.page,
@@ -103,18 +102,12 @@ describe("backups store", () => {
     beforeEach(async ctx => {
       ctx.appId = "appId"
       ctx.backupId = "backupId"
-      ctx.value = await ctx.returnedStore.deleteBackup({
-        appId: ctx.appId,
-        backupId: ctx.backupId,
-      })
+      ctx.value = await ctx.returnedStore.deleteBackup(ctx.appId, ctx.backupId)
     })
 
     it("calls and returns the API deleteBackup method", ctx => {
       expect(API.deleteBackup).toHaveBeenCalledTimes(1)
-      expect(API.deleteBackup).toHaveBeenCalledWith({
-        appId: ctx.appId,
-        backupId: ctx.backupId,
-      })
+      expect(API.deleteBackup).toHaveBeenCalledWith(ctx.appId, ctx.backupId)
       expect(ctx.value).toBe("deleteBackupReturn")
     })
   })
@@ -124,47 +117,24 @@ describe("backups store", () => {
       ctx.appId = "appId"
       ctx.backupId = "backupId"
       ctx.$name = "name" // `name` is used by some sort of internal ctx thing and is readonly
-      ctx.value = await ctx.returnedStore.restoreBackup({
-        appId: ctx.appId,
-        backupId: ctx.backupId,
-        name: ctx.$name,
-      })
+      ctx.value = await ctx.returnedStore.restoreBackup(
+        ctx.appId,
+        ctx.backupId,
+        ctx.$name
+      )
     })
 
     it("calls and returns the API restoreBackup method", ctx => {
       expect(API.restoreBackup).toHaveBeenCalledTimes(1)
-      expect(API.restoreBackup).toHaveBeenCalledWith({
-        appId: ctx.appId,
-        backupId: ctx.backupId,
-        name: ctx.$name,
-      })
+      expect(API.restoreBackup).toHaveBeenCalledWith(
+        ctx.appId,
+        ctx.backupId,
+        ctx.$name
+      )
       expect(ctx.value).toBe("restoreBackupReturn")
     })
   })
 
-  describe("updateBackup", () => {
-    beforeEach(async ctx => {
-      ctx.appId = "appId"
-      ctx.backupId = "backupId"
-      ctx.$name = "name" // `name` is used by some sort of internal ctx thing and is readonly
-      ctx.value = await ctx.returnedStore.updateBackup({
-        appId: ctx.appId,
-        backupId: ctx.backupId,
-        name: ctx.$name,
-      })
-    })
-
-    it("calls and returns the API updateBackup method", ctx => {
-      expect(API.updateBackup).toHaveBeenCalledTimes(1)
-      expect(API.updateBackup).toHaveBeenCalledWith({
-        appId: ctx.appId,
-        backupId: ctx.backupId,
-        name: ctx.$name,
-      })
-      expect(ctx.value).toBe("updateBackupReturn")
-    })
-  })
-
   describe("subscribe", () => {
     it("calls and returns the API updateBackup method", ctx => {
       expect(ctx.returnedStore.subscribe).toBe(ctx.writableReturn.subscribe)
diff --git a/packages/builder/src/stores/portal/email.js b/packages/builder/src/stores/portal/email.js
index 2e222d34c4..7afd543002 100644
--- a/packages/builder/src/stores/portal/email.js
+++ b/packages/builder/src/stores/portal/email.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 export function createEmailStore() {
   const store = writable({})
diff --git a/packages/builder/src/stores/portal/environment.js b/packages/builder/src/stores/portal/environment.js
index b3e46cf7bf..232f314cad 100644
--- a/packages/builder/src/stores/portal/environment.js
+++ b/packages/builder/src/stores/portal/environment.js
@@ -1,7 +1,7 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { Constants } from "@budibase/frontend-core"
-import { licensing } from "stores/portal"
+import { licensing } from "@/stores/portal"
 
 export function createEnvironmentStore() {
   const { subscribe, update } = writable({
diff --git a/packages/builder/src/stores/portal/featureFlags.js b/packages/builder/src/stores/portal/featureFlags.js
index 902a8b488b..ef1100310a 100644
--- a/packages/builder/src/stores/portal/featureFlags.js
+++ b/packages/builder/src/stores/portal/featureFlags.js
@@ -1,5 +1,5 @@
 import { derived } from "svelte/store"
-import { auth } from "stores/portal"
+import { auth } from "@/stores/portal"
 
 export const INITIAL_FEATUREFLAG_STATE = {
   SQS: false,
diff --git a/packages/builder/src/stores/portal/features.js b/packages/builder/src/stores/portal/features.js
index e2ecb4c66a..747052aa6c 100644
--- a/packages/builder/src/stores/portal/features.js
+++ b/packages/builder/src/stores/portal/features.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { licensing } from "./licensing"
 import { ConfigType } from "@budibase/types"
 
diff --git a/packages/builder/src/stores/portal/groups.js b/packages/builder/src/stores/portal/groups.js
index 1edc8a461c..408fb4189a 100644
--- a/packages/builder/src/stores/portal/groups.js
+++ b/packages/builder/src/stores/portal/groups.js
@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
-import { licensing } from "stores/portal"
+import { API } from "@/api"
+import { licensing } from "@/stores/portal"
 
 export function createGroupsStore() {
   const store = writable([])
@@ -46,10 +46,7 @@ export function createGroupsStore() {
     },
 
     delete: async group => {
-      await API.deleteGroup({
-        id: group._id,
-        rev: group._rev,
-      })
+      await API.deleteGroup(group._id, group._rev)
       store.update(state => {
         state = state.filter(state => state._id !== group._id)
         return state
@@ -89,11 +86,11 @@ export function createGroupsStore() {
     },
 
     addGroupAppBuilder: async (groupId, appId) => {
-      return await API.addGroupAppBuilder({ groupId, appId })
+      return await API.addGroupAppBuilder(groupId, appId)
     },
 
     removeGroupAppBuilder: async (groupId, appId) => {
-      return await API.removeGroupAppBuilder({ 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 9abc376cd0..afc3ea1628 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -1,8 +1,8 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
-import { auth, admin } from "stores/portal"
+import { API } from "@/api"
+import { auth, admin } from "@/stores/portal"
 import { Constants } from "@budibase/frontend-core"
-import { StripeStatus } from "components/portal/licensing/constants"
+import { StripeStatus } from "@/components/portal/licensing/constants"
 import { PlanModel } from "@budibase/types"
 
 const UNLIMITED = -1
@@ -22,8 +22,10 @@ export const createLicensingStore = () => {
     backupsEnabled: false,
     brandingEnabled: false,
     scimEnabled: false,
+    environmentVariablesEnabled: false,
     budibaseAIEnabled: false,
     customAIConfigsEnabled: false,
+    auditLogsEnabled: false,
     // the currently used quotas from the db
     quotaUsage: undefined,
     // derived quota metrics for percentages used
diff --git a/packages/builder/src/stores/portal/menu.js b/packages/builder/src/stores/portal/menu.js
index a1b5450ea4..75a9b363be 100644
--- a/packages/builder/src/stores/portal/menu.js
+++ b/packages/builder/src/stores/portal/menu.js
@@ -1,7 +1,7 @@
 import { derived } from "svelte/store"
 import { admin } from "./admin"
 import { auth } from "./auth"
-import { isEnabled } from "helpers/featureFlags"
+import { isEnabled } from "@/helpers/featureFlags"
 import { sdk } from "@budibase/shared-core"
 import { FeatureFlag } from "@budibase/types"
 
diff --git a/packages/builder/src/stores/portal/navigation.ts b/packages/builder/src/stores/portal/navigation.ts
index 2b230622f6..4eb50bc84f 100644
--- a/packages/builder/src/stores/portal/navigation.ts
+++ b/packages/builder/src/stores/portal/navigation.ts
@@ -2,13 +2,13 @@ import { writable } from "svelte/store"
 
 type GotoFuncType = (path: string) => void
 
-interface Store {
+interface PortalNavigationStore {
   initialisated: boolean
   goto: GotoFuncType
 }
 
 export function createNavigationStore() {
-  const store = writable<Store>({
+  const store = writable<PortalNavigationStore>({
     initialisated: false,
     goto: undefined as any,
   })
diff --git a/packages/builder/src/stores/portal/oidc.js b/packages/builder/src/stores/portal/oidc.js
index 3a4b954753..65d8eac04c 100644
--- a/packages/builder/src/stores/portal/oidc.js
+++ b/packages/builder/src/stores/portal/oidc.js
@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
-import { auth } from "stores/portal"
+import { API } from "@/api"
+import { auth } from "@/stores/portal"
 
 const OIDC_CONFIG = {
   logo: undefined,
diff --git a/packages/builder/src/stores/portal/organisation.js b/packages/builder/src/stores/portal/organisation.js
index ab33c7a5fa..6d41620c9f 100644
--- a/packages/builder/src/stores/portal/organisation.js
+++ b/packages/builder/src/stores/portal/organisation.js
@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
-import { API } from "api"
-import { auth } from "stores/portal"
+import { API } from "@/api"
+import { auth } from "@/stores/portal"
 import _ from "lodash"
 
 const DEFAULT_CONFIG = {
diff --git a/packages/builder/src/stores/portal/plugins.ts b/packages/builder/src/stores/portal/plugins.ts
index 15110a852b..635db4e31f 100644
--- a/packages/builder/src/stores/portal/plugins.ts
+++ b/packages/builder/src/stores/portal/plugins.ts
@@ -1,17 +1,13 @@
 import { writable } from "svelte/store"
-import { PluginSource } from "constants/index"
-
-import { API } from "api"
-
-interface Plugin {
-  _id: string
-}
+import { PluginSource } from "@/constants/index"
+import { Plugin } from "@budibase/types"
+import { API } from "@/api"
 
 export function createPluginsStore() {
   const { subscribe, set, update } = writable<Plugin[]>([])
 
   async function load() {
-    const plugins = await API.getPlugins()
+    const plugins: Plugin[] = await API.getPlugins()
     set(plugins)
   }
 
diff --git a/packages/builder/src/stores/portal/templates.js b/packages/builder/src/stores/portal/templates.js
index 904e9cfa8e..2ff23866ab 100644
--- a/packages/builder/src/stores/portal/templates.js
+++ b/packages/builder/src/stores/portal/templates.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 
 export function templatesStore() {
   const { subscribe, set } = writable([])
diff --git a/packages/builder/src/stores/portal/users.js b/packages/builder/src/stores/portal/users.js
index 747dc5144d..99ead22317 100644
--- a/packages/builder/src/stores/portal/users.js
+++ b/packages/builder/src/stores/portal/users.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import { API } from "api"
+import { API } from "@/api"
 import { update } from "lodash"
 import { licensing } from "."
 import { sdk } from "@budibase/shared-core"
@@ -35,7 +35,24 @@ export function createUsersStore() {
   }
 
   async function invite(payload) {
-    return API.inviteUsers(payload)
+    const users = payload.map(user => {
+      let builder = undefined
+      if (user.admin || user.builder) {
+        builder = { global: true }
+      } else if (user.creator) {
+        builder = { creator: true }
+      }
+      return {
+        email: user.email,
+        userInfo: {
+          admin: user.admin ? { global: true } : undefined,
+          builder,
+          userGroups: user.groups,
+          roles: user.apps ? user.apps : undefined,
+        },
+      }
+    })
+    return API.inviteUsers(users)
   }
 
   async function removeInvites(payload) {
@@ -60,7 +77,7 @@ export function createUsersStore() {
   }
 
   async function updateInvite(invite) {
-    return API.updateUserInvite(invite)
+    return API.updateUserInvite(invite.code, invite)
   }
 
   async function create(data) {
@@ -93,10 +110,7 @@ export function createUsersStore() {
 
       return body
     })
-    const response = await API.createUsers({
-      users: mappedUsers,
-      groups: data.groups,
-    })
+    const response = await API.createUsers(mappedUsers, data.groups)
 
     // re-search from first page
     await search()
@@ -108,8 +122,8 @@ export function createUsersStore() {
     update(users => users.filter(user => user._id !== id))
   }
 
-  async function getUserCountByApp({ appId }) {
-    return await API.getUserCountByApp({ appId })
+  async function getUserCountByApp(appId) {
+    return await API.getUserCountByApp(appId)
   }
 
   async function bulkDelete(users) {
@@ -121,11 +135,11 @@ export function createUsersStore() {
   }
 
   async function addAppBuilder(userId, appId) {
-    return await API.addAppBuilder({ userId, appId })
+    return await API.addAppBuilder(userId, appId)
   }
 
   async function removeAppBuilder(userId, appId) {
-    return await API.removeAppBuilder({ userId, appId })
+    return await API.removeAppBuilder(userId, appId)
   }
 
   async function getAccountHolder() {
diff --git a/packages/builder/src/stores/selectors.js b/packages/builder/src/stores/selectors.js
index f592250f25..af12f7d549 100644
--- a/packages/builder/src/stores/selectors.js
+++ b/packages/builder/src/stores/selectors.js
@@ -1,4 +1,4 @@
-import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
+import { DEFAULT_BB_DATASOURCE_ID } from "@/constants/backend"
 import { DatasourceFeature } from "@budibase/types"
 
 export const integrationForDatasource = (integrations, datasource) => ({
diff --git a/packages/builder/src/stores/selectors.test.js b/packages/builder/src/stores/selectors.test.js
index 7bc790ad75..8ea0d7ac73 100644
--- a/packages/builder/src/stores/selectors.test.js
+++ b/packages/builder/src/stores/selectors.test.js
@@ -1,5 +1,5 @@
 import { it, expect, describe, beforeEach, vi } from "vitest"
-import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
+import { DEFAULT_BB_DATASOURCE_ID } from "@/constants/backend"
 import { integrationForDatasource, hasData, hasDefaultData } from "./selectors"
 
 describe("selectors", () => {
diff --git a/packages/builder/src/templates/commonComponents.js b/packages/builder/src/templates/commonComponents.js
index 884419ae6c..ebc02669c8 100644
--- a/packages/builder/src/templates/commonComponents.js
+++ b/packages/builder/src/templates/commonComponents.js
@@ -1,6 +1,6 @@
-import { FieldTypeToComponentMap } from "components/design/settings/controls/FieldConfiguration/utils"
+import { FieldTypeToComponentMap } from "@/components/design/settings/controls/FieldConfiguration/utils"
 import { Component } from "./Component"
-import { getSchemaForDatasource } from "dataBinding"
+import { getSchemaForDatasource } from "@/dataBinding"
 
 export function makeDatasourceFormComponents(datasource) {
   const { schema } = getSchemaForDatasource(null, datasource, {
diff --git a/packages/builder/src/templates/rowActions.js b/packages/builder/src/templates/rowActions.js
index 639db09d00..356c20e68a 100644
--- a/packages/builder/src/templates/rowActions.js
+++ b/packages/builder/src/templates/rowActions.js
@@ -1,8 +1,8 @@
 import { get } from "svelte/store"
-import { getDatasourceForProvider } from "dataBinding"
-import { rowActions, selectedScreen, componentStore } from "stores/builder"
+import { getDatasourceForProvider } from "@/dataBinding"
+import { rowActions, selectedScreen, componentStore } from "@/stores/builder"
 import { Helpers } from "@budibase/bbui"
-import { findComponent } from "helpers/components"
+import { findComponent } from "@/helpers/components"
 
 export const getRowActionButtonTemplates = async ({
   screen,
diff --git a/packages/builder/src/templates/screenTemplating/blank.js b/packages/builder/src/templates/screenTemplating/blank.js
index 18859cc39d..81fec2030b 100644
--- a/packages/builder/src/templates/screenTemplating/blank.js
+++ b/packages/builder/src/templates/screenTemplating/blank.js
@@ -1,7 +1,7 @@
 import { Screen } from "./Screen"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import getValidRoute from "./getValidRoute"
-import { Roles } from "constants/backend"
+import { Roles } from "@/constants/backend"
 
 const blank = ({ route, screens }) => {
   const validRoute = getValidRoute(screens, route, Roles.BASIC)
diff --git a/packages/builder/src/templates/screenTemplating/form.js b/packages/builder/src/templates/screenTemplating/form.js
index e0fe815896..30070ce3cd 100644
--- a/packages/builder/src/templates/screenTemplating/form.js
+++ b/packages/builder/src/templates/screenTemplating/form.js
@@ -1,9 +1,9 @@
 import { Screen } from "./Screen"
 import { Component } from "../Component"
 import getValidRoute from "./getValidRoute"
-import { componentStore } from "stores/builder"
+import { componentStore } from "@/stores/builder"
 import { Helpers } from "@budibase/bbui"
-import { getRowActionButtonTemplates } from "templates/rowActions"
+import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
 export const getTypeSpecificRoute = (tableOrView, type) => {
   if (type === "create") {
diff --git a/packages/builder/src/templates/screenTemplating/getValidRoute.js b/packages/builder/src/templates/screenTemplating/getValidRoute.js
index d49d6b6598..1fe2efb228 100644
--- a/packages/builder/src/templates/screenTemplating/getValidRoute.js
+++ b/packages/builder/src/templates/screenTemplating/getValidRoute.js
@@ -1,4 +1,4 @@
-import sanitizeUrl from "helpers/sanitizeUrl"
+import sanitizeUrl from "@/helpers/sanitizeUrl"
 
 const arbitraryMax = 10000
 
diff --git a/packages/builder/src/templates/screenTemplating/table/inline.js b/packages/builder/src/templates/screenTemplating/table/inline.js
index b7e0dd58b8..86f23582bb 100644
--- a/packages/builder/src/templates/screenTemplating/table/inline.js
+++ b/packages/builder/src/templates/screenTemplating/table/inline.js
@@ -1,8 +1,8 @@
 import { Screen } from "../Screen"
 import { Component } from "../../Component"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import getValidRoute from "../getValidRoute"
-import { getRowActionButtonTemplates } from "templates/rowActions"
+import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
 const inline = async ({ tableOrView, permissions, screens }) => {
   const heading = new Component("@budibase/standard-components/heading")
diff --git a/packages/builder/src/templates/screenTemplating/table/modal.js b/packages/builder/src/templates/screenTemplating/table/modal.js
index 6a97979b31..76c32ef278 100644
--- a/packages/builder/src/templates/screenTemplating/table/modal.js
+++ b/packages/builder/src/templates/screenTemplating/table/modal.js
@@ -3,9 +3,9 @@ import { Component } from "../../Component"
 import { generate } from "shortid"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Utils } from "@budibase/frontend-core"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import getValidRoute from "../getValidRoute"
-import { getRowActionButtonTemplates } from "templates/rowActions"
+import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
 const modal = async ({ tableOrView, permissions, screens }) => {
   /*
diff --git a/packages/builder/src/templates/screenTemplating/table/newScreen.js b/packages/builder/src/templates/screenTemplating/table/newScreen.js
index b8b06d3d44..285376a44a 100644
--- a/packages/builder/src/templates/screenTemplating/table/newScreen.js
+++ b/packages/builder/src/templates/screenTemplating/table/newScreen.js
@@ -1,10 +1,10 @@
 import { Screen } from "../Screen"
 import { Component } from "../../Component"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import getValidRoute from "../getValidRoute"
 import { Helpers } from "@budibase/bbui"
-import { getRowActionButtonTemplates } from "templates/rowActions"
+import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
 const getTableScreenTemplate = ({
   route,
diff --git a/packages/builder/src/templates/screenTemplating/table/sidePanel.js b/packages/builder/src/templates/screenTemplating/table/sidePanel.js
index 139b117d1b..966ecea2bd 100644
--- a/packages/builder/src/templates/screenTemplating/table/sidePanel.js
+++ b/packages/builder/src/templates/screenTemplating/table/sidePanel.js
@@ -3,9 +3,9 @@ import { Component } from "../../Component"
 import { generate } from "shortid"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Utils } from "@budibase/frontend-core"
-import { capitalise } from "helpers"
+import { capitalise } from "@/helpers"
 import getValidRoute from "../getValidRoute"
-import { getRowActionButtonTemplates } from "templates/rowActions"
+import { getRowActionButtonTemplates } from "@/templates/rowActions"
 
 const sidePanel = async ({ tableOrView, permissions, screens }) => {
   /*
diff --git a/packages/builder/tsconfig.json b/packages/builder/tsconfig.json
index a7a4c3d800..d698e2fe1d 100644
--- a/packages/builder/tsconfig.json
+++ b/packages/builder/tsconfig.json
@@ -1,16 +1,18 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
+    "outDir": "./dist",
+    "lib": ["ESNext"],
     "baseUrl": ".",
     "paths": {
-      "assets/*": ["./assets/*"],
       "@budibase/*": [
         "../*/src/index.ts",
         "../*/src/index.js",
         "../*",
         "../../node_modules/@budibase/*"
       ],
-      "*": ["./src/*"]
+      "assets/*": ["assets/*"],
+      "@/*": ["src/*"]
     }
   }
 }
diff --git a/packages/builder/vite.config.mjs b/packages/builder/vite.config.mjs
index ccc5729d28..fb281f60bc 100644
--- a/packages/builder/vite.config.mjs
+++ b/packages/builder/vite.config.mjs
@@ -88,64 +88,13 @@ export default defineConfig(({ mode }) => {
     },
     resolve: {
       dedupe: ["@roxi/routify"],
-      alias: [
-        {
-          find: "assets",
-          replacement: path.resolve("./assets"),
-        },
-        {
-          find: "components",
-          replacement: path.resolve("./src/components"),
-        },
-        {
-          find: "pages",
-          replacement: path.resolve("./src/pages"),
-        },
-        {
-          find: "templates",
-          replacement: path.resolve("./src/templates"),
-        },
-        {
-          find: "stores",
-          replacement: path.resolve("./src/stores"),
-        },
-        {
-          find: "dataBinding",
-          replacement: path.resolve("./src/dataBinding.js"),
-        },
-        {
-          find: "api",
-          replacement: path.resolve("./src/api.js"),
-        },
-        {
-          find: "constants",
-          replacement: path.resolve("./src/constants"),
-        },
-        {
-          find: "analytics",
-          replacement: path.resolve("./src/analytics"),
-        },
-        {
-          find: "actions",
-          replacement: path.resolve("./src/actions"),
-        },
-        {
-          find: "helpers",
-          replacement: path.resolve("./src/helpers"),
-        },
-        {
-          find: "@budibase/types",
-          replacement: path.resolve("../types/src"),
-        },
-        {
-          find: "@budibase/shared-core",
-          replacement: path.resolve("../shared-core/src"),
-        },
-        {
-          find: "@budibase/bbui",
-          replacement: path.resolve("../bbui/src"),
-        },
-      ],
+      alias: {
+        "@budibase/types": path.resolve(__dirname, "../types/src"),
+        "@budibase/shared-core": path.resolve(__dirname, "../shared-core/src"),
+        "@budibase/bbui": path.resolve(__dirname, "../bbui/src"),
+        "@": path.resolve(__dirname, "src"),
+        assets: path.resolve(__dirname, "assets"),
+      },
     },
   }
 })
diff --git a/packages/client/src/api/patches.js b/packages/client/src/api/patches.js
index faad9c81ec..5413379b72 100644
--- a/packages/client/src/api/patches.js
+++ b/packages/client/src/api/patches.js
@@ -77,12 +77,11 @@ export const patchAPI = API => {
     return await enrichRows(rows, tableId)
   }
   const searchTable = API.searchTable
-  API.searchTable = async params => {
-    const tableId = params?.tableId
-    const output = await searchTable(params)
+  API.searchTable = async (sourceId, opts) => {
+    const output = await searchTable(sourceId, opts)
     return {
       ...output,
-      rows: await enrichRows(output?.rows, tableId),
+      rows: await enrichRows(output.rows, sourceId),
     }
   }
   const fetchViewData = API.fetchViewData
diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index 27286a8666..d9a91016cb 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -49,10 +49,7 @@
       data.append("file", fileList[i])
     }
     try {
-      return await API.uploadAttachment({
-        data,
-        tableId: formContext?.dataSource?.tableId,
-      })
+      return await API.uploadAttachment(formContext?.dataSource?.tableId, data)
     } catch (error) {
       return []
     }
diff --git a/packages/client/src/components/app/forms/SignatureField.svelte b/packages/client/src/components/app/forms/SignatureField.svelte
index bdae148368..a7a7dc3206 100644
--- a/packages/client/src/components/app/forms/SignatureField.svelte
+++ b/packages/client/src/components/app/forms/SignatureField.svelte
@@ -31,10 +31,10 @@
         let attachRequest = new FormData()
         attachRequest.append("file", signatureFile)
 
-        const resp = await API.uploadAttachment({
-          data: attachRequest,
-          tableId: formContext?.dataSource?.tableId,
-        })
+        const resp = await API.uploadAttachment(
+          formContext?.dataSource?.tableId,
+          attachRequest
+        )
         const [signatureAttachment] = resp
         updateValue = signatureAttachment
       } else {
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index ec861ab5b4..9dae1dcb22 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -273,6 +273,7 @@
               value={option.value}
               icon={option.barIcon}
               title={option.barTitle || option.label}
+              disabled={!!setting.license}
               {component}
             />
           {/each}
@@ -281,6 +282,7 @@
             prop={setting.key}
             options={setting.options}
             label={setting.label}
+            disabled={!!setting.license}
             {component}
           />
         {/if}
@@ -289,11 +291,16 @@
           prop={setting.key}
           icon={setting.barIcon}
           title={setting.barTitle || setting.label}
+          disabled={!!setting.license}
           bool
           {component}
         />
       {:else if setting.type === "color"}
-        <SettingsColorPicker prop={setting.key} {component} />
+        <SettingsColorPicker
+          prop={setting.key}
+          {component}
+          disabled={!!setting.license}
+        />
       {/if}
       {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index a93ffb77af..16a4fe23d0 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -10,6 +10,7 @@
   export let bool = false
   export let active = false
   export let component
+  export let disabled = false
 
   const dispatch = createEventDispatcher()
 
@@ -22,6 +23,7 @@
 <div
   {title}
   class:active
+  class:disabled
   on:click={() => {
     if (prop) {
       const newValue = bool ? !currentValue : value
@@ -50,4 +52,8 @@
     background-color: rgba(13, 102, 208, 0.1);
     color: var(--spectrum-global-color-blue-600);
   }
+  .disabled {
+    pointer-events: none;
+    color: var(--spectrum-global-color-gray-400);
+  }
 </style>
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index a292d7d838..aa4b3cb1d1 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -4,14 +4,15 @@
 
   export let prop
   export let component
+  export let disabled = false
 
   $: currentValue = component?.[prop]
 </script>
 
-<div>
+<div class:disabled>
   <ColorPicker
     size="S"
-    value={currentValue}
+    value={disabled ? null : currentValue}
     on:change={e => {
       if (prop) {
         builderStore.actions.updateProp(prop, e.detail)
@@ -24,4 +25,7 @@
   div {
     padding: 0 4px;
   }
+  div.disabled {
+    pointer-events: none;
+  }
 </style>
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 3900d065e8..6b354f8d65 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -6,6 +6,7 @@
   export let options
   export let label
   export let component
+  export let disabled = false
 
   $: currentValue = component?.[prop]
 </script>
@@ -16,6 +17,7 @@
     autoWidth
     placeholder={label}
     {options}
+    {disabled}
     value={currentValue}
     on:change={e => {
       if (prop) {
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index bd51924bf4..40d066f2ee 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -41,6 +41,7 @@ import {
   memo,
   derivedMemo,
 } from "@budibase/frontend-core"
+import { createValidatorFromConstraints } from "components/app/forms/validation"
 
 export default {
   API,
@@ -81,6 +82,7 @@ export default {
   generateGoldenSample: RowUtils.generateGoldenSample,
   memo,
   derivedMemo,
+  createValidatorFromConstraints,
 
   // Components
   Provider,
diff --git a/packages/client/src/utils/blocks.js b/packages/client/src/utils/blocks.js
index f9452e47a9..88cf4b095b 100644
--- a/packages/client/src/utils/blocks.js
+++ b/packages/client/src/utils/blocks.js
@@ -1,7 +1,7 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { API } from "../api/index.js"
 import { UILogicalOperator } from "@budibase/types"
-import { OnEmptyFilter } from "@budibase/frontend-core/src/constants.js"
+import { Constants } from "@budibase/frontend-core"
 
 // Map of data types to component types for search fields inside blocks
 const schemaComponentMap = {
@@ -108,7 +108,7 @@ export const enrichFilter = (filter, columns, formId) => {
 
   return {
     logicalOperator: UILogicalOperator.ALL,
-    onEmptyFilter: OnEmptyFilter.RETURN_ALL,
+    onEmptyFilter: Constants.OnEmptyFilter.RETURN_ALL,
     groups: [
       ...(filter?.groups || []),
       {
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index e2b0071042..9d0bddcc92 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -147,7 +147,7 @@ const fetchRowHandler = async action => {
 
   if (tableId && rowId) {
     try {
-      const row = await API.fetchRow({ tableId, rowId })
+      const row = await API.fetchRow(tableId, rowId)
 
       return { row }
     } catch (error) {
@@ -192,7 +192,7 @@ const deleteRowHandler = async action => {
         return false
       }
 
-      const resp = await API.deleteRows({ tableId, rows: requestConfig })
+      const resp = await API.deleteRows(tableId, requestConfig)
 
       if (!notificationOverride) {
         notificationStore.actions.success(
@@ -251,17 +251,14 @@ const navigationHandler = action => {
 }
 
 const queryExecutionHandler = async action => {
-  const { datasourceId, queryId, queryParams, notificationOverride } =
-    action.parameters
+  const { queryId, queryParams, notificationOverride } = action.parameters
   try {
     const query = await API.fetchQueryDefinition(queryId)
     if (query?.datasourceId == null) {
       notificationStore.actions.error("That query couldn't be found")
       return false
     }
-    const result = await API.executeQuery({
-      datasourceId,
-      queryId,
+    const result = await API.executeQuery(queryId, {
       parameters: queryParams,
     })
 
@@ -381,10 +378,8 @@ const exportDataHandler = async action => {
       if (typeof rows[0] !== "string") {
         rows = rows.map(row => row._id)
       }
-      const data = await API.exportRows({
-        tableId,
+      const data = await API.exportRows(tableId, type, {
         rows,
-        format: type,
         columns: columns?.map(column => column.name || column),
         delimiter,
         customHeaders,
@@ -454,12 +449,7 @@ const downloadFileHandler = async action => {
     const { type } = action.parameters
     if (type === "attachment") {
       const { tableId, rowId, attachmentColumn } = action.parameters
-      const res = await API.downloadAttachment(
-        tableId,
-        rowId,
-        attachmentColumn,
-        { suppressErrors: true }
-      )
+      const res = await API.downloadAttachment(tableId, rowId, attachmentColumn)
       await downloadStream(res)
       return
     }
@@ -495,11 +485,7 @@ const downloadFileHandler = async action => {
 
 const rowActionHandler = async action => {
   const { resourceId, rowId, rowActionId } = action.parameters
-  await API.rowActions.trigger({
-    rowActionId,
-    sourceId: resourceId,
-    rowId,
-  })
+  await API.rowActions.trigger(resourceId, rowActionId, rowId)
   // Refresh related datasources
   await dataSourceStore.actions.invalidateDataSource(resourceId, {
     invalidateRelationships: true,
diff --git a/packages/client/svelte.config.mjs b/packages/client/svelte.config.mjs
new file mode 100644
index 0000000000..af7d74ea4b
--- /dev/null
+++ b/packages/client/svelte.config.mjs
@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+const config = {
+  preprocess: vitePreprocess(),
+}
+
+export default config
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 44ffd6580f..b1f311183a 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -4,7 +4,10 @@
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
-  "svelte": "src/index.js",
+  "svelte": "./src/index.ts",
+  "scripts": {
+    "check:types": "yarn svelte-check"
+  },
   "dependencies": {
     "@budibase/bbui": "*",
     "@budibase/shared-core": "*",
@@ -13,5 +16,8 @@
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
+  },
+  "devDependencies": {
+    "svelte-check": "^4.1.0"
   }
 }
diff --git a/packages/frontend-core/src/api/ai.js b/packages/frontend-core/src/api/ai.js
deleted file mode 100644
index 7fa756a19e..0000000000
--- a/packages/frontend-core/src/api/ai.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const buildAIEndpoints = API => ({
-  /**
-   * Generates a cron expression from a prompt
-   */
-  generateCronExpression: async ({ prompt }) => {
-    return await API.post({
-      url: "/api/ai/cron",
-      body: { prompt },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/ai.ts b/packages/frontend-core/src/api/ai.ts
new file mode 100644
index 0000000000..3160273301
--- /dev/null
+++ b/packages/frontend-core/src/api/ai.ts
@@ -0,0 +1,17 @@
+import { BaseAPIClient } from "./types"
+
+export interface AIEndpoints {
+  generateCronExpression: (prompt: string) => Promise<{ message: string }>
+}
+
+export const buildAIEndpoints = (API: BaseAPIClient): AIEndpoints => ({
+  /**
+   * Generates a cron expression from a prompt
+   */
+  generateCronExpression: async prompt => {
+    return await API.post({
+      url: "/api/ai/cron",
+      body: { prompt },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/analytics.js b/packages/frontend-core/src/api/analytics.js
deleted file mode 100644
index df56bc938e..0000000000
--- a/packages/frontend-core/src/api/analytics.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export const buildAnalyticsEndpoints = API => ({
-  /**
-   * Gets the current status of analytics for this environment
-   */
-  getAnalyticsStatus: async () => {
-    return await API.get({
-      url: "/api/bbtel",
-    })
-  },
-  analyticsPing: async ({ source, embedded }) => {
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-    return await API.post({
-      url: "/api/bbtel/ping",
-      body: { source, timezone, embedded },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/analytics.ts b/packages/frontend-core/src/api/analytics.ts
new file mode 100644
index 0000000000..b57a8e5925
--- /dev/null
+++ b/packages/frontend-core/src/api/analytics.ts
@@ -0,0 +1,39 @@
+import { BaseAPIClient } from "./types"
+import {
+  AnalyticsEnabledResponse,
+  AnalyticsPingRequest,
+  AnalyticsPingResponse,
+} from "@budibase/types"
+
+export interface AnalyticsEndpoints {
+  getAnalyticsStatus: () => Promise<AnalyticsEnabledResponse>
+  analyticsPing: (
+    payload: Omit<AnalyticsPingRequest, "timezone">
+  ) => Promise<AnalyticsPingResponse>
+}
+
+export const buildAnalyticsEndpoints = (
+  API: BaseAPIClient
+): AnalyticsEndpoints => ({
+  /**
+   * Gets the current status of analytics for this environment
+   */
+  getAnalyticsStatus: async () => {
+    return await API.get({
+      url: "/api/bbtel",
+    })
+  },
+
+  /**
+   * Notifies analytics of a certain environment
+   */
+  analyticsPing: async request => {
+    return await API.post<AnalyticsPingRequest, AnalyticsPingResponse>({
+      url: "/api/bbtel/ping",
+      body: {
+        ...request,
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/app.js b/packages/frontend-core/src/api/app.ts
similarity index 61%
rename from packages/frontend-core/src/api/app.js
rename to packages/frontend-core/src/api/app.ts
index de1703373b..eab5d33567 100644
--- a/packages/frontend-core/src/api/app.js
+++ b/packages/frontend-core/src/api/app.ts
@@ -1,6 +1,72 @@
 import { sdk } from "@budibase/shared-core"
+import { BaseAPIClient } from "./types"
+import {
+  AddAppSampleDataResponse,
+  ClearDevLockResponse,
+  CreateAppRequest,
+  CreateAppResponse,
+  DeleteAppResponse,
+  DuplicateAppRequest,
+  DuplicateAppResponse,
+  FetchAppDefinitionResponse,
+  FetchAppPackageResponse,
+  FetchAppsResponse,
+  FetchDeploymentResponse,
+  GetDiagnosticsResponse,
+  ImportToUpdateAppRequest,
+  ImportToUpdateAppResponse,
+  PublishAppResponse,
+  RevertAppClientResponse,
+  RevertAppResponse,
+  SetRevertableAppVersionRequest,
+  SetRevertableAppVersionResponse,
+  SyncAppResponse,
+  UnpublishAppResponse,
+  UpdateAppClientResponse,
+  UpdateAppRequest,
+  UpdateAppResponse,
+} from "@budibase/types"
 
-export const buildAppEndpoints = API => ({
+export interface AppEndpoints {
+  fetchAppPackage: (appId: string) => Promise<FetchAppPackageResponse>
+  saveAppMetadata: (
+    appId: string,
+    metadata: UpdateAppRequest
+  ) => Promise<UpdateAppResponse>
+  unpublishApp: (appId: string) => Promise<UnpublishAppResponse>
+  publishAppChanges: (appId: string) => Promise<PublishAppResponse>
+  revertAppChanges: (appId: string) => Promise<RevertAppResponse>
+  updateAppClientVersion: (appId: string) => Promise<UpdateAppClientResponse>
+  revertAppClientVersion: (appId: string) => Promise<RevertAppClientResponse>
+  releaseAppLock: (appId: string) => Promise<ClearDevLockResponse>
+  getAppDeployments: () => Promise<FetchDeploymentResponse>
+  createApp: (app: CreateAppRequest) => Promise<CreateAppResponse>
+  deleteApp: (appId: string) => Promise<DeleteAppResponse>
+  duplicateApp: (
+    appId: string,
+    app: DuplicateAppRequest
+  ) => Promise<DuplicateAppResponse>
+  updateAppFromExport: (
+    appId: string,
+    body: ImportToUpdateAppRequest
+  ) => Promise<ImportToUpdateAppResponse>
+  fetchSystemDebugInfo: () => Promise<GetDiagnosticsResponse>
+  syncApp: (appId: string) => Promise<SyncAppResponse>
+  getApps: () => Promise<FetchAppsResponse>
+  fetchComponentLibDefinitions: (
+    appId: string
+  ) => Promise<FetchAppDefinitionResponse>
+  setRevertableVersion: (
+    appId: string,
+    revertableVersion: string
+  ) => Promise<SetRevertableAppVersionResponse>
+  addSampleData: (appId: string) => Promise<AddAppSampleDataResponse>
+
+  // Missing request or response types
+  importApps: (apps: any) => Promise<any>
+}
+
+export const buildAppEndpoints = (API: BaseAPIClient): AppEndpoints => ({
   /**
    * Fetches screen definition for an app.
    * @param appId the ID of the app to fetch from
@@ -16,7 +82,7 @@ export const buildAppEndpoints = API => ({
    * @param appId the ID of the app to update
    * @param metadata the app metadata to save
    */
-  saveAppMetadata: async ({ appId, metadata }) => {
+  saveAppMetadata: async (appId, metadata) => {
     return await API.put({
       url: `/api/applications/${appId}`,
       body: metadata,
@@ -87,7 +153,7 @@ export const buildAppEndpoints = API => ({
    * Duplicate an existing app
    * @param app the app to dupe
    */
-  duplicateApp: async (app, appId) => {
+  duplicateApp: async (appId, app) => {
     return await API.post({
       url: `/api/applications/${appId}/duplicate`,
       body: app,
@@ -184,7 +250,7 @@ export const buildAppEndpoints = API => ({
   /**
    * Fetches the definitions for component library components. This includes
    * their props and other metadata from components.json.
-   * @param {string} appId - ID of the currently running app
+   * @param appId ID of the currently running app
    */
   fetchComponentLibDefinitions: async appId => {
     return await API.get({
@@ -192,14 +258,27 @@ export const buildAppEndpoints = API => ({
     })
   },
 
+  /**
+   * Adds sample data to an app
+   * @param appId the app ID
+   */
   addSampleData: async appId => {
     return await API.post({
       url: `/api/applications/${appId}/sample`,
     })
   },
 
+  /**
+   * Sets the revertable version of an app.
+   * Used when manually reverting to older client versions.
+   * @param appId the app ID
+   * @param revertableVersion the version number
+   */
   setRevertableVersion: async (appId, revertableVersion) => {
-    return await API.post({
+    return await API.post<
+      SetRevertableAppVersionRequest,
+      SetRevertableAppVersionResponse
+    >({
       url: `/api/applications/${appId}/setRevertableVersion`,
       body: {
         revertableVersion,
diff --git a/packages/frontend-core/src/api/attachments.js b/packages/frontend-core/src/api/attachments.js
deleted file mode 100644
index 72f280d99d..0000000000
--- a/packages/frontend-core/src/api/attachments.js
+++ /dev/null
@@ -1,78 +0,0 @@
-export const buildAttachmentEndpoints = API => {
-  /**
-   * Generates a signed URL to upload a file to an external datasource.
-   * @param datasourceId the ID of the datasource to upload to
-   * @param bucket the name of the bucket to upload to
-   * @param key the name of the file to upload to
-   */
-  const getSignedDatasourceURL = async ({ datasourceId, bucket, key }) => {
-    return await API.post({
-      url: `/api/attachments/${datasourceId}/url`,
-      body: { bucket, key },
-    })
-  }
-
-  return {
-    getSignedDatasourceURL,
-
-    /**
-     * Uploads an attachment to the server.
-     * @param data the attachment to upload
-     * @param tableId the table ID to upload to
-     */
-    uploadAttachment: async ({ data, tableId }) => {
-      return await API.post({
-        url: `/api/attachments/${tableId}/upload`,
-        body: data,
-        json: false,
-      })
-    },
-
-    /**
-     * Uploads an attachment to the server as a builder user from the builder.
-     * @param data the data to upload
-     */
-    uploadBuilderAttachment: async data => {
-      return await API.post({
-        url: "/api/attachments/process",
-        body: data,
-        json: false,
-      })
-    },
-
-    /**
-     * Uploads a file to an external datasource.
-     * @param datasourceId the ID of the datasource to upload to
-     * @param bucket the name of the bucket to upload to
-     * @param key the name of the file to upload to
-     * @param data the file to upload
-     */
-    externalUpload: async ({ datasourceId, bucket, key, data }) => {
-      const { signedUrl, publicUrl } = await getSignedDatasourceURL({
-        datasourceId,
-        bucket,
-        key,
-      })
-      await API.put({
-        url: signedUrl,
-        body: data,
-        json: false,
-        external: true,
-      })
-      return { publicUrl }
-    },
-    /**
-     * Download an attachment from a row given its column name.
-     * @param datasourceId the ID of the datasource to download from
-     * @param rowId the ID of the row to download from
-     * @param columnName the column name to download
-     */
-    downloadAttachment: async (datasourceId, rowId, columnName, options) => {
-      return await API.get({
-        url: `/api/${datasourceId}/rows/${rowId}/attachment/${columnName}`,
-        parseResponse: response => response,
-        suppressErrors: options?.suppressErrors,
-      })
-    },
-  }
-}
diff --git a/packages/frontend-core/src/api/attachments.ts b/packages/frontend-core/src/api/attachments.ts
new file mode 100644
index 0000000000..0cedfb2cf1
--- /dev/null
+++ b/packages/frontend-core/src/api/attachments.ts
@@ -0,0 +1,121 @@
+import {
+  DownloadAttachmentResponse,
+  GetSignedUploadUrlRequest,
+  GetSignedUploadUrlResponse,
+  ProcessAttachmentResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface AttachmentEndpoints {
+  downloadAttachment: (
+    datasourceId: string,
+    rowId: string,
+    columnName: string
+  ) => Promise<DownloadAttachmentResponse>
+  getSignedDatasourceURL: (
+    datasourceId: string,
+    bucket: string,
+    key: string
+  ) => Promise<GetSignedUploadUrlResponse>
+  uploadAttachment: (
+    tableId: string,
+    data: any
+  ) => Promise<ProcessAttachmentResponse>
+  uploadBuilderAttachment: (data: any) => Promise<ProcessAttachmentResponse>
+  externalUpload: (
+    datasourceId: string,
+    bucket: string,
+    key: string,
+    data: any
+  ) => Promise<{ publicUrl: string | undefined }>
+}
+
+export const buildAttachmentEndpoints = (
+  API: BaseAPIClient
+): AttachmentEndpoints => {
+  const endpoints: Pick<AttachmentEndpoints, "getSignedDatasourceURL"> = {
+    /**
+     * Generates a signed URL to upload a file to an external datasource.
+     * @param datasourceId the ID of the datasource to upload to
+     * @param bucket the name of the bucket to upload to
+     * @param key the name of the file to upload to
+     */
+    getSignedDatasourceURL: async (datasourceId, bucket, key) => {
+      return await API.post<
+        GetSignedUploadUrlRequest,
+        GetSignedUploadUrlResponse
+      >({
+        url: `/api/attachments/${datasourceId}/url`,
+        body: { bucket, key },
+      })
+    },
+  }
+
+  return {
+    ...endpoints,
+
+    /**
+     * Uploads an attachment to the server.
+     * @param data the attachment to upload
+     * @param tableId the table ID to upload to
+     */
+    uploadAttachment: async (tableId, data) => {
+      return await API.post({
+        url: `/api/attachments/${tableId}/upload`,
+        body: data,
+        json: false,
+      })
+    },
+
+    /**
+     * Uploads an attachment to the server as a builder user from the builder.
+     * @param data the data to upload
+     */
+    uploadBuilderAttachment: async data => {
+      return await API.post({
+        url: "/api/attachments/process",
+        body: data,
+        json: false,
+      })
+    },
+
+    /**
+     * Uploads a file to an external datasource.
+     * @param datasourceId the ID of the datasource to upload to
+     * @param bucket the name of the bucket to upload to
+     * @param key the name of the file to upload to
+     * @param data the file to upload
+     */
+    externalUpload: async (datasourceId, bucket, key, data) => {
+      const { signedUrl, publicUrl } = await endpoints.getSignedDatasourceURL(
+        datasourceId,
+        bucket,
+        key
+      )
+      if (!signedUrl) {
+        return { publicUrl: undefined }
+      }
+      await API.put({
+        url: signedUrl,
+        body: data,
+        json: false,
+        external: true,
+      })
+      return { publicUrl }
+    },
+
+    /**
+     * Download an attachment from a row given its column name.
+     * @param datasourceId the ID of the datasource to download from
+     * @param rowId the ID of the row to download from
+     * @param columnName the column name to download
+     */
+    downloadAttachment: async (datasourceId, rowId, columnName) => {
+      return await API.get({
+        url: `/api/${datasourceId}/rows/${rowId}/attachment/${columnName}`,
+        parseResponse: response => response as any,
+        suppressErrors: true,
+      })
+    },
+  }
+}
diff --git a/packages/frontend-core/src/api/auditLogs.js b/packages/frontend-core/src/api/auditLogs.js
deleted file mode 100644
index c4230df6d9..0000000000
--- a/packages/frontend-core/src/api/auditLogs.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const buildOpts = ({
-  bookmark,
-  userIds,
-  appIds,
-  startDate,
-  endDate,
-  fullSearch,
-  events,
-}) => {
-  const opts = {}
-
-  if (bookmark) {
-    opts.bookmark = bookmark
-  }
-
-  if (startDate && endDate) {
-    opts.startDate = startDate
-    opts.endDate = endDate
-  } else if (startDate && !endDate) {
-    opts.startDate = startDate
-  }
-
-  if (fullSearch) {
-    opts.fullSearch = fullSearch
-  }
-
-  if (events.length) {
-    opts.events = events
-  }
-
-  if (userIds.length) {
-    opts.userIds = userIds
-  }
-
-  if (appIds.length) {
-    opts.appIds = appIds
-  }
-
-  return opts
-}
-
-export const buildAuditLogsEndpoints = API => ({
-  /**
-   * Gets a list of users in the current tenant.
-   */
-  searchAuditLogs: async opts => {
-    return await API.post({
-      url: `/api/global/auditlogs/search`,
-      body: buildOpts(opts),
-    })
-  },
-
-  getEventDefinitions: async () => {
-    return await API.get({
-      url: `/api/global/auditlogs/definitions`,
-    })
-  },
-
-  getDownloadUrl: opts => {
-    const query = encodeURIComponent(JSON.stringify(opts))
-    return `/api/global/auditlogs/download?query=${query}`
-  },
-})
diff --git a/packages/frontend-core/src/api/auditLogs.ts b/packages/frontend-core/src/api/auditLogs.ts
new file mode 100644
index 0000000000..e0407f0412
--- /dev/null
+++ b/packages/frontend-core/src/api/auditLogs.ts
@@ -0,0 +1,35 @@
+import {
+  SearchAuditLogsRequest,
+  SearchAuditLogsResponse,
+  DefinitionsAuditLogsResponse,
+  DownloadAuditLogsRequest,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface AuditLogEndpoints {
+  searchAuditLogs: (
+    opts: SearchAuditLogsRequest
+  ) => Promise<SearchAuditLogsResponse>
+  getEventDefinitions: () => Promise<DefinitionsAuditLogsResponse>
+  getDownloadUrl: (opts: DownloadAuditLogsRequest) => string
+}
+
+export const buildAuditLogEndpoints = (
+  API: BaseAPIClient
+): AuditLogEndpoints => ({
+  searchAuditLogs: async opts => {
+    return await API.post({
+      url: `/api/global/auditlogs/search`,
+      body: opts,
+    })
+  },
+  getEventDefinitions: async () => {
+    return await API.get({
+      url: `/api/global/auditlogs/definitions`,
+    })
+  },
+  getDownloadUrl: opts => {
+    const query = encodeURIComponent(JSON.stringify(opts))
+    return `/api/global/auditlogs/download?query=${query}`
+  },
+})
diff --git a/packages/frontend-core/src/api/auth.js b/packages/frontend-core/src/api/auth.ts
similarity index 51%
rename from packages/frontend-core/src/api/auth.js
rename to packages/frontend-core/src/api/auth.ts
index 9289d71239..7d429c0c82 100644
--- a/packages/frontend-core/src/api/auth.js
+++ b/packages/frontend-core/src/api/auth.ts
@@ -1,12 +1,46 @@
-export const buildAuthEndpoints = API => ({
+import {
+  GetInitInfoResponse,
+  LoginRequest,
+  LoginResponse,
+  LogoutResponse,
+  PasswordResetRequest,
+  PasswordResetResponse,
+  PasswordResetUpdateRequest,
+  PasswordResetUpdateResponse,
+  SetInitInfoRequest,
+  SetInitInfoResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface AuthEndpoints {
+  logIn: (
+    tenantId: string,
+    username: string,
+    password: string
+  ) => Promise<LoginResponse>
+  logOut: () => Promise<LogoutResponse>
+  requestForgotPassword: (
+    tenantId: string,
+    email: string
+  ) => Promise<PasswordResetResponse>
+  resetPassword: (
+    tenantId: string,
+    password: string,
+    resetCode: string
+  ) => Promise<PasswordResetUpdateResponse>
+  setInitInfo: (info: SetInitInfoRequest) => Promise<SetInitInfoResponse>
+  getInitInfo: () => Promise<GetInitInfoResponse>
+}
+
+export const buildAuthEndpoints = (API: BaseAPIClient): AuthEndpoints => ({
   /**
    * Performs a login request.
    * @param tenantId the ID of the tenant to log in to
    * @param username the username (email)
    * @param password the password
    */
-  logIn: async ({ tenantId, username, password }) => {
-    return await API.post({
+  logIn: async (tenantId, username, password) => {
+    return await API.post<LoginRequest, LoginResponse>({
       url: `/api/global/auth/${tenantId}/login`,
       body: {
         username,
@@ -49,8 +83,8 @@ export const buildAuthEndpoints = API => ({
    * @param tenantId the ID of the tenant the user is in
    * @param email the email address of the user
    */
-  requestForgotPassword: async ({ tenantId, email }) => {
-    return await API.post({
+  requestForgotPassword: async (tenantId, email) => {
+    return await API.post<PasswordResetRequest, PasswordResetResponse>({
       url: `/api/global/auth/${tenantId}/reset`,
       body: {
         email,
@@ -64,8 +98,11 @@ export const buildAuthEndpoints = API => ({
    * @param password the new password to set
    * @param resetCode the reset code to authenticate the request
    */
-  resetPassword: async ({ tenantId, password, resetCode }) => {
-    return await API.post({
+  resetPassword: async (tenantId, password, resetCode) => {
+    return await API.post<
+      PasswordResetUpdateRequest,
+      PasswordResetUpdateResponse
+    >({
       url: `/api/global/auth/${tenantId}/reset/update`,
       body: {
         password,
diff --git a/packages/frontend-core/src/api/automations.js b/packages/frontend-core/src/api/automations.js
deleted file mode 100644
index 37a834cf04..0000000000
--- a/packages/frontend-core/src/api/automations.js
+++ /dev/null
@@ -1,111 +0,0 @@
-export const buildAutomationEndpoints = API => ({
-  /**
-   * Executes an automation. Must have "App Action" trigger.
-   * @param automationId the ID of the automation to trigger
-   * @param fields the fields to trigger the automation with
-   */
-  triggerAutomation: async ({ automationId, fields, timeout }) => {
-    return await API.post({
-      url: `/api/automations/${automationId}/trigger`,
-      body: { fields, timeout },
-    })
-  },
-
-  /**
-   * Tests an automation with data.
-   * @param automationId the ID of the automation to test
-   * @param testData the test data to run against the automation
-   */
-  testAutomation: async ({ automationId, testData }) => {
-    return await API.post({
-      url: `/api/automations/${automationId}/test`,
-      body: testData,
-    })
-  },
-
-  /**
-   * Gets a list of all automations.
-   */
-  getAutomations: async () => {
-    return await API.get({
-      url: "/api/automations",
-    })
-  },
-
-  /**
-   * Gets a list of all the definitions for blocks in automations.
-   */
-  getAutomationDefinitions: async () => {
-    return await API.get({
-      url: "/api/automations/definitions/list",
-    })
-  },
-
-  /**
-   * Creates an automation.
-   * @param automation the automation to create
-   */
-  createAutomation: async automation => {
-    return await API.post({
-      url: "/api/automations",
-      body: automation,
-    })
-  },
-
-  /**
-   * Updates an automation.
-   * @param automation the automation to update
-   */
-  updateAutomation: async automation => {
-    return await API.put({
-      url: "/api/automations",
-      body: automation,
-    })
-  },
-
-  /**
-   * Deletes an automation
-   * @param automationId the ID of the automation to delete
-   * @param automationRev the rev of the automation to delete
-   */
-  deleteAutomation: async ({ automationId, automationRev }) => {
-    return await API.delete({
-      url: `/api/automations/${automationId}/${automationRev}`,
-    })
-  },
-
-  /**
-   * Get the logs for the app, or by automation ID.
-   * @param automationId The ID of the automation to get logs for.
-   * @param startDate An ISO date string to state the start of the date range.
-   * @param status The status, error or success.
-   * @param page The page to retrieve.
-   */
-  getAutomationLogs: async ({ automationId, startDate, status, page }) => {
-    return await API.post({
-      url: "/api/automations/logs/search",
-      body: {
-        automationId,
-        startDate,
-        status,
-        page,
-      },
-    })
-  },
-
-  /**
-   * Clears automation log errors (which are creating notification) for
-   * automation or the app.
-   * @param automationId optional - the ID of the automation to clear errors for.
-   * @param appId The app ID to clear errors for.
-   */
-  clearAutomationLogErrors: async ({ automationId, appId }) => {
-    return await API.delete({
-      url: "/api/automations/logs",
-      body: {
-        appId,
-        automationId,
-      },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/automations.ts b/packages/frontend-core/src/api/automations.ts
new file mode 100644
index 0000000000..e87999e55b
--- /dev/null
+++ b/packages/frontend-core/src/api/automations.ts
@@ -0,0 +1,158 @@
+import {
+  ClearAutomationLogRequest,
+  ClearAutomationLogResponse,
+  CreateAutomationRequest,
+  CreateAutomationResponse,
+  DeleteAutomationResponse,
+  FetchAutomationResponse,
+  GetAutomationStepDefinitionsResponse,
+  SearchAutomationLogsRequest,
+  SearchAutomationLogsResponse,
+  TestAutomationRequest,
+  TestAutomationResponse,
+  TriggerAutomationRequest,
+  TriggerAutomationResponse,
+  UpdateAutomationRequest,
+  UpdateAutomationResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface AutomationEndpoints {
+  getAutomations: () => Promise<FetchAutomationResponse>
+  createAutomation: (
+    automation: CreateAutomationRequest
+  ) => Promise<CreateAutomationResponse>
+  updateAutomation: (
+    automation: UpdateAutomationRequest
+  ) => Promise<UpdateAutomationResponse>
+  deleteAutomation: (
+    automationId: string,
+    automationRev: string
+  ) => Promise<DeleteAutomationResponse>
+  clearAutomationLogErrors: (
+    automationId: string,
+    appId: string
+  ) => Promise<ClearAutomationLogResponse>
+  triggerAutomation: (
+    automationId: string,
+    fields: Record<string, any>,
+    timeout: number
+  ) => Promise<TriggerAutomationResponse>
+  testAutomation: (
+    automationdId: string,
+    data: TestAutomationRequest
+  ) => Promise<TestAutomationResponse>
+  getAutomationDefinitions: () => Promise<GetAutomationStepDefinitionsResponse>
+  getAutomationLogs: (
+    options: SearchAutomationLogsRequest
+  ) => Promise<SearchAutomationLogsResponse>
+}
+
+export const buildAutomationEndpoints = (
+  API: BaseAPIClient
+): AutomationEndpoints => ({
+  /**
+   * Executes an automation. Must have "App Action" trigger.
+   * @param automationId the ID of the automation to trigger
+   * @param fields the fields to trigger the automation with
+   * @param timeout a timeout override
+   */
+  triggerAutomation: async (automationId, fields, timeout) => {
+    return await API.post<TriggerAutomationRequest, TriggerAutomationResponse>({
+      url: `/api/automations/${automationId}/trigger`,
+      body: { fields, timeout },
+    })
+  },
+
+  /**
+   * Tests an automation with data.
+   * @param automationId the ID of the automation to test
+   * @param data the test data to run against the automation
+   */
+  testAutomation: async (automationId, data) => {
+    return await API.post({
+      url: `/api/automations/${automationId}/test`,
+      body: data,
+    })
+  },
+
+  /**
+   * Gets a list of all automations.
+   */
+  getAutomations: async () => {
+    return await API.get({
+      url: "/api/automations",
+    })
+  },
+
+  /**
+   * Gets a list of all the definitions for blocks in automations.
+   */
+  getAutomationDefinitions: async () => {
+    return await API.get({
+      url: "/api/automations/definitions/list",
+    })
+  },
+
+  /**
+   * Creates an automation.
+   * @param automation the automation to create
+   */
+  createAutomation: async automation => {
+    return await API.post({
+      url: "/api/automations",
+      body: automation,
+    })
+  },
+
+  /**
+   * Updates an automation.
+   * @param automation the automation to update
+   */
+  updateAutomation: async automation => {
+    return await API.put({
+      url: "/api/automations",
+      body: automation,
+    })
+  },
+
+  /**
+   * Deletes an automation
+   * @param automationId the ID of the automation to delete
+   * @param automationRev the rev of the automation to delete
+   */
+  deleteAutomation: async (automationId, automationRev) => {
+    return await API.delete({
+      url: `/api/automations/${automationId}/${automationRev}`,
+    })
+  },
+
+  /**
+   * Get the logs for the app, or by automation ID.
+   */
+  getAutomationLogs: async data => {
+    return await API.post({
+      url: "/api/automations/logs/search",
+      body: data,
+    })
+  },
+
+  /**
+   * Clears automation log errors (which are creating notification) for
+   * automation or the app.
+   * @param automationId optional - the ID of the automation to clear errors for.
+   * @param appId The app ID to clear errors for.
+   */
+  clearAutomationLogErrors: async (automationId, appId) => {
+    return await API.delete<
+      ClearAutomationLogRequest,
+      ClearAutomationLogResponse
+    >({
+      url: "/api/automations/logs",
+      body: {
+        appId,
+        automationId,
+      },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/backups.js b/packages/frontend-core/src/api/backups.js
deleted file mode 100644
index 40546b6f66..0000000000
--- a/packages/frontend-core/src/api/backups.js
+++ /dev/null
@@ -1,46 +0,0 @@
-export const buildBackupsEndpoints = API => ({
-  searchBackups: async ({ appId, trigger, type, page, startDate, endDate }) => {
-    const opts = {}
-    if (page) {
-      opts.page = page
-    }
-    if (trigger && type) {
-      opts.trigger = trigger.toLowerCase()
-      opts.type = type.toLowerCase()
-    }
-    if (startDate && endDate) {
-      opts.startDate = startDate
-      opts.endDate = endDate
-    }
-    return await API.post({
-      url: `/api/apps/${appId}/backups/search`,
-      body: opts,
-    })
-  },
-
-  createManualBackup: async ({ appId }) => {
-    return await API.post({
-      url: `/api/apps/${appId}/backups`,
-    })
-  },
-
-  deleteBackup: async ({ appId, backupId }) => {
-    return await API.delete({
-      url: `/api/apps/${appId}/backups/${backupId}`,
-    })
-  },
-
-  updateBackup: async ({ appId, backupId, name }) => {
-    return await API.patch({
-      url: `/api/apps/${appId}/backups/${backupId}`,
-      body: { name },
-    })
-  },
-
-  restoreBackup: async ({ appId, backupId, name }) => {
-    return await API.post({
-      url: `/api/apps/${appId}/backups/${backupId}/import`,
-      body: { name },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/backups.ts b/packages/frontend-core/src/api/backups.ts
new file mode 100644
index 0000000000..090ff97fc6
--- /dev/null
+++ b/packages/frontend-core/src/api/backups.ts
@@ -0,0 +1,50 @@
+import {
+  CreateAppBackupResponse,
+  ImportAppBackupResponse,
+  SearchAppBackupsRequest,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface BackupEndpoints {
+  createManualBackup: (appId: string) => Promise<CreateAppBackupResponse>
+  restoreBackup: (
+    appId: string,
+    backupId: string,
+    name?: string
+  ) => Promise<ImportAppBackupResponse>
+
+  // Missing request or response types
+  searchBackups: (appId: string, opts: SearchAppBackupsRequest) => Promise<any>
+  deleteBackup: (
+    appId: string,
+    backupId: string
+  ) => Promise<{ message: string }>
+}
+
+export const buildBackupEndpoints = (API: BaseAPIClient): BackupEndpoints => ({
+  createManualBackup: async appId => {
+    return await API.post({
+      url: `/api/apps/${appId}/backups`,
+    })
+  },
+  searchBackups: async (appId, opts) => {
+    return await API.post({
+      url: `/api/apps/${appId}/backups/search`,
+      body: opts,
+    })
+  },
+  deleteBackup: async (appId, backupId) => {
+    return await API.delete({
+      url: `/api/apps/${appId}/backups/${backupId}`,
+    })
+  },
+  restoreBackup: async (appId, backupId, name) => {
+    return await API.post({
+      url: `/api/apps/${appId}/backups/${backupId}/import`,
+      // Name is a legacy thing, but unsure if it is needed for restoring.
+      // Leaving this in just in case, but not type casting the body here
+      // as we won't normally have it, but it's required in the type.
+      body: { name },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/configs.js b/packages/frontend-core/src/api/configs.ts
similarity index 66%
rename from packages/frontend-core/src/api/configs.js
rename to packages/frontend-core/src/api/configs.ts
index 8d0d176a55..82f08e58a7 100644
--- a/packages/frontend-core/src/api/configs.js
+++ b/packages/frontend-core/src/api/configs.ts
@@ -1,4 +1,32 @@
-export const buildConfigEndpoints = API => ({
+import {
+  Config,
+  ConfigChecklistResponse,
+  ConfigType,
+  DeleteConfigResponse,
+  FindConfigResponse,
+  GetPublicOIDCConfigResponse,
+  GetPublicSettingsResponse,
+  OIDCLogosConfig,
+  SaveConfigRequest,
+  SaveConfigResponse,
+  UploadConfigFileResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface ConfigEndpoints {
+  getConfig: (type: ConfigType) => Promise<FindConfigResponse>
+  getTenantConfig: (tentantId: string) => Promise<GetPublicSettingsResponse>
+  getOIDCConfig: (tenantId: string) => Promise<GetPublicOIDCConfigResponse>
+  getOIDCLogos: () => Promise<Config<OIDCLogosConfig>>
+  saveConfig: (config: SaveConfigRequest) => Promise<SaveConfigResponse>
+  deleteConfig: (id: string, rev: string) => Promise<DeleteConfigResponse>
+  getChecklist: (tenantId: string) => Promise<ConfigChecklistResponse>
+  uploadLogo: (data: any) => Promise<UploadConfigFileResponse>
+  uploadFavicon: (data: any) => Promise<UploadConfigFileResponse>
+  uploadOIDCLogo: (name: string, data: any) => Promise<UploadConfigFileResponse>
+}
+
+export const buildConfigEndpoints = (API: BaseAPIClient): ConfigEndpoints => ({
   /**
    * Saves a global config.
    * @param config the config to save
@@ -25,7 +53,7 @@ export const buildConfigEndpoints = API => ({
    * @param id the id of the config to delete
    * @param rev the revision of the config to delete
    */
-  deleteConfig: async ({ id, rev }) => {
+  deleteConfig: async (id, rev) => {
     return await API.delete({
       url: `/api/global/configs/${id}/${rev}`,
     })
@@ -90,7 +118,7 @@ export const buildConfigEndpoints = API => ({
    * @param name the name of the OIDC provider
    * @param data the logo form data to upload
    */
-  uploadOIDCLogo: async ({ name, data }) => {
+  uploadOIDCLogo: async (name, data) => {
     return await API.post({
       url: `/api/global/configs/upload/logos_oidc/${name}`,
       body: data,
diff --git a/packages/frontend-core/src/api/datasources.js b/packages/frontend-core/src/api/datasources.js
deleted file mode 100644
index 7cc05960d7..0000000000
--- a/packages/frontend-core/src/api/datasources.js
+++ /dev/null
@@ -1,92 +0,0 @@
-export const buildDatasourceEndpoints = API => ({
-  /**
-   * Gets a list of datasources.
-   */
-  getDatasources: async () => {
-    return await API.get({
-      url: "/api/datasources",
-    })
-  },
-
-  /**
-   * Prompts the server to build the schema for a datasource.
-   * @param datasourceId the datasource ID to build the schema for
-   * @param tablesFilter list of specific table names to be build the schema
-   */
-  buildDatasourceSchema: async ({ datasourceId, tablesFilter }) => {
-    return await API.post({
-      url: `/api/datasources/${datasourceId}/schema`,
-      body: {
-        tablesFilter,
-      },
-    })
-  },
-
-  /**
-   * Creates a datasource
-   * @param datasource the datasource to create
-   * @param fetchSchema whether to fetch the schema or not
-   * @param tablesFilter a list of tables to actually fetch rather than simply
-   * all that are accessible.
-   */
-  createDatasource: async ({ datasource, fetchSchema, tablesFilter }) => {
-    return await API.post({
-      url: "/api/datasources",
-      body: {
-        datasource,
-        fetchSchema,
-        tablesFilter,
-      },
-    })
-  },
-
-  /**
-   * Updates a datasource
-   * @param datasource the datasource to update
-   */
-  updateDatasource: async datasource => {
-    return await API.put({
-      url: `/api/datasources/${datasource._id}`,
-      body: datasource,
-    })
-  },
-
-  /**
-   * Deletes a datasource.
-   * @param datasourceId the ID of the ddtasource to delete
-   * @param datasourceRev the rev of the datasource to delete
-   */
-  deleteDatasource: async ({ datasourceId, datasourceRev }) => {
-    return await API.delete({
-      url: `/api/datasources/${datasourceId}/${datasourceRev}`,
-    })
-  },
-
-  /**
-   * Validate a datasource configuration
-   * @param datasource the datasource configuration to validate
-   */
-  validateDatasource: async datasource => {
-    return await API.post({
-      url: `/api/datasources/verify`,
-      body: { datasource },
-    })
-  },
-
-  /**
-   * Fetch table names available within the datasource, for filtering out undesired tables
-   * @param datasource the datasource configuration to use for fetching tables
-   */
-  fetchInfoForDatasource: async datasource => {
-    return await API.post({
-      url: `/api/datasources/info`,
-      body: { datasource },
-    })
-  },
-
-  fetchExternalSchema: async datasourceId => {
-    return await API.get({
-      url: `/api/datasources/${datasourceId}/schema/external`,
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/datasources.ts b/packages/frontend-core/src/api/datasources.ts
new file mode 100644
index 0000000000..1d35a6c347
--- /dev/null
+++ b/packages/frontend-core/src/api/datasources.ts
@@ -0,0 +1,132 @@
+import {
+  BuildSchemaFromSourceRequest,
+  BuildSchemaFromSourceResponse,
+  CreateDatasourceRequest,
+  CreateDatasourceResponse,
+  Datasource,
+  DeleteDatasourceResponse,
+  FetchDatasourceInfoRequest,
+  FetchDatasourceInfoResponse,
+  FetchExternalSchemaResponse,
+  UpdateDatasourceRequest,
+  UpdateDatasourceResponse,
+  VerifyDatasourceRequest,
+  VerifyDatasourceResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface DatasourceEndpoints {
+  getDatasources: () => Promise<Datasource[]>
+  buildDatasourceSchema: (
+    datasourceId: string,
+    tablesFilter?: string[]
+  ) => Promise<BuildSchemaFromSourceResponse>
+  createDatasource: (
+    data: CreateDatasourceRequest
+  ) => Promise<CreateDatasourceResponse>
+  updateDatasource: (
+    datasource: Datasource
+  ) => Promise<UpdateDatasourceResponse>
+  deleteDatasource: (
+    id: string,
+    rev: string
+  ) => Promise<DeleteDatasourceResponse>
+  validateDatasource: (
+    datasource: Datasource
+  ) => Promise<VerifyDatasourceResponse>
+  fetchInfoForDatasource: (
+    datasource: Datasource
+  ) => Promise<FetchDatasourceInfoResponse>
+  fetchExternalSchema: (
+    datasourceId: string
+  ) => Promise<FetchExternalSchemaResponse>
+}
+
+export const buildDatasourceEndpoints = (
+  API: BaseAPIClient
+): DatasourceEndpoints => ({
+  /**
+   * Gets a list of datasources.
+   */
+  getDatasources: async () => {
+    return await API.get({
+      url: "/api/datasources",
+    })
+  },
+
+  /**
+   * Prompts the server to build the schema for a datasource.
+   */
+  buildDatasourceSchema: async (datasourceId, tablesFilter?) => {
+    return await API.post<
+      BuildSchemaFromSourceRequest,
+      BuildSchemaFromSourceResponse
+    >({
+      url: `/api/datasources/${datasourceId}/schema`,
+      body: {
+        tablesFilter,
+      },
+    })
+  },
+
+  /**
+   * Creates a datasource
+   */
+  createDatasource: async data => {
+    return await API.post({
+      url: "/api/datasources",
+      body: data,
+    })
+  },
+
+  /**
+   * Updates a datasource
+   */
+  updateDatasource: async datasource => {
+    return await API.put<UpdateDatasourceRequest, UpdateDatasourceResponse>({
+      url: `/api/datasources/${datasource._id}`,
+      body: datasource,
+    })
+  },
+
+  /**
+   * Deletes a datasource.
+   */
+  deleteDatasource: async (id: string, rev: string) => {
+    return await API.delete({
+      url: `/api/datasources/${id}/${rev}`,
+    })
+  },
+
+  /**
+   * Validate a datasource configuration
+   */
+  validateDatasource: async (datasource: Datasource) => {
+    return await API.post<VerifyDatasourceRequest, VerifyDatasourceResponse>({
+      url: `/api/datasources/verify`,
+      body: { datasource },
+    })
+  },
+
+  /**
+   * Fetch table names available within the datasource, for filtering out undesired tables
+   */
+  fetchInfoForDatasource: async (datasource: Datasource) => {
+    return await API.post<
+      FetchDatasourceInfoRequest,
+      FetchDatasourceInfoResponse
+    >({
+      url: `/api/datasources/info`,
+      body: { datasource },
+    })
+  },
+
+  /**
+   * Fetches the external schema of a datasource
+   */
+  fetchExternalSchema: async (datasourceId: string) => {
+    return await API.get({
+      url: `/api/datasources/${datasourceId}/schema/external`,
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/environmentVariables.js b/packages/frontend-core/src/api/environmentVariables.js
deleted file mode 100644
index badd93ad69..0000000000
--- a/packages/frontend-core/src/api/environmentVariables.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export const buildEnvironmentVariableEndpoints = API => ({
-  checkEnvironmentVariableStatus: async () => {
-    return await API.get({
-      url: `/api/env/variables/status`,
-    })
-  },
-
-  /**
-   * Fetches a list of environment variables
-   */
-  fetchEnvironmentVariables: async () => {
-    return await API.get({
-      url: `/api/env/variables`,
-      json: false,
-    })
-  },
-
-  createEnvironmentVariable: async data => {
-    return await API.post({
-      url: `/api/env/variables`,
-      body: data,
-    })
-  },
-  deleteEnvironmentVariable: async varName => {
-    return await API.delete({
-      url: `/api/env/variables/${varName}`,
-    })
-  },
-
-  updateEnvironmentVariable: async data => {
-    return await API.patch({
-      url: `/api/env/variables/${data.name}`,
-      body: data,
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/environmentVariables.ts b/packages/frontend-core/src/api/environmentVariables.ts
new file mode 100644
index 0000000000..8dd2988c5f
--- /dev/null
+++ b/packages/frontend-core/src/api/environmentVariables.ts
@@ -0,0 +1,58 @@
+import {
+  CreateEnvironmentVariableRequest,
+  CreateEnvironmentVariableResponse,
+  DeleteEnvironmentVariablesResponse,
+  GetEnvironmentVariablesResponse,
+  StatusEnvironmentVariableResponse,
+  UpdateEnvironmentVariableRequest,
+  UpdateEnvironmentVariableResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface EnvironmentVariableEndpoints {
+  checkEnvironmentVariableStatus: () => Promise<StatusEnvironmentVariableResponse>
+  fetchEnvironmentVariables: () => Promise<GetEnvironmentVariablesResponse>
+  createEnvironmentVariable: (
+    data: CreateEnvironmentVariableRequest
+  ) => Promise<CreateEnvironmentVariableResponse>
+  deleteEnvironmentVariable: (
+    name: string
+  ) => Promise<DeleteEnvironmentVariablesResponse>
+  updateEnvironmentVariable: (
+    name: string,
+    data: UpdateEnvironmentVariableRequest
+  ) => Promise<UpdateEnvironmentVariableResponse>
+}
+
+export const buildEnvironmentVariableEndpoints = (
+  API: BaseAPIClient
+): EnvironmentVariableEndpoints => ({
+  checkEnvironmentVariableStatus: async () => {
+    return await API.get({
+      url: `/api/env/variables/status`,
+    })
+  },
+  fetchEnvironmentVariables: async () => {
+    return await API.get({
+      url: `/api/env/variables`,
+      json: false,
+    })
+  },
+  createEnvironmentVariable: async data => {
+    return await API.post({
+      url: `/api/env/variables`,
+      body: data,
+    })
+  },
+  deleteEnvironmentVariable: async name => {
+    return await API.delete({
+      url: `/api/env/variables/${name}`,
+    })
+  },
+  updateEnvironmentVariable: async (name, data) => {
+    return await API.patch({
+      url: `/api/env/variables/${name}`,
+      body: data,
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/events.js b/packages/frontend-core/src/api/events.js
deleted file mode 100644
index 3f17722d3e..0000000000
--- a/packages/frontend-core/src/api/events.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const buildEventEndpoints = API => ({
-  /**
-   * Publish a specific event to the backend.
-   */
-  publishEvent: async eventType => {
-    return await API.post({
-      url: `/api/global/event/publish`,
-      body: {
-        type: eventType,
-      },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/events.ts b/packages/frontend-core/src/api/events.ts
new file mode 100644
index 0000000000..2bec0ea680
--- /dev/null
+++ b/packages/frontend-core/src/api/events.ts
@@ -0,0 +1,21 @@
+import {
+  EventPublishType,
+  PostEventPublishRequest,
+  PostEventPublishResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface EventEndpoints {
+  publishEvent: (type: EventPublishType) => Promise<PostEventPublishResponse>
+}
+
+export const buildEventEndpoints = (API: BaseAPIClient): EventEndpoints => ({
+  publishEvent: async type => {
+    return await API.post<PostEventPublishRequest, PostEventPublishResponse>({
+      url: `/api/global/event/publish`,
+      body: {
+        type,
+      },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/flags.js b/packages/frontend-core/src/api/flags.js
deleted file mode 100644
index 16adeb7b5d..0000000000
--- a/packages/frontend-core/src/api/flags.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const buildFlagEndpoints = API => ({
-  /**
-   * Gets the current user flags object.
-   */
-  getFlags: async () => {
-    return await API.get({
-      url: "/api/users/flags",
-    })
-  },
-
-  /**
-   * Updates a flag for the current user.
-   * @param flag the flag to update
-   * @param value the value to set the flag to
-   */
-  updateFlag: async ({ flag, value }) => {
-    return await API.post({
-      url: "/api/users/flags",
-      body: {
-        flag,
-        value,
-      },
-    })
-  },
-  /**
-   * Allows us to experimentally toggle a beta UI feature through a cookie.
-   * @param value the feature to toggle
-   */
-  toggleUiFeature: async ({ value }) => {
-    return await API.post({
-      url: `/api/beta/${value}`,
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/flags.ts b/packages/frontend-core/src/api/flags.ts
new file mode 100644
index 0000000000..baaa2309bc
--- /dev/null
+++ b/packages/frontend-core/src/api/flags.ts
@@ -0,0 +1,48 @@
+import {
+  GetUserFlagsResponse,
+  SetUserFlagRequest,
+  SetUserFlagResponse,
+  ToggleBetaFeatureResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface FlagEndpoints {
+  getFlags: () => Promise<GetUserFlagsResponse>
+  updateFlag: (flag: string, value: any) => Promise<SetUserFlagResponse>
+  toggleUiFeature: (value: string) => Promise<ToggleBetaFeatureResponse>
+}
+
+export const buildFlagEndpoints = (API: BaseAPIClient): FlagEndpoints => ({
+  /**
+   * Gets the current user flags object.
+   */
+  getFlags: async () => {
+    return await API.get({
+      url: "/api/users/flags",
+    })
+  },
+
+  /**
+   * Updates a flag for the current user.
+   * @param flag the flag to update
+   * @param value the value to set the flag to
+   */
+  updateFlag: async (flag, value) => {
+    return await API.post<SetUserFlagRequest, SetUserFlagResponse>({
+      url: "/api/users/flags",
+      body: {
+        flag,
+        value,
+      },
+    })
+  },
+  /**
+   * Allows us to experimentally toggle a beta UI feature through a cookie.
+   * @param value the feature to toggle
+   */
+  toggleUiFeature: async value => {
+    return await API.post({
+      url: `/api/beta/${value}`,
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/groups.js b/packages/frontend-core/src/api/groups.ts
similarity index 53%
rename from packages/frontend-core/src/api/groups.js
rename to packages/frontend-core/src/api/groups.ts
index b1be230ac6..c09c5284ec 100644
--- a/packages/frontend-core/src/api/groups.js
+++ b/packages/frontend-core/src/api/groups.ts
@@ -1,13 +1,50 @@
-export const buildGroupsEndpoints = API => {
-  // underlying functionality of adding/removing users/apps to groups
-  async function updateGroupResource(groupId, resource, operation, ids) {
-    if (!Array.isArray(ids)) {
-      ids = [ids]
-    }
-    return await API.post({
+import { SearchUserGroupResponse, UserGroup } from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface GroupEndpoints {
+  saveGroup: (group: UserGroup) => Promise<{ _id: string; _rev: string }>
+  getGroups: () => Promise<UserGroup[]>
+  getGroup: (id: string) => Promise<UserGroup>
+  deleteGroup: (id: string, rev: string) => Promise<{ message: string }>
+  getGroupUsers: (
+    data: GetGroupUsersRequest
+  ) => Promise<SearchUserGroupResponse>
+  addUsersToGroup: (groupId: string, userIds: string[]) => Promise<void>
+  removeUsersFromGroup: (groupId: string, userIds: string[]) => Promise<void>
+  addAppsToGroup: (groupId: string, appArray: object[]) => Promise<void>
+  removeAppsFromGroup: (groupId: string, appArray: object[]) => Promise<void>
+  addGroupAppBuilder: (groupId: string, appId: string) => Promise<void>
+  removeGroupAppBuilder: (groupId: string, appId: string) => Promise<void>
+}
+
+enum GroupResource {
+  USERS = "users",
+  APPS = "apps",
+}
+
+enum GroupOperation {
+  ADD = "add",
+  REMOVE = "remove",
+}
+
+type GetGroupUsersRequest = {
+  id: string
+  bookmark?: string
+  emailSearch?: string
+}
+
+export const buildGroupsEndpoints = (API: BaseAPIClient): GroupEndpoints => {
+  // Underlying functionality of adding/removing users/apps to groups
+  async function updateGroupResource(
+    groupId: string,
+    resource: GroupResource,
+    operation: GroupOperation,
+    resources: string[] | object[]
+  ) {
+    return await API.post<{ [key in GroupOperation]?: string[] | object[] }>({
       url: `/api/global/groups/${groupId}/${resource}`,
       body: {
-        [operation]: ids,
+        [operation]: resources,
       },
     })
   }
@@ -46,7 +83,7 @@ export const buildGroupsEndpoints = API => {
      * @param id the id of the config to delete
      * @param rev the revision of the config to delete
      */
-    deleteGroup: async ({ id, rev }) => {
+    deleteGroup: async (id, rev) => {
       return await API.delete({
         url: `/api/global/groups/${id}/${rev}`,
       })
@@ -61,9 +98,8 @@ export const buildGroupsEndpoints = API => {
         url += `bookmark=${bookmark}&`
       }
       if (emailSearch) {
-        url += `emailSearch=${emailSearch}&`
+        url += `emailSearch=${emailSearch}`
       }
-
       return await API.get({
         url,
       })
@@ -75,7 +111,12 @@ export const buildGroupsEndpoints = API => {
      * @param userIds The user IDs to be added
      */
     addUsersToGroup: async (groupId, userIds) => {
-      return updateGroupResource(groupId, "users", "add", userIds)
+      return updateGroupResource(
+        groupId,
+        GroupResource.USERS,
+        GroupOperation.ADD,
+        userIds
+      )
     },
 
     /**
@@ -84,7 +125,12 @@ export const buildGroupsEndpoints = API => {
      * @param userIds The user IDs to be removed
      */
     removeUsersFromGroup: async (groupId, userIds) => {
-      return updateGroupResource(groupId, "users", "remove", userIds)
+      return updateGroupResource(
+        groupId,
+        GroupResource.USERS,
+        GroupOperation.REMOVE,
+        userIds
+      )
     },
 
     /**
@@ -93,7 +139,12 @@ export const buildGroupsEndpoints = API => {
      * @param appArray Array of objects, containing the appId and roleId to be added
      */
     addAppsToGroup: async (groupId, appArray) => {
-      return updateGroupResource(groupId, "apps", "add", appArray)
+      return updateGroupResource(
+        groupId,
+        GroupResource.APPS,
+        GroupOperation.ADD,
+        appArray
+      )
     },
 
     /**
@@ -102,7 +153,12 @@ export const buildGroupsEndpoints = API => {
      * @param appArray Array of objects, containing the appId to be removed
      */
     removeAppsFromGroup: async (groupId, appArray) => {
-      return updateGroupResource(groupId, "apps", "remove", appArray)
+      return updateGroupResource(
+        groupId,
+        GroupResource.APPS,
+        GroupOperation.REMOVE,
+        appArray
+      )
     },
 
     /**
@@ -110,7 +166,7 @@ export const buildGroupsEndpoints = API => {
      * @param groupId The group to update
      * @param appId The app id where the builder will be added
      */
-    addGroupAppBuilder: async ({ groupId, appId }) => {
+    addGroupAppBuilder: async (groupId, appId) => {
       return await API.post({
         url: `/api/global/groups/${groupId}/app/${appId}/builder`,
       })
@@ -121,7 +177,7 @@ export const buildGroupsEndpoints = API => {
      * @param groupId The group to update
      * @param appId The app id where the builder will be removed
      */
-    removeGroupAppBuilder: async ({ groupId, appId }) => {
+    removeGroupAppBuilder: async (groupId, appId) => {
       return await API.delete({
         url: `/api/global/groups/${groupId}/app/${appId}/builder`,
       })
diff --git a/packages/frontend-core/src/api/hosting.js b/packages/frontend-core/src/api/hosting.js
deleted file mode 100644
index 8c398f9ae7..0000000000
--- a/packages/frontend-core/src/api/hosting.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export const buildHostingEndpoints = API => ({
-  /**
-   * Gets the hosting URLs of the environment.
-   */
-  getHostingURLs: async () => {
-    return await API.get({
-      url: "/api/hosting/urls",
-    })
-  },
-
-  /**
-   * Gets the list of deployed apps.
-   */
-  getDeployedApps: async () => {
-    return await API.get({
-      url: "/api/hosting/apps",
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.ts
similarity index 65%
rename from packages/frontend-core/src/api/index.js
rename to packages/frontend-core/src/api/index.ts
index 1ca8b7c3f4..f7b05c338a 100644
--- a/packages/frontend-core/src/api/index.js
+++ b/packages/frontend-core/src/api/index.ts
@@ -1,3 +1,13 @@
+import {
+  HTTPMethod,
+  APICallParams,
+  APIClientConfig,
+  APIClient,
+  APICallConfig,
+  BaseAPIClient,
+  Headers,
+  APIError,
+} from "./types"
 import { Helpers } from "@budibase/bbui"
 import { Header } from "@budibase/shared-core"
 import { ApiVersion } from "../constants"
@@ -10,7 +20,6 @@ import { buildAutomationEndpoints } from "./automations"
 import { buildConfigEndpoints } from "./configs"
 import { buildDatasourceEndpoints } from "./datasources"
 import { buildFlagEndpoints } from "./flags"
-import { buildHostingEndpoints } from "./hosting"
 import { buildLayoutEndpoints } from "./layouts"
 import { buildOtherEndpoints } from "./other"
 import { buildPermissionsEndpoints } from "./permissions"
@@ -29,10 +38,10 @@ import { buildViewV2Endpoints } from "./viewsV2"
 import { buildLicensingEndpoints } from "./licensing"
 import { buildGroupsEndpoints } from "./groups"
 import { buildPluginEndpoints } from "./plugins"
-import { buildBackupsEndpoints } from "./backups"
+import { buildBackupEndpoints } from "./backups"
 import { buildEnvironmentVariableEndpoints } from "./environmentVariables"
 import { buildEventEndpoints } from "./events"
-import { buildAuditLogsEndpoints } from "./auditLogs"
+import { buildAuditLogEndpoints } from "./auditLogs"
 import { buildLogsEndpoints } from "./logs"
 import { buildMigrationEndpoints } from "./migrations"
 import { buildRowActionEndpoints } from "./rowActions"
@@ -45,55 +54,21 @@ import { buildRowActionEndpoints } from "./rowActions"
  */
 export const APISessionID = Helpers.uuid()
 
-const defaultAPIClientConfig = {
-  /**
-   * Certain definitions can't change at runtime for client apps, such as the
-   * schema of tables. The endpoints that are cacheable can be cached by passing
-   * in this flag. It's disabled by default to avoid bugs with stale data.
-   */
-  enableCaching: false,
-
-  /**
-   * A function can be passed in to attach headers to all outgoing requests.
-   * This function is passed in the headers object, which should be directly
-   * mutated. No return value is required.
-   */
-  attachHeaders: null,
-
-  /**
-   * A function can be passed in which will be invoked any time an API error
-   * occurs. An error is defined as a status code >= 400. This function is
-   * invoked before the actual JS error is thrown up the stack.
-   */
-  onError: null,
-
-  /**
-   * A function can be passed to be called when an API call returns info about a migration running for a specific app
-   */
-  onMigrationDetected: null,
-}
-
 /**
  * Constructs an API client with the provided configuration.
- * @param config the API client configuration
- * @return {object} the API client
  */
-export const createAPIClient = config => {
-  config = {
-    ...defaultAPIClientConfig,
-    ...config,
-  }
-  let cache = {}
+export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
+  let cache: Record<string, any> = {}
 
   // Generates an error object from an API response
   const makeErrorFromResponse = async (
-    response,
-    method,
+    response: Response,
+    method: HTTPMethod,
     suppressErrors = false
-  ) => {
+  ): Promise<APIError> => {
     // Try to read a message from the error
     let message = response.statusText
-    let json = null
+    let json: any = null
     try {
       json = await response.json()
       if (json?.message) {
@@ -116,32 +91,34 @@ export const createAPIClient = config => {
   }
 
   // Generates an error object from a string
-  const makeError = (message, request) => {
+  const makeError = (
+    message: string,
+    url?: string,
+    method?: HTTPMethod
+  ): APIError => {
     return {
       message,
       json: null,
       status: 400,
-      url: request?.url,
-      method: request?.method,
+      url: url,
+      method: method,
       handled: true,
+      suppressErrors: false,
     }
   }
 
   // Performs an API call to the server.
-  const makeApiCall = async ({
-    method,
-    url,
-    body,
-    json = true,
-    external = false,
-    parseResponse,
-    suppressErrors = false,
-  }) => {
+  const makeApiCall = async <RequestT = null, ResponseT = void>(
+    callConfig: APICallConfig<RequestT, ResponseT>
+  ): Promise<ResponseT> => {
+    let { json, method, external, body, url, parseResponse, suppressErrors } =
+      callConfig
+
     // Ensure we don't do JSON processing if sending a GET request
-    json = json && method !== "GET"
+    json = json && method !== HTTPMethod.GET
 
     // Build headers
-    let headers = { Accept: "application/json" }
+    let headers: Headers = { Accept: "application/json" }
     headers[Header.SESSION_ID] = APISessionID
     if (!external) {
       headers[Header.API_VER] = ApiVersion
@@ -154,17 +131,17 @@ export const createAPIClient = config => {
     }
 
     // Build request body
-    let requestBody = body
+    let requestBody: any = body
     if (json) {
       try {
         requestBody = JSON.stringify(body)
       } catch (error) {
-        throw makeError("Invalid JSON body", { url, method })
+        throw makeError("Invalid JSON body", url, method)
       }
     }
 
     // Make request
-    let response
+    let response: Response
     try {
       response = await fetch(url, {
         method,
@@ -174,21 +151,23 @@ export const createAPIClient = config => {
       })
     } catch (error) {
       delete cache[url]
-      throw makeError("Failed to send request", { url, method })
+      throw makeError("Failed to send request", url, method)
     }
 
     // Handle response
     if (response.status >= 200 && response.status < 400) {
       handleMigrations(response)
       try {
-        if (parseResponse) {
+        if (response.status === 204) {
+          return undefined as ResponseT
+        } else if (parseResponse) {
           return await parseResponse(response)
         } else {
-          return await response.json()
+          return (await response.json()) as ResponseT
         }
       } catch (error) {
         delete cache[url]
-        return null
+        throw `Failed to parse response: ${error}`
       }
     } else {
       delete cache[url]
@@ -196,7 +175,7 @@ export const createAPIClient = config => {
     }
   }
 
-  const handleMigrations = response => {
+  const handleMigrations = (response: Response) => {
     if (!config.onMigrationDetected) {
       return
     }
@@ -210,48 +189,57 @@ export const createAPIClient = config => {
   // Performs an API call to the server  and caches the response.
   // Future invocation for this URL will return the cached result instead of
   // hitting the server again.
-  const makeCachedApiCall = async params => {
-    const identifier = params.url
-    if (!identifier) {
-      return null
-    }
+  const makeCachedApiCall = async <RequestT = null, ResponseT = void>(
+    callConfig: APICallConfig<RequestT, ResponseT>
+  ): Promise<ResponseT> => {
+    const identifier = callConfig.url
     if (!cache[identifier]) {
-      cache[identifier] = makeApiCall(params)
+      cache[identifier] = makeApiCall(callConfig)
       cache[identifier] = await cache[identifier]
     }
-    return await cache[identifier]
+    return (await cache[identifier]) as ResponseT
   }
 
   // Constructs an API call function for a particular HTTP method
-  const requestApiCall = method => async params => {
-    try {
-      let { url, cache = false, external = false } = params
-      if (!external) {
-        url = `/${url}`.replace("//", "/")
-      }
+  const requestApiCall =
+    (method: HTTPMethod) =>
+    async <RequestT = null, ResponseT = void>(
+      params: APICallParams<RequestT, ResponseT>
+    ): Promise<ResponseT> => {
+      try {
+        let callConfig: APICallConfig<RequestT, ResponseT> = {
+          json: true,
+          external: false,
+          suppressErrors: false,
+          cache: false,
+          method,
+          ...params,
+        }
+        let { url, cache, external } = callConfig
+        if (!external) {
+          callConfig.url = `/${url}`.replace("//", "/")
+        }
 
-      // Cache the request if possible and desired
-      const cacheRequest = cache && config?.enableCaching
-      const handler = cacheRequest ? makeCachedApiCall : makeApiCall
-
-      const enrichedParams = { ...params, method, url }
-      return await handler(enrichedParams)
-    } catch (error) {
-      if (config?.onError) {
-        config.onError(error)
+        // Cache the request if possible and desired
+        const cacheRequest = cache && config?.enableCaching
+        const handler = cacheRequest ? makeCachedApiCall : makeApiCall
+        return await handler(callConfig)
+      } catch (error) {
+        if (config?.onError) {
+          config.onError(error)
+        }
+        throw error
       }
-      throw error
     }
-  }
 
   // Build the underlying core API methods
-  let API = {
-    post: requestApiCall("POST"),
-    get: requestApiCall("GET"),
-    patch: requestApiCall("PATCH"),
-    delete: requestApiCall("DELETE"),
-    put: requestApiCall("PUT"),
-    error: message => {
+  let API: BaseAPIClient = {
+    post: requestApiCall(HTTPMethod.POST),
+    get: requestApiCall(HTTPMethod.GET),
+    patch: requestApiCall(HTTPMethod.PATCH),
+    delete: requestApiCall(HTTPMethod.DELETE),
+    put: requestApiCall(HTTPMethod.PUT),
+    error: (message: string) => {
       throw makeError(message)
     },
     invalidateCache: () => {
@@ -260,9 +248,9 @@ export const createAPIClient = config => {
 
     // Generic utility to extract the current app ID. Assumes that any client
     // that exists in an app context will be attaching our app ID header.
-    getAppID: () => {
-      let headers = {}
-      config?.attachHeaders(headers)
+    getAppID: (): string => {
+      let headers: Headers = {}
+      config?.attachHeaders?.(headers)
       return headers?.[Header.APP_ID]
     },
   }
@@ -279,7 +267,6 @@ export const createAPIClient = config => {
     ...buildConfigEndpoints(API),
     ...buildDatasourceEndpoints(API),
     ...buildFlagEndpoints(API),
-    ...buildHostingEndpoints(API),
     ...buildLayoutEndpoints(API),
     ...buildOtherEndpoints(API),
     ...buildPermissionsEndpoints(API),
@@ -297,10 +284,10 @@ export const createAPIClient = config => {
     ...buildLicensingEndpoints(API),
     ...buildGroupsEndpoints(API),
     ...buildPluginEndpoints(API),
-    ...buildBackupsEndpoints(API),
+    ...buildBackupEndpoints(API),
     ...buildEnvironmentVariableEndpoints(API),
     ...buildEventEndpoints(API),
-    ...buildAuditLogsEndpoints(API),
+    ...buildAuditLogEndpoints(API),
     ...buildLogsEndpoints(API),
     ...buildMigrationEndpoints(API),
     viewV2: buildViewV2Endpoints(API),
diff --git a/packages/frontend-core/src/api/layouts.js b/packages/frontend-core/src/api/layouts.js
deleted file mode 100644
index 51bce1f533..0000000000
--- a/packages/frontend-core/src/api/layouts.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const buildLayoutEndpoints = API => ({
-  /**
-   * Saves a layout.
-   * @param layout the layout to save
-   */
-  saveLayout: async layout => {
-    return await API.post({
-      url: "/api/layouts",
-      body: layout,
-    })
-  },
-
-  /**
-   * Deletes a layout.
-   * @param layoutId the ID of the layout to delete
-   * @param layoutRev the rev of the layout to delete
-   */
-  deleteLayout: async ({ layoutId, layoutRev }) => {
-    return await API.delete({
-      url: `/api/layouts/${layoutId}/${layoutRev}`,
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/layouts.ts b/packages/frontend-core/src/api/layouts.ts
new file mode 100644
index 0000000000..233f60e6c2
--- /dev/null
+++ b/packages/frontend-core/src/api/layouts.ts
@@ -0,0 +1,35 @@
+import {
+  DeleteLayoutResponse,
+  SaveLayoutRequest,
+  SaveLayoutResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface LayoutEndpoints {
+  saveLayout: (layout: SaveLayoutRequest) => Promise<SaveLayoutResponse>
+  deleteLayout: (id: string, rev: string) => Promise<DeleteLayoutResponse>
+}
+
+export const buildLayoutEndpoints = (API: BaseAPIClient): LayoutEndpoints => ({
+  /**
+   * Saves a layout.
+   * @param layout the layout to save
+   */
+  saveLayout: async layout => {
+    return await API.post({
+      url: "/api/layouts",
+      body: layout,
+    })
+  },
+
+  /**
+   * Deletes a layout.
+   * @param layoutId the ID of the layout to delete
+   * @param layoutRev the rev of the layout to delete
+   */
+  deleteLayout: async (id: string, rev: string) => {
+    return await API.delete({
+      url: `/api/layouts/${id}/${rev}`,
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/licensing.js b/packages/frontend-core/src/api/licensing.js
deleted file mode 100644
index 987fc34cf5..0000000000
--- a/packages/frontend-core/src/api/licensing.js
+++ /dev/null
@@ -1,75 +0,0 @@
-export const buildLicensingEndpoints = API => ({
-  // LICENSE KEY
-
-  activateLicenseKey: async data => {
-    return API.post({
-      url: `/api/global/license/key`,
-      body: data,
-    })
-  },
-  deleteLicenseKey: async () => {
-    return API.delete({
-      url: `/api/global/license/key`,
-    })
-  },
-  getLicenseKey: async () => {
-    try {
-      return await API.get({
-        url: "/api/global/license/key",
-      })
-    } catch (e) {
-      if (e.status !== 404) {
-        throw e
-      }
-    }
-  },
-
-  // OFFLINE LICENSE
-
-  activateOfflineLicense: async ({ offlineLicenseToken }) => {
-    return API.post({
-      url: "/api/global/license/offline",
-      body: {
-        offlineLicenseToken,
-      },
-    })
-  },
-  deleteOfflineLicense: async () => {
-    return API.delete({
-      url: "/api/global/license/offline",
-    })
-  },
-  getOfflineLicense: async () => {
-    try {
-      return await API.get({
-        url: "/api/global/license/offline",
-      })
-    } catch (e) {
-      if (e.status !== 404) {
-        throw e
-      }
-    }
-  },
-  getOfflineLicenseIdentifier: async () => {
-    return await API.get({
-      url: "/api/global/license/offline/identifier",
-    })
-  },
-
-  /**
-   * Refreshes the license cache
-   */
-  refreshLicense: async () => {
-    return API.post({
-      url: "/api/global/license/refresh",
-    })
-  },
-  /**
-   * Retrieve the usage information for the tenant
-   */
-  getQuotaUsage: async () => {
-    return API.get({
-      url: "/api/global/license/usage",
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/licensing.ts b/packages/frontend-core/src/api/licensing.ts
new file mode 100644
index 0000000000..bc499b92d4
--- /dev/null
+++ b/packages/frontend-core/src/api/licensing.ts
@@ -0,0 +1,107 @@
+import {
+  ActivateLicenseKeyRequest,
+  ActivateLicenseKeyResponse,
+  ActivateOfflineLicenseTokenRequest,
+  ActivateOfflineLicenseTokenResponse,
+  GetLicenseKeyResponse,
+  GetOfflineIdentifierResponse,
+  GetOfflineLicenseTokenResponse,
+  QuotaUsage,
+  RefreshOfflineLicenseResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface LicensingEndpoints {
+  activateLicenseKey: (
+    licenseKey: string
+  ) => Promise<ActivateLicenseKeyResponse>
+  deleteLicenseKey: () => Promise<void>
+  getLicenseKey: () => Promise<GetLicenseKeyResponse | void>
+  activateOfflineLicense: (
+    offlineLicenseToken: string
+  ) => Promise<ActivateOfflineLicenseTokenResponse>
+  deleteOfflineLicense: () => Promise<void>
+  getOfflineLicense: () => Promise<GetOfflineLicenseTokenResponse | void>
+  getOfflineLicenseIdentifier: () => Promise<GetOfflineIdentifierResponse>
+  refreshLicense: () => Promise<RefreshOfflineLicenseResponse>
+  getQuotaUsage: () => Promise<QuotaUsage>
+}
+
+export const buildLicensingEndpoints = (
+  API: BaseAPIClient
+): LicensingEndpoints => ({
+  // LICENSE KEY
+  activateLicenseKey: async licenseKey => {
+    return API.post<ActivateLicenseKeyRequest, ActivateLicenseKeyResponse>({
+      url: `/api/global/license/key`,
+      body: { licenseKey },
+    })
+  },
+  deleteLicenseKey: async () => {
+    return API.delete({
+      url: `/api/global/license/key`,
+    })
+  },
+  getLicenseKey: async () => {
+    try {
+      return await API.get({
+        url: "/api/global/license/key",
+      })
+    } catch (e: any) {
+      if (e.status !== 404) {
+        throw e
+      }
+    }
+  },
+
+  // OFFLINE LICENSE
+  activateOfflineLicense: async offlineLicenseToken => {
+    return API.post<
+      ActivateOfflineLicenseTokenRequest,
+      ActivateOfflineLicenseTokenResponse
+    >({
+      url: "/api/global/license/offline",
+      body: {
+        offlineLicenseToken,
+      },
+    })
+  },
+  deleteOfflineLicense: async () => {
+    return API.delete({
+      url: "/api/global/license/offline",
+    })
+  },
+  getOfflineLicense: async () => {
+    try {
+      return await API.get({
+        url: "/api/global/license/offline",
+      })
+    } catch (e: any) {
+      if (e.status !== 404) {
+        throw e
+      }
+    }
+  },
+  getOfflineLicenseIdentifier: async () => {
+    return await API.get({
+      url: "/api/global/license/offline/identifier",
+    })
+  },
+
+  /**
+   * Refreshes the license cache
+   */
+  refreshLicense: async () => {
+    return API.post({
+      url: "/api/global/license/refresh",
+    })
+  },
+  /**
+   * Retrieve the usage information for the tenant
+   */
+  getQuotaUsage: async () => {
+    return API.get({
+      url: "/api/global/license/usage",
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/logs.js b/packages/frontend-core/src/api/logs.ts
similarity index 57%
rename from packages/frontend-core/src/api/logs.js
rename to packages/frontend-core/src/api/logs.ts
index b6cb98627c..4c883233f6 100644
--- a/packages/frontend-core/src/api/logs.js
+++ b/packages/frontend-core/src/api/logs.ts
@@ -1,4 +1,10 @@
-export const buildLogsEndpoints = API => ({
+import { BaseAPIClient } from "./types"
+
+export interface LogEndpoints {
+  getSystemLogs: () => Promise<any>
+}
+
+export const buildLogsEndpoints = (API: BaseAPIClient): LogEndpoints => ({
   /**
    * Gets a stream for the system logs.
    */
diff --git a/packages/frontend-core/src/api/migrations.js b/packages/frontend-core/src/api/migrations.js
deleted file mode 100644
index 2da70d6fcb..0000000000
--- a/packages/frontend-core/src/api/migrations.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const buildMigrationEndpoints = API => ({
-  /**
-   * Gets the info about the current app migration
-   */
-  getMigrationStatus: async () => {
-    return await API.get({
-      url: "/api/migrations/status",
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/migrations.ts b/packages/frontend-core/src/api/migrations.ts
new file mode 100644
index 0000000000..8213691205
--- /dev/null
+++ b/packages/frontend-core/src/api/migrations.ts
@@ -0,0 +1,19 @@
+import { GetOldMigrationStatus } from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface MigrationEndpoints {
+  getMigrationStatus: () => Promise<GetOldMigrationStatus>
+}
+
+export const buildMigrationEndpoints = (
+  API: BaseAPIClient
+): MigrationEndpoints => ({
+  /**
+   * Gets the info about the current app migration
+   */
+  getMigrationStatus: async () => {
+    return await API.get({
+      url: "/api/migrations/status",
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/other.js b/packages/frontend-core/src/api/other.ts
similarity index 56%
rename from packages/frontend-core/src/api/other.js
rename to packages/frontend-core/src/api/other.ts
index 3d171eaab4..c39538fd7b 100644
--- a/packages/frontend-core/src/api/other.js
+++ b/packages/frontend-core/src/api/other.ts
@@ -1,4 +1,21 @@
-export const buildOtherEndpoints = API => ({
+import {
+  FetchBuiltinPermissionsResponse,
+  FetchIntegrationsResponse,
+  GetEnvironmentResponse,
+  GetVersionResponse,
+  SystemStatusResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface OtherEndpoints {
+  getSystemStatus: () => Promise<SystemStatusResponse>
+  getBudibaseVersion: () => Promise<string>
+  getIntegrations: () => Promise<FetchIntegrationsResponse>
+  getBasePermissions: () => Promise<FetchBuiltinPermissionsResponse>
+  getEnvironment: () => Promise<GetEnvironmentResponse>
+}
+
+export const buildOtherEndpoints = (API: BaseAPIClient): OtherEndpoints => ({
   /**
    * Gets the current environment details.
    */
@@ -31,7 +48,7 @@ export const buildOtherEndpoints = API => ({
    */
   getBudibaseVersion: async () => {
     return (
-      await API.get({
+      await API.get<GetVersionResponse>({
         url: "/api/dev/version",
       })
     ).version
@@ -45,14 +62,4 @@ export const buildOtherEndpoints = API => ({
       url: "/api/permission/builtin",
     })
   },
-
-  /**
-   * Check if they are part of the budibase beta program.
-   */
-  checkBetaAccess: async email => {
-    return await API.get({
-      url: `/api/beta/access?email=${email}`,
-      external: true,
-    })
-  },
 })
diff --git a/packages/frontend-core/src/api/permissions.js b/packages/frontend-core/src/api/permissions.ts
similarity index 56%
rename from packages/frontend-core/src/api/permissions.js
rename to packages/frontend-core/src/api/permissions.ts
index dd0005aaf2..8a4a99b642 100644
--- a/packages/frontend-core/src/api/permissions.js
+++ b/packages/frontend-core/src/api/permissions.ts
@@ -1,4 +1,32 @@
-export const buildPermissionsEndpoints = API => ({
+import {
+  AddPermissionResponse,
+  GetDependantResourcesResponse,
+  GetResourcePermsResponse,
+  PermissionLevel,
+  RemovePermissionResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface PermissionEndpoints {
+  getPermissionForResource: (
+    resourceId: string
+  ) => Promise<GetResourcePermsResponse>
+  updatePermissionForResource: (
+    resourceId: string,
+    roleId: string,
+    level: PermissionLevel
+  ) => Promise<AddPermissionResponse>
+  removePermissionFromResource: (
+    resourceId: string,
+    roleId: string,
+    level: PermissionLevel
+  ) => Promise<RemovePermissionResponse>
+  getDependants: (resourceId: string) => Promise<GetDependantResourcesResponse>
+}
+
+export const buildPermissionsEndpoints = (
+  API: BaseAPIClient
+): PermissionEndpoints => ({
   /**
    * Gets the permission required to access a specific resource
    * @param resourceId the resource ID to check
@@ -14,9 +42,8 @@ export const buildPermissionsEndpoints = API => ({
    * @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 assign the role for this resource
-   * @return {Promise<*>}
    */
-  updatePermissionForResource: async ({ resourceId, roleId, level }) => {
+  updatePermissionForResource: async (resourceId, roleId, level) => {
     return await API.post({
       url: `/api/permission/${roleId}/${resourceId}/${level}`,
     })
@@ -27,9 +54,8 @@ export const buildPermissionsEndpoints = API => ({
    * @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 }) => {
+  removePermissionFromResource: async (resourceId, roleId, level) => {
     return await API.delete({
       url: `/api/permission/${roleId}/${resourceId}/${level}`,
     })
diff --git a/packages/frontend-core/src/api/plugins.js b/packages/frontend-core/src/api/plugins.ts
similarity index 57%
rename from packages/frontend-core/src/api/plugins.js
rename to packages/frontend-core/src/api/plugins.ts
index 8735b04caa..5a3a3a3e6a 100644
--- a/packages/frontend-core/src/api/plugins.js
+++ b/packages/frontend-core/src/api/plugins.ts
@@ -1,4 +1,21 @@
-export const buildPluginEndpoints = API => ({
+import {
+  CreatePluginRequest,
+  CreatePluginResponse,
+  DeletePluginResponse,
+  FetchPluginResponse,
+  UploadPluginRequest,
+  UploadPluginResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface PluginEndpoins {
+  uploadPlugin: (data: UploadPluginRequest) => Promise<UploadPluginResponse>
+  createPlugin: (data: CreatePluginRequest) => Promise<CreatePluginResponse>
+  getPlugins: () => Promise<FetchPluginResponse>
+  deletePlugin: (pluginId: string) => Promise<DeletePluginResponse>
+}
+
+export const buildPluginEndpoints = (API: BaseAPIClient): PluginEndpoins => ({
   /**
    * Uploads a plugin tarball bundle
    * @param data the plugin tarball bundle to upload
diff --git a/packages/frontend-core/src/api/queries.js b/packages/frontend-core/src/api/queries.ts
similarity index 50%
rename from packages/frontend-core/src/api/queries.js
rename to packages/frontend-core/src/api/queries.ts
index f18ec7c4ec..b088e4487c 100644
--- a/packages/frontend-core/src/api/queries.js
+++ b/packages/frontend-core/src/api/queries.ts
@@ -1,12 +1,42 @@
-export const buildQueryEndpoints = API => ({
+import {
+  DeleteQueryResponse,
+  ExecuteQueryRequest,
+  ExecuteV2QueryResponse,
+  FetchQueriesResponse,
+  FindQueryResponse,
+  ImportRestQueryRequest,
+  ImportRestQueryResponse,
+  PreviewQueryRequest,
+  PreviewQueryResponse,
+  SaveQueryRequest,
+  SaveQueryResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface QueryEndpoints {
+  executeQuery: (
+    queryId: string,
+    opts?: ExecuteQueryRequest
+  ) => Promise<ExecuteV2QueryResponse>
+  fetchQueryDefinition: (queryId: string) => Promise<FindQueryResponse>
+  getQueries: () => Promise<FetchQueriesResponse>
+  saveQuery: (query: SaveQueryRequest) => Promise<SaveQueryResponse>
+  deleteQuery: (id: string, rev: string) => Promise<DeleteQueryResponse>
+  previewQuery: (query: PreviewQueryRequest) => Promise<PreviewQueryResponse>
+  importQueries: (
+    data: ImportRestQueryRequest
+  ) => Promise<ImportRestQueryResponse>
+}
+
+export const buildQueryEndpoints = (API: BaseAPIClient): QueryEndpoints => ({
   /**
    * Executes a query against an external data connector.
    * @param queryId the ID of the query to execute
    * @param pagination pagination info for the query
    * @param parameters parameters for the query
    */
-  executeQuery: async ({ queryId, pagination, parameters }) => {
-    return await API.post({
+  executeQuery: async (queryId, { pagination, parameters } = {}) => {
+    return await API.post<ExecuteQueryRequest, ExecuteV2QueryResponse>({
       url: `/api/v2/queries/${queryId}`,
       body: {
         parameters,
@@ -48,27 +78,22 @@ export const buildQueryEndpoints = API => ({
 
   /**
    * Deletes a query
-   * @param queryId the ID of the query to delete
-   * @param queryRev the rev of the query to delete
+   * @param id the ID of the query to delete
+   * @param rev the rev of the query to delete
    */
-  deleteQuery: async ({ queryId, queryRev }) => {
+  deleteQuery: async (id, rev) => {
     return await API.delete({
-      url: `/api/queries/${queryId}/${queryRev}`,
+      url: `/api/queries/${id}/${rev}`,
     })
   },
 
   /**
    * Imports a set of queries into a certain datasource
-   * @param datasourceId the datasource ID to import queries into
-   * @param data the data string of the content to import
    */
-  importQueries: async ({ datasourceId, data }) => {
+  importQueries: async data => {
     return await API.post({
       url: "/api/queries/import",
-      body: {
-        datasourceId,
-        data,
-      },
+      body: data,
     })
   },
 
diff --git a/packages/frontend-core/src/api/relationships.js b/packages/frontend-core/src/api/relationships.js
deleted file mode 100644
index 45595750a8..0000000000
--- a/packages/frontend-core/src/api/relationships.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export const buildRelationshipEndpoints = API => ({
-  /**
-   * Fetches related rows for a certain field of a certain row.
-   * @param tableId the ID of the table to fetch from
-   * @param rowId the ID of the row to fetch related rows for
-   * @param fieldName the name of the relationship field
-   */
-  fetchRelationshipData: async ({ tableId, rowId, fieldName }) => {
-    if (!tableId || !rowId) {
-      return []
-    }
-    const response = await API.get({
-      url: `/api/${tableId}/${rowId}/enrich?field=${fieldName}`,
-    })
-    if (!fieldName) {
-      return response || []
-    } else {
-      return response[fieldName] || []
-    }
-  },
-})
diff --git a/packages/frontend-core/src/api/relationships.ts b/packages/frontend-core/src/api/relationships.ts
new file mode 100644
index 0000000000..3d5f1a006d
--- /dev/null
+++ b/packages/frontend-core/src/api/relationships.ts
@@ -0,0 +1,31 @@
+import { FetchEnrichedRowResponse, Row } from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface RelationshipEndpoints {
+  fetchRelationshipData: (
+    sourceId: string,
+    rowId: string,
+    fieldName?: string
+  ) => Promise<Row[]>
+}
+
+export const buildRelationshipEndpoints = (
+  API: BaseAPIClient
+): RelationshipEndpoints => ({
+  /**
+   * Fetches related rows for a certain field of a certain row.
+   * @param sourceId the ID of the table to fetch from
+   * @param rowId the ID of the row to fetch related rows for
+   * @param fieldName the name of the relationship field
+   */
+  fetchRelationshipData: async (sourceId, rowId, fieldName) => {
+    const response = await API.get<FetchEnrichedRowResponse>({
+      url: `/api/${sourceId}/${rowId}/enrich?field=${fieldName}`,
+    })
+    if (!fieldName) {
+      return [response]
+    } else {
+      return response[fieldName] || []
+    }
+  },
+})
diff --git a/packages/frontend-core/src/api/roles.js b/packages/frontend-core/src/api/roles.ts
similarity index 50%
rename from packages/frontend-core/src/api/roles.js
rename to packages/frontend-core/src/api/roles.ts
index 80b8028c12..780bc511ed 100644
--- a/packages/frontend-core/src/api/roles.js
+++ b/packages/frontend-core/src/api/roles.ts
@@ -1,12 +1,29 @@
-export const buildRoleEndpoints = API => ({
+import {
+  AccessibleRolesResponse,
+  DeleteRoleResponse,
+  FetchRolesResponse,
+  SaveRoleRequest,
+  SaveRoleResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface RoleEndpoints {
+  deleteRole: (id: string, rev: string) => Promise<DeleteRoleResponse>
+  saveRole: (role: SaveRoleRequest) => Promise<SaveRoleResponse>
+  getRoles: () => Promise<FetchRolesResponse>
+  getRolesForApp: (appId: string) => Promise<any>
+  getAccessibleRoles: () => Promise<AccessibleRolesResponse>
+}
+
+export const buildRoleEndpoints = (API: BaseAPIClient): RoleEndpoints => ({
   /**
    * Deletes a role.
-   * @param roleId the ID of the role to delete
-   * @param roleRev the rev of the role to delete
+   * @param id the ID of the role to delete
+   * @param rev the rev of the role to delete
    */
-  deleteRole: async ({ roleId, roleRev }) => {
+  deleteRole: async (id, rev) => {
     return await API.delete({
-      url: `/api/roles/${roleId}/${roleRev}`,
+      url: `/api/roles/${id}/${rev}`,
     })
   },
 
diff --git a/packages/frontend-core/src/api/routes.js b/packages/frontend-core/src/api/routes.js
deleted file mode 100644
index 28e206debc..0000000000
--- a/packages/frontend-core/src/api/routes.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export const buildRouteEndpoints = API => ({
-  /**
-   * Fetches available routes for the client app.
-   */
-  fetchClientAppRoutes: async () => {
-    return await API.get({
-      url: `/api/routing/client`,
-    })
-  },
-
-  /**
-   * Fetches all routes for the current app.
-   */
-  fetchAppRoutes: async () => {
-    return await API.get({
-      url: "/api/routing",
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/routes.ts b/packages/frontend-core/src/api/routes.ts
new file mode 100644
index 0000000000..0adedf15e2
--- /dev/null
+++ b/packages/frontend-core/src/api/routes.ts
@@ -0,0 +1,30 @@
+import {
+  FetchClientScreenRoutingResponse,
+  FetchScreenRoutingResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface RouteEndpoints {
+  fetchClientAppRoutes: () => Promise<FetchClientScreenRoutingResponse>
+  fetchAppRoutes: () => Promise<FetchScreenRoutingResponse>
+}
+
+export const buildRouteEndpoints = (API: BaseAPIClient): RouteEndpoints => ({
+  /**
+   * Fetches available routes for the client app.
+   */
+  fetchClientAppRoutes: async () => {
+    return await API.get({
+      url: `/api/routing/client`,
+    })
+  },
+
+  /**
+   * Fetches all routes for the current app.
+   */
+  fetchAppRoutes: async () => {
+    return await API.get({
+      url: "/api/routing",
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/rowActions.js b/packages/frontend-core/src/api/rowActions.ts
similarity index 51%
rename from packages/frontend-core/src/api/rowActions.js
rename to packages/frontend-core/src/api/rowActions.ts
index 071af953ef..eef50ed940 100644
--- a/packages/frontend-core/src/api/rowActions.js
+++ b/packages/frontend-core/src/api/rowActions.ts
@@ -1,13 +1,46 @@
-export const buildRowActionEndpoints = API => ({
+import {
+  RowActionsResponse,
+  RowActionResponse,
+  CreateRowActionRequest,
+  RowActionPermissionsResponse,
+  RowActionTriggerRequest,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface RowActionEndpoints {
+  fetch: (tableId: string) => Promise<Record<string, RowActionResponse>>
+  create: (tableId: string, name: string) => Promise<RowActionResponse>
+  delete: (tableId: string, rowActionId: string) => Promise<void>
+  enableView: (
+    tableId: string,
+    rowActionId: string,
+    viewId: string
+  ) => Promise<RowActionPermissionsResponse>
+  disableView: (
+    tableId: string,
+    rowActionId: string,
+    viewId: string
+  ) => Promise<RowActionPermissionsResponse>
+  trigger: (
+    sourceId: string,
+    rowActionId: string,
+    rowId: string
+  ) => Promise<void>
+}
+
+export const buildRowActionEndpoints = (
+  API: BaseAPIClient
+): RowActionEndpoints => ({
   /**
    * Gets the available row actions for a table.
    * @param tableId the ID of the table
    */
   fetch: async tableId => {
-    const res = await API.get({
-      url: `/api/tables/${tableId}/actions`,
-    })
-    return res?.actions || {}
+    return (
+      await API.get<RowActionsResponse>({
+        url: `/api/tables/${tableId}/actions`,
+      })
+    ).actions
   },
 
   /**
@@ -15,8 +48,8 @@ export const buildRowActionEndpoints = API => ({
    * @param name the name of the row action
    * @param tableId the ID of the table
    */
-  create: async ({ name, tableId }) => {
-    return await API.post({
+  create: async (tableId, name) => {
+    return await API.post<CreateRowActionRequest, RowActionResponse>({
       url: `/api/tables/${tableId}/actions`,
       body: {
         name,
@@ -24,27 +57,12 @@ export const buildRowActionEndpoints = API => ({
     })
   },
 
-  /**
-   * Updates a row action.
-   * @param name the new name of the row action
-   * @param tableId the ID of the table
-   * @param rowActionId the ID of the row action to update
-   */
-  update: async ({ tableId, rowActionId, name }) => {
-    return await API.put({
-      url: `/api/tables/${tableId}/actions/${rowActionId}`,
-      body: {
-        name,
-      },
-    })
-  },
-
   /**
    * Deletes a row action.
    * @param tableId the ID of the table
    * @param rowActionId the ID of the row action to delete
    */
-  delete: async ({ tableId, rowActionId }) => {
+  delete: async (tableId, rowActionId) => {
     return await API.delete({
       url: `/api/tables/${tableId}/actions/${rowActionId}`,
     })
@@ -56,7 +74,7 @@ export const buildRowActionEndpoints = API => ({
    * @param rowActionId the ID of the row action
    * @param viewId the ID of the view
    */
-  enableView: async ({ tableId, rowActionId, viewId }) => {
+  enableView: async (tableId, rowActionId, viewId) => {
     return await API.post({
       url: `/api/tables/${tableId}/actions/${rowActionId}/permissions/${viewId}`,
     })
@@ -68,7 +86,7 @@ export const buildRowActionEndpoints = API => ({
    * @param rowActionId the ID of the row action
    * @param viewId the ID of the view
    */
-  disableView: async ({ tableId, rowActionId, viewId }) => {
+  disableView: async (tableId, rowActionId, viewId) => {
     return await API.delete({
       url: `/api/tables/${tableId}/actions/${rowActionId}/permissions/${viewId}`,
     })
@@ -79,8 +97,8 @@ export const buildRowActionEndpoints = API => ({
    * @param tableId the ID of the table
    * @param rowActionId the ID of the row action to trigger
    */
-  trigger: async ({ sourceId, rowActionId, rowId }) => {
-    return await API.post({
+  trigger: async (sourceId, rowActionId, rowId) => {
+    return await API.post<RowActionTriggerRequest>({
       url: `/api/tables/${sourceId}/actions/${rowActionId}/trigger`,
       body: {
         rowId,
diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js
deleted file mode 100644
index 0a0d48da43..0000000000
--- a/packages/frontend-core/src/api/rows.js
+++ /dev/null
@@ -1,117 +0,0 @@
-export const buildRowEndpoints = API => ({
-  /**
-   * Fetches data about a certain row in a table.
-   * @param tableId the ID of the table to fetch from
-   * @param rowId the ID of the row to fetch
-   */
-  fetchRow: async ({ tableId, rowId }) => {
-    if (!tableId || !rowId) {
-      return null
-    }
-    return await API.get({
-      url: `/api/${tableId}/rows/${rowId}`,
-    })
-  },
-
-  /**
-   * Creates or updates a row in a table.
-   * @param row the row to save
-   * @param suppressErrors whether or not to suppress error notifications
-   */
-  saveRow: async (row, suppressErrors = false) => {
-    const resourceId = row?._viewId || row?.tableId
-    if (!resourceId) {
-      return
-    }
-    return await API.post({
-      url: `/api/${resourceId}/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) => {
-    const resourceId = row?._viewId || row?.tableId
-    if (!resourceId) {
-      return
-    }
-    return await API.patch({
-      url: `/api/${resourceId}/rows`,
-      body: row,
-      suppressErrors,
-    })
-  },
-
-  /**
-   * Deletes a row from a table.
-   * @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
-   */
-  deleteRow: async ({ tableId, rowId, revId }) => {
-    if (!tableId || !rowId) {
-      return
-    }
-    return await API.delete({
-      url: `/api/${tableId}/rows`,
-      body: {
-        _id: rowId,
-        _rev: revId,
-      },
-    })
-  },
-
-  /**
-   * Deletes multiple rows from a table.
-   * @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: {
-        rows,
-      },
-    })
-  },
-
-  /**
-   * Exports rows.
-   * @param tableId the table ID to export the rows from
-   * @param rows the array of rows to export
-   * @param format the format to export (csv or json)
-   * @param columns which columns to export (all if undefined)
-   * @param delimiter how values should be separated in a CSV (default is comma)
-   */
-  exportRows: async ({
-    tableId,
-    rows,
-    format,
-    columns,
-    search,
-    delimiter,
-    customHeaders,
-  }) => {
-    return await API.post({
-      url: `/api/${tableId}/rows/exportRows?format=${format}`,
-      body: {
-        rows,
-        columns,
-        delimiter,
-        customHeaders,
-        ...search,
-      },
-      parseResponse: async response => {
-        return await response.text()
-      },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/rows.ts b/packages/frontend-core/src/api/rows.ts
new file mode 100644
index 0000000000..cee434037e
--- /dev/null
+++ b/packages/frontend-core/src/api/rows.ts
@@ -0,0 +1,120 @@
+import {
+  DeleteRowRequest,
+  ExportRowsRequest,
+  FindRowResponse,
+  PatchRowRequest,
+  PatchRowResponse,
+  Row,
+  SaveRowRequest,
+  SaveRowResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface RowEndpoints {
+  fetchRow: (tableId: string, rowId: string) => Promise<FindRowResponse>
+  saveRow: (
+    row: SaveRowRequest,
+    suppressErrors?: boolean
+  ) => Promise<SaveRowResponse>
+  patchRow: (
+    row: PatchRowRequest,
+    suppressErrors?: boolean
+  ) => Promise<PatchRowResponse>
+  deleteRow: (sourceId: string, id: string) => Promise<void>
+  deleteRows: (sourceId: string, rows: (Row | string)[]) => Promise<void>
+  exportRows: (
+    tableId: string,
+    format: string,
+    data: ExportRowsRequest
+  ) => Promise<string>
+}
+
+export const buildRowEndpoints = (API: BaseAPIClient): RowEndpoints => ({
+  /**
+   * Fetches data about a certain row in a data source.
+   * @param sourceId the ID of the table or view to fetch from
+   * @param rowId the ID of the row to fetch
+   */
+  fetchRow: async (sourceId, rowId) => {
+    return await API.get({
+      url: `/api/${sourceId}/rows/${rowId}`,
+    })
+  },
+
+  /**
+   * Creates or updates a row in a table.
+   * @param row the row to save
+   * @param suppressErrors whether or not to suppress error notifications
+   */
+  saveRow: async (row, suppressErrors = false) => {
+    const sourceId = row._viewId || row.tableId
+    return await API.post({
+      url: `/api/${sourceId}/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) => {
+    const sourceId = row._viewId || row.tableId
+    return await API.patch({
+      url: `/api/${sourceId}/rows`,
+      body: row,
+      suppressErrors,
+    })
+  },
+
+  /**
+   * Deletes a row from a table.
+   * @param sourceId the ID of the table or view to delete from
+   * @param rowId the ID of the row to delete
+   */
+  deleteRow: async (sourceId, rowId) => {
+    return await API.delete<DeleteRowRequest>({
+      url: `/api/${sourceId}/rows`,
+      body: {
+        _id: rowId,
+      },
+    })
+  },
+
+  /**
+   * Deletes multiple rows from a table.
+   * @param sourceId the table or view ID to delete the rows from
+   * @param rows the array of rows to delete
+   */
+  deleteRows: async (sourceId, rows) => {
+    rows.forEach(row => {
+      if (typeof row === "object") {
+        delete row?._viewId
+      }
+    })
+    return await API.delete<DeleteRowRequest>({
+      url: `/api/${sourceId}/rows`,
+      body: {
+        rows,
+      },
+    })
+  },
+
+  /**
+   * Exports rows.
+   * @param tableId the table ID to export the rows from
+   * @param format the format to export (csv or json)
+   * @param data the export options
+   */
+  exportRows: async (tableId, format, data) => {
+    return await API.post({
+      url: `/api/${tableId}/rows/exportRows?format=${format}`,
+      body: data,
+      parseResponse: async response => {
+        return await response.text()
+      },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/screens.js b/packages/frontend-core/src/api/screens.js
deleted file mode 100644
index 1daa79153b..0000000000
--- a/packages/frontend-core/src/api/screens.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const buildScreenEndpoints = API => ({
-  /**
-   * Saves a screen definition
-   * @param screen the screen to save
-   */
-  saveScreen: async screen => {
-    return await API.post({
-      url: "/api/screens",
-      body: screen,
-    })
-  },
-
-  /**
-   * Deletes a screen.
-   * @param screenId the ID of the screen to delete
-   * @param screenRev the rev of the screen to delete
-   */
-  deleteScreen: async ({ screenId, screenRev }) => {
-    return await API.delete({
-      url: `/api/screens/${screenId}/${screenRev}`,
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/screens.ts b/packages/frontend-core/src/api/screens.ts
new file mode 100644
index 0000000000..bdb01e1427
--- /dev/null
+++ b/packages/frontend-core/src/api/screens.ts
@@ -0,0 +1,35 @@
+import {
+  DeleteScreenResponse,
+  SaveScreenRequest,
+  SaveScreenResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface ScreenEndpoints {
+  saveScreen: (screen: SaveScreenRequest) => Promise<SaveScreenResponse>
+  deleteScreen: (id: string, rev: string) => Promise<DeleteScreenResponse>
+}
+
+export const buildScreenEndpoints = (API: BaseAPIClient): ScreenEndpoints => ({
+  /**
+   * Saves a screen definition
+   * @param screen the screen to save
+   */
+  saveScreen: async screen => {
+    return await API.post({
+      url: "/api/screens",
+      body: screen,
+    })
+  },
+
+  /**
+   * Deletes a screen.
+   * @param id the ID of the screen to delete
+   * @param rev the rev of the screen to delete
+   */
+  deleteScreen: async (id, rev) => {
+    return await API.delete({
+      url: `/api/screens/${id}/${rev}`,
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/self.js b/packages/frontend-core/src/api/self.ts
similarity index 59%
rename from packages/frontend-core/src/api/self.js
rename to packages/frontend-core/src/api/self.ts
index cdd5eaba53..db5b1226eb 100644
--- a/packages/frontend-core/src/api/self.js
+++ b/packages/frontend-core/src/api/self.ts
@@ -1,11 +1,28 @@
-export const buildSelfEndpoints = API => ({
+import {
+  AppSelfResponse,
+  FetchAPIKeyResponse,
+  GenerateAPIKeyResponse,
+  GetGlobalSelfResponse,
+  UpdateSelfRequest,
+  UpdateSelfResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface SelfEndpoints {
+  updateSelf: (user: UpdateSelfRequest) => Promise<UpdateSelfResponse>
+  generateAPIKey: () => Promise<string | undefined>
+  fetchDeveloperInfo: () => Promise<FetchAPIKeyResponse>
+  fetchBuilderSelf: () => Promise<GetGlobalSelfResponse>
+  fetchSelf: () => Promise<AppSelfResponse>
+}
+
+export const buildSelfEndpoints = (API: BaseAPIClient): SelfEndpoints => ({
   /**
    * Using the logged in user, this will generate a new API key,
    * assuming the user is a builder.
-   * @return {Promise<object>} returns the API response, including an API key.
    */
   generateAPIKey: async () => {
-    const response = await API.post({
+    const response = await API.post<null, GenerateAPIKeyResponse>({
       url: "/api/global/self/api_key",
     })
     return response?.apiKey
@@ -13,7 +30,6 @@ export const buildSelfEndpoints = API => ({
 
   /**
    * retrieves the API key for the logged in user.
-   * @return {Promise<object>} An object containing the user developer information.
    */
   fetchDeveloperInfo: async () => {
     return API.get({
diff --git a/packages/frontend-core/src/api/tables.js b/packages/frontend-core/src/api/tables.js
deleted file mode 100644
index dc9008e4eb..0000000000
--- a/packages/frontend-core/src/api/tables.js
+++ /dev/null
@@ -1,152 +0,0 @@
-export const buildTableEndpoints = API => ({
-  /**
-   * Fetches a table definition.
-   * Since definitions cannot change at runtime, the result is cached.
-   * @param tableId the ID of the table to fetch
-   */
-  fetchTableDefinition: async tableId => {
-    return await API.get({
-      url: `/api/tables/${tableId}`,
-      cache: true,
-    })
-  },
-
-  /**
-   * Fetches all rows from a table.
-   * @param tableId the ID of the table for fetch
-   */
-  fetchTableData: async tableId => {
-    return await API.get({ url: `/api/${tableId}/rows` })
-  },
-
-  /**
-   * Searches a table using Lucene.
-   * @param tableId the ID of the table to search
-   * @param query the lucene search query
-   * @param bookmark the current pagination bookmark
-   * @param limit the number of rows to retrieve
-   * @param sort the field to sort by
-   * @param sortOrder the order to sort by
-   * @param sortType the type to sort by, either numerically or alphabetically
-   * @param paginate whether to paginate the data
-   */
-  searchTable: async ({
-    tableId,
-    query,
-    bookmark,
-    limit,
-    sort,
-    sortOrder,
-    sortType,
-    paginate,
-  }) => {
-    if (!tableId) {
-      return {
-        rows: [],
-      }
-    }
-    return await API.post({
-      url: `/api/${tableId}/search`,
-      body: {
-        ...(query ? { query } : {}),
-        bookmark,
-        limit,
-        sort,
-        sortOrder,
-        sortType,
-        paginate,
-      },
-    })
-  },
-
-  /**
-   * Imports data into an existing table
-   * @param tableId the table ID to import to
-   * @param rows the data import object
-   * @param identifierFields column names to be used as keys for overwriting existing rows
-   */
-  importTableData: async ({ tableId, rows, identifierFields }) => {
-    return await API.post({
-      url: `/api/tables/${tableId}/import`,
-      body: {
-        rows,
-        identifierFields,
-      },
-    })
-  },
-  csvToJson: async csvString => {
-    return await API.post({
-      url: "/api/convert/csvToJson",
-      body: {
-        csvString,
-      },
-    })
-  },
-
-  /**
-   * Gets a list of tables.
-   */
-  getTables: async () => {
-    return await API.get({
-      url: "/api/tables",
-    })
-  },
-
-  /**
-   * Get a single table based on table ID.
-   */
-  getTable: async tableId => {
-    return await API.get({
-      url: `/api/tables/${tableId}`,
-    })
-  },
-
-  /**
-   * Saves a table.
-   * @param table the table to save
-   */
-  saveTable: async table => {
-    return await API.post({
-      url: "/api/tables",
-      body: table,
-    })
-  },
-
-  /**
-   * Deletes a table.
-   * @param tableId the ID of the table to delete
-   * @param tableRev the rev of the table to delete
-   */
-  deleteTable: async ({ tableId, tableRev }) => {
-    return await API.delete({
-      url: `/api/tables/${tableId}/${tableRev}`,
-    })
-  },
-  validateNewTableImport: async ({ rows, schema }) => {
-    return await API.post({
-      url: "/api/tables/validateNewTableImport",
-      body: {
-        rows,
-        schema,
-      },
-    })
-  },
-  validateExistingTableImport: async ({ rows, tableId }) => {
-    return await API.post({
-      url: "/api/tables/validateExistingTableImport",
-      body: {
-        rows,
-        tableId,
-      },
-    })
-  },
-  migrateColumn: async ({ tableId, oldColumn, newColumn }) => {
-    return await API.post({
-      url: `/api/tables/${tableId}/migrate`,
-      body: {
-        oldColumn,
-        newColumn,
-      },
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/tables.ts b/packages/frontend-core/src/api/tables.ts
new file mode 100644
index 0000000000..ebbd7c09bf
--- /dev/null
+++ b/packages/frontend-core/src/api/tables.ts
@@ -0,0 +1,192 @@
+import {
+  BulkImportRequest,
+  BulkImportResponse,
+  CsvToJsonRequest,
+  CsvToJsonResponse,
+  FetchTablesResponse,
+  Row,
+  SaveTableRequest,
+  SaveTableResponse,
+  SearchRowRequest,
+  PaginatedSearchRowResponse,
+  TableSchema,
+  ValidateNewTableImportRequest,
+  ValidateTableImportRequest,
+  ValidateTableImportResponse,
+  FindTableResponse,
+  FetchRowsResponse,
+  MigrateTableResponse,
+  MigrateTableRequest,
+  DeleteTableResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface TableEndpoints {
+  fetchTableDefinition: (tableId: string) => Promise<FindTableResponse>
+  fetchTableData: (tableId: string) => Promise<FetchRowsResponse>
+  searchTable: (
+    sourceId: string,
+    opts: SearchRowRequest
+  ) => Promise<PaginatedSearchRowResponse>
+  importTableData: (
+    tableId: string,
+    rows: Row[],
+    identifierFields?: string[]
+  ) => Promise<BulkImportResponse>
+  csvToJson: (csvString: string) => Promise<CsvToJsonResponse>
+  getTables: () => Promise<FetchTablesResponse>
+  getTable: (tableId: string) => Promise<FindTableResponse>
+  saveTable: (table: SaveTableRequest) => Promise<SaveTableResponse>
+  deleteTable: (id: string, rev: string) => Promise<DeleteTableResponse>
+  validateNewTableImport: (
+    rows: Row[],
+    schema: TableSchema
+  ) => Promise<ValidateTableImportResponse>
+  validateExistingTableImport: (
+    rows: Row[],
+    tableId?: string
+  ) => Promise<ValidateTableImportResponse>
+  migrateColumn: (
+    tableId: string,
+    oldColumn: string,
+    newColumn: string
+  ) => Promise<MigrateTableResponse>
+}
+
+export const buildTableEndpoints = (API: BaseAPIClient): TableEndpoints => ({
+  /**
+   * Fetches a table definition.
+   * Since definitions cannot change at runtime, the result is cached.
+   * @param tableId the ID of the table to fetch
+   */
+  fetchTableDefinition: async tableId => {
+    return await API.get({
+      url: `/api/tables/${tableId}`,
+      cache: true,
+    })
+  },
+
+  /**
+   * Fetches all rows from a table.
+   * @param sourceId the ID of the table to fetch
+   */
+  fetchTableData: async sourceId => {
+    return await API.get({ url: `/api/${sourceId}/rows` })
+  },
+
+  /**
+   * Searches a table using Lucene.
+   * @param sourceId the ID of the table to search
+   * @param opts the search opts
+   */
+  searchTable: async (sourceId, opts) => {
+    return await API.post({
+      url: `/api/${sourceId}/search`,
+      body: opts,
+    })
+  },
+
+  /**
+   * Imports data into an existing table
+   * @param tableId the table ID to import to
+   * @param rows the data import object
+   * @param identifierFields column names to be used as keys for overwriting existing rows
+   */
+  importTableData: async (tableId, rows, identifierFields) => {
+    return await API.post<BulkImportRequest, BulkImportResponse>({
+      url: `/api/tables/${tableId}/import`,
+      body: {
+        rows,
+        identifierFields,
+      },
+    })
+  },
+
+  /**
+   * Converts a CSV string to JSON
+   * @param csvString the CSV string
+   */
+  csvToJson: async csvString => {
+    return await API.post<CsvToJsonRequest, CsvToJsonResponse>({
+      url: "/api/convert/csvToJson",
+      body: {
+        csvString,
+      },
+    })
+  },
+
+  /**
+   * Gets a list of tables.
+   */
+  getTables: async () => {
+    return await API.get({
+      url: "/api/tables",
+    })
+  },
+
+  /**
+   * Get a single table based on table ID.
+   * Dupe of fetchTableDefinition but not cached?
+   */
+  getTable: async tableId => {
+    return await API.get({
+      url: `/api/tables/${tableId}`,
+    })
+  },
+
+  /**
+   * Saves a table.
+   * @param table the table to save
+   */
+  saveTable: async table => {
+    return await API.post({
+      url: "/api/tables",
+      body: table,
+    })
+  },
+
+  /**
+   * Deletes a table.
+   * @param id the ID of the table to delete
+   * @param rev the rev of the table to delete
+   */
+  deleteTable: async (id, rev) => {
+    return await API.delete({
+      url: `/api/tables/${id}/${rev}`,
+    })
+  },
+
+  validateNewTableImport: async (rows, schema) => {
+    return await API.post<
+      ValidateNewTableImportRequest,
+      ValidateTableImportResponse
+    >({
+      url: "/api/tables/validateNewTableImport",
+      body: {
+        rows,
+        schema,
+      },
+    })
+  },
+  validateExistingTableImport: async (rows, tableId) => {
+    return await API.post<
+      ValidateTableImportRequest,
+      ValidateTableImportResponse
+    >({
+      url: "/api/tables/validateExistingTableImport",
+      body: {
+        rows,
+        tableId,
+      },
+    })
+  },
+  migrateColumn: async (tableId, oldColumn, newColumn) => {
+    return await API.post<MigrateTableRequest, MigrateTableResponse>({
+      url: `/api/tables/${tableId}/migrate`,
+      body: {
+        oldColumn,
+        newColumn,
+      },
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/templates.js b/packages/frontend-core/src/api/templates.js
deleted file mode 100644
index 660a85d745..0000000000
--- a/packages/frontend-core/src/api/templates.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export const buildTemplateEndpoints = API => ({
-  /**
-   * Gets the list of email template definitions.
-   */
-  getEmailTemplateDefinitions: async () => {
-    return await API.get({ url: "/api/global/template/definitions" })
-  },
-
-  /**
-   * Gets the list of email templates.
-   */
-  getEmailTemplates: async () => {
-    return await API.get({ url: "/api/global/template/email" })
-  },
-
-  /**
-   * Saves an email template.
-   * @param template the template to save
-   */
-  saveEmailTemplate: async template => {
-    return await API.post({
-      url: "/api/global/template",
-      body: template,
-    })
-  },
-
-  /**
-   * Gets a list of app templates.
-   */
-  getAppTemplates: async () => {
-    return await API.get({
-      url: "/api/templates",
-    })
-  },
-})
diff --git a/packages/frontend-core/src/api/templates.ts b/packages/frontend-core/src/api/templates.ts
new file mode 100644
index 0000000000..f712bb1d39
--- /dev/null
+++ b/packages/frontend-core/src/api/templates.ts
@@ -0,0 +1,57 @@
+import {
+  FetchGlobalTemplateByTypeResponse,
+  FetchGlobalTemplateDefinitionResponse,
+  FetchTemplateResponse,
+  SaveGlobalTemplateRequest,
+  SaveGlobalTemplateResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface TemplateEndpoints {
+  getEmailTemplates: () => Promise<FetchGlobalTemplateByTypeResponse>
+  getAppTemplates: () => Promise<FetchTemplateResponse>
+  getEmailTemplateDefinitions: () => Promise<FetchGlobalTemplateDefinitionResponse>
+  saveEmailTemplate: (
+    template: SaveGlobalTemplateRequest
+  ) => Promise<SaveGlobalTemplateResponse>
+}
+
+export const buildTemplateEndpoints = (
+  API: BaseAPIClient
+): TemplateEndpoints => ({
+  /**
+   * Gets the list of email template definitions.
+   */
+  getEmailTemplateDefinitions: async () => {
+    return await API.get({ url: "/api/global/template/definitions" })
+  },
+
+  /**
+   * Gets the list of email templates.
+   */
+  getEmailTemplates: async () => {
+    return await API.get({
+      url: "/api/global/template/email",
+    })
+  },
+
+  /**
+   * Saves an email template.
+   * @param template the template to save
+   */
+  saveEmailTemplate: async template => {
+    return await API.post({
+      url: "/api/global/template",
+      body: template,
+    })
+  },
+
+  /**
+   * Gets a list of app templates.
+   */
+  getAppTemplates: async () => {
+    return await API.get({
+      url: "/api/templates",
+    })
+  },
+})
diff --git a/packages/frontend-core/src/api/types.ts b/packages/frontend-core/src/api/types.ts
new file mode 100644
index 0000000000..0db1049591
--- /dev/null
+++ b/packages/frontend-core/src/api/types.ts
@@ -0,0 +1,136 @@
+import { AIEndpoints } from "./ai"
+import { AnalyticsEndpoints } from "./analytics"
+import { AppEndpoints } from "./app"
+import { AttachmentEndpoints } from "./attachments"
+import { AuditLogEndpoints } from "./auditLogs"
+import { AuthEndpoints } from "./auth"
+import { AutomationEndpoints } from "./automations"
+import { BackupEndpoints } from "./backups"
+import { ConfigEndpoints } from "./configs"
+import { DatasourceEndpoints } from "./datasources"
+import { EnvironmentVariableEndpoints } from "./environmentVariables"
+import { EventEndpoints } from "./events"
+import { FlagEndpoints } from "./flags"
+import { GroupEndpoints } from "./groups"
+import { LayoutEndpoints } from "./layouts"
+import { LicensingEndpoints } from "./licensing"
+import { LogEndpoints } from "./logs"
+import { MigrationEndpoints } from "./migrations"
+import { OtherEndpoints } from "./other"
+import { PermissionEndpoints } from "./permissions"
+import { PluginEndpoins } from "./plugins"
+import { QueryEndpoints } from "./queries"
+import { RelationshipEndpoints } from "./relationships"
+import { RoleEndpoints } from "./roles"
+import { RouteEndpoints } from "./routes"
+import { RowActionEndpoints } from "./rowActions"
+import { RowEndpoints } from "./rows"
+import { ScreenEndpoints } from "./screens"
+import { SelfEndpoints } from "./self"
+import { TableEndpoints } from "./tables"
+import { TemplateEndpoints } from "./templates"
+import { UserEndpoints } from "./user"
+import { ViewEndpoints } from "./views"
+import { ViewV2Endpoints } from "./viewsV2"
+
+export enum HTTPMethod {
+  POST = "POST",
+  PATCH = "PATCH",
+  GET = "GET",
+  PUT = "PUT",
+  DELETE = "DELETE",
+}
+
+export type Headers = Record<string, string>
+
+export type APIClientConfig = {
+  enableCaching?: boolean
+  attachHeaders?: (headers: Headers) => void
+  onError?: (error: any) => void
+  onMigrationDetected?: (migration: string) => void
+}
+
+export type APICallConfig<RequestT, ResponseT> = {
+  method: HTTPMethod
+  url: string
+  json: boolean
+  external: boolean
+  suppressErrors: boolean
+  cache: boolean
+  body?: RequestT
+  parseResponse?: (response: Response) => Promise<ResponseT> | ResponseT
+}
+
+export type APICallParams<
+  RequestT = null,
+  ResponseT = void
+> = RequestT extends null
+  ? Pick<APICallConfig<RequestT, ResponseT>, "url"> &
+      Partial<APICallConfig<RequestT, ResponseT>>
+  : Pick<APICallConfig<RequestT, ResponseT>, "url" | "body"> &
+      Partial<APICallConfig<RequestT, ResponseT>>
+
+export type BaseAPIClient = {
+  post: <RequestT = null, ResponseT = void>(
+    params: APICallParams<RequestT, ResponseT>
+  ) => Promise<ResponseT>
+  get: <ResponseT = void>(
+    params: APICallParams<undefined | null, ResponseT>
+  ) => Promise<ResponseT>
+  put: <RequestT = null, ResponseT = void>(
+    params: APICallParams<RequestT, ResponseT>
+  ) => Promise<ResponseT>
+  delete: <RequestT = null, ResponseT = void>(
+    params: APICallParams<RequestT, ResponseT>
+  ) => Promise<ResponseT>
+  patch: <RequestT = null, ResponseT = void>(
+    params: APICallParams<RequestT, ResponseT>
+  ) => Promise<ResponseT>
+  error: (message: string) => void
+  invalidateCache: () => void
+  getAppID: () => string
+}
+
+export type APIError = {
+  message?: string
+  url?: string
+  method?: HTTPMethod
+  json: any
+  status: number
+  handled: boolean
+  suppressErrors: boolean
+}
+
+export type APIClient = BaseAPIClient &
+  AIEndpoints &
+  AnalyticsEndpoints &
+  AppEndpoints &
+  AttachmentEndpoints &
+  AuditLogEndpoints &
+  AuthEndpoints &
+  AutomationEndpoints &
+  BackupEndpoints &
+  ConfigEndpoints &
+  DatasourceEndpoints &
+  EnvironmentVariableEndpoints &
+  EventEndpoints &
+  FlagEndpoints &
+  GroupEndpoints &
+  LayoutEndpoints &
+  LicensingEndpoints &
+  LogEndpoints &
+  MigrationEndpoints &
+  OtherEndpoints &
+  PermissionEndpoints &
+  PluginEndpoins &
+  QueryEndpoints &
+  RelationshipEndpoints &
+  RoleEndpoints &
+  RouteEndpoints &
+  RowEndpoints &
+  ScreenEndpoints &
+  SelfEndpoints &
+  TableEndpoints &
+  TemplateEndpoints &
+  UserEndpoints &
+  ViewEndpoints & { rowActions: RowActionEndpoints; viewV2: ViewV2Endpoints }
diff --git a/packages/frontend-core/src/api/user.js b/packages/frontend-core/src/api/user.ts
similarity index 50%
rename from packages/frontend-core/src/api/user.js
rename to packages/frontend-core/src/api/user.ts
index 45d481183a..84ec68644d 100644
--- a/packages/frontend-core/src/api/user.js
+++ b/packages/frontend-core/src/api/user.ts
@@ -1,4 +1,82 @@
-export const buildUserEndpoints = API => ({
+import {
+  AcceptUserInviteRequest,
+  AcceptUserInviteResponse,
+  BulkUserCreated,
+  BulkUserDeleted,
+  BulkUserRequest,
+  BulkUserResponse,
+  CheckInviteResponse,
+  CountUserResponse,
+  CreateAdminUserRequest,
+  CreateAdminUserResponse,
+  DeleteInviteUsersRequest,
+  DeleteInviteUsersResponse,
+  DeleteUserResponse,
+  FetchUsersResponse,
+  FindUserResponse,
+  GetUserInvitesResponse,
+  InviteUsersRequest,
+  InviteUsersResponse,
+  LookupAccountHolderResponse,
+  SaveUserResponse,
+  SearchUsersRequest,
+  SearchUsersResponse,
+  UpdateInviteRequest,
+  UpdateInviteResponse,
+  UpdateSelfMetadataRequest,
+  UpdateSelfMetadataResponse,
+  User,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface UserEndpoints {
+  getUsers: () => Promise<FetchUsersResponse>
+  getUser: (userId: string) => Promise<FindUserResponse>
+  updateOwnMetadata: (
+    metadata: UpdateSelfMetadataRequest
+  ) => Promise<UpdateSelfMetadataResponse>
+  createAdminUser: (
+    user: CreateAdminUserRequest
+  ) => Promise<CreateAdminUserResponse>
+  saveUser: (user: User) => Promise<SaveUserResponse>
+  deleteUser: (userId: string) => Promise<DeleteUserResponse>
+  deleteUsers: (
+    users: Array<{
+      userId: string
+      email: string
+    }>
+  ) => Promise<BulkUserDeleted | undefined>
+  onboardUsers: (data: InviteUsersRequest) => Promise<InviteUsersResponse>
+  getUserInvite: (code: string) => Promise<CheckInviteResponse>
+  getUserInvites: () => Promise<GetUserInvitesResponse>
+  inviteUsers: (users: InviteUsersRequest) => Promise<InviteUsersResponse>
+  removeUserInvites: (
+    data: DeleteInviteUsersRequest
+  ) => Promise<DeleteInviteUsersResponse>
+  acceptInvite: (
+    data: AcceptUserInviteRequest
+  ) => Promise<AcceptUserInviteResponse>
+  getUserCountByApp: (appId: string) => Promise<number>
+  getAccountHolder: () => Promise<LookupAccountHolderResponse>
+  searchUsers: (data: SearchUsersRequest) => Promise<SearchUsersResponse>
+  createUsers: (
+    users: User[],
+    groups: any[]
+  ) => Promise<BulkUserCreated | undefined>
+  updateUserInvite: (
+    code: string,
+    data: UpdateInviteRequest
+  ) => Promise<UpdateInviteResponse>
+
+  // Missing request or response types
+  addAppBuilder: (userId: string, appId: string) => Promise<{ message: string }>
+  removeAppBuilder: (
+    userId: string,
+    appId: string
+  ) => Promise<{ message: string }>
+}
+
+export const buildUserEndpoints = (API: BaseAPIClient): UserEndpoints => ({
   /**
    * Gets a list of users in the current tenant.
    */
@@ -9,33 +87,12 @@ export const buildUserEndpoints = API => ({
   },
 
   /**
-   * Gets a list of users in the current tenant.
-   * @param {string} bookmark The page to retrieve
-   * @param {object} query search filters for lookup by user (all operators not supported).
-   * @param {string} appId Facilitate app/role based user searching
-   * @param {boolean} paginate Allow the disabling of pagination
-   * @param {number} limit How many users to retrieve in a single search
+   * Searches a list of users in the current tenant.
    */
-  searchUsers: async ({ paginate, bookmark, query, appId, limit } = {}) => {
-    const opts = {}
-    if (bookmark) {
-      opts.bookmark = bookmark
-    }
-    if (query) {
-      opts.query = query
-    }
-    if (appId) {
-      opts.appId = appId
-    }
-    if (typeof paginate === "boolean") {
-      opts.paginate = paginate
-    }
-    if (limit) {
-      opts.limit = limit
-    }
+  searchUsers: async data => {
     return await API.post({
       url: `/api/global/users/search`,
-      body: opts,
+      body: data,
     })
   },
 
@@ -48,17 +105,6 @@ export const buildUserEndpoints = API => ({
     })
   },
 
-  /**
-   * Creates a user for an app.
-   * @param user the user to create
-   */
-  createAppUser: async user => {
-    return await API.post({
-      url: "/api/users/metadata",
-      body: user,
-    })
-  },
-
   /**
    * Updates the current user metadata.
    * @param metadata the metadata to save
@@ -72,12 +118,12 @@ export const buildUserEndpoints = API => ({
 
   /**
    * Creates an admin user.
-   * @param adminUser the admin user to create
+   * @param user the admin user to create
    */
-  createAdminUser: async adminUser => {
+  createAdminUser: async user => {
     return await API.post({
       url: "/api/global/users/init",
-      body: adminUser,
+      body: user,
     })
   },
 
@@ -97,8 +143,8 @@ export const buildUserEndpoints = API => ({
    * @param users the array of user objects to create
    * @param groups the array of group ids to add all users to
    */
-  createUsers: async ({ users, groups }) => {
-    const res = await API.post({
+  createUsers: async (users, groups) => {
+    const res = await API.post<BulkUserRequest, BulkUserResponse>({
       url: "/api/global/users/bulk",
       body: {
         create: {
@@ -125,7 +171,7 @@ export const buildUserEndpoints = API => ({
    * @param users the ID/email pair of the user to delete
    */
   deleteUsers: async users => {
-    const res = await API.post({
+    const res = await API.post<BulkUserRequest, BulkUserResponse>({
       url: `/api/global/users/bulk`,
       body: {
         delete: {
@@ -137,54 +183,23 @@ export const buildUserEndpoints = API => ({
   },
 
   /**
-   * Invites a user to the current tenant.
-   * @param email the email address to send the invitation to
-   * @param builder whether the user should be a global builder
-   * @param admin whether the user should be a global admin
+   * Onboards multiple users
    */
-  inviteUser: async ({ email, builder, admin, apps }) => {
-    return await API.post({
-      url: "/api/global/users/invite",
-      body: {
-        email,
-        userInfo: {
-          admin: admin?.global ? { global: true } : undefined,
-          builder: builder?.global ? { global: true } : undefined,
-          apps: apps ? apps : undefined,
-        },
-      },
-    })
-  },
-
-  onboardUsers: async payload => {
+  onboardUsers: async data => {
     return await API.post({
       url: "/api/global/users/onboard",
-      body: payload.map(invite => {
-        const { email, admin, builder, apps } = invite
-        return {
-          email,
-          userInfo: {
-            admin,
-            builder,
-            apps: apps ? apps : undefined,
-          },
-        }
-      }),
+      body: data,
     })
   },
 
   /**
    * Accepts a user invite as a body and will update the associated app roles.
    * for an existing invite
-   * @param invite the invite code sent in the email
    */
-  updateUserInvite: async invite => {
-    await API.post({
-      url: `/api/global/users/invite/update/${invite.code}`,
-      body: {
-        apps: invite.apps,
-        builder: invite.builder,
-      },
+  updateUserInvite: async (code, data) => {
+    return await API.post<UpdateInviteRequest, UpdateInviteResponse>({
+      url: `/api/global/users/invite/update/${code}`,
+      body: data,
     })
   },
 
@@ -214,72 +229,46 @@ export const buildUserEndpoints = API => ({
   inviteUsers: async users => {
     return await API.post({
       url: "/api/global/users/multi/invite",
-      body: users.map(user => {
-        let builder = undefined
-        if (user.admin || user.builder) {
-          builder = { global: true }
-        } else if (user.creator) {
-          builder = { creator: true }
-        }
-        return {
-          email: user.email,
-          userInfo: {
-            admin: user.admin ? { global: true } : undefined,
-            builder,
-            userGroups: user.groups,
-            roles: user.apps ? user.apps : undefined,
-          },
-        }
-      }),
+      body: users,
     })
   },
 
   /**
    * Removes multiple user invites from Redis cache
    */
-  removeUserInvites: async inviteCodes => {
+  removeUserInvites: async data => {
     return await API.post({
       url: "/api/global/users/multi/invite/delete",
-      body: inviteCodes,
+      body: data,
     })
   },
 
   /**
    * Accepts an invite to join the platform and creates a user.
-   * @param inviteCode the invite code sent in the email
-   * @param password the password for the newly created user
-   * @param firstName the first name of the new user
-   * @param lastName the last name of the new user
    */
-  acceptInvite: async ({ inviteCode, password, firstName, lastName }) => {
+  acceptInvite: async data => {
     return await API.post({
       url: "/api/global/users/invite/accept",
-      body: {
-        inviteCode,
-        password,
-        firstName,
-        lastName,
-      },
+      body: data,
     })
   },
 
   /**
-   * Accepts an invite to join the platform and creates a user.
-   * @param inviteCode the invite code sent in the email
-   * @param password the password for the newly created user
+   * Counts the number of users in an app
    */
-  getUserCountByApp: async ({ appId }) => {
-    return await API.get({
+  getUserCountByApp: async appId => {
+    const res = await API.get<CountUserResponse>({
       url: `/api/global/users/count/${appId}`,
     })
+    return res.userCount
   },
 
   /**
    * 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
+   * @param appId the applications id
    */
-  addAppBuilder: async ({ userId, appId }) => {
+  addAppBuilder: async (userId, appId) => {
     return await API.post({
       url: `/api/global/users/${userId}/app/${appId}/builder`,
     })
@@ -287,15 +276,18 @@ export const buildUserEndpoints = API => ({
 
   /**
    * 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
+   * @param appId the applications id
    */
-  removeAppBuilder: async ({ userId, appId }) => {
+  removeAppBuilder: async (userId, appId) => {
     return await API.delete({
       url: `/api/global/users/${userId}/app/${appId}/builder`,
     })
   },
 
+  /**
+   * Gets the account holder of the current tenant
+   */
   getAccountHolder: async () => {
     return await API.get({
       url: `/api/global/users/accountholder`,
diff --git a/packages/frontend-core/src/api/views.js b/packages/frontend-core/src/api/views.ts
similarity index 63%
rename from packages/frontend-core/src/api/views.js
rename to packages/frontend-core/src/api/views.ts
index 1d710c5171..3f8ac8aa41 100644
--- a/packages/frontend-core/src/api/views.js
+++ b/packages/frontend-core/src/api/views.ts
@@ -1,4 +1,15 @@
-export const buildViewEndpoints = API => ({
+import { Row } from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface ViewEndpoints {
+  // Missing request or response types
+  fetchViewData: (name: string, opts: any) => Promise<Row[]>
+  exportView: (name: string, format: string) => Promise<any>
+  saveView: (view: any) => Promise<any>
+  deleteView: (name: string) => Promise<any>
+}
+
+export const buildViewEndpoints = (API: BaseAPIClient): ViewEndpoints => ({
   /**
    * Fetches all rows in a view
    * @param name the name of the view
@@ -6,7 +17,7 @@ export const buildViewEndpoints = API => ({
    * @param groupBy the field to group by
    * @param calculation the calculation to perform
    */
-  fetchViewData: async ({ name, field, groupBy, calculation }) => {
+  fetchViewData: async (name, { field, groupBy, calculation }) => {
     const params = new URLSearchParams()
     if (calculation) {
       params.set("field", field)
@@ -23,11 +34,11 @@ export const buildViewEndpoints = API => ({
 
   /**
    * Exports a view for download
-   * @param viewName the view to export
+   * @param name the view to export
    * @param format the format to download
    */
-  exportView: async ({ viewName, format }) => {
-    const safeViewName = encodeURIComponent(viewName)
+  exportView: async (name, format) => {
+    const safeViewName = encodeURIComponent(name)
     return await API.get({
       url: `/api/views/export?view=${safeViewName}&format=${format}`,
       parseResponse: async response => {
@@ -51,9 +62,9 @@ export const buildViewEndpoints = API => ({
    * Deletes a view.
    * @param viewName the name of the view to delete
    */
-  deleteView: async viewName => {
+  deleteView: async name => {
     return await API.delete({
-      url: `/api/views/${encodeURIComponent(viewName)}`,
+      url: `/api/views/${encodeURIComponent(name)}`,
     })
   },
 })
diff --git a/packages/frontend-core/src/api/viewsV2.js b/packages/frontend-core/src/api/viewsV2.ts
similarity index 56%
rename from packages/frontend-core/src/api/viewsV2.js
rename to packages/frontend-core/src/api/viewsV2.ts
index d1cb07c6b0..5018448e8c 100644
--- a/packages/frontend-core/src/api/viewsV2.js
+++ b/packages/frontend-core/src/api/viewsV2.ts
@@ -1,4 +1,26 @@
-export const buildViewV2Endpoints = API => ({
+import {
+  CreateViewRequest,
+  CreateViewResponse,
+  SearchRowResponse,
+  SearchViewRowRequest,
+  UpdateViewRequest,
+  UpdateViewResponse,
+  ViewResponseEnriched,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface ViewV2Endpoints {
+  fetchDefinition: (viewId: string) => Promise<ViewResponseEnriched>
+  create: (view: CreateViewRequest) => Promise<CreateViewResponse>
+  update: (view: UpdateViewRequest) => Promise<UpdateViewResponse>
+  fetch: (
+    viewId: string,
+    opts: SearchViewRowRequest
+  ) => Promise<SearchRowResponse>
+  delete: (viewId: string) => Promise<void>
+}
+
+export const buildViewV2Endpoints = (API: BaseAPIClient): ViewV2Endpoints => ({
   /**
    * Fetches the definition of a view
    * @param viewId the ID of the view to fetch
@@ -9,6 +31,7 @@ export const buildViewV2Endpoints = API => ({
       cache: true,
     })
   },
+
   /**
    * Create a new view
    * @param view the view object
@@ -19,6 +42,7 @@ export const buildViewV2Endpoints = API => ({
       body: view,
     })
   },
+
   /**
    * Updates a view
    * @param view the view object
@@ -29,40 +53,19 @@ export const buildViewV2Endpoints = API => ({
       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)
+   * @param opts the search options
    */
-  fetch: async ({
-    viewId,
-    query,
-    paginate,
-    limit,
-    bookmark,
-    sort,
-    sortOrder,
-    sortType,
-  }) => {
+  fetch: async (viewId, opts) => {
     return await API.post({
       url: `/api/v2/views/${encodeURIComponent(viewId)}/search`,
-      body: {
-        query,
-        paginate,
-        limit,
-        bookmark,
-        sort,
-        sortOrder,
-        sortType,
-      },
+      body: opts,
     })
   },
+
   /**
    * Delete a view
    * @param viewId the id of the view
diff --git a/packages/frontend-core/src/components/grid/cells/AICell.svelte b/packages/frontend-core/src/components/grid/cells/AICell.svelte
index 38e81cefd3..b56e67b752 100644
--- a/packages/frontend-core/src/components/grid/cells/AICell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AICell.svelte
@@ -73,6 +73,7 @@
   .value {
     display: -webkit-box;
     -webkit-line-clamp: var(--content-lines);
+    line-clamp: var(--content-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 20px;
diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
index 7829e5da7d..80da91e091 100644
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@@ -93,6 +93,7 @@
   .value {
     display: -webkit-box;
     -webkit-line-clamp: var(--content-lines);
+    line-clamp: var(--content-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 20px;
diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index 92186f19b1..bda0f5fd5d 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -102,9 +102,8 @@
     lastSearchId = Math.random()
     searching = true
     const thisSearchId = lastSearchId
-    const results = await searchFunction({
+    const results = await searchFunction(schema.tableId, {
       paginate: false,
-      tableId: schema.tableId,
       limit: 20,
       query: {
         string: {
diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
index 9275bca3c6..b9a63eb401 100644
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -74,12 +74,14 @@
   .value {
     display: -webkit-box;
     -webkit-line-clamp: var(--content-lines);
+    line-clamp: var(--content-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 20px;
   }
   .number .value {
     -webkit-line-clamp: 1;
+    line-clamp: 1;
   }
   input {
     flex: 1 1 auto;
@@ -110,5 +112,6 @@
   }
   input[type="number"] {
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 </style>
diff --git a/packages/frontend-core/src/components/grid/controls/MigrationModal.svelte b/packages/frontend-core/src/components/grid/controls/MigrationModal.svelte
index 8ecec03e0e..96443311c2 100644
--- a/packages/frontend-core/src/components/grid/controls/MigrationModal.svelte
+++ b/packages/frontend-core/src/components/grid/controls/MigrationModal.svelte
@@ -29,11 +29,11 @@
 
   const migrateUserColumn = async () => {
     try {
-      await API.migrateColumn({
-        tableId: $definition._id,
-        oldColumn: column.schema.name,
-        newColumn: newColumnName,
-      })
+      await API.migrateColumn(
+        $definition._id,
+        column.schema.name,
+        newColumnName
+      )
       notifications.success("Column migrated")
     } catch (e) {
       notifications.error(`Failed to migrate: ${e.message}`)
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index fcaf9724c3..bd630e9908 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { setContext, onMount } from "svelte"
   import { writable, derived } from "svelte/store"
   import { fade } from "svelte/transition"
@@ -47,24 +47,22 @@
   export let buttonsCollapsedText = null
   export let darkMode = false
   export let isCloud = null
-  export let rowConditions = null
   export let aiEnabled = false
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
 
   // Store props in a store for reference in other stores
-  const props = writable($$props)
+  const props: any = writable($$props)
 
   // Build up context
-  let context = {
+  let context = attachStores({
     API: API || createAPIClient(),
     Constants,
     gridID,
     props,
-  }
-  context = { ...context, ...createEventManagers() }
-  context = attachStores(context)
+    ...createEventManagers(),
+  })
 
   // Reference some stores for local use
   const {
@@ -106,7 +104,6 @@
     darkMode,
     isCloud,
     aiEnabled,
-    rowConditions,
   })
 
   // Derive min height and make available in context
diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js
index 81b4a2f823..fe2aa06c8e 100644
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -7,7 +7,7 @@ export const HPadding = 40
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
-export const MinColumnWidth = 80
+export const MinColumnWidth = 56
 export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const GeneratedIDPrefix = "‽‽"
diff --git a/packages/frontend-core/src/components/grid/lib/events.js b/packages/frontend-core/src/components/grid/lib/events.ts
similarity index 78%
rename from packages/frontend-core/src/components/grid/lib/events.js
rename to packages/frontend-core/src/components/grid/lib/events.ts
index 1c486858b2..7fd826954a 100644
--- a/packages/frontend-core/src/components/grid/lib/events.js
+++ b/packages/frontend-core/src/components/grid/lib/events.ts
@@ -2,11 +2,11 @@ import { createEventDispatcher } from "svelte"
 
 export const createEventManagers = () => {
   const svelteDispatch = createEventDispatcher()
-  let subscribers = {}
+  let subscribers: Record<string, ((...params: any) => void)[]> = {}
 
   // Dispatches an event, notifying subscribers and also emitting a normal
   // svelte event
-  const dispatch = (event, payload) => {
+  const dispatch = (event: string, payload: any) => {
     svelteDispatch(event, payload)
     const subs = subscribers[event] || []
     for (let i = 0; i < subs.length; i++) {
@@ -15,7 +15,7 @@ export const createEventManagers = () => {
   }
 
   // Subscribes to events
-  const subscribe = (event, callback) => {
+  const subscribe = (event: string, callback: () => void) => {
     const subs = subscribers[event] || []
     subscribers[event] = [...subs, callback]
 
diff --git a/packages/frontend-core/src/components/grid/lib/utils.js b/packages/frontend-core/src/components/grid/lib/utils.js
index f1f33d9950..ee74a14bf0 100644
--- a/packages/frontend-core/src/components/grid/lib/utils.js
+++ b/packages/frontend-core/src/components/grid/lib/utils.js
@@ -1,3 +1,5 @@
+// TODO: remove when all stores are typed
+
 import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
 import { Helpers } from "@budibase/bbui"
 
diff --git a/packages/frontend-core/src/components/grid/lib/utils.ts b/packages/frontend-core/src/components/grid/lib/utils.ts
new file mode 100644
index 0000000000..3dd2d1ddd5
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/lib/utils.ts
@@ -0,0 +1,32 @@
+import { GeneratedIDPrefix, CellIDSeparator } from "./constants"
+import { Helpers } from "@budibase/bbui"
+
+export const parseCellID = (cellId: string | null) => {
+  if (!cellId) {
+    return { rowId: undefined, field: undefined }
+  }
+  const parts = cellId.split(CellIDSeparator)
+  const field = parts.pop()
+  return { rowId: parts.join(CellIDSeparator), field }
+}
+
+export const getCellID = (rowId: string, fieldName: string) => {
+  return `${rowId}${CellIDSeparator}${fieldName}`
+}
+
+export const parseEventLocation = (event: MouseEvent | TouchEvent) => {
+  const e = event as MouseEvent & TouchEvent
+
+  return {
+    x: e.clientX ?? e.touches?.[0]?.clientX,
+    y: e.clientY ?? e.touches?.[0]?.clientY,
+  }
+}
+
+export const generateRowID = () => {
+  return `${GeneratedIDPrefix}${Helpers.uuid()}`
+}
+
+export const isGeneratedRowID = (id: string) => {
+  return id?.startsWith(GeneratedIDPrefix)
+}
diff --git a/packages/frontend-core/src/components/grid/stores/bounds.js b/packages/frontend-core/src/components/grid/stores/bounds.js
deleted file mode 100644
index c0939f7389..0000000000
--- a/packages/frontend-core/src/components/grid/stores/bounds.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { derived, writable } from "svelte/store"
-
-export const createStores = () => {
-  const bounds = writable({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-  })
-
-  // Derive height and width as primitives to avoid wasted computation
-  const width = derived(bounds, $bounds => $bounds.width, 0)
-  const height = derived(bounds, $bounds => $bounds.height, 0)
-
-  return { bounds, height, width }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/bounds.ts b/packages/frontend-core/src/components/grid/stores/bounds.ts
new file mode 100644
index 0000000000..0050555f96
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/bounds.ts
@@ -0,0 +1,29 @@
+import { derived, Readable, Writable, writable } from "svelte/store"
+
+interface BoundsStore {
+  bounds: Writable<{
+    left: number
+    top: number
+    width: number
+    height: number
+  }>
+  height: Readable<number>
+  width: Readable<number>
+}
+
+export type Store = BoundsStore
+
+export const createStores = (): BoundsStore => {
+  const bounds = writable({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  })
+
+  // Derive height and width as primitives to avoid wasted computation
+  const width = derived(bounds, $bounds => $bounds.width, 0)
+  const height = derived(bounds, $bounds => $bounds.height, 0)
+
+  return { bounds, height, width }
+}
diff --git a/packages/frontend-core/src/components/grid/stores/cache.js b/packages/frontend-core/src/components/grid/stores/cache.ts
similarity index 63%
rename from packages/frontend-core/src/components/grid/stores/cache.js
rename to packages/frontend-core/src/components/grid/stores/cache.ts
index cf4690f15b..999a3ea11d 100644
--- a/packages/frontend-core/src/components/grid/stores/cache.js
+++ b/packages/frontend-core/src/components/grid/stores/cache.ts
@@ -1,16 +1,31 @@
-export const createActions = context => {
+import { FindTableResponse } from "@budibase/types"
+import { Store as StoreContext } from "."
+
+interface CacheActionStore {
+  cache: {
+    actions: {
+      getPrimaryDisplayForTableId: (tableId: string) => Promise<string>
+      getTable: (tableId: string) => Promise<FindTableResponse>
+      resetCache: () => any
+    }
+  }
+}
+
+export type Store = CacheActionStore
+
+export const createActions = (context: StoreContext): CacheActionStore => {
   const { API } = context
 
   // Cache for the primary display columns of different tables.
   // If we ever need to cache table definitions for other purposes then we can
   // expand this to be a more generic cache.
-  let tableCache = {}
+  let tableCache: Record<string, Promise<FindTableResponse>> = {}
 
   const resetCache = () => {
     tableCache = {}
   }
 
-  const fetchTable = async tableId => {
+  const fetchTable = async (tableId: string) => {
     // If we've never encountered this tableId before then store a promise that
     // resolves to the primary display so that subsequent invocations before the
     // promise completes can reuse this promise
@@ -21,13 +36,13 @@ export const createActions = context => {
     return await tableCache[tableId]
   }
 
-  const getPrimaryDisplayForTableId = async tableId => {
+  const getPrimaryDisplayForTableId = async (tableId: string) => {
     const table = await fetchTable(tableId)
     const display = table?.primaryDisplay || table?.schema?.[0]?.name
     return display
   }
 
-  const getTable = async tableId => {
+  const getTable = async (tableId: string) => {
     const table = await fetchTable(tableId)
     return table
   }
@@ -43,7 +58,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { datasource, cache } = context
 
   // Wipe the caches whenever the datasource changes to ensure we aren't
diff --git a/packages/frontend-core/src/components/grid/stores/clipboard.js b/packages/frontend-core/src/components/grid/stores/clipboard.ts
similarity index 78%
rename from packages/frontend-core/src/components/grid/stores/clipboard.js
rename to packages/frontend-core/src/components/grid/stores/clipboard.ts
index 1cb75b38b1..3489e5c847 100644
--- a/packages/frontend-core/src/components/grid/stores/clipboard.js
+++ b/packages/frontend-core/src/components/grid/stores/clipboard.ts
@@ -1,10 +1,41 @@
-import { derived, writable, get } from "svelte/store"
+import { derived, writable, get, Writable, Readable } from "svelte/store"
 import { Helpers } from "@budibase/bbui"
 import { parseCellID, getCellID } from "../lib/utils"
 import { NewRowID } from "../lib/constants"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
-  const clipboard = writable({
+type ClipboardStoreData =
+  | {
+      value: any[][]
+      multiCellCopy: true
+    }
+  | {
+      value: any | null | undefined
+      multiCellCopy: false
+    }
+
+interface ClipboardStore {
+  clipboard: Writable<ClipboardStoreData>
+}
+
+interface ClipboardDerivedStore {
+  copyAllowed: Readable<boolean>
+  pasteAllowed: Readable<boolean>
+}
+
+interface ClipboardActions {
+  clipboard: ClipboardStore["clipboard"] & {
+    actions: {
+      copy: () => void
+      paste: (progressCallback: () => void) => Promise<void>
+    }
+  }
+}
+
+export type Store = ClipboardStore & ClipboardDerivedStore & ClipboardActions
+
+export const createStores = (): ClipboardStore => {
+  const clipboard = writable<ClipboardStoreData>({
     value: null,
     multiCellCopy: false,
   })
@@ -13,7 +44,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ClipboardDerivedStore => {
   const { clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId } =
     context
 
@@ -60,7 +91,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ClipboardActions => {
   const {
     clipboard,
     focusedCellAPI,
@@ -92,11 +123,11 @@ export const createActions = context => {
       const $rowChangeCache = get(rowChangeCache)
 
       // Extract value of each selected cell, accounting for the change cache
-      let value = []
-      for (let row of $selectedCells) {
+      const value = []
+      for (const row of $selectedCells) {
         const rowValues = []
-        for (let cellId of row) {
-          const { rowId, field } = parseCellID(cellId)
+        for (const cellId of row) {
+          const { rowId = "", field = "" } = parseCellID(cellId)
           const row = {
             ...$rowLookupMap[rowId],
             ...$rowChangeCache[rowId],
@@ -113,7 +144,7 @@ export const createActions = context => {
       })
     } else {
       // Single value to copy
-      const value = $focusedCellAPI.getValue()
+      const value = $focusedCellAPI?.getValue()
       clipboard.set({
         value,
         multiCellCopy,
@@ -130,7 +161,7 @@ export const createActions = context => {
   }
 
   // Pastes the previously copied value(s) into the selected cell(s)
-  const paste = async progressCallback => {
+  const paste = async (progressCallback: () => void) => {
     if (!get(pasteAllowed)) {
       return
     }
@@ -166,8 +197,8 @@ export const createActions = context => {
         const { rowId, field } = parseCellID($focusedCellId)
         const $rowLookupMap = get(rowLookupMap)
         const $columnLookupMap = get(columnLookupMap)
-        const rowIdx = $rowLookupMap[rowId].__idx
-        const colIdx = $columnLookupMap[field].__idx
+        const rowIdx = $rowLookupMap[rowId!].__idx
+        const colIdx = $columnLookupMap[field!].__idx || 0
 
         // Get limits of how many rows and columns we're able to paste into
         const $rows = get(rows)
@@ -187,7 +218,7 @@ export const createActions = context => {
         // Paste into target cell range
         if (targetCellId === $focusedCellId) {
           // Single cell edge case
-          get(focusedCellAPI).setValue(value[0][0])
+          get(focusedCellAPI)?.setValue(value[0][0])
         } else {
           // Select the new cells to paste into, then paste
           selectedCells.actions.selectRange($focusedCellId, targetCellId)
@@ -197,17 +228,20 @@ export const createActions = context => {
     } else {
       if (multiCellPaste) {
         // Single to multi - duplicate value to all selected cells
-        const newValue = get(selectedCells).map(row => row.map(() => value))
+        const newValue = get(selectedCells).map(row => row.map(() => value!))
         await pasteIntoSelectedCells(newValue, progressCallback)
       } else {
         // Single to single - just update the cell's value
-        get(focusedCellAPI).setValue(value)
+        get(focusedCellAPI)?.setValue(value ?? null)
       }
     }
   }
 
   // Paste the specified value into the currently selected cells
-  const pasteIntoSelectedCells = async (value, progressCallback) => {
+  const pasteIntoSelectedCells = async (
+    value: string[][],
+    progressCallback: () => any
+  ) => {
     const $selectedCells = get(selectedCells)
 
     // Find the extent at which we can paste
@@ -215,11 +249,13 @@ export const createActions = context => {
     const colExtent = Math.min(value[0].length, $selectedCells[0].length)
 
     // Build change map
-    let changeMap = {}
+    let changeMap: Record<string, Record<string, string>> = {}
     for (let rowIdx = 0; rowIdx < rowExtent; rowIdx++) {
       for (let colIdx = 0; colIdx < colExtent; colIdx++) {
         const cellId = $selectedCells[rowIdx][colIdx]
-        const { rowId, field } = parseCellID(cellId)
+        let { rowId, field } = parseCellID(cellId)
+        rowId = rowId!
+        field = field!
         if (!changeMap[rowId]) {
           changeMap[rowId] = {}
         }
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.ts
similarity index 74%
rename from packages/frontend-core/src/components/grid/stores/columns.js
rename to packages/frontend-core/src/components/grid/stores/columns.ts
index 5f2800ba7a..1b3f6624e1 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.ts
@@ -1,8 +1,34 @@
-import { derived, get, writable } from "svelte/store"
+import { derived, get, Readable, Writable, writable } from "svelte/store"
 import { DefaultColumnWidth, GutterWidth } from "../lib/constants"
+import { UIColumn } from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
-  const columns = writable([])
+interface ColumnStore {
+  columns: Writable<UIColumn[]>
+}
+
+interface DerivedColumnStore {
+  tableColumns: Readable<UIColumn[]>
+  displayColumn: Readable<UIColumn | undefined>
+  columnLookupMap: Readable<Record<string, UIColumn>>
+  visibleColumns: Readable<UIColumn[]>
+  scrollableColumns: Readable<UIColumn[]>
+  hasNonAutoColumn: Readable<boolean>
+}
+
+interface ColumnActions {
+  columns: ColumnStore["columns"] & {
+    actions: {
+      changeAllColumnWidths: (width: number) => Promise<void>
+      isReadonly: (column: UIColumn) => boolean
+    }
+  }
+}
+
+export type Store = ColumnStore & DerivedColumnStore & ColumnActions
+
+export const createStores = (): ColumnStore => {
+  const columns = writable<UIColumn[]>([])
 
   // Enrich columns with metadata about their display position
   const enrichedColumns = derived(columns, $columns => {
@@ -16,7 +42,7 @@ export const createStores = () => {
       }
       if (col.visible) {
         idx++
-        offset += col.width
+        offset += col.width ?? 0
       }
       return enriched
     })
@@ -30,12 +56,12 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedColumnStore => {
   const { columns } = context
 
   // Derive a lookup map for all columns by name
   const columnLookupMap = derived(columns, $columns => {
-    let map = {}
+    let map: Record<string, UIColumn> = {}
     $columns.forEach(column => {
       map[column.name] = column
     })
@@ -78,11 +104,11 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ColumnActions => {
   const { columns, datasource } = context
 
   // Updates the width of all columns
-  const changeAllColumnWidths = async width => {
+  const changeAllColumnWidths = async (width: number) => {
     const $columns = get(columns)
     $columns.forEach(column => {
       const { related } = column
@@ -101,7 +127,7 @@ export const createActions = context => {
   }
 
   // Checks if a column is readonly
-  const isReadonly = column => {
+  const isReadonly = (column: UIColumn) => {
     if (!column?.schema) {
       return false
     }
@@ -125,21 +151,21 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { definition, columns, displayColumn, enrichedSchema } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
-  const processColumns = $enrichedSchema => {
-    if (!$enrichedSchema) {
+  const processColumns = ($enrichedSchema: any) => {
+    const $definition = get(definition)
+    if (!$enrichedSchema || !$definition) {
       columns.set([])
       return
     }
-    const $definition = get(definition)
-    const $columns = get(columns)
+
     const $displayColumn = get(displayColumn)
 
     // Find primary display
-    let primaryDisplay
+    let primaryDisplay: string
     const candidatePD = $definition.primaryDisplay || $displayColumn?.name
     if (candidatePD && $enrichedSchema[candidatePD]) {
       primaryDisplay = candidatePD
@@ -150,18 +176,20 @@ export const initialise = context => {
       Object.keys($enrichedSchema)
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
-          const oldColumn = $columns?.find(col => col.name === field)
-          const column = {
+          const column: UIColumn = {
+            type: fieldSchema.type,
             name: field,
             label: fieldSchema.displayName || field,
             schema: fieldSchema,
-            width: fieldSchema.width || oldColumn?.width || DefaultColumnWidth,
+            width: fieldSchema.width || DefaultColumnWidth,
             visible: fieldSchema.visible ?? true,
             readonly: fieldSchema.readonly,
-            order: fieldSchema.order ?? oldColumn?.order,
+            order: fieldSchema.order,
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
             calculationType: fieldSchema.calculationType,
+            __left: undefined as any, // TODO
+            __idx: undefined as any, // TODO
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.ts
similarity index 77%
rename from packages/frontend-core/src/components/grid/stores/conditions.js
rename to packages/frontend-core/src/components/grid/stores/conditions.ts
index 3800f21df1..cf47456b44 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.ts
@@ -1,15 +1,31 @@
-import { writable, get } from "svelte/store"
+import { writable, get, Writable, Readable } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
-import { FieldType, EmptyFilterOption } from "@budibase/types"
+import {
+  FieldType,
+  EmptyFilterOption,
+  UIRow,
+  UICondition,
+} from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
+interface ConditionStore {
+  metadata: Writable<Record<string, any>>
+}
+
+interface ConditionDerivedStore {
+  conditions: Readable<UICondition[]>
+}
+
+export type Store = ConditionStore & ConditionDerivedStore
+
+export const createStores = (): ConditionStore => {
   const metadata = writable({})
   return {
     metadata,
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ConditionDerivedStore => {
   const { columns } = context
 
   // Derive and memoize the cell conditions present in our columns so that we
@@ -33,12 +49,12 @@ export const deriveStores = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { metadata, conditions, rows } = context
 
   // Recompute all metadata if conditions change
   conditions.subscribe($conditions => {
-    let newMetadata = {}
+    let newMetadata: Record<string, any> = {}
     if ($conditions?.length) {
       for (let row of get(rows)) {
         newMetadata[row._id] = evaluateConditions(row, $conditions)
@@ -54,7 +70,7 @@ export const initialise = context => {
       return
     }
     const $metadata = get(metadata)
-    let metadataUpdates = {}
+    let metadataUpdates: Record<string, any> = {}
     for (let row of $rows) {
       if (!row._rev || $metadata[row._id]?.version !== row._rev) {
         metadataUpdates[row._id] = evaluateConditions(row, $conditions)
@@ -69,15 +85,15 @@ export const initialise = context => {
   })
 }
 
-const TypeCoercionMap = {
+const TypeCoercionMap: Partial<Record<FieldType, (val: string) => any>> = {
   [FieldType.NUMBER]: parseFloat,
-  [FieldType.DATETIME]: val => {
+  [FieldType.DATETIME]: (val: string) => {
     if (val) {
       return new Date(val).toISOString()
     }
     return null
   },
-  [FieldType.BOOLEAN]: val => {
+  [FieldType.BOOLEAN]: (val: string) => {
     if (`${val}`.toLowerCase().trim() === "true") {
       return true
     }
@@ -90,8 +106,12 @@ const TypeCoercionMap = {
 
 // Evaluates an array of cell conditions against a certain row and returns the
 // resultant metadata
-const evaluateConditions = (row, conditions) => {
-  let metadata = {
+const evaluateConditions = (row: UIRow, conditions: UICondition[]) => {
+  const metadata: {
+    version?: string
+    row: Record<string, string>
+    cell: Record<string, any>
+  } = {
     version: row._rev,
     row: {},
     cell: {},
diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.ts
similarity index 77%
rename from packages/frontend-core/src/components/grid/stores/config.js
rename to packages/frontend-core/src/components/grid/stores/config.ts
index 4a60370690..e334b58495 100644
--- a/packages/frontend-core/src/components/grid/stores/config.js
+++ b/packages/frontend-core/src/components/grid/stores/config.ts
@@ -1,10 +1,22 @@
 import { derivedMemo } from "../../../utils"
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
 import { ViewV2Type } from "@budibase/types"
+import { BaseStoreProps, Store as StoreContext } from "."
 
-export const createStores = context => {
+type ConfigStore = {
+  [key in keyof BaseStoreProps]: Readable<BaseStoreProps[key]>
+}
+
+interface ConfigDerivedStore {
+  config: Readable<BaseStoreProps>
+}
+
+export type Store = ConfigStore & ConfigDerivedStore
+
+export const createStores = (context: StoreContext): ConfigStore => {
   const { props } = context
-  const getProp = prop => derivedMemo(props, $props => $props[prop])
+  const getProp = <T extends keyof BaseStoreProps>(prop: T) =>
+    derivedMemo(props, $props => $props[prop])
 
   // Derive and memoize some props so that we can react to them in isolation
   const datasource = getProp("datasource")
@@ -15,7 +27,6 @@ export const createStores = context => {
   const schemaOverrides = getProp("schemaOverrides")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
-  const rowConditions = getProp("rowConditions")
 
   return {
     datasource,
@@ -26,11 +37,10 @@ export const createStores = context => {
     schemaOverrides,
     notifySuccess,
     notifyError,
-    rowConditions,
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
   const { props, definition, hasNonAutoColumn } = context
 
   // Derive features
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.ts
similarity index 67%
rename from packages/frontend-core/src/components/grid/stores/datasource.js
rename to packages/frontend-core/src/components/grid/stores/datasource.ts
index 6aa607f7ed..74101701ed 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.ts
@@ -1,10 +1,54 @@
-import { derived, get } from "svelte/store"
+import { derived, get, Readable, Writable } from "svelte/store"
 import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
 import { enrichSchemaWithRelColumns, memo } from "../../../utils"
 import { cloneDeep } from "lodash"
-import { ViewV2Type } from "@budibase/types"
+import {
+  SaveRowRequest,
+  SaveTableRequest,
+  UIDatasource,
+  UIFieldMutation,
+  UIFieldSchema,
+  UIRow,
+  UpdateViewRequest,
+  ViewV2Type,
+} from "@budibase/types"
+import { Store as StoreContext, BaseStoreProps } from "."
+import { DatasourceActions } from "./datasources"
 
-export const createStores = () => {
+interface DatasourceStore {
+  definition: Writable<UIDatasource | null>
+  schemaMutations: Writable<Record<string, UIFieldMutation>>
+  subSchemaMutations: Writable<Record<string, Record<string, UIFieldMutation>>>
+}
+
+interface DerivedDatasourceStore {
+  schema: Readable<Record<string, UIFieldSchema> | null>
+  enrichedSchema: Readable<Record<string, UIFieldSchema> | null>
+  hasBudibaseIdentifiers: Readable<boolean>
+}
+
+interface ActionDatasourceStore {
+  datasource: BaseStoreProps["datasource"] & {
+    actions: DatasourceActions & {
+      refreshDefinition: () => Promise<void>
+      changePrimaryDisplay: (column: string) => Promise<void>
+      addSchemaMutation: (field: string, mutation: UIFieldMutation) => void
+      addSubSchemaMutation: (
+        field: string,
+        fromField: string,
+        mutation: UIFieldMutation
+      ) => void
+      saveSchemaMutations: () => Promise<void>
+      resetSchemaMutations: () => void
+    }
+  }
+}
+
+export type Store = DatasourceStore &
+  DerivedDatasourceStore &
+  ActionDatasourceStore
+
+export const createStores = (): DatasourceStore => {
   const definition = memo(null)
   const schemaMutations = memo({})
   const subSchemaMutations = memo({})
@@ -16,7 +60,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedDatasourceStore => {
   const {
     API,
     definition,
@@ -27,7 +71,7 @@ export const deriveStores = context => {
   } = context
 
   const schema = derived(definition, $definition => {
-    let schema = getDatasourceSchema({
+    let schema: Record<string, UIFieldSchema> = getDatasourceSchema({
       API,
       datasource: get(datasource),
       definition: $definition,
@@ -40,7 +84,7 @@ export const deriveStores = context => {
     // Certain datasources like queries use primitives.
     Object.keys(schema || {}).forEach(key => {
       if (typeof schema[key] !== "object") {
-        schema[key] = { type: schema[key] }
+        schema[key] = { name: key, type: schema[key] }
       }
     })
 
@@ -58,19 +102,18 @@ export const deriveStores = context => {
 
       const schemaWithRelatedColumns = enrichSchemaWithRelColumns($schema)
 
-      const enrichedSchema = {}
-      Object.keys(schemaWithRelatedColumns).forEach(field => {
+      const enrichedSchema: Record<string, UIFieldSchema> = {}
+      Object.keys(schemaWithRelatedColumns || {}).forEach(field => {
         enrichedSchema[field] = {
-          ...schemaWithRelatedColumns[field],
+          ...schemaWithRelatedColumns?.[field],
           ...$schemaOverrides?.[field],
           ...$schemaMutations[field],
         }
 
         if ($subSchemaMutations[field]) {
           enrichedSchema[field].columns ??= {}
-          for (const [fieldName, mutation] of Object.entries(
-            $subSchemaMutations[field]
-          )) {
+          for (const fieldName of Object.keys($subSchemaMutations[field])) {
+            const mutation = $subSchemaMutations[field][fieldName]
             enrichedSchema[field].columns[fieldName] = {
               ...enrichedSchema[field].columns[fieldName],
               ...mutation,
@@ -87,7 +130,7 @@ export const deriveStores = context => {
     ([$datasource, $definition]) => {
       let type = $datasource?.type
       if (type === "provider") {
-        type = $datasource.value?.datasource?.type
+        type = ($datasource as any).value?.datasource?.type
       }
       // Handle calculation views
       if (type === "viewV2" && $definition?.type === ViewV2Type.CALCULATION) {
@@ -104,7 +147,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ActionDatasourceStore => {
   const {
     API,
     datasource,
@@ -147,21 +190,23 @@ export const createActions = context => {
   }
 
   // Saves the datasource definition
-  const saveDefinition = async newDefinition => {
+  const saveDefinition = async (
+    newDefinition: SaveTableRequest | UpdateViewRequest
+  ) => {
     // Update local state
     const originalDefinition = get(definition)
-    definition.set(newDefinition)
+    definition.set(newDefinition as UIDatasource)
 
     // Update server
     if (get(config).canSaveSchema) {
       try {
-        await getAPI()?.actions.saveDefinition(newDefinition)
+        await getAPI()?.actions.saveDefinition(newDefinition as never)
 
         // Broadcast change so external state can be updated, as this change
         // will not be received by the builder websocket because we caused it
         // ourselves
         dispatch("updatedatasource", newDefinition)
-      } catch (error) {
+      } catch (error: any) {
         const msg = error?.message || error || "Unknown error"
         get(notifications).error(`Error saving schema: ${msg}`)
 
@@ -172,8 +217,8 @@ export const createActions = context => {
   }
 
   // Updates the datasources primary display column
-  const changePrimaryDisplay = async column => {
-    let newDefinition = cloneDeep(get(definition))
+  const changePrimaryDisplay = async (column: string) => {
+    let newDefinition = cloneDeep(get(definition)!)
 
     // Update primary display
     newDefinition.primaryDisplay = column
@@ -183,12 +228,14 @@ export const createActions = context => {
       newDefinition.schema[column].constraints = {}
     }
     newDefinition.schema[column].constraints.presence = { allowEmpty: false }
-    delete newDefinition.schema[column].default
-    return await saveDefinition(newDefinition)
+    if ("default" in newDefinition.schema[column]) {
+      delete newDefinition.schema[column].default
+    }
+    return await saveDefinition(newDefinition as any)
   }
 
   // Adds a schema mutation for a single field
-  const addSchemaMutation = (field, mutation) => {
+  const addSchemaMutation = (field: string, mutation: UIFieldMutation) => {
     if (!field || !mutation) {
       return
     }
@@ -204,7 +251,11 @@ export const createActions = context => {
   }
 
   // Adds a nested schema mutation for a single field
-  const addSubSchemaMutation = (field, fromField, mutation) => {
+  const addSubSchemaMutation = (
+    field: string,
+    fromField: string,
+    mutation: UIFieldMutation
+  ) => {
     if (!field || !fromField || !mutation) {
       return
     }
@@ -231,8 +282,8 @@ export const createActions = context => {
     const $definition = get(definition)
     const $schemaMutations = get(schemaMutations)
     const $subSchemaMutations = get(subSchemaMutations)
-    const $schema = get(schema)
-    let newSchema = {}
+    const $schema = get(schema) || {}
+    let newSchema: Record<string, UIFieldSchema> = {}
 
     // Build new updated datasource schema
     Object.keys($schema).forEach(column => {
@@ -242,9 +293,8 @@ export const createActions = context => {
       }
       if ($subSchemaMutations[column]) {
         newSchema[column].columns ??= {}
-        for (const [fieldName, mutation] of Object.entries(
-          $subSchemaMutations[column]
-        )) {
+        for (const fieldName of Object.keys($subSchemaMutations[column])) {
+          const mutation = $subSchemaMutations[column][fieldName]
           newSchema[column].columns[fieldName] = {
             ...newSchema[column].columns[fieldName],
             ...mutation,
@@ -257,7 +307,7 @@ export const createActions = context => {
     await saveDefinition({
       ...$definition,
       schema: newSchema,
-    })
+    } as any)
     resetSchemaMutations()
   }
 
@@ -267,32 +317,32 @@ export const createActions = context => {
   }
 
   // Adds a row to the datasource
-  const addRow = async row => {
+  const addRow = async (row: SaveRowRequest) => {
     return await getAPI()?.actions.addRow(row)
   }
 
   // Updates an existing row in the datasource
-  const updateRow = async row => {
+  const updateRow = async (row: SaveRowRequest) => {
     return await getAPI()?.actions.updateRow(row)
   }
 
   // Deletes rows from the datasource
-  const deleteRows = async rows => {
+  const deleteRows = async (rows: UIRow[]) => {
     return await getAPI()?.actions.deleteRows(rows)
   }
 
   // Gets a single row from a datasource
-  const getRow = async id => {
+  const getRow = async (id: string) => {
     return await getAPI()?.actions.getRow(id)
   }
 
   // Checks if a certain datasource config is valid
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
     return getAPI()?.actions.isDatasourceValid(datasource)
   }
 
   // Checks if this datasource can use a specific column by name
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return getAPI()?.actions.canUseColumn(name)
   }
 
diff --git a/packages/frontend-core/src/components/grid/stores/datasources/index.ts b/packages/frontend-core/src/components/grid/stores/datasources/index.ts
new file mode 100644
index 0000000000..4b04095c8e
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/datasources/index.ts
@@ -0,0 +1,31 @@
+import {
+  SaveRowRequest,
+  SaveTableRequest,
+  UIDatasource,
+  UIRow,
+  UpdateViewRequest,
+} from "@budibase/types"
+
+interface DatasourceBaseActions<
+  TSaveDefinitionRequest = UpdateViewRequest | SaveTableRequest
+> {
+  saveDefinition: (newDefinition: TSaveDefinitionRequest) => Promise<void>
+  addRow: (row: SaveRowRequest) => Promise<UIRow | undefined>
+  updateRow: (row: SaveRowRequest) => Promise<UIRow | undefined>
+  deleteRows: (rows: UIRow[]) => Promise<void>
+  getRow: (id: string) => Promise<UIRow | void>
+  isDatasourceValid: (datasource: UIDatasource) => boolean | void
+  canUseColumn: (name: string) => boolean | void
+}
+
+export interface DatasourceTableActions
+  extends DatasourceBaseActions<SaveTableRequest> {}
+
+export interface DatasourceViewActions
+  extends DatasourceBaseActions<UpdateViewRequest> {}
+
+export interface DatasourceNonPlusActions
+  extends DatasourceBaseActions<never> {}
+
+export type DatasourceActions =
+  | DatasourceTableActions & DatasourceViewActions & DatasourceNonPlusActions
diff --git a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.ts
similarity index 78%
rename from packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js
rename to packages/frontend-core/src/components/grid/stores/datasources/nonPlus.ts
index ea558d6236..6e81ff3e48 100644
--- a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js
+++ b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.ts
@@ -1,7 +1,17 @@
-import { SortOrder } from "@budibase/types"
+import { SortOrder, UIDatasource } from "@budibase/types"
 import { get } from "svelte/store"
+import { Store as StoreContext } from ".."
+import { DatasourceNonPlusActions } from "."
 
-export const createActions = context => {
+interface NonPlusActions {
+  nonPlus: {
+    actions: DatasourceNonPlusActions
+  }
+}
+
+export type Store = NonPlusActions
+
+export const createActions = (context: StoreContext): NonPlusActions => {
   const { columns, table, viewV2 } = context
 
   const saveDefinition = async () => {
@@ -20,7 +30,7 @@ export const createActions = context => {
     throw "This datasource does not support fetching individual rows"
   }
 
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
     // There are many different types and shapes of datasource, so we only
     // check that we aren't null
     return (
@@ -30,7 +40,7 @@ export const createActions = context => {
     )
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name)
   }
 
@@ -50,11 +60,11 @@ export const createActions = context => {
 }
 
 // Small util to compare datasource definitions
-const isSameDatasource = (a, b) => {
+const isSameDatasource = (a: any, b: any) => {
   return JSON.stringify(a) === JSON.stringify(b)
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     datasource,
     sort,
@@ -69,7 +79,7 @@ export const initialise = context => {
   } = context
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
-  let unsubscribers = []
+  let unsubscribers: any[] = []
 
   // Observe datasource changes and apply logic for view V2 datasources
   datasource.subscribe($datasource => {
@@ -81,7 +91,7 @@ export const initialise = context => {
     }
 
     // Wipe state
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
@@ -96,7 +106,7 @@ export const initialise = context => {
         if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
           return
         }
-        $fetch.update({
+        $fetch?.update({
           filter: $allFilters,
         })
       })
@@ -110,9 +120,9 @@ export const initialise = context => {
         if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
           return
         }
-        $fetch.update({
+        $fetch?.update({
           sortOrder: $sort.order || SortOrder.ASCENDING,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )
diff --git a/packages/frontend-core/src/components/grid/stores/datasources/table.js b/packages/frontend-core/src/components/grid/stores/datasources/table.ts
similarity index 63%
rename from packages/frontend-core/src/components/grid/stores/datasources/table.js
rename to packages/frontend-core/src/components/grid/stores/datasources/table.ts
index e415f5914b..27fa638596 100644
--- a/packages/frontend-core/src/components/grid/stores/datasources/table.js
+++ b/packages/frontend-core/src/components/grid/stores/datasources/table.ts
@@ -1,37 +1,50 @@
-import { SortOrder } from "@budibase/types"
+import {
+  Row,
+  SaveRowRequest,
+  SaveTableRequest,
+  SortOrder,
+  UIDatasource,
+} from "@budibase/types"
 import { get } from "svelte/store"
+import { Store as StoreContext } from ".."
+import { DatasourceTableActions } from "."
 
 const SuppressErrors = true
 
-export const createActions = context => {
+interface TableActions {
+  table: {
+    actions: DatasourceTableActions
+  }
+}
+
+export type Store = TableActions
+
+export const createActions = (context: StoreContext): TableActions => {
   const { API, datasource, columns } = context
 
-  const saveDefinition = async newDefinition => {
+  const saveDefinition = async (newDefinition: SaveTableRequest) => {
     await API.saveTable(newDefinition)
   }
 
-  const saveRow = async row => {
+  const saveRow = async (row: SaveRowRequest) => {
     row = {
       ...row,
       tableId: get(datasource)?.tableId,
     }
-    return await API.saveRow(row, SuppressErrors)
+    const newRow = await API.saveRow(row, SuppressErrors)
+    return { ...newRow, _id: newRow._id! }
   }
 
-  const deleteRows = async rows => {
-    await API.deleteRows({
-      tableId: get(datasource).tableId,
-      rows,
-    })
+  const deleteRows = async (rows: Row[]) => {
+    await API.deleteRows(get(datasource).tableId, rows)
   }
 
-  const isDatasourceValid = datasource => {
-    return datasource?.type === "table" && datasource?.tableId
+  const isDatasourceValid = (datasource: UIDatasource) => {
+    return datasource?.type === "table" && !!datasource?.tableId
   }
 
-  const getRow = async id => {
-    const res = await API.searchTable({
-      tableId: get(datasource).tableId,
+  const getRow = async (id: any) => {
+    const res = await API.searchTable(get(datasource).tableId, {
       limit: 1,
       query: {
         equal: {
@@ -40,10 +53,15 @@ export const createActions = context => {
       },
       paginate: false,
     })
-    return res?.rows?.[0]
+    const row = res?.rows?.[0]
+    if (!row) {
+      return
+    }
+
+    return { ...row, _id: row._id! }
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name)
   }
 
@@ -62,7 +80,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     datasource,
     fetch,
@@ -78,7 +96,7 @@ export const initialise = context => {
 
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
-  let unsubscribers = []
+  let unsubscribers: any[] = []
 
   // Observe datasource changes and apply logic for table datasources
   datasource.subscribe($datasource => {
@@ -90,7 +108,7 @@ export const initialise = context => {
     }
 
     // Wipe state
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
@@ -121,7 +139,7 @@ export const initialise = context => {
         }
         $fetch.update({
           sortOrder: $sort.order || SortOrder.ASCENDING,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )
diff --git a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.ts
similarity index 78%
rename from packages/frontend-core/src/components/grid/stores/datasources/viewV2.js
rename to packages/frontend-core/src/components/grid/stores/datasources/viewV2.ts
index 4a4a91658c..4dc5a44fd5 100644
--- a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js
+++ b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.ts
@@ -1,38 +1,53 @@
 import { get } from "svelte/store"
-import { SortOrder } from "@budibase/types"
+import {
+  Row,
+  SaveRowRequest,
+  SortOrder,
+  UIDatasource,
+  UIView,
+  UpdateViewRequest,
+} from "@budibase/types"
+import { Store as StoreContext } from ".."
+import { DatasourceViewActions } from "."
 
 const SuppressErrors = true
 
-export const createActions = context => {
+interface ViewActions {
+  viewV2: {
+    actions: DatasourceViewActions
+  }
+}
+
+export type Store = ViewActions
+
+export const createActions = (context: StoreContext): ViewActions => {
   const { API, datasource, columns } = context
 
-  const saveDefinition = async newDefinition => {
+  const saveDefinition = async (newDefinition: UpdateViewRequest) => {
     await API.viewV2.update(newDefinition)
   }
 
-  const saveRow = async row => {
+  const saveRow = async (row: SaveRowRequest) => {
     const $datasource = get(datasource)
     row = {
       ...row,
       tableId: $datasource?.tableId,
       _viewId: $datasource?.id,
     }
+    const newRow = await API.saveRow(row, SuppressErrors)
     return {
-      ...(await API.saveRow(row, SuppressErrors)),
+      ...newRow,
+      _id: newRow._id!,
       _viewId: row._viewId,
     }
   }
 
-  const deleteRows = async rows => {
-    await API.deleteRows({
-      tableId: get(datasource).id,
-      rows,
-    })
+  const deleteRows = async (rows: Row[]) => {
+    await API.deleteRows(get(datasource).id, rows)
   }
 
-  const getRow = async id => {
-    const res = await API.viewV2.fetch({
-      viewId: get(datasource).id,
+  const getRow = async (id: string) => {
+    const res = await API.viewV2.fetch(get(datasource).id, {
       limit: 1,
       query: {
         equal: {
@@ -41,16 +56,21 @@ export const createActions = context => {
       },
       paginate: false,
     })
-    return res?.rows?.[0]
+    const row = res?.rows?.[0]
+    if (!row) {
+      return
+    }
+
+    return { ...row, _id: row._id! }
   }
 
-  const isDatasourceValid = datasource => {
+  const isDatasourceValid = (datasource: UIDatasource) => {
     return (
-      datasource?.type === "viewV2" && datasource?.id && datasource?.tableId
+      datasource?.type === "viewV2" && !!datasource?.id && !!datasource?.tableId
     )
   }
 
-  const canUseColumn = name => {
+  const canUseColumn = (name: string) => {
     return get(columns).some(col => col.name === name && col.visible)
   }
 
@@ -69,7 +89,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     definition,
     datasource,
@@ -89,7 +109,7 @@ export const initialise = context => {
 
   // Keep a list of subscriptions so that we can clear them when the datasource
   // config changes
-  let unsubscribers = []
+  let unsubscribers: any[] = []
 
   // Observe datasource changes and apply logic for view V2 datasources
   datasource.subscribe($datasource => {
@@ -101,7 +121,7 @@ export const initialise = context => {
     }
 
     // Reset state for new view
-    filter.set(get(initialFilter))
+    filter.set(get(initialFilter) ?? undefined)
     inlineFilters.set([])
     sort.set({
       column: get(initialSortColumn),
@@ -135,7 +155,7 @@ export const initialise = context => {
     unsubscribers.push(
       sort.subscribe(async $sort => {
         // Ensure we're updating the correct view
-        const $view = get(definition)
+        const $view = get(definition) as UIView
         if ($view?.id !== $datasource.id) {
           return
         }
@@ -153,7 +173,7 @@ export const initialise = context => {
           await datasource.actions.saveDefinition({
             ...$view,
             sort: {
-              field: $sort.column,
+              field: $sort.column!,
               order: $sort.order || SortOrder.ASCENDING,
             },
           })
@@ -167,7 +187,7 @@ export const initialise = context => {
         }
         $fetch.update({
           sortOrder: $sort.order,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )
@@ -186,7 +206,7 @@ export const initialise = context => {
           await datasource.actions.saveDefinition({
             ...$view,
             queryUI: $filter,
-          })
+          } as never as UpdateViewRequest)
 
           // Refresh data since view definition changed
           await rows.actions.refreshData()
diff --git a/packages/frontend-core/src/components/grid/stores/filter.js b/packages/frontend-core/src/components/grid/stores/filter.ts
similarity index 57%
rename from packages/frontend-core/src/components/grid/stores/filter.js
rename to packages/frontend-core/src/components/grid/stores/filter.ts
index e7adc356ae..b0a204d42c 100644
--- a/packages/frontend-core/src/components/grid/stores/filter.js
+++ b/packages/frontend-core/src/components/grid/stores/filter.ts
@@ -1,12 +1,32 @@
-import { get, derived } from "svelte/store"
-import { FieldType, UILogicalOperator } from "@budibase/types"
+import { get, derived, Writable, Readable } from "svelte/store"
+import {
+  ArrayOperator,
+  BasicOperator,
+  FieldType,
+  UIColumn,
+  UILegacyFilter,
+  UILogicalOperator,
+  UISearchFilter,
+} from "@budibase/types"
+import { Store as StoreContext } from "."
 import { memo } from "../../../utils/memo"
 
-export const createStores = context => {
+export interface FilterStore {
+  filter: Writable<UISearchFilter | undefined>
+  inlineFilters: Writable<UILegacyFilter[]>
+}
+
+export interface FilterDerivedStore {
+  allFilters: Readable<UISearchFilter | undefined>
+}
+
+export type Store = FilterStore & FilterDerivedStore
+
+export const createStores = (context: StoreContext): FilterStore => {
   const { props } = context
 
   // Initialise to default props
-  const filter = memo(get(props).initialFilter)
+  const filter = memo(get(props).initialFilter ?? undefined)
   const inlineFilters = memo([])
 
   return {
@@ -15,7 +35,7 @@ export const createStores = context => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): FilterDerivedStore => {
   const { filter, inlineFilters } = context
   const allFilters = derived(
     [filter, inlineFilters],
@@ -24,7 +44,7 @@ export const deriveStores = context => {
       if (!$inlineFilters?.length) {
         return $filter
       }
-      let allFilters = {
+      const allFilters: UISearchFilter = {
         logicalOperator: UILogicalOperator.ALL,
         groups: [
           {
@@ -33,12 +53,13 @@ export const deriveStores = context => {
           },
         ],
       }
+
       // Just use inline if no filter
       if (!$filter?.groups?.length) {
         return allFilters
       }
       // Join them together if both
-      allFilters.groups = [...allFilters.groups, ...$filter.groups]
+      allFilters.groups = [...allFilters.groups!, ...$filter.groups]
       return allFilters
     }
   )
@@ -48,16 +69,16 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const { filter, inlineFilters } = context
 
-  const addInlineFilter = (column, value) => {
+  const addInlineFilter = (column: UIColumn, value: string) => {
     const filterId = `inline-${column.name}`
     const type = column.schema.type
-    let inlineFilter = {
+    const inlineFilter: UILegacyFilter = {
       field: column.name,
       id: filterId,
-      operator: "string",
+      operator: BasicOperator.STRING,
       valueType: "value",
       type,
       value,
@@ -66,11 +87,11 @@ export const createActions = context => {
     // Add overrides specific so the certain column type
     if (type === FieldType.NUMBER) {
       inlineFilter.value = parseFloat(value)
-      inlineFilter.operator = "equal"
+      inlineFilter.operator = BasicOperator.EQUAL
     } else if (type === FieldType.BIGINT) {
-      inlineFilter.operator = "equal"
+      inlineFilter.operator = BasicOperator.EQUAL
     } else if (type === FieldType.ARRAY) {
-      inlineFilter.operator = "contains"
+      inlineFilter.operator = ArrayOperator.CONTAINS
     }
 
     inlineFilters.update($inlineFilters => {
@@ -95,9 +116,11 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { filter, initialFilter } = context
 
   // Reset filter when initial filter prop changes
-  initialFilter.subscribe(filter.set)
+  initialFilter.subscribe($initialFilter =>
+    filter.set($initialFilter ?? undefined)
+  )
 }
diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js
deleted file mode 100644
index 6671cc729c..0000000000
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as Bounds from "./bounds"
-import * as Columns from "./columns"
-import * as Menu from "./menu"
-import * as Pagination from "./pagination"
-import * as Reorder from "./reorder"
-import * as Resize from "./resize"
-import * as Rows from "./rows"
-import * as Scroll from "./scroll"
-import * as UI from "./ui"
-import * as Users from "./users"
-import * as Validation from "./validation"
-import * as Viewport from "./viewport"
-import * as Clipboard from "./clipboard"
-import * as Config from "./config"
-import * as Sort from "./sort"
-import * as Filter from "./filter"
-import * as Notifications from "./notifications"
-import * as Datasource from "./datasource"
-import * as Table from "./datasources/table"
-import * as ViewV2 from "./datasources/viewV2"
-import * as NonPlus from "./datasources/nonPlus"
-import * as Cache from "./cache"
-import * as Conditions from "./conditions"
-
-const DependencyOrderedStores = [
-  Sort,
-  Filter,
-  Bounds,
-  Table,
-  ViewV2,
-  NonPlus,
-  Datasource,
-  Columns,
-  Scroll,
-  Validation,
-  Rows,
-  Conditions,
-  UI,
-  Resize,
-  Viewport,
-  Reorder,
-  Users,
-  Menu,
-  Pagination,
-  Config,
-  Clipboard,
-  Notifications,
-  Cache,
-]
-
-export const attachStores = context => {
-  // Atomic store creation
-  for (let store of DependencyOrderedStores) {
-    context = { ...context, ...store.createStores?.(context) }
-  }
-
-  // Derived store creation
-  for (let store of DependencyOrderedStores) {
-    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)
-  }
-
-  return context
-}
diff --git a/packages/frontend-core/src/components/grid/stores/index.ts b/packages/frontend-core/src/components/grid/stores/index.ts
new file mode 100644
index 0000000000..5ddf663002
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/index.ts
@@ -0,0 +1,143 @@
+import { Writable } from "svelte/store"
+import type { APIClient } from "../../../api/types"
+
+import * as Bounds from "./bounds"
+import * as Columns from "./columns"
+import * as Menu from "./menu"
+import * as Pagination from "./pagination"
+import * as Reorder from "./reorder"
+import * as Resize from "./resize"
+import * as Rows from "./rows"
+import * as Scroll from "./scroll"
+import * as UI from "./ui"
+import * as Users from "./users"
+import * as Validation from "./validation"
+import * as Viewport from "./viewport"
+import * as Clipboard from "./clipboard"
+import * as Config from "./config"
+import * as Sort from "./sort"
+import * as Filter from "./filter"
+import * as Notifications from "./notifications"
+import * as Datasource from "./datasource"
+import * as Table from "./datasources/table"
+import * as ViewV2 from "./datasources/viewV2"
+import * as NonPlus from "./datasources/nonPlus"
+import * as Cache from "./cache"
+import * as Conditions from "./conditions"
+import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
+import * as Constants from "../lib/constants"
+
+const DependencyOrderedStores = [
+  Sort,
+  Filter,
+  Bounds,
+  Table,
+  ViewV2,
+  NonPlus,
+  Datasource,
+  Columns,
+  Scroll,
+  Validation,
+  Rows,
+  Conditions,
+  UI,
+  Resize,
+  Viewport,
+  Reorder,
+  Users,
+  Menu,
+  Pagination,
+  Config as any,
+  Clipboard,
+  Notifications,
+  Cache,
+]
+
+export interface BaseStoreProps {
+  datasource: UIDatasource
+  initialSortColumn: string | null
+  initialSortOrder: SortOrder | null
+  initialFilter: UISearchFilter | null
+  fixedRowHeight: number | null
+  schemaOverrides: Record<
+    string,
+    {
+      displayName?: string
+      disabled?: boolean
+    }
+  > | null
+  notifySuccess: (message: string) => void
+  notifyError: (message: string) => void
+  canAddRows?: boolean
+  canEditRows?: boolean
+  canDeleteRows?: boolean
+  canEditColumns?: boolean
+  canExpandRows?: boolean
+  canSaveSchema?: boolean
+  minHeight?: number
+}
+
+export interface BaseStore {
+  API: APIClient
+  gridID: string
+  props: Writable<BaseStoreProps>
+  subscribe: any
+  dispatch: (event: string, data: any) => any
+  Constants: typeof Constants
+}
+
+export type Store = BaseStore &
+  Columns.Store &
+  Table.Store &
+  ViewV2.Store &
+  NonPlus.Store &
+  Datasource.Store &
+  Validation.Store &
+  Users.Store &
+  Menu.Store &
+  Filter.Store &
+  UI.Store &
+  Clipboard.Store &
+  Scroll.Store &
+  Rows.Store &
+  Reorder.Store &
+  Resize.Store &
+  Config.Store &
+  Conditions.Store &
+  Cache.Store &
+  Viewport.Store &
+  Notifications.Store &
+  Sort.Store &
+  Bounds.Store
+
+export const attachStores = (context: BaseStore): Store => {
+  // Atomic store creation
+  for (let store of DependencyOrderedStores) {
+    if ("createStores" in store) {
+      context = { ...context, ...store.createStores?.(context) }
+    }
+  }
+
+  // Derived store creation
+  for (let store of DependencyOrderedStores) {
+    if ("deriveStores" in store) {
+      context = { ...context, ...store.deriveStores?.(context) }
+    }
+  }
+
+  // Action creation
+  for (let store of DependencyOrderedStores) {
+    if ("createActions" in store) {
+      context = { ...context, ...store.createActions?.(context) }
+    }
+  }
+
+  // Initialise any store logic
+  for (let store of DependencyOrderedStores) {
+    if ("initialise" in store) {
+      store.initialise?.(context)
+    }
+  }
+
+  return context as Store
+}
diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.ts
similarity index 69%
rename from packages/frontend-core/src/components/grid/stores/menu.js
rename to packages/frontend-core/src/components/grid/stores/menu.ts
index 22bf26fff5..ae29ae1de3 100644
--- a/packages/frontend-core/src/components/grid/stores/menu.js
+++ b/packages/frontend-core/src/components/grid/stores/menu.ts
@@ -1,8 +1,33 @@
-import { writable, get } from "svelte/store"
+import { writable, get, Writable } from "svelte/store"
+
+import { Store as StoreContext } from "."
 import { parseCellID } from "../lib/utils"
 
+interface MenuStoreData {
+  left: number
+  top: number
+  visible: boolean
+  multiRowMode: boolean
+  multiCellMode: boolean
+}
+
+interface MenuStore {
+  menu: Writable<MenuStoreData>
+}
+
+interface MenuActions {
+  menu: MenuStore["menu"] & {
+    actions: {
+      open: (cellId: string, e: MouseEvent) => void
+      close: () => void
+    }
+  }
+}
+
+export type Store = MenuStore & MenuActions
+
 export const createStores = () => {
-  const menu = writable({
+  const menu = writable<MenuStoreData>({
     left: 0,
     top: 0,
     visible: false,
@@ -14,7 +39,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): MenuActions => {
   const {
     menu,
     focusedCellId,
@@ -25,7 +50,7 @@ export const createActions = context => {
     selectedCellCount,
   } = context
 
-  const open = (cellId, e) => {
+  const open = (cellId: string, e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
 
@@ -37,14 +62,14 @@ export const createActions = context => {
     }
 
     // Compute bounds of cell relative to outer data node
-    const targetBounds = e.target.getBoundingClientRect()
+    const targetBounds = (e.target as HTMLElement).getBoundingClientRect()
     const dataBounds = dataNode.getBoundingClientRect()
 
     // Check if there are multiple rows selected, and if this is one of them
     let multiRowMode = false
     if (get(selectedRowCount) > 1) {
       const { rowId } = parseCellID(cellId)
-      if (get(selectedRows)[rowId]) {
+      if (rowId !== undefined && get(selectedRows)[rowId]) {
         multiRowMode = true
       }
     }
diff --git a/packages/frontend-core/src/components/grid/stores/notifications.js b/packages/frontend-core/src/components/grid/stores/notifications.ts
similarity index 64%
rename from packages/frontend-core/src/components/grid/stores/notifications.js
rename to packages/frontend-core/src/components/grid/stores/notifications.ts
index 4e8b49414d..429760ed50 100644
--- a/packages/frontend-core/src/components/grid/stores/notifications.js
+++ b/packages/frontend-core/src/components/grid/stores/notifications.ts
@@ -1,7 +1,17 @@
 import { notifications as BBUINotifications } from "@budibase/bbui"
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
+import { Store as StoreContext } from "."
 
-export const createStores = context => {
+interface NotificationStore {
+  notifications: Readable<{
+    success: (message: string) => void
+    error: (message: string) => void
+  }>
+}
+
+export type Store = NotificationStore
+
+export const createStores = (context: StoreContext): NotificationStore => {
   const { notifySuccess, notifyError } = context
 
   // Normally we would not derive a store in "createStores" as it should be
diff --git a/packages/frontend-core/src/components/grid/stores/pagination.js b/packages/frontend-core/src/components/grid/stores/pagination.ts
similarity index 89%
rename from packages/frontend-core/src/components/grid/stores/pagination.js
rename to packages/frontend-core/src/components/grid/stores/pagination.ts
index bcf10ee3df..5a97031147 100644
--- a/packages/frontend-core/src/components/grid/stores/pagination.js
+++ b/packages/frontend-core/src/components/grid/stores/pagination.ts
@@ -1,6 +1,7 @@
 import { derived } from "svelte/store"
+import { Store as StoreContext } from "."
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
 
   // Derive how many rows we have in total
diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.ts
similarity index 84%
rename from packages/frontend-core/src/components/grid/stores/reorder.js
rename to packages/frontend-core/src/components/grid/stores/reorder.ts
index 8153ee7084..b0bc482afb 100644
--- a/packages/frontend-core/src/components/grid/stores/reorder.js
+++ b/packages/frontend-core/src/components/grid/stores/reorder.ts
@@ -1,7 +1,24 @@
-import { get, writable, derived } from "svelte/store"
+import { get, writable, derived, Writable, Readable } from "svelte/store"
 import { parseEventLocation } from "../lib/utils"
+import { Store as StoreContext } from "."
 
-const reorderInitialState = {
+interface Breakpoint {
+  x: number
+  column: string
+  insertAfter: boolean
+}
+
+interface ReorderInitialStoreData {
+  sourceColumn: string | null
+  targetColumn: string | null
+  insertAfter?: boolean
+  breakpoints: Breakpoint[]
+  gridLeft: number
+  width: number
+  increment?: number
+}
+
+const reorderInitialState: ReorderInitialStoreData = {
   sourceColumn: null,
   targetColumn: null,
   insertAfter: false,
@@ -11,7 +28,14 @@ const reorderInitialState = {
   increment: 0,
 }
 
-export const createStores = () => {
+interface ReorderInitialStore {
+  reorder: Writable<ReorderInitialStoreData>
+  isReordering: Readable<boolean>
+}
+
+export type Store = ReorderInitialStore
+
+export const createStores = (): ReorderInitialStore => {
   const reorder = writable(reorderInitialState)
   const isReordering = derived(
     reorder,
@@ -24,7 +48,7 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const {
     reorder,
     columns,
@@ -40,11 +64,11 @@ export const createActions = context => {
     maxScrollLeft,
   } = context
   let latestX = 0
-  let autoScrollInterval
-  let isAutoScrolling
+  let autoScrollInterval: NodeJS.Timeout
+  let isAutoScrolling: boolean
 
   // Callback when dragging on a colum header and starting reordering
-  const startReordering = (column, e) => {
+  const startReordering = (column: string, e: MouseEvent | TouchEvent) => {
     const $scrollableColumns = get(scrollableColumns)
     const $bounds = get(bounds)
     const $stickyWidth = get(stickyWidth)
@@ -87,7 +111,7 @@ export const createActions = context => {
   }
 
   // Callback when moving the mouse when reordering columns
-  const onReorderMouseMove = e => {
+  const onReorderMouseMove = (e: MouseEvent | TouchEvent) => {
     // Immediately handle the current position
     const { x } = parseEventLocation(e)
     latestX = x
@@ -122,7 +146,7 @@ export const createActions = context => {
     const $scrollLeft = get(scrollLeft)
 
     // Compute the closest breakpoint to the current position
-    let breakpoint
+    let breakpoint: Breakpoint | undefined
     let minDistance = Number.MAX_SAFE_INTEGER
     const mouseX = latestX - $reorder.gridLeft + $scrollLeft
     $reorder.breakpoints.forEach(point => {
@@ -139,8 +163,8 @@ export const createActions = context => {
     ) {
       reorder.update(state => ({
         ...state,
-        targetColumn: breakpoint.column,
-        insertAfter: breakpoint.insertAfter,
+        targetColumn: breakpoint!.column,
+        insertAfter: breakpoint!.insertAfter,
       }))
     }
   }
@@ -157,7 +181,7 @@ export const createActions = context => {
       const { increment } = get(reorder)
       scroll.update(state => ({
         ...state,
-        left: Math.max(0, Math.min($maxLeft, state.left + increment)),
+        left: Math.max(0, Math.min($maxLeft, state.left + increment!)),
       }))
       considerReorderPosition()
     }, 10)
@@ -185,7 +209,11 @@ export const createActions = context => {
     const { sourceColumn, targetColumn, insertAfter } = get(reorder)
     reorder.set(reorderInitialState)
     if (sourceColumn !== targetColumn) {
-      await moveColumn({ sourceColumn, targetColumn, insertAfter })
+      await moveColumn({
+        sourceColumn: sourceColumn!,
+        targetColumn: targetColumn!,
+        insertAfter,
+      })
     }
   }
 
@@ -195,6 +223,10 @@ export const createActions = context => {
     sourceColumn,
     targetColumn,
     insertAfter = false,
+  }: {
+    sourceColumn: string
+    targetColumn: string
+    insertAfter?: boolean
   }) => {
     // Find the indices in the overall columns array
     const $columns = get(columns)
@@ -232,7 +264,7 @@ export const createActions = context => {
   }
 
   // Moves a column one place left (as appears visually)
-  const moveColumnLeft = async column => {
+  const moveColumnLeft = async (column: string) => {
     const $visibleColumns = get(visibleColumns)
     const $columnLookupMap = get(columnLookupMap)
     const sourceIdx = $columnLookupMap[column].__idx
@@ -243,7 +275,7 @@ export const createActions = context => {
   }
 
   // Moves a column one place right (as appears visually)
-  const moveColumnRight = async column => {
+  const moveColumnRight = async (column: string) => {
     const $visibleColumns = get(visibleColumns)
     const $columnLookupMap = get(columnLookupMap)
     const sourceIdx = $columnLookupMap[column].__idx
diff --git a/packages/frontend-core/src/components/grid/stores/resize.js b/packages/frontend-core/src/components/grid/stores/resize.ts
similarity index 73%
rename from packages/frontend-core/src/components/grid/stores/resize.js
rename to packages/frontend-core/src/components/grid/stores/resize.ts
index c242dd9a60..90ee659a44 100644
--- a/packages/frontend-core/src/components/grid/stores/resize.js
+++ b/packages/frontend-core/src/components/grid/stores/resize.ts
@@ -1,8 +1,19 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"
 import { parseEventLocation } from "../lib/utils"
+import { Store as StoreContext } from "."
+import { UIColumn } from "@budibase/types"
 
-const initialState = {
+interface ResizeInitialStoreData {
+  initialMouseX: number | null
+  initialWidth: number | null
+  column: string | null
+  width: number
+  left: number
+  related?: UIColumn["related"]
+}
+
+const initialState: ResizeInitialStoreData = {
   initialMouseX: null,
   initialWidth: null,
   column: null,
@@ -10,7 +21,14 @@ const initialState = {
   left: 0,
 }
 
-export const createStores = () => {
+interface ResizeInitialStore {
+  resize: Writable<ResizeInitialStoreData>
+  isResizing: Readable<boolean>
+}
+
+export type Store = ResizeInitialStore
+
+export const createStores = (): ResizeInitialStore => {
   const resize = writable(initialState)
   const isResizing = derived(resize, $resize => $resize.column != null, false)
   return {
@@ -19,11 +37,11 @@ export const createStores = () => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const { resize, ui, datasource } = context
 
   // Starts resizing a certain column
-  const startResizing = (column, e) => {
+  const startResizing = (column: UIColumn, e: MouseEvent | TouchEvent) => {
     const { x } = parseEventLocation(e)
 
     // Prevent propagation to stop reordering triggering
@@ -50,11 +68,11 @@ export const createActions = context => {
   }
 
   // Handler for moving the mouse to resize columns
-  const onResizeMouseMove = e => {
+  const onResizeMouseMove = (e: MouseEvent | TouchEvent) => {
     const { initialMouseX, initialWidth, width, column, related } = get(resize)
     const { x } = parseEventLocation(e)
-    const dx = x - initialMouseX
-    const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
+    const dx = x - initialMouseX!
+    const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth! + dx))
 
     // Ignore small changes
     if (Math.abs(width - newWidth) < 5) {
@@ -63,7 +81,7 @@ export const createActions = context => {
 
     // Update column state
     if (!related) {
-      datasource.actions.addSchemaMutation(column, { width })
+      datasource.actions.addSchemaMutation(column!, { width })
     } else {
       datasource.actions.addSubSchemaMutation(related.subField, related.field, {
         width,
@@ -95,7 +113,7 @@ export const createActions = context => {
   }
 
   // Resets a column size back to default
-  const resetSize = async column => {
+  const resetSize = async (column: { name: string }) => {
     datasource.actions.addSchemaMutation(column.name, {
       width: DefaultColumnWidth,
     })
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.ts
similarity index 77%
rename from packages/frontend-core/src/components/grid/stores/rows.js
rename to packages/frontend-core/src/components/grid/stores/rows.ts
index 122bbc295a..d6b80df885 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.ts
@@ -1,4 +1,4 @@
-import { writable, derived, get } from "svelte/store"
+import { writable, derived, get, Writable, Readable } from "svelte/store"
 import { fetchData } from "../../../fetch"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import {
@@ -10,10 +10,74 @@ import {
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
-import { FieldType } from "@budibase/types"
+import { FieldType, Row, UIFetchAPI, UIRow } from "@budibase/types"
 import { getRelatedTableValues } from "../../../utils"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
+interface IndexedUIRow extends UIRow {
+  __idx: number
+}
+
+interface RowStore {
+  rows: Writable<UIRow[]>
+  fetch: Writable<UIFetchAPI | null>
+  loaded: Writable<boolean>
+  refreshing: Writable<boolean>
+  loading: Writable<boolean>
+  rowChangeCache: Writable<Record<string, Record<string, any>>>
+  inProgressChanges: Writable<Record<string, number>>
+  hasNextPage: Writable<boolean>
+  error: Writable<string | null>
+}
+
+interface RowDerivedStore {
+  rows: RowStore["rows"]
+  rowLookupMap: Readable<Record<string, IndexedUIRow>>
+}
+
+interface RowActionStore {
+  rows: RowStore["rows"] & {
+    actions: {
+      addRow: (params: {
+        row: Row
+        idx: number
+        bubble: boolean
+        notify: boolean
+      }) => Promise<UIRow | undefined>
+      duplicateRow: (row: UIRow) => Promise<UIRow | undefined>
+      bulkDuplicate: (
+        rowsToDupe: UIRow[],
+        progressCallback: (progressPercentage: number) => void
+      ) => Promise<UIRow[]>
+      updateValue: (params: {
+        rowId: string
+        column: string
+        value: any
+        apply: boolean
+      }) => Promise<void>
+      applyRowChanges: (params: {
+        rowId: string
+        changes?: Record<string, any>
+        updateState?: boolean
+        handleErrors?: boolean
+      }) => Promise<UIRow | undefined>
+      deleteRows: (rowsToDelete: UIRow[]) => Promise<void>
+      loadNextPage: () => void
+      refreshRow: (id: string) => Promise<void>
+      replaceRow: (id: string, row: UIRow | undefined) => void
+      refreshData: () => Promise<void>
+      cleanRow: (row: UIRow) => Row
+      bulkUpdate: (
+        changeMap: Record<string, Record<string, any>>,
+        progressCallback: (progressPercentage: number) => void
+      ) => Promise<void>
+    }
+  }
+}
+
+export type Store = RowStore & RowDerivedStore & RowActionStore
+
+export const createStores = (): RowStore => {
   const rows = writable([])
   const loading = writable(false)
   const loaded = writable(false)
@@ -47,7 +111,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): RowDerivedStore => {
   const { rows, enrichedSchema } = context
 
   // Enrich rows with an index property and any pending changes
@@ -57,12 +121,16 @@ export const deriveStores = context => {
       const customColumns = Object.values($enrichedSchema || {}).filter(
         f => f.related
       )
-      return $rows.map((row, idx) => ({
+      return $rows.map<IndexedUIRow>((row, idx) => ({
         ...row,
         __idx: idx,
-        ...customColumns.reduce((map, column) => {
-          const fromField = $enrichedSchema[column.related.field]
-          map[column.name] = getRelatedTableValues(row, column, fromField)
+        ...customColumns.reduce<Record<string, string>>((map, column) => {
+          const fromField = $enrichedSchema![column.related!.field]
+          map[column.name] = getRelatedTableValues(
+            row,
+            { ...column, related: column.related! },
+            fromField
+          )
           return map
         }, {}),
       }))
@@ -71,7 +139,7 @@ export const deriveStores = context => {
 
   // Generate a lookup map to quick find a row by ID
   const rowLookupMap = derived(enrichedRows, $enrichedRows => {
-    let map = {}
+    let map: Record<string, IndexedUIRow> = {}
     for (let i = 0; i < $enrichedRows.length; i++) {
       map[$enrichedRows[i]._id] = $enrichedRows[i]
     }
@@ -87,7 +155,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): RowActionStore => {
   const {
     rows,
     rowLookupMap,
@@ -114,11 +182,11 @@ export const createActions = context => {
   const instanceLoaded = writable(false)
 
   // Local cache of row IDs to speed up checking if a row exists
-  let rowCacheMap = {}
+  let rowCacheMap: Record<string, boolean> = {}
 
   // Reset everything when datasource changes
-  let unsubscribe = null
-  let lastResetKey = null
+  let unsubscribe: (() => void) | null = null
+  let lastResetKey: string | null = null
   datasource.subscribe(async $datasource => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
@@ -157,7 +225,7 @@ export const createActions = context => {
     })
 
     // Subscribe to changes of this fetch model
-    unsubscribe = newFetch.subscribe(async $fetch => {
+    unsubscribe = newFetch.subscribe(async ($fetch: UIFetchAPI) => {
       if ($fetch.error) {
         // Present a helpful error to the user
         let message = "An unknown error occurred"
@@ -214,7 +282,15 @@ export const createActions = context => {
 
   // Handles validation errors from the rows API and updates local validation
   // state, storing error messages against relevant cells
-  const handleValidationError = (rowId, error) => {
+  const handleValidationError = (
+    rowId: string,
+    error:
+      | string
+      | {
+          message?: string
+          json: { validationErrors: Record<string, string | undefined> }
+        }
+  ) => {
     let errorString
     if (typeof error === "string") {
       errorString = error
@@ -224,7 +300,11 @@ export const createActions = context => {
 
     // If the server doesn't reply with a valid error, assume that the source
     // of the error is the focused cell's column
-    if (!error?.json?.validationErrors && errorString) {
+    if (
+      typeof error !== "string" &&
+      !error?.json?.validationErrors &&
+      errorString
+    ) {
       const { field: focusedColumn } = parseCellID(get(focusedCellId))
       if (focusedColumn) {
         error = {
@@ -236,7 +316,7 @@ export const createActions = context => {
         }
       }
     }
-    if (error?.json?.validationErrors) {
+    if (typeof error !== "string" && error?.json?.validationErrors) {
       // Normal validation errors
       const keys = Object.keys(error.json.validationErrors)
       const $columns = get(columns)
@@ -251,11 +331,11 @@ export const createActions = context => {
           missingColumns.push(column)
         }
       }
-
+      const { json } = error
       // Process errors for columns that we have
       for (let column of erroredColumns) {
         // Ensure we have a valid error to display
-        let err = error.json.validationErrors[column]
+        let err = json.validationErrors[column]
         if (Array.isArray(err)) {
           err = err[0]
         }
@@ -287,9 +367,19 @@ export const createActions = context => {
   }
 
   // Adds a new row
-  const addRow = async ({ row, idx, bubble = false, notify = true }) => {
+  const addRow = async ({
+    row,
+    idx,
+    bubble = false,
+    notify = true,
+  }: {
+    row: Row
+    idx: number
+    bubble: boolean
+    notify: boolean
+  }) => {
     try {
-      const newRow = await datasource.actions.addRow(row)
+      const newRow = (await datasource.actions.addRow(row))!
 
       // Update state
       if (idx != null) {
@@ -306,7 +396,7 @@ export const createActions = context => {
         get(notifications).success("Row created successfully")
       }
       return newRow
-    } catch (error) {
+    } catch (error: any) {
       if (bubble) {
         throw error
       } else {
@@ -317,7 +407,7 @@ export const createActions = context => {
   }
 
   // Duplicates a row, inserting the duplicate row after the existing one
-  const duplicateRow = async row => {
+  const duplicateRow = async (row: UIRow) => {
     let clone = cleanRow(row)
     delete clone._id
     delete clone._rev
@@ -330,17 +420,20 @@ export const createActions = context => {
       })
       get(notifications).success("Duplicated 1 row")
       return duped
-    } catch (error) {
+    } catch (error: any) {
       handleValidationError(row._id, error)
       validation.actions.focusFirstRowError(row._id)
     }
   }
 
   // Duplicates multiple rows, inserting them after the last source row
-  const bulkDuplicate = async (rowsToDupe, progressCallback) => {
+  const bulkDuplicate = async (
+    rowsToDupe: UIRow[],
+    progressCallback: (progressPercentage: number) => void
+  ) => {
     // Find index of last row
     const $rowLookupMap = get(rowLookupMap)
-    const indices = rowsToDupe.map(row => $rowLookupMap[row._id]?.__idx)
+    const indices = rowsToDupe.map(row => $rowLookupMap[row._id!]?.__idx)
     const index = Math.max(...indices)
     const count = rowsToDupe.length
 
@@ -357,8 +450,9 @@ export const createActions = context => {
     let failed = 0
     for (let i = 0; i < count; i++) {
       try {
-        saved.push(await datasource.actions.addRow(clones[i]))
-        rowCacheMap[saved._id] = true
+        const newRow = (await datasource.actions.addRow(clones[i]))!
+        saved.push(newRow)
+        rowCacheMap[newRow._id] = true
         await sleep(50) // Small sleep to ensure we avoid rate limiting
       } catch (error) {
         failed++
@@ -385,7 +479,7 @@ export const createActions = context => {
 
   // Replaces a row in state with the newly defined row, handling updates,
   // addition and deletion
-  const replaceRow = (id, row) => {
+  const replaceRow = (id: string, row: UIRow | undefined) => {
     // Get index of row to check if it exists
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
@@ -410,22 +504,22 @@ export const createActions = context => {
   }
 
   // Refreshes a specific row
-  const refreshRow = async id => {
+  const refreshRow = async (id: string) => {
     try {
       const row = await datasource.actions.getRow(id)
-      replaceRow(id, row)
+      replaceRow(id, row!)
     } catch {
       // Do nothing - we probably just don't support refreshing individual rows
     }
   }
 
   // Refreshes all data
-  const refreshData = () => {
-    get(fetch)?.getInitialData()
+  const refreshData = async () => {
+    await get(fetch)?.getInitialData()
   }
 
   // Checks if a changeset for a row actually mutates the row or not
-  const changesAreValid = (row, changes) => {
+  const changesAreValid = (row: UIRow, changes: Record<string, any>) => {
     const columns = Object.keys(changes || {})
     if (!row || !columns.length) {
       return false
@@ -437,7 +531,7 @@ export const createActions = context => {
 
   // Patches a row with some changes in local state, and returns whether a
   // valid pending change was made or not
-  const stashRowChanges = (rowId, changes) => {
+  const stashRowChanges = (rowId: string, changes: Record<string, any>) => {
     const $rowLookupMap = get(rowLookupMap)
     const $columnLookupMap = get(columnLookupMap)
     const row = $rowLookupMap[rowId]
@@ -477,13 +571,18 @@ export const createActions = context => {
     changes = null,
     updateState = true,
     handleErrors = true,
+  }: {
+    rowId: string
+    changes?: Record<string, any> | null
+    updateState?: boolean
+    handleErrors?: boolean
   }) => {
     const $rowLookupMap = get(rowLookupMap)
     const row = $rowLookupMap[rowId]
     if (row == null) {
       return
     }
-    let savedRow
+    let savedRow: UIRow | undefined = undefined
 
     // Save change
     try {
@@ -496,13 +595,13 @@ export const createActions = context => {
       // Update row
       const stashedChanges = get(rowChangeCache)[rowId]
       const newRow = { ...cleanRow(row), ...stashedChanges, ...changes }
-      savedRow = await datasource.actions.updateRow(newRow)
+      savedRow = (await datasource.actions.updateRow(newRow))!
 
       // Update row state after a successful change
       if (savedRow?._id) {
         if (updateState) {
           rows.update(state => {
-            state[row.__idx] = savedRow
+            state[row.__idx] = savedRow!
             return state.slice()
           })
         }
@@ -521,7 +620,7 @@ export const createActions = context => {
         })
         return state
       })
-    } catch (error) {
+    } catch (error: any) {
       if (handleErrors) {
         handleValidationError(rowId, error)
         validation.actions.focusFirstRowError(rowId)
@@ -537,14 +636,27 @@ export const createActions = context => {
   }
 
   // Updates a value of a row
-  const updateValue = async ({ rowId, column, value, apply = true }) => {
+  const updateValue = async ({
+    rowId,
+    column,
+    value,
+    apply = true,
+  }: {
+    rowId: string
+    column: string
+    value: any
+    apply: boolean
+  }) => {
     const success = stashRowChanges(rowId, { [column]: value })
     if (success && apply) {
       await applyRowChanges({ rowId })
     }
   }
 
-  const bulkUpdate = async (changeMap, progressCallback) => {
+  const bulkUpdate = async (
+    changeMap: Record<string, Record<string, any>>,
+    progressCallback: (progressPercentage: number) => void
+  ) => {
     const rowIds = Object.keys(changeMap || {})
     const count = rowIds.length
     if (!count) {
@@ -613,7 +725,7 @@ export const createActions = context => {
   }
 
   // Deletes an array of rows
-  const deleteRows = async rowsToDelete => {
+  const deleteRows = async (rowsToDelete: UIRow[]) => {
     if (!rowsToDelete?.length) {
       return
     }
@@ -628,7 +740,7 @@ export const createActions = context => {
 
   // Local handler to process new rows inside the fetch, and append any new
   // rows to state that we haven't encountered before
-  const handleNewRows = (newRows, resetRows) => {
+  const handleNewRows = (newRows: Row[], resetRows?: boolean) => {
     if (resetRows) {
       rowCacheMap = {}
     }
@@ -645,20 +757,20 @@ export const createActions = context => {
         newRow._id = generateRowID()
       }
 
-      if (!rowCacheMap[newRow._id]) {
-        rowCacheMap[newRow._id] = true
+      if (!rowCacheMap[newRow._id!]) {
+        rowCacheMap[newRow._id!] = true
         rowsToAppend.push(newRow)
       }
     }
     if (resetRows) {
-      rows.set(rowsToAppend)
+      rows.set(rowsToAppend as UIRow[])
     } else if (rowsToAppend.length) {
-      rows.update(state => [...state, ...rowsToAppend])
+      rows.update(state => [...state, ...(rowsToAppend as UIRow[])])
     }
   }
 
   // Local handler to remove rows from state
-  const handleRemoveRows = rowsToRemove => {
+  const handleRemoveRows = (rowsToRemove: UIRow[]) => {
     const deletedIds = rowsToRemove.map(row => row._id)
 
     // We deliberately do not remove IDs from the cache map as the data may
@@ -675,11 +787,11 @@ export const createActions = context => {
 
   // Cleans a row by removing any internal grid metadata from it.
   // Call this before passing a row to any sort of external flow.
-  const cleanRow = row => {
-    let clone = { ...row }
+  const cleanRow = (row: UIRow) => {
+    let clone: Row = { ...row }
     delete clone.__idx
     delete clone.__metadata
-    if (!get(hasBudibaseIdentifiers) && isGeneratedRowID(clone._id)) {
+    if (!get(hasBudibaseIdentifiers) && isGeneratedRowID(clone._id!)) {
       delete clone._id
     }
     return clone
@@ -706,7 +818,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     rowChangeCache,
     inProgressChanges,
@@ -733,7 +845,9 @@ export const initialise = context => {
     if (!id) {
       return
     }
-    const { rowId, field } = parseCellID(id)
+    let { rowId, field } = parseCellID(id)
+    rowId = rowId!
+    field = field!
     const hasChanges = field in (get(rowChangeCache)[rowId] || {})
     const hasErrors = validation.actions.rowHasErrors(rowId)
     const isSavingChanges = get(inProgressChanges)[rowId]
diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.ts
similarity index 86%
rename from packages/frontend-core/src/components/grid/stores/scroll.js
rename to packages/frontend-core/src/components/grid/stores/scroll.ts
index 9411cb93f1..0be8fa4a77 100644
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ b/packages/frontend-core/src/components/grid/stores/scroll.ts
@@ -1,4 +1,4 @@
-import { writable, derived, get } from "svelte/store"
+import { writable, derived, get, Writable, Readable } from "svelte/store"
 import { tick } from "svelte"
 import {
   GutterWidth,
@@ -8,8 +8,31 @@ import {
   VPadding,
 } from "../lib/constants"
 import { parseCellID } from "../lib/utils"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
+interface ScrollStore {
+  scroll: Writable<{
+    left: number
+    top: number
+  }>
+  scrollTop: Readable<number>
+  scrollLeft: Readable<number>
+}
+
+interface ScrollDerivedStore {
+  stickyWidth: Readable<number>
+  contentHeight: Readable<number>
+  contentWidth: Readable<number>
+  screenWidth: Readable<number>
+  maxScrollTop: Readable<number>
+  maxScrollLeft: Readable<number>
+  showHScrollbar: Readable<number>
+  showVScrollbar: Readable<number>
+}
+
+export type Store = ScrollStore & ScrollDerivedStore
+
+export const createStores = (): ScrollStore => {
   const scroll = writable({
     left: 0,
     top: 0,
@@ -26,7 +49,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext) => {
   const {
     rows,
     visibleColumns,
@@ -107,7 +130,7 @@ export const deriveStores = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     focusedCellId,
     focusedRow,
@@ -189,7 +212,7 @@ export const initialise = context => {
     // Ensure horizontal position is viewable
     // Check horizontal position of columns next
     const { field } = parseCellID($focusedCellId)
-    const column = get(columnLookupMap)[field]
+    const column = get(columnLookupMap)[field!]
     if (!column || column.primaryDisplay) {
       return
     }
diff --git a/packages/frontend-core/src/components/grid/stores/sort.js b/packages/frontend-core/src/components/grid/stores/sort.ts
similarity index 76%
rename from packages/frontend-core/src/components/grid/stores/sort.js
rename to packages/frontend-core/src/components/grid/stores/sort.ts
index 9ab393b11f..ab58d7dabe 100644
--- a/packages/frontend-core/src/components/grid/stores/sort.js
+++ b/packages/frontend-core/src/components/grid/stores/sort.ts
@@ -1,8 +1,18 @@
-import { derived, get } from "svelte/store"
+import { derived, get, Writable } from "svelte/store"
 import { memo } from "../../../utils"
 import { SortOrder } from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = context => {
+interface SortStore {
+  sort: Writable<{
+    column: string | null | undefined
+    order: SortOrder
+  }>
+}
+
+export type Store = SortStore
+
+export const createStores = (context: StoreContext): SortStore => {
   const { props } = context
   const $props = get(props)
 
@@ -17,7 +27,7 @@ export const createStores = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { sort, initialSortColumn, initialSortOrder, schema } = context
 
   // Reset sort when initial sort props change
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.ts
similarity index 79%
rename from packages/frontend-core/src/components/grid/stores/ui.js
rename to packages/frontend-core/src/components/grid/stores/ui.ts
index 7f39116b05..f279eb210f 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.ts
@@ -1,4 +1,4 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { tick } from "svelte"
 import {
   DefaultRowHeight,
@@ -7,8 +7,61 @@ import {
   NewRowID,
 } from "../lib/constants"
 import { getCellID, parseCellID } from "../lib/utils"
+import { Store as StoreContext } from "."
+import { Row } from "@budibase/types"
 
-export const createStores = context => {
+export interface UIStore {
+  focusedCellId: Writable<string | null>
+  focusedCellAPI: Writable<{
+    isReadonly: () => boolean
+    getValue: () => any
+    setValue: (val: any) => void
+  } | null>
+  selectedRows: Writable<Record<string, boolean>>
+  hoveredRowId: Writable<string | null>
+  rowHeight: Writable<number>
+  previousFocusedRowId: Writable<string | null>
+  previousFocusedCellId: Writable<string | null>
+  gridFocused: Writable<boolean>
+  keyboardBlocked: Writable<boolean>
+  isDragging: Writable<boolean>
+  buttonColumnWidth: Writable<number>
+  cellSelection: Writable<{
+    active: boolean
+    sourceCellId: string | null
+    targetCellId: string | null
+  }>
+}
+
+export interface UIDerivedStore {
+  focusedRowId: Readable<string | null>
+  focusedRow: Readable<Row | undefined>
+  contentLines: Readable<3 | 2 | 1>
+  compact: Readable<boolean>
+  selectedRowCount: Readable<number>
+  isSelectingCells: Readable<boolean>
+  selectedCells: Readable<string[][]>
+  selectedCellMap: Readable<Record<string, boolean>>
+  selectedCellCount: Readable<number>
+}
+
+interface UIActionStore {
+  selectedCells: UIDerivedStore["selectedCells"] & {
+    actions: {
+      clear: () => void
+      selectRange: (source: string | null, target: string | null) => void
+    }
+  }
+  ui: {
+    actions: {
+      blur: () => void
+    }
+  }
+}
+
+export type Store = UIStore & UIDerivedStore & UIActionStore
+
+export const createStores = (context: StoreContext): UIStore => {
   const { props } = context
   const focusedCellId = writable(null)
   const focusedCellAPI = writable(null)
@@ -43,7 +96,7 @@ export const createStores = context => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): UIDerivedStore => {
   const {
     focusedCellId,
     rows,
@@ -58,13 +111,17 @@ export const deriveStores = context => {
 
   // Derive the current focused row ID
   const focusedRowId = derived(focusedCellId, $focusedCellId => {
-    return parseCellID($focusedCellId).rowId
+    return parseCellID($focusedCellId).rowId ?? null
   })
 
   // Derive the row that contains the selected cell
   const focusedRow = derived(
     [focusedRowId, rowLookupMap],
     ([$focusedRowId, $rowLookupMap]) => {
+      if ($focusedRowId === null) {
+        return
+      }
+
       if ($focusedRowId === NewRowID) {
         return { _id: NewRowID }
       }
@@ -116,8 +173,8 @@ export const deriveStores = context => {
       }
 
       // Row indices
-      const sourceRowIndex = $rowLookupMap[sourceInfo.rowId]?.__idx
-      const targetRowIndex = $rowLookupMap[targetInfo.rowId]?.__idx
+      const sourceRowIndex = $rowLookupMap[sourceInfo.rowId!]?.__idx
+      const targetRowIndex = $rowLookupMap[targetInfo.rowId!]?.__idx
       if (sourceRowIndex == null || targetRowIndex == null) {
         return []
       }
@@ -128,8 +185,8 @@ export const deriveStores = context => {
       upperRowIndex = Math.min(upperRowIndex, lowerRowIndex + 49)
 
       // Column indices
-      const sourceColIndex = $columnLookupMap[sourceInfo.field].__idx
-      const targetColIndex = $columnLookupMap[targetInfo.field].__idx
+      const sourceColIndex = $columnLookupMap[sourceInfo.field!].__idx || 0
+      const targetColIndex = $columnLookupMap[targetInfo.field!].__idx || 0
       const lowerColIndex = Math.min(sourceColIndex, targetColIndex)
       const upperColIndex = Math.max(sourceColIndex, targetColIndex)
 
@@ -151,7 +208,7 @@ export const deriveStores = context => {
 
   // Derive a quick lookup map of the selected cells
   const selectedCellMap = derived(selectedCells, $selectedCells => {
-    let map = {}
+    let map: Record<string, boolean> = {}
     for (let row of $selectedCells) {
       for (let cell of row) {
         map[cell] = true
@@ -178,7 +235,7 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const {
     focusedCellId,
     hoveredRowId,
@@ -190,7 +247,7 @@ export const createActions = context => {
     selectedCells,
   } = context
   // Keep the last selected index to use with bulk selection
-  let lastSelectedIndex = null
+  let lastSelectedIndex: number | null = null
 
   // Callback when leaving the grid, deselecting all focussed or selected items
   const blur = () => {
@@ -200,7 +257,7 @@ export const createActions = context => {
   }
 
   // Toggles whether a certain row ID is selected or not
-  const toggleSelectedRow = id => {
+  const toggleSelectedRow = (id: string) => {
     selectedRows.update(state => {
       let newState = {
         ...state,
@@ -215,7 +272,7 @@ export const createActions = context => {
     })
   }
 
-  const bulkSelectRows = id => {
+  const bulkSelectRows = (id: string) => {
     if (!get(selectedRowCount)) {
       toggleSelectedRow(id)
       return
@@ -241,7 +298,7 @@ export const createActions = context => {
     })
   }
 
-  const startCellSelection = sourceCellId => {
+  const startCellSelection = (sourceCellId: string) => {
     cellSelection.set({
       active: true,
       sourceCellId,
@@ -249,7 +306,7 @@ export const createActions = context => {
     })
   }
 
-  const updateCellSelection = targetCellId => {
+  const updateCellSelection = (targetCellId: string) => {
     cellSelection.update(state => ({
       ...state,
       targetCellId,
@@ -263,7 +320,7 @@ export const createActions = context => {
     }))
   }
 
-  const selectCellRange = (source, target) => {
+  const selectCellRange = (source: string, target: string) => {
     cellSelection.set({
       active: false,
       sourceCellId: source,
@@ -305,7 +362,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const {
     focusedRowId,
     previousFocusedRowId,
@@ -332,7 +389,7 @@ export const initialise = context => {
     const $focusedRowId = get(focusedRowId)
     const $selectedRows = get(selectedRows)
     const $hoveredRowId = get(hoveredRowId)
-    const hasRow = id => $rowLookupMap[id] != null
+    const hasRow = (id: string) => $rowLookupMap[id] != null
 
     // Check focused cell
     if ($focusedRowId && !hasRow($focusedRowId)) {
@@ -362,13 +419,13 @@ export const initialise = context => {
   })
 
   // Remember the last focused row ID so that we can store the previous one
-  let lastFocusedRowId = null
+  let lastFocusedRowId: string | null = null
   focusedRowId.subscribe(id => {
     previousFocusedRowId.set(lastFocusedRowId)
     lastFocusedRowId = id
   })
 
-  let lastFocusedCellId = null
+  let lastFocusedCellId: string | null = null
   focusedCellId.subscribe(id => {
     // Remember the last focused cell ID so that we can store the previous one
     previousFocusedCellId.set(lastFocusedCellId)
diff --git a/packages/frontend-core/src/components/grid/stores/users.js b/packages/frontend-core/src/components/grid/stores/users.ts
similarity index 56%
rename from packages/frontend-core/src/components/grid/stores/users.js
rename to packages/frontend-core/src/components/grid/stores/users.ts
index 64c1e27835..b3dffbcb1b 100644
--- a/packages/frontend-core/src/components/grid/stores/users.js
+++ b/packages/frontend-core/src/components/grid/stores/users.ts
@@ -1,11 +1,38 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { helpers } from "@budibase/shared-core"
+import { Store as StoreContext } from "."
+import { UIUser } from "@budibase/types"
 
-export const createStores = () => {
-  const users = writable([])
+interface UIEnrichedUser extends UIUser {
+  color: string
+  label: string
+}
+
+interface UsersStore {
+  users: Writable<UIUser[]>
+}
+
+interface DerivedUsersStore {
+  userCellMap: Readable<Record<string, UIUser>>
+}
+
+interface ActionUserStore {
+  users: UsersStore["users"] &
+    Readable<UIEnrichedUser[]> & {
+      actions: {
+        updateUser: (user: UIUser) => void
+        removeUser: (sessionId: string) => void
+      }
+    }
+}
+
+export type Store = DerivedUsersStore & ActionUserStore
+
+export const createStores = (): UsersStore => {
+  const users = writable<UIUser[]>([])
 
   const enrichedUsers = derived(users, $users => {
-    return $users.map(user => ({
+    return $users.map<UIEnrichedUser>(user => ({
       ...user,
       color: helpers.getUserColor(user),
       label: helpers.getUserLabel(user),
@@ -20,7 +47,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedUsersStore => {
   const { users, focusedCellId } = context
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
@@ -28,7 +55,7 @@ export const deriveStores = context => {
   const userCellMap = derived(
     [users, focusedCellId],
     ([$users, $focusedCellId]) => {
-      let map = {}
+      let map: Record<string, UIUser> = {}
       $users.forEach(user => {
         const cellId = user.gridMetadata?.focusedCellId
         if (cellId && cellId !== $focusedCellId) {
@@ -44,10 +71,10 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ActionUserStore => {
   const { users } = context
 
-  const updateUser = user => {
+  const updateUser = (user: UIUser) => {
     const $users = get(users)
     if (!$users.some(x => x.sessionId === user.sessionId)) {
       users.set([...$users, user])
@@ -60,7 +87,7 @@ export const createActions = context => {
     }
   }
 
-  const removeUser = sessionId => {
+  const removeUser = (sessionId: string) => {
     users.update(state => {
       return state.filter(x => x.sessionId !== sessionId)
     })
diff --git a/packages/frontend-core/src/components/grid/stores/validation.js b/packages/frontend-core/src/components/grid/stores/validation.ts
similarity index 58%
rename from packages/frontend-core/src/components/grid/stores/validation.js
rename to packages/frontend-core/src/components/grid/stores/validation.ts
index 93e67e1d31..9db432d1a5 100644
--- a/packages/frontend-core/src/components/grid/stores/validation.js
+++ b/packages/frontend-core/src/components/grid/stores/validation.ts
@@ -1,10 +1,31 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
+import { Store as StoreContext } from "."
 import { parseCellID } from "../lib/utils"
 
+interface ValidationStore {
+  validation: Writable<Record<string, string>>
+}
+
+interface DerivedValidationStore {
+  validationRowLookupMap: Readable<Record<string, string[]>>
+}
+
+interface ValidationActions {
+  validation: ValidationStore["validation"] & {
+    actions: {
+      setError: (cellId: string | undefined, error: string) => void
+      rowHasErrors: (rowId: string) => boolean
+      focusFirstRowError: (rowId: string) => void
+    }
+  }
+}
+
+export type Store = ValidationStore & DerivedValidationStore & ValidationActions
+
 // Normally we would break out actions into the explicit "createActions"
 // function, but for validation all these actions are pure so can go into
 // "createStores" instead to make dependency ordering simpler
-export const createStores = () => {
+export const createStores = (): ValidationStore => {
   const validation = writable({})
 
   return {
@@ -12,20 +33,22 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedValidationStore => {
   const { validation } = context
 
   // Derive which rows have errors so that we can use that info later
   const validationRowLookupMap = derived(validation, $validation => {
-    let map = {}
+    const map: Record<string, string[]> = {}
     Object.entries($validation).forEach(([key, error]) => {
       // Extract row ID from all errored cell IDs
       if (error) {
         const { rowId } = parseCellID(key)
-        if (!map[rowId]) {
-          map[rowId] = []
+        if (rowId !== undefined) {
+          if (!map[rowId]) {
+            map[rowId] = []
+          }
+          map[rowId].push(key)
         }
-        map[rowId].push(key)
       }
     })
     return map
@@ -36,10 +59,10 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext): ValidationActions => {
   const { validation, focusedCellId, validationRowLookupMap } = context
 
-  const setError = (cellId, error) => {
+  const setError = (cellId: string | undefined, error: string) => {
     if (!cellId) {
       return
     }
@@ -49,11 +72,11 @@ export const createActions = context => {
     }))
   }
 
-  const rowHasErrors = rowId => {
+  const rowHasErrors = (rowId: string) => {
     return get(validationRowLookupMap)[rowId]?.length > 0
   }
 
-  const focusFirstRowError = rowId => {
+  const focusFirstRowError = (rowId: string) => {
     const errorCells = get(validationRowLookupMap)[rowId]
     const cellId = errorCells?.[0]
     if (cellId) {
@@ -73,7 +96,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { validation, previousFocusedRowId, validationRowLookupMap } = context
 
   // Remove validation errors when changing rows
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.ts
similarity index 82%
rename from packages/frontend-core/src/components/grid/stores/viewport.js
rename to packages/frontend-core/src/components/grid/stores/viewport.ts
index 0797f38b55..25620c33ef 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.ts
@@ -1,7 +1,18 @@
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
 import { MinColumnWidth } from "../lib/constants"
+import { Store as StoreContext } from "."
+import { Row } from "@budibase/types"
 
-export const deriveStores = context => {
+interface ViewportDerivedStore {
+  scrolledRowCount: Readable<number>
+  visualRowCapacity: Readable<number>
+  renderedRows: Readable<Row>
+  columnRenderMap: Readable<Record<string, true>>
+}
+
+export type Store = ViewportDerivedStore
+
+export const deriveStores = (context: StoreContext): ViewportDerivedStore => {
   const {
     rowHeight,
     scrollableColumns,
@@ -77,7 +88,7 @@ export const deriveStores = context => {
         leftEdge += $scrollableColumns[endColIdx].width
         endColIdx++
       }
-      let next = {}
+      let next: Record<string, true> = {}
       $scrollableColumns
         .slice(Math.max(0, startColIdx), endColIdx)
         .forEach(col => {
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.ts
similarity index 98%
rename from packages/frontend-core/src/constants.js
rename to packages/frontend-core/src/constants.ts
index 662b086915..8a39e8c106 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.ts
@@ -76,9 +76,9 @@ export const ExtendedBudibaseRoleOptions = [
     value: BudibaseRoles.Owner,
     sortOrder: 0,
   },
+  ...BudibaseRoleOptions,
+  ...BudibaseRoleOptionsOld,
 ]
-  .concat(BudibaseRoleOptions)
-  .concat(BudibaseRoleOptionsOld)
 
 export const PlanType = {
   FREE: "free",
diff --git a/packages/frontend-core/src/fetch/QueryFetch.js b/packages/frontend-core/src/fetch/QueryFetch.js
index 6420893515..9fac9704d3 100644
--- a/packages/frontend-core/src/fetch/QueryFetch.js
+++ b/packages/frontend-core/src/fetch/QueryFetch.js
@@ -48,7 +48,7 @@ export default class QueryFetch extends DataFetch {
     }
 
     // Add pagination to query if supported
-    let queryPayload = { queryId: datasource?._id, parameters }
+    let queryPayload = { parameters }
     if (paginate && supportsPagination) {
       const requestCursor = type === "page" ? parseInt(cursor || 1) : cursor
       queryPayload.pagination = { page: requestCursor, limit }
@@ -56,7 +56,7 @@ export default class QueryFetch extends DataFetch {
 
     // Execute query
     try {
-      const res = await this.API.executeQuery(queryPayload)
+      const res = await this.API.executeQuery(datasource?._id, queryPayload)
       const { data, pagination, ...rest } = res
 
       // Derive pagination info from response
diff --git a/packages/frontend-core/src/fetch/RelationshipFetch.js b/packages/frontend-core/src/fetch/RelationshipFetch.js
index 04797fcdf1..0dec535724 100644
--- a/packages/frontend-core/src/fetch/RelationshipFetch.js
+++ b/packages/frontend-core/src/fetch/RelationshipFetch.js
@@ -3,13 +3,16 @@ import DataFetch from "./DataFetch.js"
 export default class RelationshipFetch extends DataFetch {
   async getData() {
     const { datasource } = this.options
+    if (!datasource?.rowId || !datasource?.rowTableId) {
+      return { rows: [] }
+    }
     try {
-      const res = await this.API.fetchRelationshipData({
-        rowId: datasource?.rowId,
-        tableId: datasource?.rowTableId,
-        fieldName: datasource?.fieldName,
-      })
-      return { rows: res || [] }
+      const res = await this.API.fetchRelationshipData(
+        datasource.rowTableId,
+        datasource.rowId,
+        datasource.fieldName
+      )
+      return { rows: res }
     } catch (error) {
       return { rows: [] }
     }
diff --git a/packages/frontend-core/src/fetch/TableFetch.js b/packages/frontend-core/src/fetch/TableFetch.js
index ed17c20c79..777d16aa45 100644
--- a/packages/frontend-core/src/fetch/TableFetch.js
+++ b/packages/frontend-core/src/fetch/TableFetch.js
@@ -19,8 +19,7 @@ export default class TableFetch extends DataFetch {
 
     // Search table
     try {
-      const res = await this.API.searchTable({
-        tableId,
+      const res = await this.API.searchTable(tableId, {
         query,
         limit,
         sort: sortColumn,
diff --git a/packages/frontend-core/src/fetch/ViewFetch.js b/packages/frontend-core/src/fetch/ViewFetch.js
index 981969f46c..272c222dd4 100644
--- a/packages/frontend-core/src/fetch/ViewFetch.js
+++ b/packages/frontend-core/src/fetch/ViewFetch.js
@@ -8,7 +8,7 @@ export default class ViewFetch extends DataFetch {
   async getData() {
     const { datasource } = this.options
     try {
-      const res = await this.API.fetchViewData(datasource)
+      const res = await this.API.fetchViewData(datasource.name)
       return { rows: res || [] }
     } catch (error) {
       return { rows: [] }
diff --git a/packages/frontend-core/src/fetch/ViewV2Fetch.js b/packages/frontend-core/src/fetch/ViewV2Fetch.js
index 6bfef0927f..8436646077 100644
--- a/packages/frontend-core/src/fetch/ViewV2Fetch.js
+++ b/packages/frontend-core/src/fetch/ViewV2Fetch.js
@@ -62,8 +62,7 @@ export default class ViewV2Fetch extends DataFetch {
     }
 
     try {
-      const res = await this.API.viewV2.fetch({
-        viewId: datasource.id,
+      const res = await this.API.viewV2.fetch(datasource.id, {
         ...(query ? { query } : {}),
         paginate,
         limit,
diff --git a/packages/frontend-core/src/index.js b/packages/frontend-core/src/index.ts
similarity index 100%
rename from packages/frontend-core/src/index.js
rename to packages/frontend-core/src/index.ts
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.ts
similarity index 100%
rename from packages/frontend-core/src/utils/index.js
rename to packages/frontend-core/src/utils/index.ts
diff --git a/packages/frontend-core/src/utils/memo.d.ts b/packages/frontend-core/src/utils/memo.d.ts
new file mode 100644
index 0000000000..04d3416e49
--- /dev/null
+++ b/packages/frontend-core/src/utils/memo.d.ts
@@ -0,0 +1,10 @@
+import { Readable, Writable } from "svelte/store"
+
+declare module "./memo" {
+  export function memo<T>(value: T): Writable<T>
+
+  export function derivedMemo<TStore, TResult>(
+    store: Readable<TStore>,
+    derivation: (store: TStore) => TResult
+  ): Readable<TResult>
+}
diff --git a/packages/frontend-core/src/utils/relatedColumns.js b/packages/frontend-core/src/utils/relatedColumns.js
deleted file mode 100644
index 6e7968f70c..0000000000
--- a/packages/frontend-core/src/utils/relatedColumns.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { FieldType, RelationshipType } from "@budibase/types"
-import { Helpers } from "@budibase/bbui"
-
-const columnTypeManyTypeOverrides = {
-  [FieldType.DATETIME]: FieldType.STRING,
-  [FieldType.BOOLEAN]: FieldType.STRING,
-  [FieldType.SIGNATURE_SINGLE]: FieldType.ATTACHMENTS,
-}
-
-const columnTypeManyParser = {
-  [FieldType.DATETIME]: (value, field) => {
-    function parseDate(value) {
-      const { timeOnly, dateOnly, ignoreTimezones } = field || {}
-      const enableTime = !dateOnly
-      const parsedValue = Helpers.parseDate(value, {
-        timeOnly,
-        enableTime,
-        ignoreTimezones,
-      })
-      const parsed = Helpers.getDateDisplayValue(parsedValue, {
-        enableTime,
-        timeOnly,
-      })
-      return parsed
-    }
-
-    return value.map(v => parseDate(v))
-  },
-  [FieldType.BOOLEAN]: value => value.map(v => !!v),
-  [FieldType.BB_REFERENCE_SINGLE]: value => [
-    ...new Map(value.map(i => [i._id, i])).values(),
-  ],
-  [FieldType.BB_REFERENCE]: value => [
-    ...new Map(value.map(i => [i._id, i])).values(),
-  ],
-  [FieldType.ARRAY]: value => Array.from(new Set(value)),
-}
-
-export function enrichSchemaWithRelColumns(schema) {
-  if (!schema) {
-    return
-  }
-  const result = Object.keys(schema).reduce((result, fieldName) => {
-    const field = schema[fieldName]
-    result[fieldName] = field
-
-    if (field.visible !== false && field.columns) {
-      const fromSingle =
-        field?.relationshipType === RelationshipType.ONE_TO_MANY
-
-      for (const relColumn of Object.keys(field.columns)) {
-        const relField = field.columns[relColumn]
-        if (!relField.visible) {
-          continue
-        }
-        const name = `${field.name}.${relColumn}`
-        result[name] = {
-          ...relField,
-          name,
-          related: { field: fieldName, subField: relColumn },
-          cellRenderType:
-            (!fromSingle && columnTypeManyTypeOverrides[relField.type]) ||
-            relField.type,
-        }
-      }
-    }
-    return result
-  }, {})
-
-  return result
-}
-
-export function getRelatedTableValues(row, field, fromField) {
-  const fromSingle =
-    fromField?.relationshipType === RelationshipType.ONE_TO_MANY
-
-  let result = ""
-
-  if (fromSingle) {
-    result = row[field.related.field]?.[0]?.[field.related.subField]
-  } else {
-    const parser = columnTypeManyParser[field.type] || (value => value)
-    const value = row[field.related.field]
-      ?.flatMap(r => r[field.related.subField])
-      ?.filter(i => i !== undefined && i !== null)
-    result = parser(value || [], field)
-    if (
-      [
-        FieldType.STRING,
-        FieldType.NUMBER,
-        FieldType.BIGINT,
-        FieldType.BOOLEAN,
-        FieldType.DATETIME,
-        FieldType.LONGFORM,
-        FieldType.BARCODEQR,
-      ].includes(field.type)
-    ) {
-      result = result?.join(", ")
-    }
-  }
-
-  return result
-}
diff --git a/packages/frontend-core/src/utils/relatedColumns.ts b/packages/frontend-core/src/utils/relatedColumns.ts
new file mode 100644
index 0000000000..7bec526605
--- /dev/null
+++ b/packages/frontend-core/src/utils/relatedColumns.ts
@@ -0,0 +1,126 @@
+import { Helpers } from "@budibase/bbui"
+import {
+  FieldType,
+  isRelationshipField,
+  RelationshipType,
+  Row,
+  UIFieldSchema,
+} from "@budibase/types"
+
+const columnTypeManyTypeOverrides: Partial<Record<FieldType, FieldType>> = {
+  [FieldType.DATETIME]: FieldType.STRING,
+  [FieldType.BOOLEAN]: FieldType.STRING,
+  [FieldType.SIGNATURE_SINGLE]: FieldType.ATTACHMENTS,
+}
+
+const columnTypeManyParser = {
+  [FieldType.DATETIME]: (
+    value: any[],
+    field: {
+      timeOnly?: boolean
+      dateOnly?: boolean
+    }
+  ) => {
+    function parseDate(value: any) {
+      const { timeOnly, dateOnly } = field || {}
+      const enableTime = !dateOnly
+      const parsedValue = Helpers.parseDate(value, { enableTime })
+      const parsed = Helpers.getDateDisplayValue(parsedValue, {
+        enableTime,
+        timeOnly,
+      })
+      return parsed
+    }
+
+    return value.map(v => parseDate(v))
+  },
+  [FieldType.BOOLEAN]: (value: any[]) => value.map(v => !!v),
+  [FieldType.BB_REFERENCE_SINGLE]: (value: any[]) => [
+    ...new Map(value.map(i => [i._id, i])).values(),
+  ],
+  [FieldType.BB_REFERENCE]: (value: any[]) => [
+    ...new Map(value.map(i => [i._id, i])).values(),
+  ],
+  [FieldType.ARRAY]: (value: any[]) => Array.from(new Set(value)),
+}
+
+export function enrichSchemaWithRelColumns(
+  schema: Record<string, UIFieldSchema>
+): Record<string, UIFieldSchema> {
+  const result = Object.keys(schema).reduce<Record<string, UIFieldSchema>>(
+    (result, fieldName) => {
+      const field = schema[fieldName]
+      result[fieldName] = field
+
+      if (
+        field.visible !== false &&
+        isRelationshipField(field) &&
+        field.columns
+      ) {
+        const fromSingle =
+          field?.relationshipType === RelationshipType.ONE_TO_MANY
+
+        for (const relColumn of Object.keys(field.columns)) {
+          const relField = field.columns[relColumn]
+          if (!relField.visible) {
+            continue
+          }
+          const name = `${field.name}.${relColumn}`
+          result[name] = {
+            ...relField,
+            type: relField.type as any, // TODO
+            name,
+            related: { field: fieldName, subField: relColumn },
+            cellRenderType:
+              (!fromSingle && columnTypeManyTypeOverrides[relField.type]) ||
+              relField.type,
+          }
+        }
+      }
+      return result
+    },
+    {}
+  )
+
+  return result
+}
+
+export function getRelatedTableValues(
+  row: Row,
+  field: UIFieldSchema & { related: { field: string; subField: string } },
+  fromField: UIFieldSchema
+) {
+  const fromSingle =
+    isRelationshipField(fromField) &&
+    fromField?.relationshipType === RelationshipType.ONE_TO_MANY
+
+  let result = ""
+
+  if (fromSingle) {
+    result = row[field.related.field]?.[0]?.[field.related.subField]
+  } else {
+    const parser =
+      columnTypeManyParser[field.type as keyof typeof columnTypeManyParser] ||
+      ((value: any) => value)
+    const value = row[field.related.field]
+      ?.flatMap((r: Row) => r[field.related.subField])
+      ?.filter((i: any) => i !== undefined && i !== null)
+    const parsed = parser(value || [], field as any)
+    result = parsed as any
+    if (
+      [
+        FieldType.STRING,
+        FieldType.NUMBER,
+        FieldType.BIGINT,
+        FieldType.BOOLEAN,
+        FieldType.DATETIME,
+        FieldType.LONGFORM,
+        FieldType.BARCODEQR,
+      ].includes(field.type)
+    ) {
+      result = parsed?.join(", ")
+    }
+  }
+
+  return result
+}
diff --git a/packages/frontend-core/tsconfig.json b/packages/frontend-core/tsconfig.json
new file mode 100644
index 0000000000..d06da5a713
--- /dev/null
+++ b/packages/frontend-core/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext"],
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "allowJs": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/pro b/packages/pro
index e7c9f08aeb..ae786121d9 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit e7c9f08aeb0498a20594f3c912afedcfdc220a6a
+Subproject commit ae786121d923449b0ad5fcbd123d0a9fec28f65e
diff --git a/packages/server/nodemon.json b/packages/server/nodemon.json
index b0e792d945..ac8c38ccb2 100644
--- a/packages/server/nodemon.json
+++ b/packages/server/nodemon.json
@@ -1,13 +1,19 @@
 {
   "watch": [
     "src",
-    "../backend-core",
-    "../pro",
-    "../types",
-    "../shared-core",
-    "../string-templates"
+    "../backend-core/src",
+    "../pro/src",
+    "../types/src",
+    "../shared-core/src",
+    "../string-templates/src"
   ],
   "ext": "js,ts,json,svelte",
-  "ignore": ["**/*.spec.ts", "**/*.spec.js", "../*/dist/**/*", "client/**/*", "builder/**/*"],
+  "ignore": [
+    "**/*.spec.ts",
+    "**/*.spec.js",
+    "../*/dist/**/*",
+    "client/**/*",
+    "builder/**/*"
+  ],
   "exec": "yarn build && node --no-node-snapshot ./dist/index.js"
 }
diff --git a/packages/server/package.json b/packages/server/package.json
index 1dd3df1d73..8cd49a0fe8 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -122,7 +122,7 @@
     "server-destroy": "1.0.1",
     "snowflake-sdk": "^1.15.0",
     "socket.io": "4.8.1",
-    "svelte": "^4.2.10",
+    "svelte": "4.2.19",
     "tar": "6.2.1",
     "tmp": "0.2.3",
     "to-json-schema": "0.2.5",
diff --git a/packages/server/scripts/integrations/mysql/init.sql b/packages/server/scripts/integrations/mysql/init.sql
index e687c7c3b1..bbb2425b0d 100644
--- a/packages/server/scripts/integrations/mysql/init.sql
+++ b/packages/server/scripts/integrations/mysql/init.sql
@@ -30,6 +30,10 @@ CREATE TABLE Products (
     name text,
     updated time
 );
+CREATE TABLE `table with space` (
+    id serial primary key,
+    name text
+);
 INSERT INTO Persons (FirstName, LastName, Age, Address, City, CreatedAt) VALUES ('Mike', 'Hughes', 28.2, '123 Fake Street', 'Belfast', '2021-01-19 03:14:07');
 INSERT INTO Persons (FirstName, LastName, Age, Address, City, CreatedAt) VALUES ('Dave', 'Johnson', 29, '124 Fake Street', 'Belfast', '2022-04-01 00:11:11');
 INSERT INTO Person (Name) VALUES ('Elf');
diff --git a/packages/server/src/api/controllers/analytics.ts b/packages/server/src/api/controllers/analytics.ts
index 8c87af7251..27c981036a 100644
--- a/packages/server/src/api/controllers/analytics.ts
+++ b/packages/server/src/api/controllers/analytics.ts
@@ -1,10 +1,11 @@
-import { events, context } from "@budibase/backend-core"
+import { context, events } from "@budibase/backend-core"
 import {
-  AnalyticsPingRequest,
-  App,
-  PingSource,
-  Ctx,
   AnalyticsEnabledResponse,
+  AnalyticsPingRequest,
+  AnalyticsPingResponse,
+  App,
+  Ctx,
+  PingSource,
 } from "@budibase/types"
 import { DocumentType, isDevAppID } from "../../db/utils"
 
@@ -15,9 +16,12 @@ export const isEnabled = async (ctx: Ctx<void, AnalyticsEnabledResponse>) => {
   }
 }
 
-export const ping = async (ctx: Ctx<AnalyticsPingRequest, void>) => {
+export const ping = async (
+  ctx: Ctx<AnalyticsPingRequest, AnalyticsPingResponse>
+) => {
   const body = ctx.request.body
 
+  let pingType: PingSource | undefined
   switch (body.source) {
     case PingSource.APP: {
       const db = context.getAppDB({ skip_setup: true })
@@ -29,13 +33,18 @@ export const ping = async (ctx: Ctx<AnalyticsPingRequest, void>) => {
       } else {
         await events.serve.servedApp(appInfo, body.timezone, body.embedded)
       }
+      pingType = PingSource.APP
       break
     }
     case PingSource.BUILDER: {
       await events.serve.servedBuilder(body.timezone)
+      pingType = PingSource.BUILDER
       break
     }
   }
 
-  ctx.status = 200
+  ctx.body = {
+    message: "pong",
+    source: pingType,
+  }
 }
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index d032f14150..4169087a63 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -68,6 +68,9 @@ import {
   ImportToUpdateAppRequest,
   ImportToUpdateAppResponse,
   SetRevertableAppVersionRequest,
+  AddAppSampleDataResponse,
+  UnpublishAppResponse,
+  SetRevertableAppVersionResponse,
 } from "@budibase/types"
 import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import sdk from "../../sdk"
@@ -175,7 +178,9 @@ async function createInstance(appId: string, template: AppTemplate) {
   return { _id: appId }
 }
 
-export const addSampleData = async (ctx: UserCtx<void, void>) => {
+export const addSampleData = async (
+  ctx: UserCtx<void, AddAppSampleDataResponse>
+) => {
   const db = context.getAppDB()
 
   try {
@@ -188,7 +193,7 @@ export const addSampleData = async (ctx: UserCtx<void, void>) => {
     await db.bulkDocs([...defaultDbDocs])
   }
 
-  ctx.status = 200
+  ctx.body = { message: "Sample tables added." }
 }
 
 export async function fetch(ctx: UserCtx<void, FetchAppsResponse>) {
@@ -528,7 +533,6 @@ export async function create(
   await appPostCreate(ctx, newApplication)
   await cache.bustCache(cache.CacheKey.CHECKLIST)
   ctx.body = newApplication
-  ctx.status = 200
 }
 
 // This endpoint currently operates as a PATCH rather than a PUT
@@ -551,7 +555,6 @@ export async function update(
 
   const app = await updateAppPackage(ctx.request.body, ctx.params.appId)
   await events.app.updated(app)
-  ctx.status = 200
   ctx.body = app
   builderSocket?.emitAppMetadataUpdate(ctx, {
     theme: app.theme,
@@ -592,7 +595,6 @@ export async function updateClient(
   }
   const app = await updateAppPackage(appPackageUpdates, ctx.params.appId)
   await events.app.versionUpdated(app, currentVersion, updatedToVersion)
-  ctx.status = 200
   ctx.body = app
 }
 
@@ -624,7 +626,6 @@ export async function revertClient(
   }
   const app = await updateAppPackage(appPackageUpdates, ctx.params.appId)
   await events.app.versionReverted(app, currentVersion, revertedToVersion)
-  ctx.status = 200
   ctx.body = app
 }
 
@@ -689,11 +690,10 @@ export async function destroy(ctx: UserCtx<void, DeleteAppResponse>) {
   await preDestroyApp(ctx)
   const result = await destroyApp(ctx)
   await postDestroyApp(ctx)
-  ctx.status = 200
   ctx.body = result
 }
 
-export async function unpublish(ctx: UserCtx<void, void>) {
+export async function unpublish(ctx: UserCtx<void, UnpublishAppResponse>) {
   const prodAppId = dbCore.getProdAppID(ctx.params.appId)
   const dbExists = await dbCore.dbExists(prodAppId)
 
@@ -705,8 +705,8 @@ export async function unpublish(ctx: UserCtx<void, void>) {
   await preDestroyApp(ctx)
   await unpublishApp(ctx)
   await postDestroyApp(ctx)
-  ctx.status = 204
   builderSocket?.emitAppUnpublish(ctx)
+  ctx.body = { message: "App unpublished." }
 }
 
 export async function sync(ctx: UserCtx<void, SyncAppResponse>) {
@@ -802,7 +802,6 @@ export async function duplicateApp(
     duplicateAppId: newApplication?.appId,
     sourceAppId,
   }
-  ctx.status = 200
 }
 
 export async function updateAppPackage(
@@ -830,7 +829,7 @@ export async function updateAppPackage(
 }
 
 export async function setRevertableVersion(
-  ctx: UserCtx<SetRevertableAppVersionRequest, void>
+  ctx: UserCtx<SetRevertableAppVersionRequest, SetRevertableAppVersionResponse>
 ) {
   if (!env.isDev()) {
     ctx.status = 403
@@ -840,8 +839,7 @@ export async function setRevertableVersion(
   const app = await sdk.applications.metadata.get()
   app.revertableVersion = ctx.request.body.revertableVersion
   await db.put(app)
-
-  ctx.status = 200
+  ctx.body = { message: "Revertable version updated." }
 }
 
 async function migrateAppNavigation() {
diff --git a/packages/server/src/api/controllers/automation.ts b/packages/server/src/api/controllers/automation.ts
index c843dca89b..abc0e492c0 100644
--- a/packages/server/src/api/controllers/automation.ts
+++ b/packages/server/src/api/controllers/automation.ts
@@ -62,7 +62,6 @@ export async function create(
 
   const createdAutomation = await sdk.automations.create(automation)
 
-  ctx.status = 200
   ctx.body = {
     message: "Automation created successfully",
     automation: createdAutomation,
@@ -84,7 +83,6 @@ export async function update(
 
   const updatedAutomation = await sdk.automations.update(automation)
 
-  ctx.status = 200
   ctx.body = {
     message: `Automation ${automation._id} updated successfully.`,
     automation: updatedAutomation,
diff --git a/packages/server/src/api/controllers/datasource.ts b/packages/server/src/api/controllers/datasource.ts
index 7180f5f765..8a3d5cf2ca 100644
--- a/packages/server/src/api/controllers/datasource.ts
+++ b/packages/server/src/api/controllers/datasource.ts
@@ -182,7 +182,6 @@ export async function update(
     }
   }
 
-  ctx.status = 200
   ctx.message = "Datasource saved successfully."
   ctx.body = {
     datasource: await sdk.datasources.removeSecretSingle(datasource),
@@ -290,8 +289,7 @@ export async function destroy(ctx: UserCtx<void, DeleteDatasourceResponse>) {
   await db.remove(datasourceId, ctx.params.revId)
   await events.datasource.deleted(datasource)
 
-  ctx.message = `Datasource deleted.`
-  ctx.status = 200
+  ctx.body = { message: `Datasource deleted.` }
   builderSocket?.emitDatasourceDeletion(ctx, datasourceId)
 }
 
diff --git a/packages/server/src/api/controllers/layout.ts b/packages/server/src/api/controllers/layout.ts
index a0eee000aa..4c996dde35 100644
--- a/packages/server/src/api/controllers/layout.ts
+++ b/packages/server/src/api/controllers/layout.ts
@@ -29,7 +29,6 @@ export async function save(
   layout._rev = response.rev
 
   ctx.body = layout
-  ctx.status = 200
 }
 
 export async function destroy(ctx: UserCtx<void, DeleteLayoutResponse>) {
@@ -51,5 +50,4 @@ export async function destroy(ctx: UserCtx<void, DeleteLayoutResponse>) {
   await db.remove(layoutId, layoutRev)
   await events.layout.deleted(layoutId)
   ctx.body = { message: "Layout deleted successfully" }
-  ctx.status = 200
 }
diff --git a/packages/server/src/api/controllers/migrations.ts b/packages/server/src/api/controllers/migrations.ts
index a3ff0c5810..edf4ec6f51 100644
--- a/packages/server/src/api/controllers/migrations.ts
+++ b/packages/server/src/api/controllers/migrations.ts
@@ -4,6 +4,7 @@ import {
   Ctx,
   FetchOldMigrationResponse,
   GetOldMigrationStatus,
+  RuneOldMigrationResponse,
   RunOldMigrationRequest,
 } from "@budibase/types"
 import {
@@ -11,18 +12,19 @@ import {
   getLatestEnabledMigrationId,
 } from "../../appMigrations"
 
-export async function migrate(ctx: Ctx<RunOldMigrationRequest, void>) {
+export async function migrate(
+  ctx: Ctx<RunOldMigrationRequest, RuneOldMigrationResponse>
+) {
   const options = ctx.request.body
   // don't await as can take a while, just return
   migrationImpl(options)
-  ctx.status = 200
+  ctx.body = { message: "Migration started." }
 }
 
 export async function fetchDefinitions(
   ctx: Ctx<void, FetchOldMigrationResponse>
 ) {
   ctx.body = MIGRATIONS
-  ctx.status = 200
 }
 
 export async function getMigrationStatus(
@@ -41,5 +43,4 @@ export async function getMigrationStatus(
     !latestMigrationId || latestAppliedMigration >= latestMigrationId
 
   ctx.body = { migrated }
-  ctx.status = 200
 }
diff --git a/packages/server/src/api/controllers/permission.ts b/packages/server/src/api/controllers/permission.ts
index e38c736c20..d1522ca292 100644
--- a/packages/server/src/api/controllers/permission.ts
+++ b/packages/server/src/api/controllers/permission.ts
@@ -99,7 +99,7 @@ export async function getDependantResources(
 export async function addPermission(ctx: UserCtx<void, AddPermissionResponse>) {
   const params: AddPermissionRequest = ctx.params
   await sdk.permissions.updatePermissionOnRole(params, PermissionUpdateType.ADD)
-  ctx.status = 200
+  ctx.body = { message: "Permission added." }
 }
 
 export async function removePermission(
@@ -110,5 +110,5 @@ export async function removePermission(
     params,
     PermissionUpdateType.REMOVE
   )
-  ctx.status = 200
+  ctx.body = { message: "Permission removed." }
 }
diff --git a/packages/server/src/api/controllers/query/index.ts b/packages/server/src/api/controllers/query/index.ts
index d73bb8c024..7084d065fa 100644
--- a/packages/server/src/api/controllers/query/index.ts
+++ b/packages/server/src/api/controllers/query/index.ts
@@ -104,7 +104,6 @@ const _import = async (
     ...importResult,
     datasourceId,
   }
-  ctx.status = 200
 }
 export { _import as import }
 
@@ -455,6 +454,5 @@ export async function destroy(ctx: UserCtx<void, DeleteQueryResponse>) {
   const datasource = await sdk.datasources.get(query.datasourceId)
   await db.remove(ctx.params.queryId, ctx.params.revId)
   ctx.body = { message: `Query deleted.` }
-  ctx.status = 200
   await events.query.deleted(datasource, query)
 }
diff --git a/packages/server/src/api/controllers/role.ts b/packages/server/src/api/controllers/role.ts
index 30ca70b505..ae1d535a7c 100644
--- a/packages/server/src/api/controllers/role.ts
+++ b/packages/server/src/api/controllers/role.ts
@@ -234,8 +234,7 @@ export async function destroy(ctx: UserCtx<void, DeleteRoleResponse>) {
   // clean up inherits
   await removeRoleFromOthers(roleId)
 
-  ctx.message = `Role ${ctx.params.roleId} deleted successfully`
-  ctx.status = 200
+  ctx.body = { message: `Role ${ctx.params.roleId} deleted successfully` }
   builderSocket?.emitRoleDeletion(ctx, role)
 }
 
diff --git a/packages/server/src/api/controllers/row/external.ts b/packages/server/src/api/controllers/row/external.ts
index 082d07283b..d56fb1a344 100644
--- a/packages/server/src/api/controllers/row/external.ts
+++ b/packages/server/src/api/controllers/row/external.ts
@@ -52,10 +52,22 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
   const table = await utils.getTableFromSource(source)
   const { _id, ...rowData } = ctx.request.body
 
-  const dataToUpdate = await inputProcessing(
+  const beforeRow = await sdk.rows.external.getRow(table._id!, _id, {
+    relationships: true,
+  })
+
+  let dataToUpdate = cloneDeep(beforeRow)
+  const allowedField = utils.getSourceFields(source)
+  for (const key of Object.keys(rowData)) {
+    if (!allowedField.includes(key)) continue
+
+    dataToUpdate[key] = rowData[key]
+  }
+
+  dataToUpdate = await inputProcessing(
     ctx.user?._id,
     cloneDeep(source),
-    rowData
+    dataToUpdate
   )
 
   const validateResult = await sdk.rows.utils.validate({
@@ -66,10 +78,6 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
     throw { validation: validateResult.errors }
   }
 
-  const beforeRow = await sdk.rows.external.getRow(table._id!, _id, {
-    relationships: true,
-  })
-
   const response = await handleRequest(Operation.UPDATE, source, {
     id: breakRowIdField(_id),
     row: dataToUpdate,
diff --git a/packages/server/src/api/controllers/row/index.ts b/packages/server/src/api/controllers/row/index.ts
index 77c05abb95..8f4629a5b0 100644
--- a/packages/server/src/api/controllers/row/index.ts
+++ b/packages/server/src/api/controllers/row/index.ts
@@ -71,7 +71,6 @@ export async function patch(
     if (!row) {
       ctx.throw(404, "Row not found")
     }
-    ctx.status = 200
 
     ctx.eventEmitter?.emitRow({
       eventName: EventType.ROW_UPDATE,
@@ -110,7 +109,6 @@ export const save = async (ctx: UserCtx<SaveRowRequest, SaveRowResponse>) => {
     : await quotas.addRow(() =>
         sdk.rows.save(sourceId, ctx.request.body, ctx.user?._id)
       )
-  ctx.status = 200
 
   ctx.eventEmitter?.emitRow({
     eventName: EventType.ROW_SAVE,
@@ -223,7 +221,6 @@ async function deleteRow(ctx: UserCtx<DeleteRowRequest>) {
 
 export async function destroy(ctx: UserCtx<DeleteRowRequest>) {
   let response, row
-  ctx.status = 200
 
   if (isDeleteRows(ctx.request.body)) {
     response = await deleteRows(ctx)
@@ -275,7 +272,6 @@ export async function search(ctx: Ctx<SearchRowRequest, SearchRowResponse>) {
     rows: undefined,
   }
 
-  ctx.status = 200
   ctx.body = await sdk.rows.search(searchParams)
 }
 
diff --git a/packages/server/src/api/controllers/row/utils/utils.ts b/packages/server/src/api/controllers/row/utils/utils.ts
index baa811fe90..0f4056c201 100644
--- a/packages/server/src/api/controllers/row/utils/utils.ts
+++ b/packages/server/src/api/controllers/row/utils/utils.ts
@@ -66,7 +66,7 @@ export function getSourceId(ctx: Ctx): { tableId: string; viewId?: string } {
     if (docIds.isViewId(sourceId)) {
       return {
         tableId: utils.extractViewInfoFromID(sourceId).tableId,
-        viewId: sourceId,
+        viewId: sql.utils.encodeViewId(sourceId),
       }
     }
     return { tableId: sql.utils.encodeTableId(ctx.params.sourceId) }
@@ -110,6 +110,21 @@ function fixBooleanFields(row: Row, table: Table) {
   return row
 }
 
+export function getSourceFields(source: Table | ViewV2): string[] {
+  const isView = sdk.views.isView(source)
+  if (isView) {
+    const fields = Object.keys(
+      helpers.views.basicFields(source, { visible: true })
+    )
+    return fields
+  }
+
+  const fields = Object.entries(source.schema)
+    .filter(([_, field]) => field.visible !== false)
+    .map(([columnName]) => columnName)
+  return fields
+}
+
 export async function sqlOutputProcessing(
   rows: DatasourcePlusQueryResponse,
   source: Table | ViewV2,
diff --git a/packages/server/src/api/controllers/rowAction/run.ts b/packages/server/src/api/controllers/rowAction/run.ts
index 05bdb7bace..069e38b86a 100644
--- a/packages/server/src/api/controllers/rowAction/run.ts
+++ b/packages/server/src/api/controllers/rowAction/run.ts
@@ -1,10 +1,16 @@
-import { RowActionTriggerRequest, Ctx } from "@budibase/types"
+import {
+  RowActionTriggerRequest,
+  Ctx,
+  RowActionTriggerResponse,
+} from "@budibase/types"
 import sdk from "../../../sdk"
 
-export async function run(ctx: Ctx<RowActionTriggerRequest, void>) {
+export async function run(
+  ctx: Ctx<RowActionTriggerRequest, RowActionTriggerResponse>
+) {
   const { tableId, actionId } = ctx.params
   const { rowId } = ctx.request.body
 
   await sdk.rowActions.run(tableId, actionId, rowId, ctx.user)
-  ctx.status = 200
+  ctx.body = { message: "Row action triggered." }
 }
diff --git a/packages/server/src/api/controllers/screen.ts b/packages/server/src/api/controllers/screen.ts
index cccc0c4d77..ad000871fe 100644
--- a/packages/server/src/api/controllers/screen.ts
+++ b/packages/server/src/api/controllers/screen.ts
@@ -123,7 +123,6 @@ export async function destroy(ctx: UserCtx<void, DeleteScreenResponse>) {
   ctx.body = {
     message: "Screen deleted successfully",
   }
-  ctx.status = 200
   builderSocket?.emitScreenDeletion(ctx, id)
 }
 
diff --git a/packages/server/src/api/controllers/table/index.ts b/packages/server/src/api/controllers/table/index.ts
index 96599824c5..06d44bc41c 100644
--- a/packages/server/src/api/controllers/table/index.ts
+++ b/packages/server/src/api/controllers/table/index.ts
@@ -37,6 +37,7 @@ import { jsonFromCsvString } from "../../../utilities/csv"
 import { builderSocket } from "../../../websockets"
 import { cloneDeep } from "lodash"
 import {
+  canBeDisplayColumn,
   helpers,
   PROTECTED_EXTERNAL_COLUMNS,
   PROTECTED_INTERNAL_COLUMNS,
@@ -67,6 +68,27 @@ function checkDefaultFields(table: Table) {
   }
 }
 
+async function guardTable(table: Table, isCreate: boolean) {
+  checkDefaultFields(table)
+
+  if (
+    table.primaryDisplay &&
+    !canBeDisplayColumn(table.schema[table.primaryDisplay]?.type)
+  ) {
+    // Prevent throwing errors from existing badly configured tables. Only throw for new tables or if this setting is being updated
+    if (
+      isCreate ||
+      (await sdk.tables.getTable(table._id!)).primaryDisplay !==
+        table.primaryDisplay
+    ) {
+      throw new HTTPError(
+        `Column "${table.primaryDisplay}" cannot be used as a display type.`,
+        400
+      )
+    }
+  }
+}
+
 // covers both internal and external
 export async function fetch(ctx: UserCtx<void, FetchTablesResponse>) {
   const internal = await sdk.tables.getAllInternalTables()
@@ -111,7 +133,7 @@ export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
 
   const isCreate = !table._id
 
-  checkDefaultFields(table)
+  await guardTable(table, isCreate)
 
   let savedTable: Table
   if (isCreate) {
@@ -136,7 +158,6 @@ export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
   if (isImport) {
     await events.table.imported(savedTable)
   }
-  ctx.status = 200
   ctx.message = `Table ${table.name} saved successfully.`
   ctx.eventEmitter?.emitTable(EventType.TABLE_SAVE, appId, { ...savedTable })
   ctx.body = savedTable
@@ -153,7 +174,6 @@ export async function destroy(ctx: UserCtx<void, DeleteTableResponse>) {
   await events.table.deleted(deletedTable)
 
   ctx.eventEmitter?.emitTable(EventType.TABLE_DELETE, appId, deletedTable)
-  ctx.status = 200
   ctx.table = deletedTable
   ctx.body = { message: `Table ${tableId} deleted.` }
   builderSocket?.emitTableDeletion(ctx, deletedTable)
@@ -169,7 +189,6 @@ export async function bulkImport(
   // can only be done in the builder, but in the future we may need to
   // think about events for bulk items
 
-  ctx.status = 200
   ctx.body = { message: `Bulk rows created.` }
 }
 
@@ -180,7 +199,6 @@ export async function csvToJson(
 
   const result = await jsonFromCsvString(csvString)
 
-  ctx.status = 200
   ctx.body = result
 }
 
@@ -190,7 +208,6 @@ export async function validateNewTableImport(
   const { rows, schema } = ctx.request.body
 
   if (isRows(rows) && isSchema(schema)) {
-    ctx.status = 200
     ctx.body = validateSchema(rows, schema, PROTECTED_INTERNAL_COLUMNS)
   } else {
     ctx.status = 422
@@ -224,7 +241,6 @@ export async function validateExistingTableImport(
   }
 
   if (tableId && isRows(rows) && isSchema(schema)) {
-    ctx.status = 200
     ctx.body = validateSchema(rows, schema, protectedColumnNames)
   } else {
     ctx.status = 422
@@ -245,6 +261,5 @@ export async function migrate(
     })
   }
 
-  ctx.status = 200
   ctx.body = { message: `Column ${oldColumn} migrated.` }
 }
diff --git a/packages/server/src/api/controllers/view/viewsV2.ts b/packages/server/src/api/controllers/view/viewsV2.ts
index da579efed7..5376ce49c3 100644
--- a/packages/server/src/api/controllers/view/viewsV2.ts
+++ b/packages/server/src/api/controllers/view/viewsV2.ts
@@ -149,6 +149,7 @@ export async function create(ctx: Ctx<CreateViewRequest, CreateViewResponse>) {
     sort: view.sort,
     schema,
     primaryDisplay: view.primaryDisplay,
+    rowHeight: view.rowHeight,
   }
   const result = await sdk.views.create(tableId, parsedView)
 
@@ -229,6 +230,7 @@ export async function update(ctx: Ctx<UpdateViewRequest, UpdateViewResponse>) {
     sort: view.sort,
     schema,
     primaryDisplay: view.primaryDisplay,
+    rowHeight: view.rowHeight,
   }
 
   const { view: result, existingView } = await sdk.views.update(
diff --git a/packages/server/src/api/controllers/webhook.ts b/packages/server/src/api/controllers/webhook.ts
index 543ab80e59..11bcb06362 100644
--- a/packages/server/src/api/controllers/webhook.ts
+++ b/packages/server/src/api/controllers/webhook.ts
@@ -15,6 +15,7 @@ import {
   BuildWebhookSchemaResponse,
   TriggerWebhookRequest,
   TriggerWebhookResponse,
+  AutomationIOType,
 } from "@budibase/types"
 import sdk from "../../sdk"
 import * as pro from "@budibase/pro"
@@ -60,14 +61,21 @@ export async function buildSchema(
     if (webhook.action.type === WebhookActionType.AUTOMATION) {
       let automation = await db.get<Automation>(webhook.action.target)
       const autoOutputs = automation.definition.trigger.schema.outputs
-      let properties = webhook.bodySchema.properties
+      let properties = webhook.bodySchema?.properties
       // reset webhook outputs
       autoOutputs.properties = {
         body: autoOutputs.properties.body,
       }
-      for (let prop of Object.keys(properties)) {
+      for (let prop of Object.keys(properties || {})) {
+        if (properties?.[prop] == null) {
+          continue
+        }
+        const def = properties[prop]
+        if (typeof def === "boolean") {
+          continue
+        }
         autoOutputs.properties[prop] = {
-          type: properties[prop].type,
+          type: def.type as AutomationIOType,
           description: AUTOMATION_DESCRIPTION,
         }
       }
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index fb728a3fea..a3012c3760 100644
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@@ -1333,6 +1333,62 @@ if (descriptions.length) {
           expect(resp.relationship.length).toBe(1)
         })
 
+        it("should be able to keep linked data when updating from views that trims links from the main table", async () => {
+          let row = await config.api.row.save(table._id!, {
+            name: "main",
+            description: "main description",
+          })
+          const row2 = await config.api.row.save(otherTable._id!, {
+            name: "link",
+            description: "link description",
+            relationship: [row._id],
+          })
+
+          const view = await config.api.viewV2.create({
+            tableId: table._id!,
+            name: "view",
+            schema: {
+              name: { visible: true },
+            },
+          })
+          const resp = await config.api.row.patch(view.id, {
+            _id: row._id!,
+            _rev: row._rev!,
+            tableId: row.tableId!,
+            name: "test2",
+            relationship: [row2._id],
+          })
+          expect(resp.relationship).toBeUndefined()
+
+          const updatedRow = await config.api.row.get(table._id!, row._id!)
+          expect(updatedRow.relationship.length).toBe(1)
+        })
+
+        it("should be able to keep linked data when updating from views that trims links from the foreign table", async () => {
+          let row = await config.api.row.save(table._id!, {
+            name: "main",
+            description: "main description",
+          })
+          const row2 = await config.api.row.save(otherTable._id!, {
+            name: "link",
+            description: "link description",
+            relationship: [row._id],
+          })
+
+          const view = await config.api.viewV2.create({
+            tableId: otherTable._id!,
+            name: "view",
+          })
+          await config.api.row.patch(view.id, {
+            _id: row2._id!,
+            _rev: row2._rev!,
+            tableId: row2.tableId!,
+          })
+
+          const updatedRow = await config.api.row.get(table._id!, row._id!)
+          expect(updatedRow.relationship.length).toBe(1)
+        })
+
         !isInternal &&
           // MSSQL needs a setting called IDENTITY_INSERT to be set to ON to allow writing
           // to identity columns. This is not something Budibase does currently.
diff --git a/packages/server/src/api/routes/tests/search.spec.ts b/packages/server/src/api/routes/tests/search.spec.ts
index e97f48afbe..e94e567b43 100644
--- a/packages/server/src/api/routes/tests/search.spec.ts
+++ b/packages/server/src/api/routes/tests/search.spec.ts
@@ -3399,7 +3399,7 @@ if (descriptions.length) {
                       type: FieldType.LINK,
                       relationshipType: RelationshipType.MANY_TO_ONE,
                       tableId: toRelateTableId,
-                      fieldName: "link",
+                      fieldName: "main",
                     },
                   })
 
@@ -3408,7 +3408,7 @@ if (descriptions.length) {
                   )
                   await config.api.table.save({
                     ...toRelateTable,
-                    primaryDisplay: "link",
+                    primaryDisplay: "name",
                   })
                   const relatedRows = await Promise.all([
                     config.api.row.save(toRelateTable._id!, {
diff --git a/packages/server/src/api/routes/tests/table.spec.ts b/packages/server/src/api/routes/tests/table.spec.ts
index e47181e21f..2a7f039ff5 100644
--- a/packages/server/src/api/routes/tests/table.spec.ts
+++ b/packages/server/src/api/routes/tests/table.spec.ts
@@ -185,6 +185,62 @@ if (descriptions.length) {
             )
           }
         )
+
+        it("can set primary display", async () => {
+          const columnName = generator.word()
+          const table = await config.api.table.save(
+            tableForDatasource(datasource, {
+              primaryDisplay: columnName,
+              schema: {
+                [columnName]: {
+                  name: columnName,
+                  type: FieldType.STRING,
+                },
+              },
+            })
+          )
+          expect(table.primaryDisplay).toEqual(columnName)
+
+          const res = await config.api.table.get(table._id!)
+          expect(res.primaryDisplay).toEqual(columnName)
+        })
+
+        it("cannot use unexisting columns as primary display", async () => {
+          const columnName = generator.word()
+          await config.api.table.save(
+            tableForDatasource(datasource, {
+              primaryDisplay: columnName,
+            }),
+            {
+              status: 400,
+              body: {
+                message: `Column "${columnName}" cannot be used as a display type.`,
+              },
+            }
+          )
+        })
+
+        it("cannot use invalid column types as display name", async () => {
+          const columnName = generator.word()
+
+          await config.api.table.save(
+            tableForDatasource(datasource, {
+              primaryDisplay: columnName,
+              schema: {
+                [columnName]: {
+                  name: columnName,
+                  type: FieldType.BOOLEAN,
+                },
+              },
+            }),
+            {
+              status: 400,
+              body: {
+                message: `Column "${columnName}" cannot be used as a display type.`,
+              },
+            }
+          )
+        })
       })
 
       describe("permissions", () => {
@@ -603,6 +659,49 @@ if (descriptions.length) {
           }
           expect(response).toEqual(expectedResponse)
         })
+
+        it("cannot use unexisting columns as primary display", async () => {
+          const table = await config.api.table.save(
+            tableForDatasource(datasource)
+          )
+
+          const columnName = generator.word()
+          const tableRequest = {
+            ...table,
+            primaryDisplay: columnName,
+          }
+          await config.api.table.save(tableRequest, {
+            status: 400,
+            body: {
+              message: `Column "${columnName}" cannot be used as a display type.`,
+            },
+          })
+        })
+
+        it("cannot use invalid column types as display name", async () => {
+          const table = await config.api.table.save(
+            tableForDatasource(datasource)
+          )
+          const columnName = generator.word()
+          const tableRequest: SaveTableRequest = {
+            ...table,
+            primaryDisplay: columnName,
+            schema: {
+              ...table.schema,
+              [columnName]: {
+                name: columnName,
+                type: FieldType.BOOLEAN,
+              },
+            },
+          }
+
+          await config.api.table.save(tableRequest, {
+            status: 400,
+            body: {
+              message: `Column "${columnName}" cannot be used as a display type.`,
+            },
+          })
+        })
       })
 
       describe("import", () => {
diff --git a/packages/server/src/api/routes/tests/viewV2.spec.ts b/packages/server/src/api/routes/tests/viewV2.spec.ts
index 244a0a23eb..6ace7e256b 100644
--- a/packages/server/src/api/routes/tests/viewV2.spec.ts
+++ b/packages/server/src/api/routes/tests/viewV2.spec.ts
@@ -55,7 +55,7 @@ if (descriptions.length) {
       let datasource: Datasource | undefined
 
       function saveTableRequest(
-        ...overrides: Partial<Omit<SaveTableRequest, "name">>[]
+        ...overrides: Partial<SaveTableRequest>[]
       ): SaveTableRequest {
         const req: SaveTableRequest = {
           name: generator.guid().replaceAll("-", "").substring(0, 16),
@@ -162,6 +162,7 @@ if (descriptions.length) {
                     visible: true,
                   },
                 },
+                rowHeight: generator.integer(),
               }
             const res = await config.api.viewV2.create(newView)
 
@@ -224,6 +225,7 @@ if (descriptions.length) {
                   visible: true,
                 },
               },
+              rowHeight: generator.integer(),
             }
             const res = await config.api.viewV2.create(newView)
             expect(events.view.created).toHaveBeenCalledTimes(1)
@@ -1069,6 +1071,7 @@ if (descriptions.length) {
                   readonly: true,
                 },
               },
+              rowHeight: generator.integer(),
             }
             await config.api.viewV2.update(updatedData)
 
@@ -1898,6 +1901,36 @@ if (descriptions.length) {
             }
             expect(view.queryUI).toEqual(expected)
           })
+
+          it("tables and views can contain whitespaces", async () => {
+            const table = await config.api.table.save(
+              saveTableRequest({
+                name: `table with spaces ${generator.hash()}`,
+                schema: {
+                  name: {
+                    type: FieldType.STRING,
+                    name: "name",
+                  },
+                },
+              })
+            )
+
+            const view = await config.api.viewV2.create({
+              tableId: table._id!,
+              name: `view name with spaces`,
+              schema: {
+                name: { visible: true },
+              },
+            })
+
+            expect(await getDelegate(view)).toEqual({
+              ...view,
+              schema: {
+                id: { ...table.schema["id"], visible: false },
+                name: { ...table.schema["name"], visible: true },
+              },
+            })
+          })
         })
 
         describe("updating table schema", () => {
diff --git a/packages/server/src/automations/steps/createRow.ts b/packages/server/src/automations/steps/createRow.ts
index 4b9010dd01..e71b1e4556 100644
--- a/packages/server/src/automations/steps/createRow.ts
+++ b/packages/server/src/automations/steps/createRow.ts
@@ -112,7 +112,7 @@ export async function run({
       response: ctx.body,
       id: ctx.body._id,
       revision: ctx.body._rev,
-      success: ctx.status === 200,
+      success: !!ctx.body._id,
     }
   } catch (err) {
     return {
diff --git a/packages/server/src/automations/steps/deleteRow.ts b/packages/server/src/automations/steps/deleteRow.ts
index c4c42d8200..8c61d256d1 100644
--- a/packages/server/src/automations/steps/deleteRow.ts
+++ b/packages/server/src/automations/steps/deleteRow.ts
@@ -94,7 +94,7 @@ export async function run({
     return {
       response: ctx.body,
       row: ctx.row,
-      success: ctx.status === 200,
+      success: ctx.body.ok,
     }
   } catch (err) {
     return {
diff --git a/packages/server/src/automations/steps/queryRows.ts b/packages/server/src/automations/steps/queryRows.ts
index dc4dda4482..93ca8a3f33 100644
--- a/packages/server/src/automations/steps/queryRows.ts
+++ b/packages/server/src/automations/steps/queryRows.ts
@@ -152,7 +152,7 @@ export async function run({
 
     return {
       rows,
-      success: ctx.status === 200,
+      success: true,
     }
   } catch (err) {
     return {
diff --git a/packages/server/src/automations/steps/updateRow.ts b/packages/server/src/automations/steps/updateRow.ts
index 65b9bf93d3..ecdbdc68c8 100644
--- a/packages/server/src/automations/steps/updateRow.ts
+++ b/packages/server/src/automations/steps/updateRow.ts
@@ -166,7 +166,7 @@ export async function run({
       response: ctx.message,
       id: ctx.body._id,
       revision: ctx.body._rev,
-      success: ctx.status === 200,
+      success: !!ctx.body._id,
     }
   } catch (err) {
     return {
diff --git a/packages/server/src/automations/tests/queryRows.spec.ts b/packages/server/src/automations/tests/queryRows.spec.ts
index 18d2e2d6cd..21e28673f3 100644
--- a/packages/server/src/automations/tests/queryRows.spec.ts
+++ b/packages/server/src/automations/tests/queryRows.spec.ts
@@ -96,7 +96,7 @@ describe("Test a query step automation", () => {
       )
       .run()
 
-    expect(result.steps[0].outputs.success).toBe(false)
+    expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
     expect(result.steps[0].outputs.rows.length).toBe(0)
   })
@@ -125,7 +125,7 @@ describe("Test a query step automation", () => {
       )
       .run()
 
-    expect(result.steps[0].outputs.success).toBe(false)
+    expect(result.steps[0].outputs.success).toBe(true)
     expect(result.steps[0].outputs.rows).toBeDefined()
     expect(result.steps[0].outputs.rows.length).toBe(0)
   })
diff --git a/packages/server/src/automations/tests/scenarios/webhook.spec.ts b/packages/server/src/automations/tests/scenarios/webhook.spec.ts
new file mode 100644
index 0000000000..cb15a96824
--- /dev/null
+++ b/packages/server/src/automations/tests/scenarios/webhook.spec.ts
@@ -0,0 +1,65 @@
+import * as automation from "../../index"
+import * as setup from "../utilities"
+import { Table, Webhook, WebhookActionType } from "@budibase/types"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import { mocks } from "@budibase/backend-core/tests"
+
+mocks.licenses.useSyncAutomations()
+
+describe("Branching automations", () => {
+  let config = setup.getConfig(),
+    table: Table,
+    webhook: Webhook
+
+  async function createWebhookAutomation(testName: string) {
+    const builder = createAutomationBuilder({
+      name: testName,
+    })
+    const automation = await builder
+      .webhook({ fields: { parameter: "string" } })
+      .createRow({
+        row: { tableId: table._id!, name: "{{ trigger.parameter }}" },
+      })
+      .collect({ collection: `{{ trigger.parameter }}` })
+      .save()
+
+    webhook = await config.api.webhook.save({
+      name: "hook",
+      live: true,
+      action: {
+        type: WebhookActionType.AUTOMATION,
+        target: automation._id!,
+      },
+      bodySchema: {},
+    })
+    await config.api.webhook.buildSchema(config.getAppId(), webhook._id!, {
+      parameter: "string",
+    })
+    await config.publish()
+    return { webhook, automation }
+  }
+
+  beforeEach(async () => {
+    await automation.init()
+    await config.init()
+    table = await config.createTable()
+  })
+
+  afterAll(setup.afterAll)
+
+  it("should run the webhook automation - checking for parameters", async () => {
+    const { webhook } = await createWebhookAutomation(
+      "Check a basic webhook works as expected"
+    )
+    const res = await config.api.webhook.trigger(
+      config.getProdAppId(),
+      webhook._id!,
+      {
+        parameter: "testing",
+      }
+    )
+    expect(typeof res).toBe("object")
+    const collectedInfo = res as Record<string, any>
+    expect(collectedInfo.value).toEqual("testing")
+  })
+})
diff --git a/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts b/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
index a3ea174da1..acc35a0eeb 100644
--- a/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
+++ b/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
@@ -1,42 +1,44 @@
 import { v4 as uuidv4 } from "uuid"
 import { testAutomation } from "../../../api/routes/tests/utilities/TestFunctions"
-import {} from "../../steps/createRow"
 import { BUILTIN_ACTION_DEFINITIONS } from "../../actions"
 import { TRIGGER_DEFINITIONS } from "../../triggers"
 import {
-  LoopStepInputs,
-  DeleteRowStepInputs,
-  UpdateRowStepInputs,
-  CreateRowStepInputs,
+  AppActionTriggerInputs,
+  AppActionTriggerOutputs,
   Automation,
-  AutomationTrigger,
-  AutomationResults,
-  SmtpEmailStepInputs,
-  ExecuteQueryStepInputs,
-  QueryRowsStepInputs,
   AutomationActionStepId,
-  AutomationTriggerStepId,
+  AutomationResults,
   AutomationStep,
+  AutomationStepInputs,
+  AutomationTrigger,
   AutomationTriggerDefinition,
-  RowDeletedTriggerInputs,
-  RowDeletedTriggerOutputs,
-  RowUpdatedTriggerOutputs,
-  RowUpdatedTriggerInputs,
+  AutomationTriggerInputs,
+  AutomationTriggerStepId,
+  BashStepInputs,
+  Branch,
+  BranchStepInputs,
+  CollectStepInputs,
+  CreateRowStepInputs,
+  CronTriggerOutputs,
+  DeleteRowStepInputs,
+  ExecuteQueryStepInputs,
+  ExecuteScriptStepInputs,
+  FilterStepInputs,
+  LoopStepInputs,
+  OpenAIStepInputs,
+  QueryRowsStepInputs,
   RowCreatedTriggerInputs,
   RowCreatedTriggerOutputs,
-  AppActionTriggerOutputs,
-  CronTriggerOutputs,
-  AppActionTriggerInputs,
-  AutomationStepInputs,
-  AutomationTriggerInputs,
-  ServerLogStepInputs,
-  BranchStepInputs,
+  RowDeletedTriggerInputs,
+  RowDeletedTriggerOutputs,
+  RowUpdatedTriggerInputs,
+  RowUpdatedTriggerOutputs,
   SearchFilters,
-  Branch,
-  FilterStepInputs,
-  ExecuteScriptStepInputs,
-  OpenAIStepInputs,
-  BashStepInputs,
+  ServerLogStepInputs,
+  SmtpEmailStepInputs,
+  UpdateRowStepInputs,
+  WebhookTriggerInputs,
+  WebhookTriggerOutputs,
 } from "@budibase/types"
 import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 import * as setup from "../utilities"
@@ -47,6 +49,7 @@ type TriggerOutputs =
   | RowUpdatedTriggerOutputs
   | RowDeletedTriggerOutputs
   | AppActionTriggerOutputs
+  | WebhookTriggerOutputs
   | CronTriggerOutputs
   | undefined
 
@@ -180,6 +183,7 @@ class BaseStepBuilder {
       opts
     )
   }
+
   loop(
     inputs: LoopStepInputs,
     opts?: { stepName?: string; stepId?: string }
@@ -247,7 +251,20 @@ class BaseStepBuilder {
       opts
     )
   }
+
+  collect(
+    input: CollectStepInputs,
+    opts?: { stepName?: string; stepId?: string }
+  ): this {
+    return this.step(
+      AutomationActionStepId.COLLECT,
+      BUILTIN_ACTION_DEFINITIONS.COLLECT,
+      input,
+      opts
+    )
+  }
 }
+
 class StepBuilder extends BaseStepBuilder {
   build(): AutomationStep[] {
     return this.steps
@@ -329,6 +346,16 @@ class AutomationBuilder extends BaseStepBuilder {
     )
   }
 
+  webhook(outputs: WebhookTriggerOutputs, inputs?: WebhookTriggerInputs) {
+    this.triggerOutputs = outputs
+    return this.trigger(
+      TRIGGER_DEFINITIONS.WEBHOOK,
+      AutomationTriggerStepId.WEBHOOK,
+      inputs,
+      outputs
+    )
+  }
+
   private trigger<TStep extends AutomationTriggerStepId>(
     triggerSchema: AutomationTriggerDefinition,
     stepId: TStep,
@@ -361,12 +388,16 @@ class AutomationBuilder extends BaseStepBuilder {
     return this.automationConfig
   }
 
-  async run() {
+  async save() {
     if (!Object.keys(this.automationConfig.definition.trigger).length) {
       throw new Error("Please add a trigger to this automation test")
     }
     this.automationConfig.definition.steps = this.steps
-    const automation = await this.config.createAutomation(this.build())
+    return await this.config.createAutomation(this.build())
+  }
+
+  async run() {
+    const automation = await this.save()
     const results = await testAutomation(
       this.config,
       automation,
diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index ed0aaaf3ec..67d2dcb911 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -181,10 +181,14 @@ export async function externalTrigger(
       coercedFields[key] = coerce(params.fields[key], fields[key])
     }
     params.fields = coercedFields
-  } else if (sdk.automations.isRowAction(automation)) {
+  }
+  // row actions and webhooks flatten the fields down
+  else if (
+    sdk.automations.isRowAction(automation) ||
+    sdk.automations.isWebhookAction(automation)
+  ) {
     params = {
       ...params,
-      // Until we don't refactor all the types, we want to flatten the nested "fields" object
       ...params.fields,
       fields: {},
     }
diff --git a/packages/server/src/db/utils.ts b/packages/server/src/db/utils.ts
index 70c69b3c60..6c1065e847 100644
--- a/packages/server/src/db/utils.ts
+++ b/packages/server/src/db/utils.ts
@@ -1,10 +1,4 @@
-import {
-  context,
-  db as dbCore,
-  docIds,
-  utils,
-  sql,
-} from "@budibase/backend-core"
+import { context, db as dbCore, docIds, utils } from "@budibase/backend-core"
 import {
   DatabaseQueryOpts,
   Datasource,
@@ -334,7 +328,7 @@ export function extractViewInfoFromID(viewId: string) {
   const regex = new RegExp(`^(?<tableId>.+)${SEPARATOR}([^${SEPARATOR}]+)$`)
   const res = regex.exec(viewId)
   return {
-    tableId: sql.utils.encodeTableId(res!.groups!["tableId"]),
+    tableId: res!.groups!["tableId"],
   }
 }
 
diff --git a/packages/server/src/integrations/firebase.ts b/packages/server/src/integrations/firebase.ts
index 3f03f295a9..f96817616d 100644
--- a/packages/server/src/integrations/firebase.ts
+++ b/packages/server/src/integrations/firebase.ts
@@ -12,6 +12,7 @@ interface FirebaseConfig {
   email: string
   privateKey: string
   projectId: string
+  databaseId?: string
 }
 
 const SCHEMA: Integration = {
@@ -30,12 +31,21 @@ const SCHEMA: Integration = {
     },
     privateKey: {
       type: DatasourceFieldType.STRING,
+      display: "Private Key",
       required: true,
     },
     projectId: {
       type: DatasourceFieldType.STRING,
+      display: "Project ID",
       required: true,
     },
+    databaseId: {
+      type: DatasourceFieldType.STRING,
+      display: "Database ID",
+      required: false,
+      default: "(default)",
+      placeholder: "(default)",
+    },
   },
   query: {
     create: {
@@ -97,6 +107,7 @@ class FirebaseIntegration implements IntegrationBase {
     this.config = config
     this.client = new Firestore({
       projectId: config.projectId,
+      databaseId: config.databaseId || "(default)",
       credentials: {
         client_email: config.email,
         private_key: config.privateKey?.replace(/\\n/g, "\n"),
diff --git a/packages/server/src/sdk/app/backups/imports.ts b/packages/server/src/sdk/app/backups/imports.ts
index 3ec0e8833b..85f5b030bd 100644
--- a/packages/server/src/sdk/app/backups/imports.ts
+++ b/packages/server/src/sdk/app/backups/imports.ts
@@ -187,6 +187,20 @@ export async function importApp(
       await decryptFiles(tmpPath, template.file.password)
     }
     const contents = await fsp.readdir(tmpPath)
+    const stillEncrypted = !!contents.find(name => name.endsWith(".enc"))
+    if (stillEncrypted) {
+      throw new Error("Files are encrypted but no password has been supplied.")
+    }
+    const isPlugin = !!contents.find(name => name === "plugin.min.js")
+    if (isPlugin) {
+      throw new Error("Supplied file is a plugin - cannot import as app.")
+    }
+    const isInvalid = !contents.find(name => name === DB_EXPORT_FILE)
+    if (isInvalid) {
+      throw new Error(
+        "App export does not appear to be valid - no DB file found."
+      )
+    }
     // have to handle object import
     if (contents.length && opts.importObjStoreContents) {
       let promises = []
diff --git a/packages/server/src/sdk/app/views/index.ts b/packages/server/src/sdk/app/views/index.ts
index f483ebc0bc..7fc78b9085 100644
--- a/packages/server/src/sdk/app/views/index.ts
+++ b/packages/server/src/sdk/app/views/index.ts
@@ -324,8 +324,8 @@ export async function update(
   return pickApi(tableId).update(tableId, view)
 }
 
-export function isV2(view: View | ViewV2): view is ViewV2 {
-  return (view as ViewV2).version === 2
+export function isV2(view: View | ViewV2) {
+  return helpers.views.isV2(view)
 }
 
 export async function remove(viewId: string): Promise<ViewV2> {
diff --git a/packages/server/src/tests/utilities/api/application.ts b/packages/server/src/tests/utilities/api/application.ts
index 9dabc8cfe8..1fe9840c1d 100644
--- a/packages/server/src/tests/utilities/api/application.ts
+++ b/packages/server/src/tests/utilities/api/application.ts
@@ -48,7 +48,7 @@ export class ApplicationAPI extends TestAPI {
 
   unpublish = async (appId: string): Promise<void> => {
     await this._post(`/api/applications/${appId}/unpublish`, {
-      expectations: { status: 204 },
+      expectations: { status: 200 },
     })
   }
 
diff --git a/packages/server/src/tests/utilities/api/index.ts b/packages/server/src/tests/utilities/api/index.ts
index 79514d4ece..c5eede18d6 100644
--- a/packages/server/src/tests/utilities/api/index.ts
+++ b/packages/server/src/tests/utilities/api/index.ts
@@ -16,6 +16,7 @@ import { TemplateAPI } from "./template"
 import { RowActionAPI } from "./rowAction"
 import { AutomationAPI } from "./automation"
 import { PluginAPI } from "./plugin"
+import { WebhookAPI } from "./webhook"
 
 export default class API {
   table: TableAPI
@@ -35,6 +36,7 @@ export default class API {
   rowAction: RowActionAPI
   automation: AutomationAPI
   plugin: PluginAPI
+  webhook: WebhookAPI
 
   constructor(config: TestConfiguration) {
     this.table = new TableAPI(config)
@@ -54,5 +56,6 @@ export default class API {
     this.rowAction = new RowActionAPI(config)
     this.automation = new AutomationAPI(config)
     this.plugin = new PluginAPI(config)
+    this.webhook = new WebhookAPI(config)
   }
 }
diff --git a/packages/server/src/tests/utilities/api/viewV2.ts b/packages/server/src/tests/utilities/api/viewV2.ts
index 7cc57673a0..d0350a5521 100644
--- a/packages/server/src/tests/utilities/api/viewV2.ts
+++ b/packages/server/src/tests/utilities/api/viewV2.ts
@@ -46,8 +46,11 @@ export class ViewV2API extends TestAPI {
   }
 
   get = async (viewId: string) => {
-    return (await this._get<ViewResponseEnriched>(`/api/v2/views/${viewId}`))
-      .data
+    return (
+      await this._get<ViewResponseEnriched>(
+        `/api/v2/views/${encodeURIComponent(viewId)}`
+      )
+    ).data
   }
 
   fetch = async (expectations?: Expectations) => {
diff --git a/packages/server/src/tests/utilities/api/webhook.ts b/packages/server/src/tests/utilities/api/webhook.ts
new file mode 100644
index 0000000000..be1ff6aa4c
--- /dev/null
+++ b/packages/server/src/tests/utilities/api/webhook.ts
@@ -0,0 +1,58 @@
+import { Expectations, TestAPI } from "./base"
+import {
+  BuildWebhookSchemaResponse,
+  SaveWebhookResponse,
+  TriggerWebhookResponse,
+  Webhook,
+} from "@budibase/types"
+
+export class WebhookAPI extends TestAPI {
+  save = async (webhook: Webhook, expectations?: Expectations) => {
+    const resp = await this._put<SaveWebhookResponse>("/api/webhooks", {
+      body: webhook,
+      expectations: {
+        status: 200,
+        ...expectations,
+      },
+    })
+    return resp.webhook
+  }
+
+  buildSchema = async (
+    appId: string,
+    webhookId: string,
+    fields: Record<string, any>,
+    expectations?: Expectations
+  ) => {
+    const resp = await this._post<BuildWebhookSchemaResponse>(
+      `/api/webhooks/schema/${appId}/${webhookId}`,
+      {
+        body: fields,
+        expectations: {
+          status: 200,
+          ...expectations,
+        },
+      }
+    )
+    return resp.id
+  }
+
+  trigger = async (
+    appId: string,
+    webhookId: string,
+    fields: Record<string, any>,
+    expectations?: Expectations
+  ) => {
+    const resp = await this._post<TriggerWebhookResponse>(
+      `/api/webhooks/trigger/${appId}/${webhookId}`,
+      {
+        body: fields,
+        expectations: {
+          status: 200,
+          ...expectations,
+        },
+      }
+    )
+    return resp
+  }
+}
diff --git a/packages/server/src/tests/utilities/structures.ts b/packages/server/src/tests/utilities/structures.ts
index 33e6e407dc..3058a706c1 100644
--- a/packages/server/src/tests/utilities/structures.ts
+++ b/packages/server/src/tests/utilities/structures.ts
@@ -456,7 +456,7 @@ export function filterAutomation(appId: string, tableId?: string): Automation {
         icon: "Icon",
         id: "a",
         type: AutomationStepType.TRIGGER,
-        event: "row:save",
+        event: AutomationEventType.ROW_SAVE,
         stepId: AutomationTriggerStepId.ROW_SAVED,
         inputs: {
           tableId: tableId!,
@@ -498,7 +498,7 @@ export function updateRowAutomationWithFilters(
         icon: "Icon",
         id: "a",
         type: AutomationStepType.TRIGGER,
-        event: "row:update",
+        event: AutomationEventType.ROW_UPDATE,
         stepId: AutomationTriggerStepId.ROW_UPDATED,
         inputs: { tableId },
         schema: TRIGGER_DEFINITIONS.ROW_UPDATED.schema,
@@ -513,7 +513,7 @@ export function basicAutomationResults(
   return {
     automationId,
     status: AutomationStatus.SUCCESS,
-    trigger: "trigger",
+    trigger: "trigger" as any,
     steps: [
       {
         stepId: AutomationActionStepId.SERVER_LOG,
diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts
index 661d47cb6d..205c2896a3 100644
--- a/packages/server/src/websockets/grid.ts
+++ b/packages/server/src/websockets/grid.ts
@@ -1,7 +1,7 @@
 import authorized from "../middleware/authorized"
 import currentApp from "../middleware/currentapp"
 import { BaseSocket } from "./websocket"
-import { auth, permissions } from "@budibase/backend-core"
+import { auth, permissions, context } from "@budibase/backend-core"
 import http from "http"
 import Koa from "koa"
 import { getSourceId } from "../api/controllers/row/utils"
@@ -10,6 +10,12 @@ import { Socket } from "socket.io"
 import { GridSocketEvent } from "@budibase/shared-core"
 import { userAgent } from "koa-useragent"
 import { createContext, runMiddlewares } from "./middleware"
+import sdk from "../sdk"
+import {
+  findHBSBlocks,
+  isJSBinding,
+  decodeJSBinding,
+} from "@budibase/string-templates"
 
 const { PermissionType, PermissionLevel } = permissions
 
@@ -18,15 +24,46 @@ export default class GridSocket extends BaseSocket {
     super(app, server, "/socket/grid")
   }
 
+  // Checks if a view's query contains any current user bindings
+  containsCurrentUserBinding(view: ViewV2): boolean {
+    return findHBSBlocks(JSON.stringify(view.query))
+      .map(binding => {
+        const sanitizedBinding = binding.replace(/\\"/g, '"')
+        if (isJSBinding(sanitizedBinding)) {
+          return decodeJSBinding(sanitizedBinding)
+        } else {
+          return sanitizedBinding
+        }
+      })
+      .some(binding => binding?.includes("[user]"))
+  }
+
   async onConnect(socket: Socket) {
     // Initial identification of connected spreadsheet
     socket.on(GridSocketEvent.SelectDatasource, async (payload, callback) => {
       const ds = payload.datasource
       const appId = payload.appId
       const resourceId = ds?.type === "table" ? ds?.tableId : ds?.id
+      let valid = true
 
-      // Ignore if no table or app specified
+      // Validate datasource
       if (!resourceId || !appId) {
+        // Ignore if no table or app specified
+        valid = false
+      } else if (ds.type === "viewV2") {
+        // If this is a view filtered by current user, don't sync changes
+        try {
+          await context.doInAppContext(appId, async () => {
+            const view = await sdk.views.get(ds.id)
+            if (this.containsCurrentUserBinding(view)) {
+              valid = false
+            }
+          })
+        } catch (err) {
+          valid = false
+        }
+      }
+      if (!valid) {
         socket.disconnect(true)
         return
       }
diff --git a/packages/shared-core/src/helpers/views.ts b/packages/shared-core/src/helpers/views.ts
index f0407eeec9..106f8cb6eb 100644
--- a/packages/shared-core/src/helpers/views.ts
+++ b/packages/shared-core/src/helpers/views.ts
@@ -1,5 +1,6 @@
 import {
   BasicViewFieldMetadata,
+  View,
   ViewCalculationFieldMetadata,
   ViewFieldMetadata,
   ViewV2,
@@ -43,3 +44,7 @@ export function basicFields(view: UnsavedViewV2, opts?: { visible?: boolean }) {
     return !isCalculationField(field) && (!visible || isVisible(field))
   })
 }
+
+export function isV2(view: View | ViewV2): view is ViewV2 {
+  return (view as ViewV2).version === 2
+}
diff --git a/packages/shared-core/src/sdk/documents/automations.ts b/packages/shared-core/src/sdk/documents/automations.ts
index 86cbee75f7..9fe69677fd 100644
--- a/packages/shared-core/src/sdk/documents/automations.ts
+++ b/packages/shared-core/src/sdk/documents/automations.ts
@@ -1,13 +1,17 @@
 import { Automation, AutomationTriggerStepId } from "@budibase/types"
 
 export function isRowAction(automation: Automation) {
-  const result =
+  return (
     automation.definition.trigger?.stepId === AutomationTriggerStepId.ROW_ACTION
-  return result
+  )
+}
+
+export function isWebhookAction(automation: Automation) {
+  return (
+    automation.definition.trigger?.stepId === AutomationTriggerStepId.WEBHOOK
+  )
 }
 
 export function isAppAction(automation: Automation) {
-  const result =
-    automation.definition.trigger?.stepId === AutomationTriggerStepId.APP
-  return result
+  return automation.definition.trigger?.stepId === AutomationTriggerStepId.APP
 }
diff --git a/packages/shared-core/src/table.ts b/packages/shared-core/src/table.ts
index 5402439d9c..070ee6c760 100644
--- a/packages/shared-core/src/table.ts
+++ b/packages/shared-core/src/table.ts
@@ -12,8 +12,8 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
   [FieldType.AUTO]: true,
   [FieldType.INTERNAL]: true,
   [FieldType.BARCODEQR]: true,
-
   [FieldType.BIGINT]: true,
+
   [FieldType.BOOLEAN]: false,
   [FieldType.ARRAY]: false,
   [FieldType.ATTACHMENTS]: false,
diff --git a/packages/types/package.json b/packages/types/package.json
index 9be5c8460b..ee3c059bc9 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -15,11 +15,12 @@
   "jest": {},
   "devDependencies": {
     "@budibase/nano": "10.1.5",
+    "@types/json-schema": "^7.0.15",
     "@types/koa": "2.13.4",
     "@types/redlock": "4.0.7",
+    "koa-useragent": "^4.1.0",
     "rimraf": "3.0.2",
     "typescript": "5.7.2",
-    "koa-useragent": "^4.1.0",
     "zod": "^3.23.8"
   },
   "dependencies": {
diff --git a/packages/types/src/api/web/analytics.ts b/packages/types/src/api/web/analytics.ts
index 2585964f94..3195da5df4 100644
--- a/packages/types/src/api/web/analytics.ts
+++ b/packages/types/src/api/web/analytics.ts
@@ -12,3 +12,7 @@ export interface AnalyticsPingRequest {
   timezone: string
   embedded?: boolean
 }
+export interface AnalyticsPingResponse {
+  message: string
+  source?: PingSource
+}
diff --git a/packages/types/src/api/web/app/application.ts b/packages/types/src/api/web/app/application.ts
index bc00ade217..a0f53a6ba4 100644
--- a/packages/types/src/api/web/app/application.ts
+++ b/packages/types/src/api/web/app/application.ts
@@ -44,6 +44,10 @@ export interface FetchAppPackageResponse {
   hasLock: boolean
 }
 
+export interface AddAppSampleDataResponse {
+  message: string
+}
+
 export type FetchAppsResponse = App[]
 
 export interface PublishResponse {
@@ -61,6 +65,10 @@ export interface DeleteAppResponse {
   ok: boolean
 }
 
+export interface UnpublishAppResponse {
+  message: string
+}
+
 export interface ImportToUpdateAppRequest {
   encryptionPassword?: string
 }
@@ -71,6 +79,9 @@ export interface ImportToUpdateAppResponse {
 export interface SetRevertableAppVersionRequest {
   revertableVersion: string
 }
+export interface SetRevertableAppVersionResponse {
+  message: string
+}
 
 export interface ExportAppDumpRequest {
   excludeRows: boolean
diff --git a/packages/types/src/api/web/app/datasource.ts b/packages/types/src/api/web/app/datasource.ts
index 6f982d7060..77c47c02d6 100644
--- a/packages/types/src/api/web/app/datasource.ts
+++ b/packages/types/src/api/web/app/datasource.ts
@@ -12,7 +12,7 @@ export interface UpdateDatasourceResponse {
 export interface CreateDatasourceRequest {
   datasource: Datasource
   fetchSchema?: boolean
-  tablesFilter: string[]
+  tablesFilter?: string[]
 }
 
 export interface VerifyDatasourceRequest {
diff --git a/packages/types/src/api/web/app/permission.ts b/packages/types/src/api/web/app/permission.ts
index 407dc2be86..b449516eed 100644
--- a/packages/types/src/api/web/app/permission.ts
+++ b/packages/types/src/api/web/app/permission.ts
@@ -29,7 +29,9 @@ export interface AddedPermission {
   reason?: string
 }
 
-export interface AddPermissionResponse {}
+export interface AddPermissionResponse {
+  message: string
+}
 
 export interface AddPermissionRequest {
   roleId: string
@@ -38,4 +40,6 @@ export interface AddPermissionRequest {
 }
 
 export interface RemovePermissionRequest extends AddPermissionRequest {}
-export interface RemovePermissionResponse {}
+export interface RemovePermissionResponse {
+  message: string
+}
diff --git a/packages/types/src/api/web/app/rowAction.ts b/packages/types/src/api/web/app/rowAction.ts
index 84e4e529ed..b4ff5538b5 100644
--- a/packages/types/src/api/web/app/rowAction.ts
+++ b/packages/types/src/api/web/app/rowAction.ts
@@ -21,6 +21,9 @@ export interface RowActionsResponse {
 export interface RowActionTriggerRequest {
   rowId: string
 }
+export interface RowActionTriggerResponse {
+  message: string
+}
 
 export interface RowActionPermissionsResponse
   extends RowActionPermissionsData {}
diff --git a/packages/types/src/api/web/auth.ts b/packages/types/src/api/web/auth.ts
index 0964d71576..5ef6169086 100644
--- a/packages/types/src/api/web/auth.ts
+++ b/packages/types/src/api/web/auth.ts
@@ -2,12 +2,19 @@ export interface LoginRequest {
   username: string
   password: string
 }
+export interface LoginResponse {
+  message: string
+  userId?: string
+}
 
 export interface LogoutResponse {
   message: string
 }
 
 export interface SetInitInfoRequest extends Record<string, any> {}
+export interface SetInitInfoResponse {
+  message: string
+}
 
 export interface GetInitInfoResponse extends Record<string, any> {}
 
diff --git a/packages/types/src/api/web/global/environmentVariables.ts b/packages/types/src/api/web/global/environmentVariables.ts
index 6f339eb821..b9399e246b 100644
--- a/packages/types/src/api/web/global/environmentVariables.ts
+++ b/packages/types/src/api/web/global/environmentVariables.ts
@@ -7,12 +7,22 @@ export interface CreateEnvironmentVariableRequest {
   production: string
   development: string
 }
+export interface CreateEnvironmentVariableResponse {
+  message: string
+}
 
 export interface UpdateEnvironmentVariableRequest {
   production: string
   development: string
 }
+export interface UpdateEnvironmentVariableResponse {
+  message: string
+}
 
 export interface GetEnvironmentVariablesResponse {
   variables: string[]
 }
+
+export interface DeleteEnvironmentVariablesResponse {
+  message: string
+}
diff --git a/packages/types/src/api/web/global/events.ts b/packages/types/src/api/web/global/events.ts
index 907cfc74aa..e55808bd32 100644
--- a/packages/types/src/api/web/global/events.ts
+++ b/packages/types/src/api/web/global/events.ts
@@ -5,3 +5,6 @@ export enum EventPublishType {
 export interface PostEventPublishRequest {
   type: EventPublishType
 }
+export interface PostEventPublishResponse {
+  message: string
+}
diff --git a/packages/types/src/api/web/global/license.ts b/packages/types/src/api/web/global/license.ts
index 344ab829c2..d108880f93 100644
--- a/packages/types/src/api/web/global/license.ts
+++ b/packages/types/src/api/web/global/license.ts
@@ -5,6 +5,9 @@ import { QuotaUsage } from "../../../documents"
 export interface ActivateLicenseKeyRequest {
   licenseKey: string
 }
+export interface ActivateLicenseKeyResponse {
+  message: string
+}
 
 export interface GetLicenseKeyResponse {
   licenseKey: string
@@ -15,11 +18,20 @@ export interface GetLicenseKeyResponse {
 export interface ActivateOfflineLicenseTokenRequest {
   offlineLicenseToken: string
 }
+export interface ActivateOfflineLicenseTokenResponse {
+  message: string
+}
 
 export interface GetOfflineLicenseTokenResponse {
   offlineLicenseToken: string
 }
 
+// REFRESH
+
+export interface RefreshOfflineLicenseResponse {
+  message: string
+}
+
 // IDENTIFIER
 
 export interface GetOfflineIdentifierResponse {
diff --git a/packages/types/src/api/web/global/oldMigration.ts b/packages/types/src/api/web/global/oldMigration.ts
index 4b8ce9cc8d..812ee1e593 100644
--- a/packages/types/src/api/web/global/oldMigration.ts
+++ b/packages/types/src/api/web/global/oldMigration.ts
@@ -1,6 +1,9 @@
 import { Migration, MigrationOptions } from "../../../sdk"
 
 export interface RunOldMigrationRequest extends MigrationOptions {}
+export interface RuneOldMigrationResponse {
+  message: string
+}
 
 export type FetchOldMigrationResponse = Migration[]
 
diff --git a/packages/types/src/api/web/system/migration.ts b/packages/types/src/api/web/system/migration.ts
index f9f6eac48a..a18112744c 100644
--- a/packages/types/src/api/web/system/migration.ts
+++ b/packages/types/src/api/web/system/migration.ts
@@ -1,5 +1,8 @@
 import { MigrationDefinition, MigrationOptions } from "../../../sdk"
 
 export interface RunGlobalMigrationRequest extends MigrationOptions {}
+export interface RunGlobalMigrationResponse {
+  message: string
+}
 
 export type FetchMigrationDefinitionsResponse = MigrationDefinition[]
diff --git a/packages/types/src/api/web/user.ts b/packages/types/src/api/web/user.ts
index 2f83f012b3..a42449d550 100644
--- a/packages/types/src/api/web/user.ts
+++ b/packages/types/src/api/web/user.ts
@@ -110,6 +110,9 @@ export interface AddSSoUserRequest {
   ssoId: string
   email: string
 }
+export interface AddSSoUserResponse {
+  message: string
+}
 
 export interface CreateAdminUserResponse {
   _id: string
diff --git a/packages/types/src/documents/app/automation/StepInputsOutputs.ts b/packages/types/src/documents/app/automation/StepInputsOutputs.ts
index b2f679edee..6f7223300d 100644
--- a/packages/types/src/documents/app/automation/StepInputsOutputs.ts
+++ b/packages/types/src/documents/app/automation/StepInputsOutputs.ts
@@ -150,6 +150,7 @@ export type OpenAIStepInputs = {
   prompt: string
   model: Model
 }
+
 export enum Model {
   GPT_35_TURBO = "gpt-3.5-turbo",
   // will only work with api keys that have access to the GPT4 API
@@ -296,3 +297,12 @@ export type RowUpdatedTriggerOutputs = {
   id: string
   revision?: string
 }
+
+export type WebhookTriggerInputs = {
+  schemaUrl: string
+  triggerUrl: string
+}
+
+export type WebhookTriggerOutputs = {
+  fields: Record<string, any>
+}
diff --git a/packages/types/src/documents/app/automation/automation.ts b/packages/types/src/documents/app/automation/automation.ts
index 71530c7939..d56f0de879 100644
--- a/packages/types/src/documents/app/automation/automation.ts
+++ b/packages/types/src/documents/app/automation/automation.ts
@@ -148,6 +148,7 @@ export interface Automation extends Document {
 
 interface BaseIOStructure {
   type?: AutomationIOType
+  subtype?: AutomationIOType
   customType?: AutomationCustomIOType
   title?: string
   description?: string
@@ -192,7 +193,7 @@ export enum AutomationStoppedReason {
 export interface AutomationResults {
   automationId?: string
   status?: AutomationStatus
-  trigger?: any
+  trigger?: AutomationTrigger
   steps: {
     stepId: AutomationTriggerStepId | AutomationActionStepId
     inputs: {
diff --git a/packages/types/src/documents/app/automation/schema.ts b/packages/types/src/documents/app/automation/schema.ts
index efdf60a4e2..84bfebf6bf 100644
--- a/packages/types/src/documents/app/automation/schema.ts
+++ b/packages/types/src/documents/app/automation/schema.ts
@@ -6,6 +6,7 @@ import {
   AutomationFeature,
   InputOutputBlock,
   AutomationTriggerStepId,
+  AutomationEventType,
 } from "./automation"
 import {
   CollectStepInputs,
@@ -142,6 +143,7 @@ export type ActionImplementations<T extends Hosting> = {
 export interface AutomationStepSchemaBase {
   name: string
   stepTitle?: string
+  event?: AutomationEventType
   tagline: string
   icon: string
   description: string
@@ -344,7 +346,7 @@ export interface AutomationTriggerSchema<
 > extends AutomationStepSchemaBase {
   id: string
   type: AutomationStepType.TRIGGER
-  event?: string
+  event?: AutomationEventType
   cronJobId?: string
   stepId: TTrigger
   inputs: AutomationTriggerInputs<TTrigger> & Record<string, any> // The record union to be removed once the types are fixed
diff --git a/packages/types/src/documents/app/view.ts b/packages/types/src/documents/app/view.ts
index 1170284b15..fd97cee409 100644
--- a/packages/types/src/documents/app/view.ts
+++ b/packages/types/src/documents/app/view.ts
@@ -99,6 +99,7 @@ export interface ViewV2 {
     type?: SortType
   }
   schema?: ViewV2Schema
+  rowHeight?: number
 }
 
 export interface PublicAPIView extends Omit<ViewV2, "query" | "queryUI"> {
diff --git a/packages/types/src/documents/app/webhook.ts b/packages/types/src/documents/app/webhook.ts
index 1ced8627af..bfec8a9744 100644
--- a/packages/types/src/documents/app/webhook.ts
+++ b/packages/types/src/documents/app/webhook.ts
@@ -1,4 +1,5 @@
 import { Document } from "../document"
+import { JSONSchema7 } from "json-schema"
 
 export enum WebhookActionType {
   AUTOMATION = "automation",
@@ -11,5 +12,5 @@ export interface Webhook extends Document {
     type: WebhookActionType
     target: string
   }
-  bodySchema?: any
+  bodySchema?: JSONSchema7
 }
diff --git a/packages/types/src/documents/global/user.ts b/packages/types/src/documents/global/user.ts
index 529223e88d..1008cd59fe 100644
--- a/packages/types/src/documents/global/user.ts
+++ b/packages/types/src/documents/global/user.ts
@@ -70,6 +70,8 @@ export interface User extends Document {
   appFavourites?: string[]
   ssoId?: string
   appSort?: string
+  budibaseAccess?: boolean
+  accountPortalAccess?: boolean
 }
 
 export interface UserBindings extends Document {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index a0932829cf..264daa70ad 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -3,3 +3,4 @@ export * from "./sdk"
 export * from "./api"
 export * from "./core"
 export * from "./shared"
+export * from "./ui"
diff --git a/packages/types/src/sdk/datasources.ts b/packages/types/src/sdk/datasources.ts
index 8b0574bd7c..1f2a4d2127 100644
--- a/packages/types/src/sdk/datasources.ts
+++ b/packages/types/src/sdk/datasources.ts
@@ -119,6 +119,7 @@ interface DatasourceBasicFieldConfig {
   default?: any
   deprecated?: boolean
   hidden?: string
+  placeholder?: string
 }
 
 interface DatasourceSelectFieldConfig extends DatasourceBasicFieldConfig {
diff --git a/packages/types/src/ui/index.ts b/packages/types/src/ui/index.ts
new file mode 100644
index 0000000000..766d5b3652
--- /dev/null
+++ b/packages/types/src/ui/index.ts
@@ -0,0 +1 @@
+export * from "./stores"
diff --git a/packages/types/src/ui/stores/automations.ts b/packages/types/src/ui/stores/automations.ts
new file mode 100644
index 0000000000..7e85ceee38
--- /dev/null
+++ b/packages/types/src/ui/stores/automations.ts
@@ -0,0 +1,12 @@
+export interface BranchPath {
+  stepIdx: number
+  branchIdx: number
+  branchStepId: string
+  id: string
+}
+
+export interface BlockDefinitions {
+  TRIGGER: Record<string, any>
+  CREATABLE_TRIGGER: Record<string, any>
+  ACTION: Record<string, any>
+}
diff --git a/packages/types/src/ui/stores/grid/columns.ts b/packages/types/src/ui/stores/grid/columns.ts
new file mode 100644
index 0000000000..7f20145246
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/columns.ts
@@ -0,0 +1,22 @@
+import { CalculationType, FieldSchema, FieldType } from "@budibase/types"
+
+export type UIColumn = FieldSchema & {
+  label: string
+  readonly: boolean
+  conditions: any
+  related?: {
+    field: string
+    subField: string
+  }
+  primaryDisplay?: boolean
+  schema: {
+    disabled: boolean
+    type: FieldType
+    readonly: boolean
+    autocolumn: boolean
+  }
+  calculationType: CalculationType
+  __idx: number
+  __left: number
+  width: number
+}
diff --git a/packages/types/src/ui/stores/grid/condition.ts b/packages/types/src/ui/stores/grid/condition.ts
new file mode 100644
index 0000000000..dfd9ee867c
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/condition.ts
@@ -0,0 +1,11 @@
+import { FieldType, SearchFilter } from "@budibase/types"
+
+export interface UICondition {
+  column: string
+  type: FieldType
+  referenceValue: string
+  operator: SearchFilter["operator"]
+  metadataKey: string
+  metadataValue: string
+  target: string
+}
diff --git a/packages/types/src/ui/stores/grid/datasource.ts b/packages/types/src/ui/stores/grid/datasource.ts
new file mode 100644
index 0000000000..9533bbb8f0
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/datasource.ts
@@ -0,0 +1,12 @@
+import { UITable, UIView } from "@budibase/types"
+
+export type UIDatasource = (UITable | UIView) & {
+  type: string
+}
+
+export interface UIFieldMutation {
+  visible?: boolean
+  readonly?: boolean
+  width?: number
+  order?: number
+}
diff --git a/packages/types/src/ui/stores/grid/fetch.ts b/packages/types/src/ui/stores/grid/fetch.ts
new file mode 100644
index 0000000000..8901acc08b
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/fetch.ts
@@ -0,0 +1,38 @@
+import {
+  Row,
+  SortOrder,
+  UIDatasource,
+  UILegacyFilter,
+  UISearchFilter,
+} from "@budibase/types"
+
+export interface UIFetchAPI {
+  definition: UIDatasource
+
+  getInitialData: () => Promise<void>
+  loading: any
+  loaded: boolean
+
+  resetKey: string | null
+  error: any
+
+  hasNextPage: boolean
+  nextPage: () => Promise<void>
+
+  rows: Row[]
+
+  options?: {
+    datasource?: {
+      tableId: string
+      id: string
+    }
+  }
+  update: ({
+    sortOrder,
+    sortColumn,
+  }: {
+    sortOrder?: SortOrder
+    sortColumn?: string
+    filter?: UILegacyFilter[] | UISearchFilter
+  }) => any
+}
diff --git a/packages/types/src/ui/stores/grid/filters.ts b/packages/types/src/ui/stores/grid/filters.ts
new file mode 100644
index 0000000000..d75f32370c
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/filters.ts
@@ -0,0 +1,5 @@
+import { LegacyFilter } from "@budibase/types"
+
+export type UILegacyFilter = LegacyFilter & {
+  id: string
+}
diff --git a/packages/types/src/ui/stores/grid/index.ts b/packages/types/src/ui/stores/grid/index.ts
new file mode 100644
index 0000000000..f419134452
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/index.ts
@@ -0,0 +1,9 @@
+export * from "./columns"
+export * from "./condition"
+export * from "./datasource"
+export * from "./table"
+export * from "./view"
+export * from "./user"
+export * from "./filters"
+export * from "./rows"
+export * from "./fetch"
diff --git a/packages/types/src/ui/stores/grid/rows.ts b/packages/types/src/ui/stores/grid/rows.ts
new file mode 100644
index 0000000000..accb104a1a
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/rows.ts
@@ -0,0 +1,5 @@
+import { Row } from "@budibase/types"
+
+export type UIRow = Row & {
+  _id: string
+}
diff --git a/packages/types/src/ui/stores/grid/table.ts b/packages/types/src/ui/stores/grid/table.ts
new file mode 100644
index 0000000000..e69f9fd38f
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/table.ts
@@ -0,0 +1,35 @@
+import {
+  BasicViewFieldMetadata,
+  FieldSchema,
+  FieldType,
+  RelationSchemaField,
+  SortOrder,
+  Table,
+  UISearchFilter,
+} from "@budibase/types"
+
+export interface UITable extends Omit<Table, "type"> {
+  name: string
+  id: string
+  type: string
+  tableId: string
+  primaryDisplay?: string
+  sort?: {
+    field: string
+    order: SortOrder
+  }
+  queryUI: UISearchFilter
+  schema: Record<string, UIFieldSchema>
+}
+
+export type UIFieldSchema = FieldSchema &
+  BasicViewFieldMetadata & {
+    related?: { field: string; subField: string }
+    columns?: Record<string, UIRelationSchemaField>
+    cellRenderType?: string
+    disabled?: boolean
+  }
+
+interface UIRelationSchemaField extends RelationSchemaField {
+  type: FieldType
+}
diff --git a/packages/types/src/ui/stores/grid/user.ts b/packages/types/src/ui/stores/grid/user.ts
new file mode 100644
index 0000000000..b6eb529805
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/user.ts
@@ -0,0 +1,6 @@
+import { User } from "@budibase/types"
+
+export interface UIUser extends User {
+  sessionId: string
+  gridMetadata?: { focusedCellId?: string }
+}
diff --git a/packages/types/src/ui/stores/grid/view.ts b/packages/types/src/ui/stores/grid/view.ts
new file mode 100644
index 0000000000..f81cc34aaf
--- /dev/null
+++ b/packages/types/src/ui/stores/grid/view.ts
@@ -0,0 +1,6 @@
+import { ViewV2 } from "@budibase/types"
+import { UIFieldSchema } from "./table"
+
+export interface UIView extends ViewV2 {
+  schema: Record<string, UIFieldSchema>
+}
diff --git a/packages/types/src/ui/stores/index.ts b/packages/types/src/ui/stores/index.ts
new file mode 100644
index 0000000000..8dae68862e
--- /dev/null
+++ b/packages/types/src/ui/stores/index.ts
@@ -0,0 +1,3 @@
+export * from "./integration"
+export * from "./automations"
+export * from "./grid"
diff --git a/packages/types/src/ui/stores/integration.ts b/packages/types/src/ui/stores/integration.ts
new file mode 100644
index 0000000000..4580fd00b1
--- /dev/null
+++ b/packages/types/src/ui/stores/integration.ts
@@ -0,0 +1,5 @@
+import { Integration } from "@budibase/types"
+
+export interface UIIntegration extends Integration {
+  name: string
+}
diff --git a/packages/worker/src/api/controllers/global/auth.ts b/packages/worker/src/api/controllers/global/auth.ts
index 1e6b0d3aab..0d49515700 100644
--- a/packages/worker/src/api/controllers/global/auth.ts
+++ b/packages/worker/src/api/controllers/global/auth.ts
@@ -22,6 +22,8 @@ import {
   GetInitInfoResponse,
   PasswordResetResponse,
   PasswordResetUpdateResponse,
+  SetInitInfoResponse,
+  LoginResponse,
 } from "@budibase/types"
 import env from "../../../environment"
 import { Next } from "koa"
@@ -59,7 +61,10 @@ async function passportCallback(
   ctx.set(Header.TOKEN, token)
 }
 
-export const login = async (ctx: Ctx<LoginRequest, void>, next: Next) => {
+export const login = async (
+  ctx: Ctx<LoginRequest, LoginResponse>,
+  next: Next
+) => {
   const email = ctx.request.body.username
 
   const user = await userSdk.db.getUserByEmail(email)
@@ -74,7 +79,10 @@ export const login = async (ctx: Ctx<LoginRequest, void>, next: Next) => {
       await context.identity.doInUserContext(user, ctx, async () => {
         await events.auth.login("local", user.email)
       })
-      ctx.status = 200
+      ctx.body = {
+        message: "Login successful",
+        userId: user.userId,
+      }
     }
   )(ctx, next)
 }
@@ -88,10 +96,14 @@ export const logout = async (ctx: UserCtx<void, LogoutResponse>) => {
 
 // INIT
 
-export const setInitInfo = (ctx: UserCtx<SetInitInfoRequest, void>) => {
+export const setInitInfo = (
+  ctx: UserCtx<SetInitInfoRequest, SetInitInfoResponse>
+) => {
   const initInfo = ctx.request.body
   setCookie(ctx, initInfo, Cookie.Init)
-  ctx.status = 200
+  ctx.body = {
+    message: "Init info updated.",
+  }
 }
 
 export const getInitInfo = (ctx: UserCtx<void, GetInitInfoResponse>) => {
diff --git a/packages/worker/src/api/controllers/global/events.ts b/packages/worker/src/api/controllers/global/events.ts
index 758fb41b54..3d7ff4c29e 100644
--- a/packages/worker/src/api/controllers/global/events.ts
+++ b/packages/worker/src/api/controllers/global/events.ts
@@ -2,10 +2,13 @@ import {
   UserCtx,
   PostEventPublishRequest,
   EventPublishType,
+  PostEventPublishResponse,
 } from "@budibase/types"
 import { events } from "@budibase/backend-core"
 
-export async function publish(ctx: UserCtx<PostEventPublishRequest, void>) {
+export async function publish(
+  ctx: UserCtx<PostEventPublishRequest, PostEventPublishResponse>
+) {
   switch (ctx.request.body.type) {
     case EventPublishType.ENVIRONMENT_VARIABLE_UPGRADE_PANEL_OPENED:
       await events.environmentVariable.upgradePanelOpened(ctx.user._id!)
@@ -13,5 +16,5 @@ export async function publish(ctx: UserCtx<PostEventPublishRequest, void>) {
     default:
       ctx.throw(400, "Invalid publish event type.")
   }
-  ctx.status = 200
+  ctx.body = { message: "Event published." }
 }
diff --git a/packages/worker/src/api/controllers/global/license.ts b/packages/worker/src/api/controllers/global/license.ts
index 04f76a6593..014b01d87c 100644
--- a/packages/worker/src/api/controllers/global/license.ts
+++ b/packages/worker/src/api/controllers/global/license.ts
@@ -1,29 +1,33 @@
 import { licensing, quotas } from "@budibase/pro"
 import {
   ActivateLicenseKeyRequest,
+  ActivateLicenseKeyResponse,
   ActivateOfflineLicenseTokenRequest,
+  ActivateOfflineLicenseTokenResponse,
   GetLicenseKeyResponse,
   GetOfflineIdentifierResponse,
   GetOfflineLicenseTokenResponse,
   GetQuotaUsageResponse,
+  RefreshOfflineLicenseResponse,
   UserCtx,
 } from "@budibase/types"
 
 // LICENSE KEY
 
 export async function activateLicenseKey(
-  ctx: UserCtx<ActivateLicenseKeyRequest>
+  ctx: UserCtx<ActivateLicenseKeyRequest, ActivateLicenseKeyResponse>
 ) {
   const { licenseKey } = ctx.request.body
   await licensing.keys.activateLicenseKey(licenseKey)
-  ctx.status = 200
+  ctx.body = {
+    message: "License activated.",
+  }
 }
 
 export async function getLicenseKey(ctx: UserCtx<void, GetLicenseKeyResponse>) {
   const licenseKey = await licensing.keys.getLicenseKey()
   if (licenseKey) {
     ctx.body = { licenseKey: "*" }
-    ctx.status = 200
   } else {
     ctx.status = 404
   }
@@ -37,11 +41,16 @@ export async function deleteLicenseKey(ctx: UserCtx<void, void>) {
 // OFFLINE LICENSE
 
 export async function activateOfflineLicenseToken(
-  ctx: UserCtx<ActivateOfflineLicenseTokenRequest, void>
+  ctx: UserCtx<
+    ActivateOfflineLicenseTokenRequest,
+    ActivateOfflineLicenseTokenResponse
+  >
 ) {
   const { offlineLicenseToken } = ctx.request.body
   await licensing.offline.activateOfflineLicenseToken(offlineLicenseToken)
-  ctx.status = 200
+  ctx.body = {
+    message: "License token activated.",
+  }
 }
 
 export async function getOfflineLicenseToken(
@@ -50,7 +59,6 @@ export async function getOfflineLicenseToken(
   const offlineLicenseToken = await licensing.offline.getOfflineLicenseToken()
   if (offlineLicenseToken) {
     ctx.body = { offlineLicenseToken: "*" }
-    ctx.status = 200
   } else {
     ctx.status = 404
   }
@@ -66,14 +74,17 @@ export async function getOfflineLicenseIdentifier(
 ) {
   const identifierBase64 = await licensing.offline.getIdentifierBase64()
   ctx.body = { identifierBase64 }
-  ctx.status = 200
 }
 
 // LICENSES
 
-export const refresh = async (ctx: UserCtx<void, void>) => {
+export const refresh = async (
+  ctx: UserCtx<void, RefreshOfflineLicenseResponse>
+) => {
   await licensing.cache.refresh()
-  ctx.status = 200
+  ctx.body = {
+    message: "License refreshed.",
+  }
 }
 
 // USAGE
@@ -82,5 +93,4 @@ export const getQuotaUsage = async (
   ctx: UserCtx<void, GetQuotaUsageResponse>
 ) => {
   ctx.body = await quotas.getQuotaUsage()
-  ctx.status = 200
 }
diff --git a/packages/worker/src/api/controllers/global/users.ts b/packages/worker/src/api/controllers/global/users.ts
index 1d36dd524c..a028f4fd33 100644
--- a/packages/worker/src/api/controllers/global/users.ts
+++ b/packages/worker/src/api/controllers/global/users.ts
@@ -4,6 +4,7 @@ import {
   AcceptUserInviteRequest,
   AcceptUserInviteResponse,
   AddSSoUserRequest,
+  AddSSoUserResponse,
   BulkUserRequest,
   BulkUserResponse,
   CheckInviteResponse,
@@ -93,7 +94,9 @@ export const save = async (ctx: UserCtx<User, SaveUserResponse>) => {
   }
 }
 
-export const addSsoSupport = async (ctx: Ctx<AddSSoUserRequest, void>) => {
+export const addSsoSupport = async (
+  ctx: Ctx<AddSSoUserRequest, AddSSoUserResponse>
+) => {
   const { email, ssoId } = ctx.request.body
   try {
     // Status is changed to 404 from getUserDoc if user is not found
@@ -113,7 +116,7 @@ export const addSsoSupport = async (ctx: Ctx<AddSSoUserRequest, void>) => {
       email,
       ssoId,
     })
-    ctx.status = 200
+    ctx.body = { message: "SSO support added." }
   } catch (err: any) {
     ctx.throw(err.status || 400, err)
   }
diff --git a/packages/worker/src/api/controllers/system/accounts.ts b/packages/worker/src/api/controllers/system/accounts.ts
index e02c3f046d..e3fd9f2627 100644
--- a/packages/worker/src/api/controllers/system/accounts.ts
+++ b/packages/worker/src/api/controllers/system/accounts.ts
@@ -19,7 +19,6 @@ export const save = async (
   metadata = await accounts.metadata.saveMetadata(metadata)
 
   ctx.body = metadata
-  ctx.status = 200
 }
 
 export const destroy = async (ctx: Ctx<void, void>) => {
diff --git a/packages/worker/src/api/controllers/system/migrations.ts b/packages/worker/src/api/controllers/system/migrations.ts
index dc66412e42..fc253d839d 100644
--- a/packages/worker/src/api/controllers/system/migrations.ts
+++ b/packages/worker/src/api/controllers/system/migrations.ts
@@ -1,23 +1,23 @@
 import {
   FetchMigrationDefinitionsResponse,
   RunGlobalMigrationRequest,
+  RunGlobalMigrationResponse,
   UserCtx,
 } from "@budibase/types"
 
 const { migrate, MIGRATIONS } = require("../../../migrations")
 
 export const runMigrations = async (
-  ctx: UserCtx<RunGlobalMigrationRequest, void>
+  ctx: UserCtx<RunGlobalMigrationRequest, RunGlobalMigrationResponse>
 ) => {
   const options = ctx.request.body
   // don't await as can take a while, just return
   migrate(options)
-  ctx.status = 200
+  ctx.body = { message: "Migration started." }
 }
 
 export const fetchDefinitions = async (
   ctx: UserCtx<void, FetchMigrationDefinitionsResponse>
 ) => {
   ctx.body = MIGRATIONS
-  ctx.status = 200
 }
diff --git a/packages/worker/src/api/routes/system/tests/migrations.spec.ts b/packages/worker/src/api/routes/system/tests/migrations.spec.ts
index 4198d65ee9..fe91a1070c 100644
--- a/packages/worker/src/api/routes/system/tests/migrations.spec.ts
+++ b/packages/worker/src/api/routes/system/tests/migrations.spec.ts
@@ -36,7 +36,7 @@ describe("/api/system/migrations", () => {
 
     it("runs migrations", async () => {
       const res = await config.api.migrations.runMigrations()
-      expect(res.text).toBe("OK")
+      expect(res.body.message).toBeDefined()
       expect(migrateFn).toHaveBeenCalledTimes(1)
     })
   })
diff --git a/tsconfig.build.json b/tsconfig.build.json
index d51625a34f..a05fa2c976 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -19,7 +19,8 @@
       "@budibase/pro": ["./packages/pro/src"],
       "@budibase/string-templates": ["./packages/string-templates/src"],
       "@budibase/string-templates/*": ["./packages/string-templates/*"],
-      "@budibase/frontend-core": ["./packages/frontend-core/src"]
+      "@budibase/frontend-core": ["./packages/frontend-core/src"],
+      "@budibase/bbui": ["./packages/bbui/src"]
     }
   },
   "exclude": []
diff --git a/yarn.lock b/yarn.lock
index aa409fe4a1..c6181f7866 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2088,47 +2088,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@3.2.26":
-  version "0.0.0"
-  dependencies:
-    "@budibase/nano" "10.1.5"
-    "@budibase/pouchdb-replication-stream" "1.2.11"
-    "@budibase/shared-core" "*"
-    "@budibase/types" "*"
-    "@techpass/passport-openidconnect" "0.3.3"
-    aws-cloudfront-sign "3.0.2"
-    aws-sdk "2.1692.0"
-    bcrypt "5.1.0"
-    bcryptjs "2.4.3"
-    bull "4.10.1"
-    correlation-id "4.0.0"
-    dd-trace "5.26.0"
-    dotenv "16.0.1"
-    google-auth-library "^8.0.1"
-    google-spreadsheet "npm:@budibase/google-spreadsheet@4.1.5"
-    ioredis "5.3.2"
-    joi "17.6.0"
-    jsonwebtoken "9.0.2"
-    knex "2.4.2"
-    koa-passport "^6.0.0"
-    koa-pino-logger "4.0.0"
-    lodash "4.17.21"
-    node-fetch "2.6.7"
-    passport-google-oauth "2.0.0"
-    passport-local "1.0.0"
-    passport-oauth2-refresh "^2.1.0"
-    pino "8.11.0"
-    pino-http "8.3.3"
-    posthog-node "4.0.1"
-    pouchdb "9.0.0"
-    pouchdb-find "9.0.0"
-    redlock "4.2.0"
-    rotating-file-stream "3.1.0"
-    sanitize-s3-objectkey "0.0.1"
-    semver "^7.5.4"
-    tar-fs "2.1.1"
-    uuid "^8.3.2"
-
 "@budibase/handlebars-helpers@^0.13.2":
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/@budibase/handlebars-helpers/-/handlebars-helpers-0.13.2.tgz#73ab51c464e91fd955b429017648e0257060db77"
@@ -2172,15 +2131,15 @@
     through2 "^2.0.0"
 
 "@budibase/pro@npm:@budibase/pro@latest":
-  version "3.2.26"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-3.2.26.tgz#3525535e07827ff820eefeeb94ad9e0e818ac698"
-  integrity sha512-+V04NbKSBN3Up6vcyBFFpecQ3MrJvVuXN74JE9yLj+KVxQXJ1kwCrMgea/XyJomSc72PWb9sQzXADWTe5i5STA==
+  version "3.2.28"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-3.2.28.tgz#59b5b37225715bb8fbf5b1c5c989140b10b58710"
+  integrity sha512-eDPeZpYFRZYQhCulcQAUwFoPk68c8+K9mIsB6QD3oMHmHTDA1P2ZcXvLNqDTIqHB94DqnWinqDf4hTuGYApgPA==
   dependencies:
     "@anthropic-ai/sdk" "^0.27.3"
-    "@budibase/backend-core" "3.2.26"
-    "@budibase/shared-core" "3.2.26"
-    "@budibase/string-templates" "3.2.26"
-    "@budibase/types" "3.2.26"
+    "@budibase/backend-core" "*"
+    "@budibase/shared-core" "*"
+    "@budibase/string-templates" "*"
+    "@budibase/types" "*"
     "@koa/router" "13.1.0"
     bull "4.10.1"
     dd-trace "5.26.0"
@@ -2193,25 +2152,6 @@
     scim-patch "^0.8.1"
     scim2-parse-filter "^0.2.8"
 
-"@budibase/shared-core@3.2.26":
-  version "0.0.0"
-  dependencies:
-    "@budibase/types" "*"
-    cron-validate "1.4.5"
-
-"@budibase/string-templates@3.2.26":
-  version "0.0.0"
-  dependencies:
-    "@budibase/handlebars-helpers" "^0.13.2"
-    dayjs "^1.10.8"
-    handlebars "^4.7.8"
-    lodash.clonedeep "^4.5.0"
-
-"@budibase/types@3.2.26":
-  version "0.0.0"
-  dependencies:
-    scim-patch "^0.8.1"
-
 "@bull-board/api@5.10.2":
   version "5.10.2"
   resolved "https://registry.yarnpkg.com/@bull-board/api/-/api-5.10.2.tgz#ae8ff6918b23897bf879a6ead3683f964374c4b3"
@@ -6006,6 +5946,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/shortid@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@types/shortid/-/shortid-2.2.0.tgz#905990fc4275f77e60ab0cd9f791b91a3d4bff04"
+  integrity sha512-jBG2FgBxcaSf0h662YloTGA32M8UtNbnTPekUr/eCmWXq0JWQXgNEQ/P5Gf05Cv66QZtE1Ttr83I1AJBPdzCBg==
+
 "@types/ssh2-streams@*":
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/@types/ssh2-streams/-/ssh2-streams-0.1.12.tgz#e68795ba2bf01c76b93f9c9809e1f42f0eaaec5f"
@@ -8773,7 +8718,7 @@ dd-trace@5.26.0:
     shell-quote "^1.8.1"
     tlhunter-sorted-set "^0.1.0"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.5, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
   integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -8794,6 +8739,13 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.3.5:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
 debuglog@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -18692,16 +18644,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -18793,7 +18736,7 @@ stringify-object@^3.2.1:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -18807,13 +18750,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -19055,7 +18991,7 @@ svelte-spa-router@^4.0.1:
   dependencies:
     regexparam "2.0.2"
 
-svelte@4.2.19, svelte@^4.2.10:
+svelte@4.2.19:
   version "4.2.19"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.19.tgz#4e6e84a8818e2cd04ae0255fcf395bc211e61d4c"
   integrity sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==
@@ -20561,7 +20497,7 @@ worker-farm@1.7.0:
   dependencies:
     errno "~0.1.7"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -20579,15 +20515,6 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"