diff --git a/hosting/nginx.dev.conf.hbs b/hosting/nginx.dev.conf.hbs
index 14c32b1bba..39a8dc52af 100644
--- a/hosting/nginx.dev.conf.hbs
+++ b/hosting/nginx.dev.conf.hbs
@@ -24,6 +24,21 @@ http {
     default     "upgrade";
   }
 
+  upstream app-service {
+    server {{address}}:4001;
+    keepalive 32;
+  }
+
+  upstream worker-service {
+    server {{address}}:4002;
+    keepalive 32;
+  }
+
+  upstream builder {
+    server {{address}}:3000;
+    keepalive 32;
+  }
+
   server { 
     listen       10000 default_server;
     server_name  _;
@@ -43,45 +58,78 @@ http {
     }
 
     location ~ ^/api/(system|admin|global)/ {
-      proxy_pass      http://{{ address }}:4002;
+      proxy_pass      http://worker-service;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
     }
 
     location /api/ {
       proxy_read_timeout 120s;
       proxy_connect_timeout 120s;
       proxy_send_timeout 120s; 
-      proxy_pass      http://{{ address }}:4001;
+      proxy_pass      http://app-service;
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
     }
 
     location = / {
-      proxy_pass      http://{{ address }}:4001;
+      proxy_pass      http://app-service;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
     }
 
     location /app_ {
-      proxy_pass      http://{{ address }}:4001;
+      proxy_pass      http://app-service;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
     }
 
     location /app {
-      proxy_pass      http://{{ address }}:4001;
+      proxy_pass      http://app-service;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
     }
 
     location /builder {
-      proxy_pass      http://{{ address }}:3000;
+      proxy_pass      http://builder;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
       rewrite ^/builder(.*)$ /builder/$1 break;
     }
 
     location /builder/ {
-      proxy_pass      http://{{ address }}:3000;
+      proxy_pass      http://builder;
 
       proxy_http_version  1.1;
       proxy_set_header    Connection          $connection_upgrade;
       proxy_set_header    Upgrade             $http_upgrade;
       proxy_set_header    X-Real-IP           $remote_addr;
       proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
     }
 
     location /vite/ {
-      proxy_pass  http://{{ address }}:3000;
+      proxy_pass  http://builder;
+      proxy_read_timeout 120s;
+      proxy_connect_timeout 120s;
+      proxy_send_timeout 120s;
       rewrite     ^/vite(.*)$ /$1 break;
     }
 
@@ -91,7 +139,7 @@ http {
       proxy_set_header    Connection  'upgrade';
       proxy_set_header    Host        $host;
       proxy_cache_bypass  $http_upgrade;
-      proxy_pass          http://{{ address }}:4001;
+      proxy_pass          http://app-service;
     }
 
     location / {
diff --git a/lerna.json b/lerna.json
index d31cde4be4..0aadebb725 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 69d4968e81..da3cb4d940 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -20,7 +20,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@budibase/types": "2.0.30-alpha.7",
+    "@budibase/types": "2.0.30-alpha.10",
     "@shopify/jest-koa-mocks": "5.0.1",
     "@techpass/passport-openidconnect": "0.3.2",
     "aws-sdk": "2.1030.0",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 7d1ac8bbf6..91d5825bbf 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "2.0.30-alpha.7",
+    "@budibase/string-templates": "2.0.30-alpha.10",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 49a15d36a3..7fd2879071 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -1,18 +1,18 @@
 export default function clickOutside(element, callbackFunction) {
   function onClick(event) {
     if (!element.contains(event.target)) {
-      callbackFunction()
+      callbackFunction(event)
     }
   }
 
-  document.body.addEventListener("mousedown", onClick, true)
+  document.body.addEventListener("click", onClick, true)
 
   return {
     update(newCallbackFunction) {
       callbackFunction = newCallbackFunction
     },
     destroy() {
-      document.body.removeEventListener("mousedown", onClick, true)
+      document.body.removeEventListener("click", onClick, true)
     },
   }
 }
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index ded0ed6cfd..b81e76dc1f 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -33,6 +33,13 @@
     open = false
   }
 
+  const handleOutsideClick = e => {
+    if (open) {
+      e.stopPropagation()
+      hide()
+    }
+  }
+
   let open = null
 
   function handleEscape(e) {
@@ -47,7 +54,7 @@
     <div
       tabindex="0"
       use:positionDropdown={{ anchor, align, maxWidth }}
-      use:clickOutside={hide}
+      use:clickOutside={handleOutsideClick}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 912c64a1b6..246a97e843 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -71,10 +71,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "2.0.30-alpha.7",
-    "@budibase/client": "2.0.30-alpha.7",
-    "@budibase/frontend-core": "2.0.30-alpha.7",
-    "@budibase/string-templates": "2.0.30-alpha.7",
+    "@budibase/bbui": "2.0.30-alpha.10",
+    "@budibase/client": "2.0.30-alpha.10",
+    "@budibase/frontend-core": "2.0.30-alpha.10",
+    "@budibase/string-templates": "2.0.30-alpha.10",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index c90ab10c9a..848dd4405a 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -451,7 +451,7 @@ export const getFrontendStore = () => {
           ...extras,
         }
       },
-      create: async (componentName, presetProps) => {
+      create: async (componentName, presetProps, parent, index) => {
         const state = get(store)
         const componentInstance = store.actions.components.createInstance(
           componentName,
@@ -461,48 +461,62 @@ export const getFrontendStore = () => {
           return
         }
 
-        // Patch selected screen
-        await store.actions.screens.patch(screen => {
-          // Find the selected component
-          const currentComponent = findComponent(
-            screen.props,
-            state.selectedComponentId
-          )
-          if (!currentComponent) {
-            return false
-          }
-
-          // Find parent node to attach this component to
-          let parentComponent
-          if (currentComponent) {
-            // Use selected component as parent if one is selected
-            const definition = store.actions.components.getDefinition(
-              currentComponent._component
-            )
-            if (definition?.hasChildren) {
-              // Use selected component if it allows children
-              parentComponent = currentComponent
+        // Insert in position if specified
+        if (parent && index != null) {
+          await store.actions.screens.patch(screen => {
+            let parentComponent = findComponent(screen.props, parent)
+            if (!parentComponent._children?.length) {
+              parentComponent._children = [componentInstance]
             } else {
-              // Otherwise we need to use the parent of this component
-              parentComponent = findComponentParent(
-                screen.props,
-                currentComponent._id
-              )
+              parentComponent._children.splice(index, 0, componentInstance)
             }
-          } else {
-            // Use screen or layout if no component is selected
-            parentComponent = screen.props
-          }
+          })
+        }
 
-          // Attach new component
-          if (!parentComponent) {
-            return false
-          }
-          if (!parentComponent._children) {
-            parentComponent._children = []
-          }
-          parentComponent._children.push(componentInstance)
-        })
+        // Otherwise we work out where this component should be inserted
+        else {
+          await store.actions.screens.patch(screen => {
+            // Find the selected component
+            const currentComponent = findComponent(
+              screen.props,
+              state.selectedComponentId
+            )
+            if (!currentComponent) {
+              return false
+            }
+
+            // Find parent node to attach this component to
+            let parentComponent
+            if (currentComponent) {
+              // Use selected component as parent if one is selected
+              const definition = store.actions.components.getDefinition(
+                currentComponent._component
+              )
+              if (definition?.hasChildren) {
+                // Use selected component if it allows children
+                parentComponent = currentComponent
+              } else {
+                // Otherwise we need to use the parent of this component
+                parentComponent = findComponentParent(
+                  screen.props,
+                  currentComponent._id
+                )
+              }
+            } else {
+              // Use screen or layout if no component is selected
+              parentComponent = screen.props
+            }
+
+            // Attach new component
+            if (!parentComponent) {
+              return false
+            }
+            if (!parentComponent._children) {
+              parentComponent._children = []
+            }
+            parentComponent._children.push(componentInstance)
+          })
+        }
 
         // Select new component
         store.update(state => {
@@ -990,6 +1004,19 @@ export const getFrontendStore = () => {
         }))
       },
     },
+    dnd: {
+      start: component => {
+        store.actions.preview.sendEvent("dragging-new-component", {
+          dragging: true,
+          component,
+        })
+      },
+      stop: () => {
+        store.actions.preview.sendEvent("dragging-new-component", {
+          dragging: false,
+        })
+      },
+    },
   }
 
   return store
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 873c9ccf65..5f3b3ef639 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,16 +1,31 @@
 <script>
-  import { Body } from "@budibase/bbui"
+  import { Label, Body } from "@budibase/bbui"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+  export let bindings = []
 </script>
 
+<Body size="S">Navigate To screen, or leave blank.</Body>
+<br />
 <div class="root">
-  <Body size="S">This action doesn't require any additional settings.</Body>
-  <Body size="S">
-    This action won't do anything if there isn't a screen modal open.
-  </Body>
+  <Label small>Screen</Label>
+  <DrawerBindableInput
+    title="Destination URL"
+    placeholder="/screen"
+    value={parameters.url}
+    on:change={value => (parameters.url = value.detail)}
+    {bindings}
+  />
 </div>
 
 <style>
   .root {
+    display: grid;
+    align-items: center;
+    gap: var(--spacing-m);
+    grid-template-columns: auto 1fr;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index f6357ae5d9..7618ee5155 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -10,6 +10,7 @@ export const syncURLToState = options => {
     fallbackUrl,
     store,
     routify,
+    beforeNavigate,
   } = options || {}
   if (
     !urlParam ||
@@ -41,6 +42,15 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    if (beforeNavigate) {
+      const res = beforeNavigate(url, params)
+      if (res?.url) {
+        url = res.url
+      }
+      if (res?.params) {
+        params = res.params
+      }
+    }
     log("Navigating to", url, "with params", params)
     cachedGoto(url, params)
   }
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 309b676a70..a4c4c5b839 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
@@ -213,6 +213,9 @@
         await store.actions.components.handleEjectBlock(id, definition)
       } else if (type === "reload-plugin") {
         await store.actions.components.refreshDefinitions()
+      } else if (type === "drop-new-component") {
+        const { component, parent, index } = data
+        await store.actions.components.create(component, null, parent, index)
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 427fd98775..5cb6d31345 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -76,6 +76,9 @@
       const compDef = store.actions.components.getDefinition(
         $dndStore.source?._component
       )
+      if (!compDef) {
+        return
+      }
       const compTypeName = compDef.name.toLowerCase()
       const path = findComponentPath(currentScreen.props, component._id)
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 530ef44452..e6cbbf71fe 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -7,6 +7,18 @@
   import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
   import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 
+  const cleanUrl = url => {
+    // Strip trailing slashes
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Hide new component panel whenever component ID changes
+    if (url?.endsWith("/new")) {
+      url = url.replace("/new", "")
+    }
+    return { url }
+  }
+
   // Keep URL and state in sync for selected component ID
   const stopSyncing = syncURLToState({
     urlParam: "componentId",
@@ -15,6 +27,7 @@
     fallbackUrl: "../",
     store,
     routify,
+    beforeNavigate: cleanUrl,
   })
 
   onDestroy(stopSyncing)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 8cef10fb26..778a14ffff 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -169,6 +169,14 @@
       window.removeEventListener("keydown", handleKeyDown)
     }
   })
+
+  const onDragStart = component => {
+    store.actions.dnd.start(component)
+  }
+
+  const onDragEnd = () => {
+    store.actions.dnd.stop()
+  }
 </script>
 
 <div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
@@ -206,6 +214,9 @@
               <div class="category-label">{category.name}</div>
               {#each category.children as component}
                 <div
+                  draggable="true"
+                  on:dragstart={() => onDragStart(component.component)}
+                  on:dragend={onDragEnd}
                   data-cy={`component-${component.name}`}
                   class="component"
                   class:selected={selectedIndex ===
@@ -229,8 +240,11 @@
         <Layout noPadding gap="XS">
           {#each blocks as block}
             <div
+              draggable="true"
               class="component"
               on:click={() => addComponent(block.component)}
+              on:dragstart={() => onDragStart(block.component)}
+              on:dragend={onDragEnd}
             >
               <Icon name={block.icon} />
               <Body size="XS">{block.name}</Body>
diff --git a/packages/cli/package.json b/packages/cli/package.json
index af539df866..91d0952b62 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
@@ -26,9 +26,9 @@
     "outputPath": "build"
   },
   "dependencies": {
-    "@budibase/backend-core": "2.0.30-alpha.7",
-    "@budibase/string-templates": "2.0.30-alpha.7",
-    "@budibase/types": "2.0.30-alpha.7",
+    "@budibase/backend-core": "2.0.30-alpha.10",
+    "@budibase/string-templates": "2.0.30-alpha.10",
+    "@budibase/types": "2.0.30-alpha.10",
     "axios": "0.21.2",
     "chalk": "4.1.0",
     "cli-progress": "3.11.2",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 0edb5c0f39..763ac46b3f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -85,6 +85,10 @@
     "icon": "Selection",
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "styles": [
       "padding",
       "size",
@@ -255,6 +259,10 @@
       "section"
     ],
     "showEmptyState": false,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "section",
@@ -276,6 +284,10 @@
     "icon": "Button",
     "editable": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 105,
+      "height": 35
+    },
     "settings": [
       {
         "type": "text",
@@ -368,6 +380,10 @@
     "illegalChildren": [
       "section"
     ],
+    "size": {
+      "width": 400,
+      "height": 10
+    },
     "settings": [
       {
         "type": "select",
@@ -405,6 +421,10 @@
     ],
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -584,6 +604,7 @@
     ]
   },
   "card": {
+    "deprecated": true,
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewColumn",
@@ -664,6 +685,10 @@
     ],
     "showSettingsBar": true,
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 30
+    },
     "settings": [
       {
         "type": "text",
@@ -786,6 +811,10 @@
     ],
     "showSettingsBar": true,
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 40
+    },
     "settings": [
       {
         "type": "text",
@@ -903,6 +932,10 @@
     "name": "Tag",
     "icon": "Label",
     "showSettingsBar": true,
+    "size": {
+      "width": 100,
+      "height": 25
+    },
     "settings": [
       {
         "type": "text",
@@ -954,12 +987,13 @@
     "name": "Image",
     "description": "A basic component for displaying images",
     "icon": "Image",
-    "illegalChildren": [
-      "section"
-    ],
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 300
+    },
     "settings": [
       {
         "type": "text",
@@ -976,9 +1010,10 @@
     "styles": [
       "size"
     ],
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 300
+    },
     "settings": [
       {
         "type": "text",
@@ -1036,9 +1071,10 @@
     "name": "Icon",
     "description": "A basic component for displaying icons",
     "icon": "Shapes",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 25,
+      "height": 25
+    },
     "settings": [
       {
         "type": "icon",
@@ -1155,9 +1191,10 @@
     "icon": "Link",
     "showSettingsBar": true,
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 200,
+      "height": 30
+    },
     "settings": [
       {
         "type": "text",
@@ -1267,12 +1304,10 @@
     ]
   },
   "cardhorizontal": {
+    "deprecated": true,
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewRow",
-    "illegalChildren": [
-      "section"
-    ],
     "settings": [
       {
         "type": "text",
@@ -1363,27 +1398,31 @@
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
     "icon": "Card",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 260,
+      "height": 143
+    },
     "settings": [
       {
         "type": "text",
         "label": "Title",
         "key": "title",
-        "placeholder": "Total Revenue"
+        "placeholder": "Total Revenue",
+        "defaultValue": "Title"
       },
       {
         "type": "text",
         "label": "Value",
         "key": "value",
-        "placeholder": "$1,981,983"
+        "placeholder": "$1,981,983",
+        "defaultValue": "Value"
       },
       {
         "type": "text",
         "label": "Label",
         "key": "label",
-        "placeholder": "Stripe"
+        "placeholder": "Stripe",
+        "defaultValue": "Label"
       }
     ]
   },
@@ -1391,12 +1430,13 @@
     "name": "Embed",
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
-    "illegalChildren": [
-      "section"
-    ],
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "text",
@@ -1410,9 +1450,10 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -1571,9 +1612,10 @@
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -1731,9 +1773,10 @@
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -1903,9 +1946,10 @@
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -2031,9 +2075,10 @@
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -2159,9 +2204,10 @@
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -2266,6 +2312,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "select",
@@ -2352,6 +2402,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "number",
@@ -2372,6 +2426,10 @@
       "size"
     ],
     "hasChildren": true,
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "select",
@@ -2398,13 +2456,14 @@
   "stringfield": {
     "name": "Text Field",
     "icon": "Text",
-    "illegalChildren": [
-      "section"
-    ],
     "styles": [
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/string",
@@ -2492,9 +2551,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/number",
@@ -2548,9 +2608,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/string",
@@ -2604,9 +2665,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/options",
@@ -2771,9 +2833,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/array",
@@ -2929,9 +2992,10 @@
     "name": "Checkbox",
     "icon": "SelectBox",
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/boolean",
@@ -3009,6 +3073,10 @@
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 150
+    },
     "settings": [
       {
         "type": "field/longform",
@@ -3084,9 +3152,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/datetime",
@@ -3163,9 +3232,10 @@
     "styles": [
       "size"
     ],
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/barcode/qr",
@@ -3214,29 +3284,27 @@
       "size"
     ],
     "draggable": false,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 320
+    },
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider",
-        "required": true
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Latitude Key",
         "key": "latitudeKey",
-        "dependsOn": "dataProvider",
-        "required": true
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "Longitude Key",
         "key": "longitudeKey",
-        "dependsOn": "dataProvider",
-        "required": true
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
@@ -3330,9 +3398,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 200
+    },
     "settings": [
       {
         "type": "field/attachment",
@@ -3387,9 +3456,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/link",
@@ -3449,6 +3519,10 @@
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "field/json",
@@ -3497,6 +3571,10 @@
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 200
+    },
     "settings": [
       {
         "type": "field/attachment",
@@ -3559,6 +3637,10 @@
     "actions": [
       "RefreshDatasource"
     ],
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "dataSource",
@@ -3639,6 +3721,10 @@
     ],
     "hasChildren": true,
     "showEmptyState": false,
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -3737,6 +3823,10 @@
       "size"
     ],
     "hasChildren": false,
+    "size": {
+      "width": 200,
+      "height": 50
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -3773,21 +3863,28 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 300,
+      "height": 120
+    },
     "settings": [
       {
         "type": "text",
         "key": "title",
-        "label": "Title"
+        "label": "Title",
+        "defaultValue": "Title"
       },
       {
         "type": "text",
         "key": "subtitle",
-        "label": "Subtitle"
+        "label": "Subtitle",
+        "defaultValue": "Subtitle"
       },
       {
         "type": "text",
         "key": "description",
-        "label": "Description"
+        "label": "Description",
+        "defaultValue": "Description"
       },
       {
         "type": "text",
@@ -3831,6 +3928,10 @@
     "name": "Dynamic Filter",
     "icon": "Filter",
     "showSettingsBar": true,
+    "size": {
+      "width": 100,
+      "height": 35
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -3878,6 +3979,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -4043,6 +4148,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -4101,19 +4210,22 @@
             "type": "text",
             "key": "cardTitle",
             "label": "Title",
-            "nested": true
+            "nested": true,
+            "defaultValue": "Title"
           },
           {
             "type": "text",
             "key": "cardSubtitle",
             "label": "Subtitle",
-            "nested": true
+            "nested": true,
+            "defaultValue": "Subtitle"
           },
           {
             "type": "text",
             "key": "cardDescription",
             "label": "Description",
-            "nested": true
+            "nested": true,
+            "defaultValue": "Description"
           },
           {
             "type": "text",
@@ -4215,6 +4327,10 @@
     ],
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "dataSource",
@@ -4437,6 +4553,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "text",
@@ -4454,6 +4574,10 @@
     ],
     "block": true,
     "info": "Form blocks are only compatible with internal or SQL tables",
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "select",
diff --git a/packages/client/package.json b/packages/client/package.json
index 1b1e1d0f57..6dc56bf484 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "2.0.30-alpha.7",
-    "@budibase/frontend-core": "2.0.30-alpha.7",
-    "@budibase/string-templates": "2.0.30-alpha.7",
+    "@budibase/bbui": "2.0.30-alpha.10",
+    "@budibase/frontend-core": "2.0.30-alpha.10",
+    "@budibase/string-templates": "2.0.30-alpha.10",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 05d92f208c..75474dfd6f 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -67,6 +67,9 @@
     // any depth
     id: $component.id,
 
+    // Name can be used down the tree in placeholders
+    name: $component.name,
+
     // We register block components with their raw props so that we can eject
     // blocks later on
     registerComponent: registerBlockComponent,
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 2d586df24d..1885d22836 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -16,7 +16,14 @@
     propsAreSame,
     getSettingsDefinition,
   } from "utils/componentProps"
-  import { builderStore, devToolsStore, componentStore, appStore } from "stores"
+  import {
+    builderStore,
+    devToolsStore,
+    componentStore,
+    appStore,
+    dndIsDragging,
+    dndComponentPath,
+  } from "stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
@@ -27,6 +34,7 @@
   export let isLayout = false
   export let isScreen = false
   export let isBlock = false
+  export let parent = null
 
   // Get parent contexts
   const context = getContext("context")
@@ -97,6 +105,7 @@
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
   $: inDragPath = inSelectedPath && $builderStore.editMode
+  $: inDndPath = $dndComponentPath?.includes(id)
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
@@ -108,7 +117,7 @@
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: builderInteractive =
-    $builderStore.inBuilder && insideScreenslot && !isBlock
+    $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
   $: interactive = builderInteractive || devToolsInteractive
   $: editing = editable && selected && $builderStore.editMode
@@ -118,7 +127,7 @@
     !isLayout &&
     !isScreen &&
     definition?.draggable !== false
-  $: droppable = interactive && !isLayout && !isScreen
+  $: droppable = interactive
   $: builderHidden =
     $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
 
@@ -126,8 +135,9 @@
   // Empty states can be shown for these components, but can be disabled
   // in the component manifest.
   $: empty =
-    (interactive && !children.length && hasChildren) ||
-    hasMissingRequiredSettings
+    !isBlock &&
+    ((interactive && !children.length && hasChildren) ||
+      hasMissingRequiredSettings)
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings
@@ -149,6 +159,12 @@
   // Scroll the selected element into view
   $: selected && scrollIntoView()
 
+  // When dragging and dropping, pad components to allow dropping between
+  // nested layers. Only reset this when dragging stops.
+  let pad = false
+  $: pad = pad || (interactive && hasChildren && inDndPath)
+  $: $dndIsDragging, (pad = false)
+
   // Update component context
   $: store.set({
     id,
@@ -405,6 +421,11 @@
   }
 
   const scrollIntoView = () => {
+    // Don't scroll into view if we selected this component because we were
+    // starting dragging on it
+    if (get(dndIsDragging)) {
+      return
+    }
     const node = document.getElementsByClassName(id)?.[0]?.children[0]
     if (!node) {
       return
@@ -452,17 +473,20 @@
     class:empty
     class:interactive
     class:editing
+    class:pad
+    class:parent={hasChildren}
     class:block={isBlock}
     data-id={id}
     data-name={name}
     data-icon={icon}
+    data-parent={parent}
   >
     <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
       {#if hasMissingRequiredSettings}
         <ComponentPlaceholder />
       {:else if children.length}
         {#each children as child (child._id)}
-          <svelte:self instance={child} />
+          <svelte:self instance={child} parent={id} />
         {/each}
       {:else if emptyState}
         {#if isScreen}
@@ -481,16 +505,14 @@
   .component {
     display: contents;
   }
-
-  .interactive :global(*:hover) {
-    cursor: pointer;
+  .component.pad :global(> *) {
+    padding: var(--spacing-l) !important;
+    gap: var(--spacing-l) !important;
+    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
+    border-radius: 4px !important;
+    transition: padding 260ms ease-out, border 260ms ease-out;
   }
-
-  .draggable :global(*:hover) {
-    cursor: grab;
-  }
-
-  .editing :global(*:hover) {
-    cursor: auto;
+  .interactive :global(*) {
+    cursor: default;
   }
 </style>
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 49cbc3f821..551a564094 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -43,6 +43,7 @@
   }
 
   const onRouteLoading = ({ detail }) => {
+    routeStore.actions.setRouteParams(detail.params || {})
     routeStore.actions.setActiveRoute(detail.route)
   }
 
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index 0ce89f1ff4..f6f9a932f0 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -10,9 +10,6 @@
 
   const context = getContext("context")
 
-  // Keep route params up to date
-  $: routeStore.actions.setRouteParams(params || {})
-
   // Get the screen definition for the current route
   $: screenDefinition = $screenStore.activeScreen?.props
 
diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte
index 203071e0b1..54553cb934 100644
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/packages/client/src/components/app/Placeholder.svelte
@@ -3,13 +3,14 @@
 
   const { builderStore } = getContext("sdk")
   const component = getContext("component")
+  const block = getContext("block")
 
   export let text
 </script>
 
 {#if $builderStore.inBuilder}
   <div>
-    {text || $component.name || "Placeholder"}
+    {text || block?.name || $component.name || "Placeholder"}
   </div>
 {/if}
 
diff --git a/packages/client/src/components/overlay/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
index d6da9ca3f0..b9f4914624 100644
--- a/packages/client/src/components/overlay/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
@@ -45,6 +45,9 @@
       },
       [MessageTypes.CLOSE_SCREEN_MODAL]: () => {
         peekStore.actions.hidePeek()
+        if (message.data?.url) {
+          routeStore.actions.navigate(message.data.url)
+        }
       },
       [MessageTypes.INVALIDATE_DATASOURCE]: () => {
         proxyInvalidation(message.data)
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index c37eb93afa..a9c52f0099 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,201 +1,298 @@
-<script context="module">
-  export const Sides = {
-    Top: "Top",
-    Right: "Right",
-    Bottom: "Bottom",
-    Left: "Left",
-  }
-</script>
-
 <script>
   import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import { builderStore } from "stores"
+  import {
+    builderStore,
+    screenStore,
+    dndStore,
+    dndParent,
+    dndIsDragging,
+  } from "stores"
+  import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
+  import { Utils } from "@budibase/frontend-core"
+  import { findComponentById } from "utils/components.js"
+  import { DNDPlaceholderID } from "constants"
 
-  let dragInfo
-  let dropInfo
+  const ThrottleRate = 130
 
-  const getEdges = (bounds, mousePoint) => {
-    const { width, height, top, left } = bounds
-    return {
-      [Sides.Top]: [mousePoint[0], top],
-      [Sides.Right]: [left + width, mousePoint[1]],
-      [Sides.Bottom]: [mousePoint[0], top + height],
-      [Sides.Left]: [left, mousePoint[1]],
+  // Cache some dnd store state as local variables as it massively helps
+  // performance. It lets us avoid calling svelte getters on every DOM action.
+  $: source = $dndStore.source
+  $: target = $dndStore.target
+  $: drop = $dndStore.drop
+
+  // Util to get the inner DOM node by a component ID
+  const getDOMNode = id => {
+    const component = document.getElementsByClassName(id)[0]
+    return [...component.children][0]
+  }
+
+  // Util to calculate the variance of a set of data
+  const variance = arr => {
+    const mean = arr.reduce((a, b) => a + b, 0) / arr.length
+    let squareSum = 0
+    arr.forEach(value => {
+      const delta = value - mean
+      squareSum += delta * delta
+    })
+    return squareSum / arr.length
+  }
+
+  // Callback when drag stops (whether dropped or not)
+  const stopDragging = () => {
+    // Reset listener
+    if (source?.id) {
+      const component = document.getElementsByClassName(source?.id)[0]
+      if (component) {
+        component.removeEventListener("dragend", stopDragging)
+      }
     }
-  }
 
-  const calculatePointDelta = (point1, point2) => {
-    const deltaX = Math.abs(point1[0] - point2[0])
-    const deltaY = Math.abs(point1[1] - point2[1])
-    return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-  }
-
-  const getDOMNodeForComponent = component => {
-    const parent = component.closest(".component")
-    const children = Array.from(parent.children)
-    return children[0]
+    // Reset state
+    dndStore.actions.reset()
   }
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
-    const parent = e.target.closest(".component")
-    if (!parent?.classList.contains("draggable")) {
+    const component = e.target.closest(".component")
+    if (!component?.classList.contains("draggable")) {
       return
     }
 
-    // Update state
-    dragInfo = {
-      target: parent.dataset.id,
-      parent: parent.dataset.parent,
-    }
-    builderStore.actions.selectComponent(dragInfo.target)
-    builderStore.actions.setDragging(true)
+    // Hide drag ghost image
+    e.dataTransfer.setDragImage(new Image(), 0, 0)
 
-    // Highlight being dragged by setting opacity
-    const child = getDOMNodeForComponent(e.target)
-    if (child) {
-      child.style.opacity = "0.5"
-    }
+    // Add event handler to clear all drag state when dragging ends
+    component.addEventListener("dragend", stopDragging)
+
+    // Update state
+    const id = component.dataset.id
+    const parentId = component.dataset.parent
+    const parent = findComponentById(
+      get(screenStore).activeScreen?.props,
+      parentId
+    )
+    const index = parent._children.findIndex(
+      x => x._id === component.dataset.id
+    )
+    dndStore.actions.startDraggingExistingComponent({
+      id,
+      bounds: component.children[0].getBoundingClientRect(),
+      parent: parentId,
+      index,
+    })
+    builderStore.actions.selectComponent(id)
+
+    // Set initial drop info to show placeholder exactly where the dragged
+    // component is.
+    // Execute this asynchronously to prevent bugs caused by updating state in
+    // the same handler as selecting a new component (which causes a client
+    // re-initialisation).
+    setTimeout(() => {
+      dndStore.actions.updateDrop({
+        parent: parentId,
+        index,
+      })
+    }, 0)
   }
 
-  // Callback when drag stops (whether dropped or not)
-  const onDragEnd = e => {
-    // Reset opacity style
-    if (dragInfo) {
-      const child = getDOMNodeForComponent(e.target)
-      if (child) {
-        child.style.opacity = ""
-      }
+  // Core logic for handling drop events and determining where to render the
+  // drop target placeholder
+  const processEvent = (mouseX, mouseY) => {
+    if (!target) {
+      return null
+    }
+    let { id, parent, node, acceptsChildren, empty } = target
+
+    // If we're over something that does not accept children then we go up a
+    // level and consider the mouse position relative to the parent
+    if (!acceptsChildren) {
+      id = parent
+      empty = false
+      node = getDOMNode(parent)
     }
 
-    // Reset state and styles
-    dragInfo = null
-    dropInfo = null
-    builderStore.actions.setDragging(false)
+    // We're now hovering over something which does accept children.
+    // If it is empty, just go inside it.
+    if (empty) {
+      dndStore.actions.updateDrop({
+        parent: id,
+        index: 0,
+      })
+      return
+    }
+
+    // As the first DOM node in a component may not necessarily contain the
+    // child components, we can find to try the parent of the first child
+    // component and use that as the real parent DOM node
+    const childNode = node.getElementsByClassName("component")[0]
+    if (childNode?.parentNode) {
+      node = childNode.parentNode
+    }
+
+    // Append an ephemeral div to allow us to determine layout if only one
+    // child exists
+    let ephemeralDiv
+    if (node.children.length === 1) {
+      ephemeralDiv = document.createElement("div")
+      ephemeralDiv.dataset.id = DNDPlaceholderID
+      node.appendChild(ephemeralDiv)
+    }
+
+    // We're now hovering over something which accepts children and is not
+    // empty, so we need to work out where to inside the placeholder
+    // Calculate the coordinates of various locations on each child.
+    const childCoords = [...(node.children || [])].map(node => {
+      const child = node.children?.[0] || node
+      const bounds = child.getBoundingClientRect()
+      return {
+        placeholder: node.dataset.id === DNDPlaceholderID,
+        centerX: bounds.left + bounds.width / 2,
+        centerY: bounds.top + bounds.height / 2,
+        left: bounds.left,
+        right: bounds.right,
+        top: bounds.top,
+        bottom: bounds.bottom,
+      }
+    })
+
+    // Now that we've calculated the position of the children, we no longer need
+    // the ephemeral div
+    if (ephemeralDiv) {
+      node.removeChild(ephemeralDiv)
+    }
+
+    // Calculate the variance between each set of positions on the children
+    const variances = Object.keys(childCoords[0])
+      .filter(x => x !== "placeholder")
+      .map(key => {
+        const coords = childCoords.map(x => x[key])
+        return {
+          variance: variance(coords),
+          side: key,
+        }
+      })
+
+    // Sort by variance. The lowest variance position indicates whether we are
+    // in a row or column layout
+    variances.sort((a, b) => {
+      return a.variance < b.variance ? -1 : 1
+    })
+    const column = ["centerX", "left", "right"].includes(variances[0].side)
+
+    // Calculate breakpoints between child components so we can determine the
+    // index to drop the component in.
+    // We want to ignore the placeholder from this calculation as it should not
+    // be considered a real child of the parent.
+    let breakpoints = childCoords
+      .filter(x => !x.placeholder)
+      .map(x => {
+        return column ? x.centerY : x.centerX
+      })
+
+    // Determine the index to drop the component in
+    const mousePosition = column ? mouseY : mouseX
+    let idx = 0
+    while (idx < breakpoints.length && breakpoints[idx] < mousePosition) {
+      idx++
+    }
+    dndStore.actions.updateDrop({
+      parent: id,
+      index: idx,
+    })
+  }
+  const throttledProcessEvent = Utils.throttle(processEvent, ThrottleRate)
+
+  const handleEvent = e => {
+    e.preventDefault()
+    throttledProcessEvent(e.clientX, e.clientY)
   }
 
   // Callback when on top of a component
   const onDragOver = e => {
-    // Skip if we aren't validly dragging currently
-    if (!dragInfo || !dropInfo) {
+    if (!source || !target) {
       return
     }
-
-    e.preventDefault()
-    const { droppableInside, bounds } = dropInfo
-    const { top, left, height, width } = bounds
-    const mouseY = e.clientY
-    const mouseX = e.clientX
-    const snapFactor = droppableInside ? 0.33 : 0.5
-    const snapLimitV = Math.min(40, height * snapFactor)
-    const snapLimitH = Math.min(40, width * snapFactor)
-
-    // Determine all sies we are within snap range of
-    let sides = []
-    if (mouseY <= top + snapLimitV) {
-      sides.push(Sides.Top)
-    } else if (mouseY >= top + height - snapLimitV) {
-      sides.push(Sides.Bottom)
-    }
-    if (mouseX < left + snapLimitH) {
-      sides.push(Sides.Left)
-    } else if (mouseX > left + width - snapLimitH) {
-      sides.push(Sides.Right)
-    }
-
-    // When no edges match, drop inside if possible
-    if (!sides.length) {
-      dropInfo.mode = droppableInside ? "inside" : null
-      dropInfo.side = null
-      return
-    }
-
-    // When one edge matches, use that edge
-    if (sides.length === 1) {
-      dropInfo.side = sides[0]
-      if ([Sides.Top, Sides.Left].includes(sides[0])) {
-        dropInfo.mode = "above"
-      } else {
-        dropInfo.mode = "below"
-      }
-      return
-    }
-
-    // When 2 edges match, work out which is closer
-    const mousePoint = [mouseX, mouseY]
-    const edges = getEdges(bounds, mousePoint)
-    const edge1 = edges[sides[0]]
-    const delta1 = calculatePointDelta(mousePoint, edge1)
-    const edge2 = edges[sides[1]]
-    const delta2 = calculatePointDelta(mousePoint, edge2)
-    const edge = delta1 < delta2 ? sides[0] : sides[1]
-    dropInfo.side = edge
-    if ([Sides.Top, Sides.Left].includes(edge)) {
-      dropInfo.mode = "above"
-    } else {
-      dropInfo.mode = "below"
-    }
+    handleEvent(e)
   }
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    // Skip if we aren't validly dragging currently
-    if (!dragInfo || !e.target.closest) {
+    if (!source) {
       return
     }
 
-    const element = e.target.closest(".component:not(.block)")
-    if (
-      element &&
-      element.classList.contains("droppable") &&
-      element.dataset.id !== dragInfo.target
-    ) {
-      // Do nothing if this is the same target
-      if (element.dataset.id === dropInfo?.target) {
-        return
-      }
-
-      // Ensure the dragging flag is always set.
-      // There's a bit of a race condition between the app reinitialisation
-      // after selecting the DND component and setting this the first time
-      if (!get(builderStore).isDragging) {
-        builderStore.actions.setDragging(true)
-      }
-
-      // Store target ID
-      const target = element.dataset.id
-
-      // Precompute and store some info to avoid recalculating everything in
-      // dragOver
-      const child = getDOMNodeForComponent(e.target)
-      const bounds = child.getBoundingClientRect()
-      dropInfo = {
-        target,
-        name: element.dataset.name,
-        icon: element.dataset.icon,
-        droppableInside: element.classList.contains("empty"),
-        bounds,
-      }
-    } else {
-      dropInfo = null
+    // Find the next valid component to consider dropping over, ignoring nested
+    // block components
+    const component = e.target?.closest?.(
+      `.component:not(.block):not(.${source.id})`
+    )
+    if (component && component.classList.contains("droppable")) {
+      dndStore.actions.updateTarget({
+        id: component.dataset.id,
+        parent: component.dataset.parent,
+        node: getDOMNode(component.dataset.id),
+        empty: component.classList.contains("empty"),
+        acceptsChildren: component.classList.contains("parent"),
+      })
+      handleEvent(e)
     }
   }
 
-  // Callback when leaving a potential drop target.
-  // Since we don't style our targets, we don't need to unset anything.
-  const onDragLeave = () => {}
-
   // Callback when dropping a drag on top of some component
-  const onDrop = e => {
-    e.preventDefault()
-    if (dropInfo?.mode) {
+  const onDrop = () => {
+    if (!source || !drop?.parent || drop?.index == null) {
+      return
+    }
+
+    // Check if we're adding a new component rather than moving one
+    if (source.newComponentType) {
+      builderStore.actions.dropNewComponent(
+        source.newComponentType,
+        drop.parent,
+        drop.index
+      )
+      return
+    }
+
+    // Convert parent + index into target + mode
+    let legacyDropTarget, legacyDropMode
+    const parent = findComponentById(
+      get(screenStore).activeScreen?.props,
+      drop.parent
+    )
+    if (!parent) {
+      return
+    }
+
+    // Do nothing if we didn't change the location
+    if (source.parent === drop.parent && source.index === drop.index) {
+      return
+    }
+
+    // Filter out source component and placeholder from consideration
+    const children = parent._children?.filter(
+      x => x._id !== DNDPlaceholderID && x._id !== source.id
+    )
+
+    // Use inside if no existing children
+    if (!children?.length) {
+      legacyDropTarget = parent._id
+      legacyDropMode = "inside"
+    } else if (drop.index === 0) {
+      legacyDropTarget = children[0]?._id
+      legacyDropMode = "above"
+    } else {
+      legacyDropTarget = children[drop.index - 1]?._id
+      legacyDropMode = "below"
+    }
+
+    if (legacyDropTarget && legacyDropMode) {
       builderStore.actions.moveComponent(
-        dragInfo.target,
-        dropInfo.target,
-        dropInfo.mode
+        source.id,
+        legacyDropTarget,
+        legacyDropMode
       )
     }
   }
@@ -203,39 +300,32 @@
   onMount(() => {
     // Events fired on the draggable target
     document.addEventListener("dragstart", onDragStart, false)
-    document.addEventListener("dragend", onDragEnd, false)
 
     // Events fired on the drop targets
     document.addEventListener("dragover", onDragOver, false)
     document.addEventListener("dragenter", onDragEnter, false)
-    document.addEventListener("dragleave", onDragLeave, false)
     document.addEventListener("drop", onDrop, false)
   })
 
   onDestroy(() => {
     // Events fired on the draggable target
     document.removeEventListener("dragstart", onDragStart, false)
-    document.removeEventListener("dragend", onDragEnd, false)
 
     // Events fired on the drop targets
     document.removeEventListener("dragover", onDragOver, false)
     document.removeEventListener("dragenter", onDragEnter, false)
-    document.removeEventListener("dragleave", onDragLeave, false)
     document.removeEventListener("drop", onDrop, false)
   })
 </script>
 
 <IndicatorSet
-  componentId={dropInfo?.mode === "inside" ? dropInfo.target : null}
+  componentId={$dndParent}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="930"
   transition
   prefix="Inside"
 />
 
-<DNDPositionIndicator
-  {dropInfo}
-  color="var(--spectrum-global-color-static-green-500)"
-  zIndex="940"
-  transition
-/>
+{#if $dndIsDragging}
+  <DNDPlaceholderOverlay />
+{/if}
diff --git a/packages/client/src/components/preview/DNDPlaceholder.svelte b/packages/client/src/components/preview/DNDPlaceholder.svelte
new file mode 100644
index 0000000000..3725f9e06e
--- /dev/null
+++ b/packages/client/src/components/preview/DNDPlaceholder.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { dndBounds } from "stores"
+  import { DNDPlaceholderID } from "constants"
+
+  $: style = getStyle($dndBounds)
+
+  const getStyle = bounds => {
+    if (!bounds) {
+      return null
+    }
+    return `--height: ${bounds.height}px; --width: ${bounds.width}px;`
+  }
+</script>
+
+{#if style}
+  <div class="wrapper">
+    <div class="placeholder" id={DNDPlaceholderID} {style} />
+  </div>
+{/if}
+
+<style>
+  .wrapper {
+    overflow: hidden;
+  }
+  .placeholder {
+    display: block;
+    height: var(--height);
+    width: var(--width);
+    max-height: 100%;
+    max-width: 100%;
+    opacity: 0;
+  }
+</style>
diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
new file mode 100644
index 0000000000..6ed2df6a87
--- /dev/null
+++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
@@ -0,0 +1,47 @@
+<script>
+  import { onMount } from "svelte"
+  import { DNDPlaceholderID } from "constants"
+  import { domDebounce } from "utils/domDebounce.js"
+
+  let left, top, height, width
+
+  const updatePosition = () => {
+    const node = document.getElementById(DNDPlaceholderID)
+    if (!node) {
+      height = 0
+      width = 0
+    } else {
+      const bounds = node.getBoundingClientRect()
+      left = bounds.left
+      top = bounds.top
+      height = bounds.height
+      width = bounds.width
+    }
+  }
+  const debouncedUpdate = domDebounce(updatePosition)
+
+  onMount(() => {
+    const interval = setInterval(debouncedUpdate, 100)
+    return () => {
+      clearInterval(interval)
+    }
+  })
+</script>
+
+{#if left != null && top != null && width && height}
+  <div
+    class="overlay"
+    style="left: {left}px; top: {top}px; width: {width}px; height: {height}px;"
+  />
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    z-index: 800;
+    background: hsl(160, 64%, 90%);
+    border-radius: 4px;
+    transition: all 130ms ease-out;
+    border: 2px solid var(--spectrum-global-color-static-green-500);
+  }
+</style>
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
deleted file mode 100644
index 4af4674126..0000000000
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-  import Indicator from "./Indicator.svelte"
-  import { Sides } from "./DNDHandler.svelte"
-
-  export let dropInfo
-  export let zIndex
-  export let color
-  export let transition
-
-  $: dimensions = getDimensions(dropInfo)
-  $: prefix = dropInfo?.mode === "above" ? "Before" : "After"
-  $: text = `${prefix} ${dropInfo?.name}`
-  $: icon = dropInfo?.icon
-  $: renderKey = `${dropInfo?.target}-${dropInfo?.side}`
-
-  const getDimensions = info => {
-    const { bounds, side } = info ?? {}
-    if (!bounds || !side) {
-      return null
-    }
-
-    // Get preview offset
-    const root = document.getElementById("clip-root")
-    const rootBounds = root.getBoundingClientRect()
-
-    // Subtract preview offset from bounds
-    let { left, top, width, height } = bounds
-    left -= rootBounds.left
-    top -= rootBounds.top
-
-    // Determine position
-    if (side === Sides.Top || side === Sides.Bottom) {
-      return {
-        top: side === Sides.Top ? top - 4 : top + height,
-        left: left - 2,
-        width: width + 4,
-        height: 0,
-      }
-    } else {
-      return {
-        top: top - 2,
-        left: side === Sides.Left ? left - 4 : left + width,
-        width: 0,
-        height: height + 4,
-      }
-    }
-  }
-</script>
-
-{#key renderKey}
-  {#if dimensions && dropInfo?.mode !== "inside"}
-    <Indicator
-      left={Math.round(dimensions.left)}
-      top={Math.round(dimensions.top)}
-      width={dimensions.width}
-      height={dimensions.height}
-      {text}
-      {icon}
-      {zIndex}
-      {color}
-      {transition}
-      alignRight={dropInfo?.side === Sides.Right}
-      line
-    />
-  {/if}
-{/key}
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 1a9e6477ac..d5583ed3db 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, dndIsDragging } from "stores"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.isDragging ? null : componentId}
+  componentId={$dndIsDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 1cb669bdc4..0b5b95e00b 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -19,8 +19,8 @@
 
 <div
   in:fade={{
-    delay: transition ? 130 : 0,
-    duration: transition ? 130 : 0,
+    delay: transition ? 100 : 0,
+    duration: transition ? 100 : 0,
   }}
   class="indicator"
   class:flipped
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index 5eacbf9b2e..49341a7976 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { builderStore } from "stores"
+  import { builderStore, dndIsDragging } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode
@@ -8,7 +8,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.selectedComponentId}
+  componentId={$dndIsDragging ? null : $builderStore.selectedComponentId}
   {color}
   zIndex="910"
   transition
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 5ea9b2339f..757d8b88db 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -3,7 +3,7 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore, componentStore, dndIsDragging } from "stores"
   import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 36
@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $componentStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar && !$builderStore.isDragging
+  $: showBar = definition?.showSettingsBar && !$dndIsDragging
   $: settings = getBarSettings(definition)
 
   const getBarSettings = definition => {
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 1560552dc4..bd387c7f9d 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -30,3 +30,7 @@ export const ActionTypes = {
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",
 }
+
+export const DNDPlaceholderID = "dnd-placeholder"
+export const DNDPlaceholderType = "dnd-placeholder"
+export const ScreenslotType = "screenslot"
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index b671d5554a..706cb4fc9f 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -6,6 +6,7 @@ import {
   blockStore,
   componentStore,
   environmentStore,
+  dndStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
@@ -25,6 +26,7 @@ let app
 const loadBudibase = async () => {
   // Update builder store with any builder flags
   builderStore.set({
+    ...get(builderStore),
     inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
@@ -59,6 +61,15 @@ const loadBudibase = async () => {
     if (name === "eject-block") {
       const block = blockStore.actions.getBlock(payload)
       block?.eject()
+    } else if (name === "dragging-new-component") {
+      const { dragging, component } = payload
+      if (dragging) {
+        const definition =
+          componentStore.actions.getComponentDefinition(component)
+        dndStore.actions.startDraggingNewComponent({ component, definition })
+      } else {
+        dndStore.actions.reset()
+      }
     }
   }
 
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index ba753a259e..b937b7f696 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -16,7 +16,6 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    isDragging: false,
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
@@ -67,11 +66,12 @@ const createBuilderStore = () => {
         mode,
       })
     },
-    setDragging: dragging => {
-      if (dragging === get(store).isDragging) {
-        return
-      }
-      store.update(state => ({ ...state, isDragging: dragging }))
+    dropNewComponent: (component, parent, index) => {
+      dispatchEvent("drop-new-component", {
+        component,
+        parent,
+        index,
+      })
     },
     setEditMode: enabled => {
       if (enabled === get(store).editMode) {
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 98edfaddae..b34dfe375d 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -5,7 +5,9 @@ import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
+import DNDPlaceholder from "../components/preview/DNDPlaceholder.svelte"
 import * as AppComponents from "../components/app/index.js"
+import { DNDPlaceholderType, ScreenslotType } from "../constants.js"
 
 const budibasePrefix = "@budibase/standard-components/"
 
@@ -18,26 +20,21 @@ const createComponentStore = () => {
 
   const derivedStore = derived(
     [store, builderStore, devToolsStore, screenStore],
-    ([$store, $builderState, $devToolsState, $screenState]) => {
+    ([$store, $builderStore, $devToolsStore, $screenStore]) => {
+      const { inBuilder, selectedComponentId } = $builderStore
+
       // Avoid any of this logic if we aren't in the builder preview
-      if (!$builderState.inBuilder && !$devToolsState.visible) {
+      if (!inBuilder && !$devToolsStore.visible) {
         return {}
       }
 
-      // Derive the selected component instance and definition
-      let asset
-      const { screen, selectedComponentId } = $builderState
-      if ($builderState.inBuilder) {
-        asset = screen
-      } else {
-        asset = $screenState.activeScreen
-      }
-      const component = findComponentById(asset?.props, selectedComponentId)
+      const root = $screenStore.activeScreen?.props
+      const component = findComponentById(root, selectedComponentId)
       const definition = getComponentDefinition(component?._component)
 
       // Derive the selected component path
-      const path =
-        findComponentPathById(asset?.props, selectedComponentId) || []
+      const selectedPath =
+        findComponentPathById(root, selectedComponentId) || []
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -45,9 +42,8 @@ const createComponentStore = () => {
           $store.mountedComponents[selectedComponentId],
         selectedComponent: component,
         selectedComponentDefinition: definition,
-        selectedComponentPath: path?.map(component => component._id),
+        selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
-        currentAsset: asset,
       }
     }
   )
@@ -95,8 +91,8 @@ const createComponentStore = () => {
   }
 
   const getComponentById = id => {
-    const asset = get(derivedStore).currentAsset
-    return findComponentById(asset?.props, id)
+    const root = get(screenStore).activeScreen?.props
+    return findComponentById(root, id)
   }
 
   const getComponentDefinition = type => {
@@ -105,8 +101,10 @@ const createComponentStore = () => {
     }
 
     // Screenslot is an edge case
-    if (type === "screenslot") {
+    if (type === ScreenslotType) {
       type = `${budibasePrefix}${type}`
+    } else if (type === DNDPlaceholderType) {
+      return {}
     }
 
     // Handle built-in components
@@ -124,8 +122,10 @@ const createComponentStore = () => {
     if (!type) {
       return null
     }
-    if (type === "screenslot") {
+    if (type === ScreenslotType) {
       return Router
+    } else if (type === DNDPlaceholderType) {
+      return DNDPlaceholder
     }
 
     // Handle budibase components
diff --git a/packages/client/src/stores/derived/currentRole.js b/packages/client/src/stores/derived/currentRole.js
new file mode 100644
index 0000000000..28287e1ea4
--- /dev/null
+++ b/packages/client/src/stores/derived/currentRole.js
@@ -0,0 +1,11 @@
+import { derived } from "svelte/store"
+import { devToolsStore } from "../devTools.js"
+import { authStore } from "../auth.js"
+
+// Derive the current role of the logged-in user
+export const currentRole = derived(
+  [devToolsStore, authStore],
+  ([$devToolsStore, $authStore]) => {
+    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
+  }
+)
diff --git a/packages/client/src/stores/derived/dndComponentPath.js b/packages/client/src/stores/derived/dndComponentPath.js
new file mode 100644
index 0000000000..58fb395dd6
--- /dev/null
+++ b/packages/client/src/stores/derived/dndComponentPath.js
@@ -0,0 +1,13 @@
+import { derived } from "svelte/store"
+import { findComponentPathById } from "utils/components.js"
+import { dndParent } from "../dnd.js"
+import { screenStore } from "../screens.js"
+
+export const dndComponentPath = derived(
+  [dndParent, screenStore],
+  ([$dndParent, $screenStore]) => {
+    const root = $screenStore.activeScreen?.props
+    const path = findComponentPathById(root, $dndParent) || []
+    return path?.map(component => component._id)
+  }
+)
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
new file mode 100644
index 0000000000..4f6a6ab91d
--- /dev/null
+++ b/packages/client/src/stores/derived/index.js
@@ -0,0 +1,5 @@
+// These derived stores are pulled out from their parent stores to avoid
+// dependency loops. By inverting store dependencies and extracting them
+// separately we can keep our actual stores lean and performant.
+export { currentRole } from "./currentRole.js"
+export { dndComponentPath } from "./dndComponentPath.js"
diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js
new file mode 100644
index 0000000000..a1f85af92c
--- /dev/null
+++ b/packages/client/src/stores/dnd.js
@@ -0,0 +1,90 @@
+import { writable, derived } from "svelte/store"
+
+const createDndStore = () => {
+  const initialState = {
+    // Info about the dragged component
+    source: null,
+
+    // Info about the target component being hovered over
+    target: null,
+
+    // Info about where the component would be dropped
+    drop: null,
+  }
+  const store = writable(initialState)
+
+  const startDraggingExistingComponent = ({ id, parent, bounds, index }) => {
+    store.set({
+      ...initialState,
+      source: { id, parent, bounds, index },
+    })
+  }
+
+  const startDraggingNewComponent = ({ component, definition }) => {
+    if (!component) {
+      return
+    }
+
+    // Get size of new component so we can show a properly sized placeholder
+    const width = definition?.size?.width || 128
+    const height = definition?.size?.height || 64
+
+    store.set({
+      ...initialState,
+      source: {
+        id: null,
+        parent: null,
+        bounds: { height, width },
+        index: null,
+        newComponentType: component,
+      },
+    })
+  }
+
+  const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => {
+    store.update(state => {
+      state.target = { id, parent, node, empty, acceptsChildren }
+      return state
+    })
+  }
+
+  const updateDrop = ({ parent, index }) => {
+    store.update(state => {
+      state.drop = { parent, index }
+      return state
+    })
+  }
+
+  const reset = () => {
+    store.set(initialState)
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: {
+      startDraggingExistingComponent,
+      startDraggingNewComponent,
+      updateTarget,
+      updateDrop,
+      reset,
+    },
+  }
+}
+
+export const dndStore = createDndStore()
+
+// The DND store is updated extremely frequently, so we can greatly improve
+// performance by deriving any state that needs to be externally observed.
+// By doing this and using primitives, we can avoid invalidating other stores
+// or components which depend on DND state unless values actually change.
+export const dndIsDragging = derived(dndStore, $dndStore => !!$dndStore.source)
+export const dndParent = derived(dndStore, $dndStore => $dndStore.drop?.parent)
+export const dndIndex = derived(dndStore, $dndStore => $dndStore.drop?.index)
+export const dndBounds = derived(
+  dndStore,
+  $dndStore => $dndStore.source?.bounds
+)
+export const dndIsNewComponent = derived(
+  dndStore,
+  $dndStore => $dndStore.source?.newComponentType != null
+)
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index 5b77762223..c431302d43 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -1,7 +1,3 @@
-import { derived } from "svelte/store"
-import { devToolsStore } from "./devTools.js"
-import { authStore } from "./auth.js"
-
 export { authStore } from "./auth"
 export { appStore } from "./app"
 export { notificationStore } from "./notification"
@@ -19,6 +15,14 @@ export { uploadStore } from "./uploads.js"
 export { rowSelectionStore } from "./rowSelection.js"
 export { blockStore } from "./blocks.js"
 export { environmentStore } from "./environment"
+export {
+  dndStore,
+  dndIndex,
+  dndParent,
+  dndBounds,
+  dndIsNewComponent,
+  dndIsDragging,
+} from "./dnd"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
@@ -26,10 +30,5 @@ export { createContextStore } from "./context"
 // Initialises an app by loading screens and routes
 export { initialise } from "./initialise"
 
-// Derive the current role of the logged-in user
-export const currentRole = derived(
-  [devToolsStore, authStore],
-  ([$devToolsStore, $authStore]) => {
-    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
-  }
-)
+// Derived state
+export * from "./derived"
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 84cd4000c1..0787610d80 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -2,18 +2,36 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
+import { dndIndex, dndParent, dndIsNewComponent } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
+import { findComponentById, findComponentParent } from "../utils/components.js"
+import { Helpers } from "@budibase/bbui"
+import { DNDPlaceholderID, DNDPlaceholderType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
-    [appStore, routeStore, builderStore],
-    ([$appStore, $routeStore, $builderStore]) => {
+    [
+      appStore,
+      routeStore,
+      builderStore,
+      dndParent,
+      dndIndex,
+      dndIsNewComponent,
+    ],
+    ([
+      $appStore,
+      $routeStore,
+      $builderStore,
+      $dndParent,
+      $dndIndex,
+      $dndIsNewComponent,
+    ]) => {
       let activeLayout, activeScreen
       let screens
 
       if ($builderStore.inBuilder) {
         // Use builder defined definitions if inside the builder preview
-        activeScreen = $builderStore.screen
+        activeScreen = Helpers.cloneDeep($builderStore.screen)
         screens = [activeScreen]
 
         // Legacy - allow the builder to specify a layout
@@ -24,8 +42,10 @@ const createScreenStore = () => {
         // Find the correct screen by matching the current route
         screens = $appStore.screens || []
         if ($routeStore.activeRoute) {
-          activeScreen = screens.find(
-            screen => screen._id === $routeStore.activeRoute.screenId
+          activeScreen = Helpers.cloneDeep(
+            screens.find(
+              screen => screen._id === $routeStore.activeRoute.screenId
+            )
           )
         }
 
@@ -40,6 +60,37 @@ const createScreenStore = () => {
         }
       }
 
+      // Insert DND placeholder if required
+      if (activeScreen && $dndParent && $dndIndex != null) {
+        // Remove selected component from tree if we are moving an existing
+        // component
+        const { selectedComponentId } = $builderStore
+        if (!$dndIsNewComponent) {
+          let selectedParent = findComponentParent(
+            activeScreen.props,
+            selectedComponentId
+          )
+          if (selectedParent) {
+            selectedParent._children = selectedParent._children?.filter(
+              x => x._id !== selectedComponentId
+            )
+          }
+        }
+
+        // Insert placeholder component
+        const placeholder = {
+          _component: DNDPlaceholderID,
+          _id: DNDPlaceholderType,
+          static: true,
+        }
+        let parent = findComponentById(activeScreen.props, $dndParent)
+        if (!parent._children?.length) {
+          parent._children = [placeholder]
+        } else {
+          parent._children.splice($dndIndex, 0, placeholder)
+        }
+      }
+
       // Assign ranks to screens, preferring higher roles and home screens
       screens.forEach(screen => {
         const roleId = screen.routing.roleId
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index a534ee8326..e44ed2451c 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -224,10 +224,11 @@ const changeFormStepHandler = async (action, context) => {
   )
 }
 
-const closeScreenModalHandler = () => {
+const closeScreenModalHandler = action => {
+  let { url } = action.parameters
   // Emit this as a window event, so parent screens which are iframing us in
   // can close the modal
-  window.parent.postMessage({ type: "close-screen-modal" })
+  window.parent.postMessage({ type: "close-screen-modal", url })
 }
 
 const updateStateHandler = action => {
diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js
index 4b1b8a7ada..1812175c2c 100644
--- a/packages/client/src/utils/components.js
+++ b/packages/client/src/utils/components.js
@@ -60,3 +60,25 @@ export const findChildrenByType = (component, type, children = []) => {
     findChildrenByType(child, type, children)
   })
 }
+
+/**
+ * Recursively searches for the parent component of a specific component ID
+ */
+export const findComponentParent = (rootComponent, id, parentComponent) => {
+  if (!rootComponent || !id) {
+    return null
+  }
+  if (rootComponent._id === id) {
+    return parentComponent
+  }
+  if (!rootComponent._children) {
+    return null
+  }
+  for (const child of rootComponent._children) {
+    const childResult = findComponentParent(child, id, rootComponent)
+    if (childResult) {
+      return childResult
+    }
+  }
+  return null
+}
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index b07a3213d9..9ad17ceff0 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -27,7 +27,7 @@ export const styleable = (node, styles = {}) => {
   const setupStyles = (newStyles = {}) => {
     let baseStyles = {}
     if (newStyles.empty) {
-      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
+      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-400)"
       baseStyles.padding = "var(--spacing-l)"
       baseStyles.overflow = "hidden"
     }
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 50f28f646e..c80090ec31 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.0.30-alpha.7",
+    "@budibase/bbui": "2.0.30-alpha.10",
     "lodash": "^4.17.21",
     "svelte": "^3.46.2"
   }
diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.js
index 587d057351..8aa49392fb 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.js
@@ -40,3 +40,37 @@ export const debounce = (callback, minDelay = 1000) => {
     })
   }
 }
+
+/**
+ * Utility to throttle invocations of a synchronous function. This is better
+ * than a simple debounce invocation for a number of reasons. Features include:
+ * - First invocation is immediate (no initial delay)
+ * - Every invocation has the latest params (no stale params)
+ * - There will always be a final invocation with the last params (no missing
+ *   final update)
+ * @param callback
+ * @param minDelay
+ * @returns {Function} a throttled version function
+ */
+export const throttle = (callback, minDelay = 1000) => {
+  let lastParams
+  let stalled = false
+  let pending = false
+  const invoke = (...params) => {
+    lastParams = params
+    if (stalled) {
+      pending = true
+      return
+    }
+    callback(...lastParams)
+    stalled = true
+    setTimeout(() => {
+      stalled = false
+      if (pending) {
+        pending = false
+        invoke(...lastParams)
+      }
+    }, minDelay)
+  }
+  return invoke
+}
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index f31347f878..a62c74c7af 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/sdk",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase Public API SDK",
   "author": "Budibase",
   "license": "MPL-2.0",
diff --git a/packages/server/package.json b/packages/server/package.json
index 42eb3b2df1..1a2d5fe532 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -77,11 +77,11 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "10.0.3",
-    "@budibase/backend-core": "2.0.30-alpha.7",
-    "@budibase/client": "2.0.30-alpha.7",
-    "@budibase/pro": "2.0.30-alpha.7",
-    "@budibase/string-templates": "2.0.30-alpha.7",
-    "@budibase/types": "2.0.30-alpha.7",
+    "@budibase/backend-core": "2.0.30-alpha.10",
+    "@budibase/client": "2.0.30-alpha.10",
+    "@budibase/pro": "2.0.30-alpha.10",
+    "@budibase/string-templates": "2.0.30-alpha.10",
+    "@budibase/types": "2.0.30-alpha.10",
     "@bull-board/api": "3.7.0",
     "@bull-board/koa": "3.9.4",
     "@elastic/elasticsearch": "7.10.0",
diff --git a/packages/server/src/integrations/arangodb.ts b/packages/server/src/integrations/arangodb.ts
index 6df96501a4..e28940f36e 100644
--- a/packages/server/src/integrations/arangodb.ts
+++ b/packages/server/src/integrations/arangodb.ts
@@ -62,6 +62,8 @@ class ArangoDBIntegration implements IntegrationBase {
 
   constructor(config: ArangodbConfig) {
     const newConfig = {
+      url: config.url,
+      databaseName: config.databaseName,
       auth: {
         username: config.username,
         password: config.password,
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index e124ce969d..316159fe39 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -1094,12 +1094,12 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-2.0.30-alpha.7.tgz#a46ddcda96c6ecead6574cb0e2751e4ed858371d"
-  integrity sha512-aX41o4QE7OlS+JeKIDt3bJGGsbddI4eRAram+2bYlHONbupkbTAVs9DFBkV9BkMCQ8zk9FSDY90Le0GEuiI+sw==
+"@budibase/backend-core@2.0.30-alpha.10":
+  version "2.0.30-alpha.10"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-2.0.30-alpha.10.tgz#ff11327ad0456d1af40839f3a89002487d0e3173"
+  integrity sha512-KGX0k5h1IBE5hNmPBRC58hk0XfXzeBmFcXzveA8YAXboeYo0Rzo2xQr5oSbT9766JaNaHTwF9J1luyxq0Zr7KA==
   dependencies:
-    "@budibase/types" "2.0.30-alpha.7"
+    "@budibase/types" "2.0.30-alpha.10"
     "@shopify/jest-koa-mocks" "5.0.1"
     "@techpass/passport-openidconnect" "0.3.2"
     aws-sdk "2.1030.0"
@@ -1130,59 +1130,6 @@
     uuid "8.3.2"
     zlib "1.0.5"
 
-"@budibase/bbui@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-2.0.30-alpha.7.tgz#2d0f00b3f244e9d579b146710b6a697c1fa5c3b8"
-  integrity sha512-0Ml31GFHqXUGVcIVoKHQPK79TbugtO0L7jgtQ3oaok+Z2YzWYfSudXsjDZwZrBWyKxTy9odXaodA2Me9O1x6dA==
-  dependencies:
-    "@adobe/spectrum-css-workflow-icons" "^1.2.1"
-    "@budibase/string-templates" "2.0.30-alpha.7"
-    "@spectrum-css/actionbutton" "^1.0.1"
-    "@spectrum-css/actiongroup" "^1.0.1"
-    "@spectrum-css/avatar" "^3.0.2"
-    "@spectrum-css/button" "^3.0.1"
-    "@spectrum-css/buttongroup" "^3.0.2"
-    "@spectrum-css/checkbox" "^3.0.2"
-    "@spectrum-css/dialog" "^3.0.1"
-    "@spectrum-css/divider" "^1.0.3"
-    "@spectrum-css/dropzone" "^3.0.2"
-    "@spectrum-css/fieldgroup" "^3.0.2"
-    "@spectrum-css/fieldlabel" "^3.0.1"
-    "@spectrum-css/icon" "^3.0.1"
-    "@spectrum-css/illustratedmessage" "^3.0.2"
-    "@spectrum-css/inlinealert" "^2.0.1"
-    "@spectrum-css/inputgroup" "^3.0.2"
-    "@spectrum-css/label" "^2.0.10"
-    "@spectrum-css/link" "^3.1.1"
-    "@spectrum-css/menu" "^3.0.1"
-    "@spectrum-css/modal" "^3.0.1"
-    "@spectrum-css/pagination" "^3.0.3"
-    "@spectrum-css/picker" "^1.0.1"
-    "@spectrum-css/popover" "^3.0.1"
-    "@spectrum-css/progressbar" "^1.0.2"
-    "@spectrum-css/progresscircle" "^1.0.2"
-    "@spectrum-css/radio" "^3.0.2"
-    "@spectrum-css/search" "^3.0.2"
-    "@spectrum-css/sidenav" "^3.0.2"
-    "@spectrum-css/slider" "3.0.1"
-    "@spectrum-css/statuslight" "^3.0.2"
-    "@spectrum-css/stepper" "^3.0.3"
-    "@spectrum-css/switch" "^1.0.2"
-    "@spectrum-css/table" "^3.0.1"
-    "@spectrum-css/tabs" "^3.2.12"
-    "@spectrum-css/tags" "^3.0.2"
-    "@spectrum-css/textfield" "^3.0.1"
-    "@spectrum-css/toast" "^3.0.1"
-    "@spectrum-css/tooltip" "^3.0.3"
-    "@spectrum-css/treeview" "^3.0.2"
-    "@spectrum-css/typography" "^3.0.1"
-    "@spectrum-css/underlay" "^2.0.9"
-    "@spectrum-css/vars" "^3.0.1"
-    dayjs "^1.10.4"
-    easymde "^2.16.1"
-    svelte-flatpickr "^3.2.3"
-    svelte-portal "^1.0.0"
-
 "@budibase/bbui@^0.9.139":
   version "0.9.190"
   resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.190.tgz#e1ec400ac90f556bfbc80fc23a04506f1585ea81"
@@ -1233,78 +1180,13 @@
     svelte-flatpickr "^3.2.3"
     svelte-portal "^1.0.0"
 
-"@budibase/client@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-2.0.30-alpha.7.tgz#1243ba442e966574def4b146734266b5b8f9b83c"
-  integrity sha512-mSe97YjLDwm7cKt+ujT/DwedDz19Dkw/m9kyLp2PlmzlnBnzmP/H6vjHvLGBO8nDUbKoYy8MJwR3OQeiwSEimw==
+"@budibase/pro@2.0.30-alpha.10":
+  version "2.0.30-alpha.10"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.0.30-alpha.10.tgz#2bd878840f705a1d344da5fac1d588a06e5eefed"
+  integrity sha512-cXnbYsrx9Y9t4XAnzoFnNXJaJfd+vnIFaX5ULnJYTPsmouDij/A/qU8lNDtpxciss4dgxO9AnZH31ZXFVlJj0Q==
   dependencies:
-    "@budibase/bbui" "2.0.30-alpha.7"
-    "@budibase/frontend-core" "2.0.30-alpha.7"
-    "@budibase/string-templates" "2.0.30-alpha.7"
-    "@spectrum-css/button" "^3.0.3"
-    "@spectrum-css/card" "^3.0.3"
-    "@spectrum-css/divider" "^1.0.3"
-    "@spectrum-css/link" "^3.1.3"
-    "@spectrum-css/page" "^3.0.1"
-    "@spectrum-css/tag" "^3.1.4"
-    "@spectrum-css/typography" "^3.0.2"
-    "@spectrum-css/vars" "^3.0.1"
-    apexcharts "^3.22.1"
-    dayjs "^1.10.5"
-    downloadjs "1.4.7"
-    html5-qrcode "^2.2.1"
-    leaflet "^1.7.1"
-    regexparam "^1.3.0"
-    sanitize-html "^2.7.0"
-    screenfull "^6.0.1"
-    shortid "^2.2.15"
-    socket.io-client "^4.5.1"
-    svelte "^3.49.0"
-    svelte-apexcharts "^1.0.2"
-    svelte-flatpickr "^3.1.0"
-    svelte-spa-router "^3.0.5"
-
-"@budibase/frontend-core@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/frontend-core/-/frontend-core-2.0.30-alpha.7.tgz#86f73b28db3bf9208a772296c13bc0765f898bb0"
-  integrity sha512-Vy14lDwx5MesXH3mX031QR+qUaOZmlV7PzPR0tXHAv/vxZHSc6SwUiKNdT1bpHEw0qLnm4jtsZpKGbO9FqFw+w==
-  dependencies:
-    "@budibase/bbui" "2.0.30-alpha.7"
-    lodash "^4.17.21"
-    svelte "^3.46.2"
-
-"@budibase/handlebars-helpers@^0.11.8":
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/@budibase/handlebars-helpers/-/handlebars-helpers-0.11.8.tgz#6953d29673a8c5c407e096c0a84890465c7ce841"
-  integrity sha512-ggWJUt0GqsHFAEup5tlWlcrmYML57nKhpNGGLzVsqXVYN8eVmf3xluYmmMe7fDYhQH0leSprrdEXmsdFQF3HAQ==
-  dependencies:
-    array-sort "^1.0.0"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    for-in "^1.0.2"
-    get-object "^0.2.0"
-    get-value "^3.0.1"
-    handlebars "^4.7.7"
-    handlebars-utils "^1.0.6"
-    has-value "^2.0.2"
-    helper-md "^0.2.2"
-    html-tag "^2.0.0"
-    is-even "^1.0.0"
-    is-glob "^4.0.1"
-    kind-of "^6.0.3"
-    micromatch "^3.1.5"
-    relative "^3.0.2"
-    striptags "^3.1.1"
-    to-gfm-code-block "^0.1.1"
-    year "^0.2.1"
-
-"@budibase/pro@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.0.30-alpha.7.tgz#1432b47141b305666dc005c5fc5a02d9cd38cf6a"
-  integrity sha512-F8qkj+Uy2Pqi/FeJYDBEdNAT7zEx/dw19x8o+3vHmTnQhwLbuSOHGyy9C6PgSW5Gmm0GgxjOycDVOq7ewnwWDA==
-  dependencies:
-    "@budibase/backend-core" "2.0.30-alpha.7"
-    "@budibase/types" "2.0.30-alpha.7"
+    "@budibase/backend-core" "2.0.30-alpha.10"
+    "@budibase/types" "2.0.30-alpha.10"
     "@koa/router" "8.0.8"
     joi "17.6.0"
     node-fetch "^2.6.1"
@@ -1327,22 +1209,10 @@
     svelte-apexcharts "^1.0.2"
     svelte-flatpickr "^3.1.0"
 
-"@budibase/string-templates@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-2.0.30-alpha.7.tgz#f26ea4b16587acdbbf2368659585437b03df9f7d"
-  integrity sha512-EtWyN3TElpLE7YfHjM4hyhehmhbr6xcMt/MiT+6Yy/MZlloB5QT4x3UMKX4SriKwNSlK2UYsHLCzt7Ho1V8DqA==
-  dependencies:
-    "@budibase/handlebars-helpers" "^0.11.8"
-    dayjs "^1.10.4"
-    handlebars "^4.7.6"
-    handlebars-utils "^1.0.6"
-    lodash "^4.17.20"
-    vm2 "^3.9.4"
-
-"@budibase/types@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-2.0.30-alpha.7.tgz#fe85563eb42ce01869e653a790a7f213ea2d6308"
-  integrity sha512-WL+2LPQyYq1BwPGgkM7wRnIv4/QXMX1ivXpzoy9lzi1yCJw0rxg8MBpfUuVU0cmDOAnmHkTh2nBQNUhLYPyvVA==
+"@budibase/types@2.0.30-alpha.10":
+  version "2.0.30-alpha.10"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-2.0.30-alpha.10.tgz#9b0ecc9d68ad5694a10f4390dd0ca64b93127e5b"
+  integrity sha512-qaXoUdHWhvym085dHt0WB+U7Lap1mqwh2zRo+2e+kfvEqzOyvj2H7ILK3wjVGYlrFrr7qceQaMnDCAEzad6aMg==
 
 "@bull-board/api@3.7.0":
   version "3.7.0"
@@ -2597,11 +2467,6 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.23.tgz#c218560d472e13a3e0d1499b762df1206dcffbfd"
   integrity sha512-4IFw2/HMQJRzM0M2c5na/HeY7y5vJoGpMFBkXNpQyhW4TRo7N1rGwYQ5dRD3s4OVEWV4/rjfGV0d/qhfwKUTog==
 
-"@spectrum-css/slider@3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.1.tgz#5281e6f47eb5a4fd3d1816c138bf66d01d7f2e49"
-  integrity sha512-DI2dtMRnQuDM1miVzl3SGyR1khUEKnwdXfO5EHDFwkC3yav43F5QogkfjmjFmWWobMVovdJlAuiaaJ/IHejD0Q==
-
 "@spectrum-css/statuslight@^3.0.2":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.8.tgz#3b0ea80712573679870a85d469850230e794a0f7"
@@ -2627,16 +2492,6 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.16.tgz#c3f7800d8d6f7c9930c28cd01354816328bf72b1"
   integrity sha512-JUcMB/fiDG/KoyrVstlUMacFJUY4OHKqhMRuPtu9ggUXWCRbSkY8he92v6u0HwY3DuhDoOxNTK8d/PLjk/fsbg==
 
-"@spectrum-css/tabs@^3.2.12":
-  version "3.2.20"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.20.tgz#f8c139402619e2b9cda14da31d21f3bd9b0f14a3"
-  integrity sha512-wfKFLJpjvx22mXZht+FTK5dYw7t/kkwK/dNwM+Fa8nxn7N97WH392iy+wEgqXPU4HJmgUWxaZANITOaAw4sa0A==
-
-"@spectrum-css/tag@^3.1.4":
-  version "3.3.14"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-3.3.14.tgz#2d1ca0759da6a3a2970d14bcabf33bd4a8f63a5f"
-  integrity sha512-S4RUaxN/83Pr/SYkQHeZNh2NXmtumUEzhrsrrliI6bAt3bjs+mLresTGd9qkIX2+Ycq1JHWTr0HTga4ti1YYyA==
-
 "@spectrum-css/tags@^3.0.2":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.3.tgz#fc76d2735cdc442de91b7eb3bee49a928c0767ac"
@@ -2806,13 +2661,6 @@
   resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8"
   integrity sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==
 
-"@types/codemirror@^5.60.4":
-  version "5.60.5"
-  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
-  integrity sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==
-  dependencies:
-    "@types/tern" "*"
-
 "@types/connect@*":
   version "3.4.35"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
@@ -2924,7 +2772,7 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-1.8.2.tgz#7315b4c4c54f82d13fa61c228ec5c2ea5cc9e0e1"
   integrity sha512-EqX+YQxINb+MeXaIqYDASb6U6FCHbWjkj4a1CKDBks3d/QiB2+PqBLyO72vLDgAO1wUI4O+9gweRcQK11bTL/w==
 
-"@types/ioredis@^4.28.10":
+"@types/ioredis@4.28.10":
   version "4.28.10"
   resolved "https://registry.yarnpkg.com/@types/ioredis/-/ioredis-4.28.10.tgz#40ceb157a4141088d1394bb87c98ed09a75a06ff"
   integrity sha512-69LyhUgrXdgcNDv7ogs1qXZomnfOEnSmrmMFqKgt1XMJxmoOSG/u3wYy13yACIfKuMJ8IhKgHafDO3sx19zVQQ==
@@ -3028,11 +2876,6 @@
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
   integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
 
-"@types/marked@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.7.tgz#400a76809fd08c2bbd9e25f3be06ea38c8e0a1d3"
-  integrity sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw==
-
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
@@ -3158,13 +3001,6 @@
     "@types/cookiejar" "*"
     "@types/node" "*"
 
-"@types/tern@*":
-  version "0.23.4"
-  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
-  integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
-  dependencies:
-    "@types/estree" "*"
-
 "@types/tough-cookie@*":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
@@ -3776,7 +3612,7 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
-argparse@^1.0.10, argparse@^1.0.7:
+argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -3823,15 +3659,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha512-H3LU5RLiSsGXPhN+Nipar0iR0IofH+8r89G2y1tBKxQ/agagKyAjhkAFDRBfodP2caPrNKHpAWNIM/c9yeL7uA==
 
-array-sort@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-1.0.0.tgz#e4c05356453f56f53512a7d1d6123f2c54c0a88a"
-  integrity sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==
-  dependencies:
-    default-compare "^1.0.0"
-    get-value "^2.0.6"
-    kind-of "^5.0.2"
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -3982,13 +3809,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-autolinker@~0.28.0:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.28.1.tgz#0652b491881879f0775dace0cdca3233942a4e47"
-  integrity sha512-zQAFO1Dlsn69eXaO6+7YZc+v84aquQKbwpzCE3L0stj56ERn9hutFxPopViLjo9G+rWwjozRhgS5KJ25Xy19cQ==
-  dependencies:
-    gulp-header "^1.7.1"
-
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -4838,18 +4658,6 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
-codemirror-spell-checker@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e"
-  integrity sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==
-  dependencies:
-    typo-js "*"
-
-codemirror@^5.63.1:
-  version "5.65.9"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.9.tgz#ec70c92aa206ee4c9853d5f1e7c4ed356cdab68c"
-  integrity sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw==
-
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -5000,13 +4808,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-concat-with-sourcemaps@*:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
-  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
-  dependencies:
-    source-map "^0.6.1"
-
 condense-newlines@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
@@ -5420,13 +5221,6 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
-  integrity sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==
-  dependencies:
-    kind-of "^5.0.2"
-
 default-shell@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/default-shell/-/default-shell-1.0.1.tgz#752304bddc6174f49eb29cb988feea0b8813c8bc"
@@ -5599,25 +5393,11 @@ doctrine@3.0.0, doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-serializer@^1.0.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
-  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.0"
-    entities "^2.0.0"
-
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
-  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
-
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -5632,22 +5412,6 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^4.0.0, domhandler@^4.2.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
-  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
-  dependencies:
-    domelementtype "^2.2.0"
-
-domutils@^2.5.2:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
-  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
-  dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-
 dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5692,11 +5456,6 @@ download@8.0.0:
     p-event "^2.1.0"
     pify "^4.0.1"
 
-downloadjs@1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
-  integrity sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==
-
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -5712,17 +5471,6 @@ duplexify@^4.0.0:
     readable-stream "^3.1.1"
     stream-shift "^1.0.0"
 
-easymde@^2.16.1:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.18.0.tgz#ff1397d07329b1a7b9187d2d0c20766fa16b3b1b"
-  integrity sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==
-  dependencies:
-    "@types/codemirror" "^5.60.4"
-    "@types/marked" "^4.0.7"
-    codemirror "^5.63.1"
-    codemirror-spell-checker "1.1.2"
-    marked "^4.1.0"
-
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -5880,17 +5628,6 @@ end-stream@~0.1.0:
   dependencies:
     write-stream "~0.4.3"
 
-engine.io-client@~6.2.3:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.3.tgz#a8cbdab003162529db85e9de31575097f6d29458"
-  integrity sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==
-  dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
-    debug "~4.3.1"
-    engine.io-parser "~5.0.3"
-    ws "~8.2.3"
-    xmlhttprequest-ssl "~2.0.0"
-
 engine.io-parser@~5.0.3:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
@@ -5920,16 +5657,6 @@ enhanced-resolve@^5.9.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-ent@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
-  integrity sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==
-
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
 entities@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
@@ -6941,11 +6668,6 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-exists-sync@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
-  integrity sha512-cR/vflFyPZtrN6b38ZyWxpWdhlXrzZEBawlpBQMq7033xVY7/kg0GDMBK5jg8lDYQckdJ5x/YC88lM3C7VMsLg==
-
 fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -7094,14 +6816,6 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
-get-object@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/get-object/-/get-object-0.2.0.tgz#d92ff7d5190c64530cda0543dac63a3d47fe8c0c"
-  integrity sha512-7P6y6k6EzEFmO/XyUyFlXm1YLJy9xeA1x/grNV8276abX5GuwUtYgKFkRFkLixw4hf4Pz9q2vgv/8Ar42R0HuQ==
-  dependencies:
-    is-number "^2.0.2"
-    isobject "^0.2.0"
-
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -7164,13 +6878,6 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
 
-get-value@^3.0.0, get-value@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-3.0.1.tgz#5efd2a157f1d6a516d7524e124ac52d0a39ef5a8"
-  integrity sha512-mKZj9JLQrwMBtj5wxi6MH8Z5eSKaERpAwjg43dPtlGI1ZVEgH/qC7T8/6R2OBSUA+zzHBZgICsVJaEIV2tKTDA==
-  dependencies:
-    isobject "^3.0.1"
-
 getopts@2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/getopts/-/getopts-2.2.5.tgz#67a0fe471cacb9c687d817cab6450b96dde8313b"
@@ -7476,24 +7183,7 @@ gtoken@^5.0.4:
     google-p12-pem "^3.1.3"
     jws "^4.0.0"
 
-gulp-header@^1.7.1:
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-1.8.12.tgz#ad306be0066599127281c4f8786660e705080a84"
-  integrity sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==
-  dependencies:
-    concat-with-sourcemaps "*"
-    lodash.template "^4.4.0"
-    through2 "^2.0.0"
-
-handlebars-utils@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars-utils/-/handlebars-utils-1.0.6.tgz#cb9db43362479054782d86ffe10f47abc76357f9"
-  integrity sha512-d5mmoQXdeEqSKMtQQZ9WkiUcO1E3tPbWxluCK9hVgIDPzQa9WsKo3Lbe/sGflTe7TomHEeZaOgwIkyIr1kfzkw==
-  dependencies:
-    kind-of "^6.0.0"
-    typeof-article "^0.1.1"
-
-handlebars@^4.7.6, handlebars@^4.7.7:
+handlebars@^4.7.7:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
   integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
@@ -7587,14 +7277,6 @@ has-value@^1.0.0:
     has-values "^1.0.0"
     isobject "^3.0.0"
 
-has-value@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-2.0.2.tgz#d0f12e8780ba8e90e66ad1a21c707fdb67c25658"
-  integrity sha512-ybKOlcRsK2MqrM3Hmz/lQxXHZ6ejzSPzpNabKB45jb5qDgJvKPa3SdapTsTLwEb9WltgWpOmNax7i+DzNOk4TA==
-  dependencies:
-    get-value "^3.0.0"
-    has-values "^2.0.1"
-
 has-values@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
@@ -7608,13 +7290,6 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has-values@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-2.0.1.tgz#3876200ff86d8a8546a9264a952c17d5fc17579d"
-  integrity sha512-+QdH3jOmq9P8GfdjFg0eJudqx1FqU62NQJ4P16rOEHeRdl7ckgwn6uqQjzYE0ZoHVV/e5E2esuJ5Gl5+HUW19w==
-  dependencies:
-    kind-of "^6.0.2"
-
 has-yarn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
@@ -7627,16 +7302,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-helper-md@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/helper-md/-/helper-md-0.2.2.tgz#c1f59d7e55bbae23362fd8a0e971607aec69d41f"
-  integrity sha512-49TaQzK+Ic7ZVTq4i1UZxRUJEmAilTk8hz7q4I0WNUaTclLR8ArJV5B3A1fe1xF2HtsDTr2gYKLaVTof/Lt84Q==
-  dependencies:
-    ent "^2.2.0"
-    extend-shallow "^2.0.1"
-    fs-exists-sync "^0.1.0"
-    remarkable "^1.6.2"
-
 homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -7673,29 +7338,6 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-tag@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/html-tag/-/html-tag-2.0.0.tgz#36c3bc8d816fd30b570d5764a497a641640c2fed"
-  integrity sha512-XxzooSo6oBoxBEUazgjdXj7VwTn/iSTSZzTYKzYY6I916tkaYzypHxy+pbVU1h+0UQ9JlVf5XkNQyxOAiiQO1g==
-  dependencies:
-    is-self-closing "^1.0.1"
-    kind-of "^6.0.0"
-
-html5-qrcode@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.2.3.tgz#5acb826860365e7c7ab91e1e14528ea16a502e8a"
-  integrity sha512-9CtEz5FVT56T76entiQxyrASzBWl8Rm30NHiQH8T163Eml5LS14BoZlYel9igxbikOt7O8KhvrT3awN1Y2HMqw==
-
-htmlparser2@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
-  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.0.0"
-    domutils "^2.5.2"
-    entities "^2.0.0"
-
 http-assert@^1.3.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.5.0.tgz#c389ccd87ac16ed2dfa6246fd73b926aa00e6b8f"
@@ -8162,13 +7804,6 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
-is-even@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-even/-/is-even-1.0.0.tgz#76b5055fbad8d294a86b6a949015e1c97b717c06"
-  integrity sha512-LEhnkAdJqic4Dbqn58A0y52IXoHWlsueqQkKfMfdEnIYG8A1sm/GHidKkS6yvXlMoRrkM34csHnXQtOqcb+Jzg==
-  dependencies:
-    is-odd "^0.1.2"
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -8275,13 +7910,6 @@ is-number-object@^1.0.4:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-number@^2.0.2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
-  integrity sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==
-  dependencies:
-    kind-of "^3.0.2"
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -8304,13 +7932,6 @@ is-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
   integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
 
-is-odd@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-0.1.2.tgz#bc573b5ce371ef2aad6e6f49799b72bef13978a7"
-  integrity sha512-Ri7C2K7o5IrUU9UEI8losXJCCD/UtsaIrkR5sxIcFg4xQ9cRJXlWA5DQvTE0yDc0krvSNLsRGXN11UPS6KyfBw==
-  dependencies:
-    is-number "^3.0.0"
-
 is-path-inside@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
@@ -8328,11 +7949,6 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-plain-object@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
-  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
-
 is-potential-custom-element-name@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
@@ -8361,13 +7977,6 @@ is-retry-allowed@^2.2.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz#88f34cbd236e043e71b6932d09b0c65fb7b4d71d"
   integrity sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==
 
-is-self-closing@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-self-closing/-/is-self-closing-1.0.1.tgz#5f406b527c7b12610176320338af0fa3896416e4"
-  integrity sha512-E+60FomW7Blv5GXTlYee2KDrnG6srxF7Xt1SjrhWUGUEsTFIqY/nq2y3DaftCsgUMdh89V07IVfhY9KIJhLezg==
-  dependencies:
-    self-closing-tags "^1.0.1"
-
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -8478,11 +8087,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isobject@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-0.2.0.tgz#a3432192f39b910b5f02cc989487836ec70aa85e"
-  integrity sha512-VaWq6XYAsbvM0wf4dyBO7WH9D7GosB7ZZlqrawI9BBiTMINBeCyqSKBa35m870MY3O4aM31pYyZi9DfGrYMJrQ==
-
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -9658,7 +9262,7 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
@@ -9672,12 +9276,12 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.0, kind-of@^5.0.2:
+kind-of@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
+kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -9892,11 +9496,6 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-leaflet@^1.7.1:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.2.tgz#168b6c6ef1d4d1e8409bde2c4ad050c249c4dbe6"
-  integrity sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g==
-
 left-pad@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
@@ -10091,11 +9690,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash._reinterpolate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
-
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -10206,21 +9800,6 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash.template@^4.4.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
-  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-
 lodash.without@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
@@ -10231,7 +9810,7 @@ lodash.xor@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.xor/-/lodash.xor-4.5.0.tgz#4d48ed7e98095b0632582ba714d3ff8ae8fb1db6"
   integrity sha512-sVN2zimthq7aZ5sPGXnSz32rZPuqcparVW50chJQe+mzTYV+IsxSsl/2gnkWWE2Of7K3myBQBqtLKOUEHJKRsQ==
 
-lodash@4.17.21, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -10373,11 +9952,6 @@ markdown-it@^12.2.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-marked@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-4.1.1.tgz#2f709a4462abf65a283f2453dc1c42ab177d302e"
-  integrity sha512-0cNMnTcUJPxbA6uWmCmjWz4NJRe/0Xfk2NhXCUHjew9qJzFN20krFnsUe7QynwqOwa5m1fZ4UDg0ycKFVC0ccw==
-
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"
@@ -10473,7 +10047,7 @@ methods@^1.1.1, methods@^1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.5:
+micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -10764,16 +10338,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916"
   integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11430,11 +10994,6 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
 
-parse-srcset@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
-  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
-
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -11796,15 +11355,6 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
 
-postcss@^8.3.11:
-  version "8.4.18"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
-  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postgres-array@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
@@ -12549,16 +12099,6 @@ regexp.prototype.flags@^1.4.3:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
-regexparam@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-2.0.1.tgz#c912f5dae371e3798100b3c9ce22b7414d0889fa"
-  integrity sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -12607,21 +12147,6 @@ relative-microtime@^2.0.0:
   resolved "https://registry.yarnpkg.com/relative-microtime/-/relative-microtime-2.0.0.tgz#cceed2af095ecd72ea32011279c79e5fcc7de29b"
   integrity sha512-l18ha6HEZc+No/uK4GyAnNxgKW7nvEe35IaeN54sShMojtqik2a6GbTyuiezkjpPaqP874Z3lW5ysBo5irz4NA==
 
-relative@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/relative/-/relative-3.0.2.tgz#0dcd8ec54a5d35a3c15e104503d65375b5a5367f"
-  integrity sha512-Q5W2qeYtY9GbiR8z1yHNZ1DGhyjb4AnLEjt8iE6XfcC1QIu+FAtj3HQaO0wH28H1mX6cqNLvAqWhP402dxJGyA==
-  dependencies:
-    isobject "^2.0.0"
-
-remarkable@^1.6.2:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.4.tgz#19073cb960398c87a7d6546eaa5e50d2022fcd00"
-  integrity sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==
-  dependencies:
-    argparse "^1.0.10"
-    autolinker "~0.28.0"
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -12909,18 +12434,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sanitize-html@^2.7.0:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.7.2.tgz#54c5189af75e3237d996e4b9a5e3eaad12c7f7fc"
-  integrity sha512-DggSTe7MviO+K4YTCwprG6W1vsG+IIX67yp/QY55yQqKCJYSWzCA1rZbaXzkjoKeL9+jqwm56wD6srYLtUNivg==
-  dependencies:
-    deepmerge "^4.2.2"
-    escape-string-regexp "^4.0.0"
-    htmlparser2 "^6.0.0"
-    is-plain-object "^5.0.0"
-    parse-srcset "^1.0.2"
-    postcss "^8.3.11"
-
 sanitize-s3-objectkey@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/sanitize-s3-objectkey/-/sanitize-s3-objectkey-0.0.1.tgz#efa9887cd45275b40234fb4bb12fc5754fe64e7e"
@@ -12959,11 +12472,6 @@ schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-screenfull@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-6.0.2.tgz#3dbe4b8c4f8f49fb8e33caa8f69d0bca730ab238"
-  integrity sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==
-
 search-params@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/search-params/-/search-params-3.0.0.tgz#dbc7c243058e5a33ae1e9870be91f5aced4100d8"
@@ -12981,11 +12489,6 @@ seek-bzip@^1.0.5:
   dependencies:
     commander "^2.8.1"
 
-self-closing-tags@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/self-closing-tags/-/self-closing-tags-1.0.1.tgz#6c5fa497994bb826b484216916371accee490a5d"
-  integrity sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==
-
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -13131,13 +12634,6 @@ shimmer@^1.2.0:
   resolved "https://registry.yarnpkg.com/shimmer/-/shimmer-1.2.1.tgz#610859f7de327b587efebf501fb43117f9aff337"
   integrity sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==
 
-shortid@^2.2.15:
-  version "2.2.16"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
-  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
-  dependencies:
-    nanoid "^2.1.0"
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -13278,16 +12774,6 @@ socket.io-adapter@~2.4.0:
   resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz#b50a4a9ecdd00c34d4c8c808224daa1a786152a6"
   integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
 
-socket.io-client@^4.5.1:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.3.tgz#bed69209d001465b2fea650d2e95c1e82768ab5e"
-  integrity sha512-I/hqDYpQ6JKwtJOf5ikM+Qz+YujZPMEl6qBLhxiP0nX+TfXKhW4KZZG8lamrD6Y5ngjmYHreESVasVCgi5Kl3A==
-  dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
-    debug "~4.3.2"
-    engine.io-client "~6.2.3"
-    socket.io-parser "~4.2.0"
-
 socket.io-parser@~4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
@@ -13350,11 +12836,6 @@ source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -13756,11 +13237,6 @@ strip-outer@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
-striptags@^3.1.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.2.0.tgz#cc74a137db2de8b0b9a370006334161f7dd67052"
-  integrity sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==
-
 style-loader@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
@@ -13860,23 +13336,11 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte-spa-router@^3.0.5:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz#2fc0967a49dc361dfe4d38dddad6e662eed5b42c"
-  integrity sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==
-  dependencies:
-    regexparam "2.0.1"
-
 svelte@3.49.0:
   version "3.49.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
   integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
 
-svelte@^3.46.2, svelte@^3.49.0:
-  version "3.52.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.52.0.tgz#08259eff20904c63882b66a5d409a55e8c6743b8"
-  integrity sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ==
-
 svg.draggable.js@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
@@ -14234,11 +13698,6 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-to-gfm-code-block@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/to-gfm-code-block/-/to-gfm-code-block-0.1.1.tgz#25d045a5fae553189e9637b590900da732d8aa82"
-  integrity sha512-LQRZWyn8d5amUKnfR9A9Uu7x9ss7Re8peuWR2gkh1E+ildOfv2aF26JpuDg8JtvCduu5+hOrMIH+XstZtnagqg==
-
 to-json-schema@0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/to-json-schema/-/to-json-schema-0.2.5.tgz#ef3c3f11ad64460dcfbdbafd0fd525d69d62a98f"
@@ -14504,13 +13963,6 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typeof-article@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/typeof-article/-/typeof-article-0.1.1.tgz#9f07e733c3fbb646ffa9e61c08debacd460e06af"
-  integrity sha512-Vn42zdX3FhmUrzEmitX3iYyLb+Umwpmv8fkZRIknYh84lmdrwqZA5xYaoKiIj2Rc5i/5wcDrpUmZcbk1U51vTw==
-  dependencies:
-    kind-of "^3.1.0"
-
 typeof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/typeof/-/typeof-1.0.0.tgz#9c84403f2323ae5399167275497638ea1d2f2440"
@@ -14521,11 +13973,6 @@ typescript@4.6.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
   integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
 
-typo-js@*:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.2.tgz#340484d81fe518e77c81a5a770162b14492f183b"
-  integrity sha512-C7pYBQK17EjSg8tVNY91KHdUt5Nf6FMJ+c3js076quPmBML57PmNMzAcIq/2kf/hSYtFABNDIYNYlJRl5BJhGw==
-
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
@@ -14855,7 +14302,7 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vm2@3.9.11, vm2@^3.9.4:
+vm2@3.9.11:
   version "3.9.11"
   resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.11.tgz#a880f510a606481719ec3f9803b940c5805a06fe"
   integrity sha512-PFG8iJRSjvvBdisowQ7iVF580DXb1uCIiGaXgm7tynMR1uTBlv7UJlB1zdv5KJ+Tmq1f0Upnj3fayoEOPpCBKg==
@@ -15314,11 +14761,6 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xmlhttprequest-ssl@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
-  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
-
 xpath.js@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/xpath.js/-/xpath.js-1.1.0.tgz#3816a44ed4bb352091083d002a383dd5104a5ff1"
@@ -15439,11 +14881,6 @@ yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-year@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/year/-/year-0.2.1.tgz#4083ae520a318b23ec86037f3000cb892bdf9bb0"
-  integrity sha512-9GnJUZ0QM4OgXuOzsKNzTJ5EOkums1Xc+3YQXp+Q+UxFjf7zLucp9dQ8QMIft0Szs1E1hUiXFim1OYfEKFq97w==
-
 ylru@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.3.2.tgz#0de48017473275a4cbdfc83a1eaf67c01af8a785"
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index d360f8f9e8..78e5803316 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/types/package.json b/packages/types/package.json
index 32996f4651..78601dfd2f 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/types",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase types",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index cf77ec8fdb..b6ca7077f9 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "2.0.30-alpha.7",
+  "version": "2.0.30-alpha.10",
   "description": "Budibase background service",
   "main": "src/index.ts",
   "repository": {
@@ -36,10 +36,10 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/backend-core": "2.0.30-alpha.7",
-    "@budibase/pro": "2.0.30-alpha.7",
-    "@budibase/string-templates": "2.0.30-alpha.7",
-    "@budibase/types": "2.0.30-alpha.7",
+    "@budibase/backend-core": "2.0.30-alpha.10",
+    "@budibase/pro": "2.0.30-alpha.10",
+    "@budibase/string-templates": "2.0.30-alpha.10",
+    "@budibase/types": "2.0.30-alpha.10",
     "@koa/router": "8.0.8",
     "@sentry/node": "6.17.7",
     "@techpass/passport-openidconnect": "0.3.2",
diff --git a/packages/worker/yarn.lock b/packages/worker/yarn.lock
index 1c9ad3fa88..f5f0c8e2a8 100644
--- a/packages/worker/yarn.lock
+++ b/packages/worker/yarn.lock
@@ -291,12 +291,12 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-2.0.30-alpha.7.tgz#a46ddcda96c6ecead6574cb0e2751e4ed858371d"
-  integrity sha512-aX41o4QE7OlS+JeKIDt3bJGGsbddI4eRAram+2bYlHONbupkbTAVs9DFBkV9BkMCQ8zk9FSDY90Le0GEuiI+sw==
+"@budibase/backend-core@2.0.30-alpha.10":
+  version "2.0.30-alpha.10"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-2.0.30-alpha.10.tgz#ff11327ad0456d1af40839f3a89002487d0e3173"
+  integrity sha512-KGX0k5h1IBE5hNmPBRC58hk0XfXzeBmFcXzveA8YAXboeYo0Rzo2xQr5oSbT9766JaNaHTwF9J1luyxq0Zr7KA==
   dependencies:
-    "@budibase/types" "2.0.30-alpha.7"
+    "@budibase/types" "2.0.30-alpha.10"
     "@shopify/jest-koa-mocks" "5.0.1"
     "@techpass/passport-openidconnect" "0.3.2"
     aws-sdk "2.1030.0"
@@ -327,21 +327,21 @@
     uuid "8.3.2"
     zlib "1.0.5"
 
-"@budibase/pro@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.0.30-alpha.7.tgz#1432b47141b305666dc005c5fc5a02d9cd38cf6a"
-  integrity sha512-F8qkj+Uy2Pqi/FeJYDBEdNAT7zEx/dw19x8o+3vHmTnQhwLbuSOHGyy9C6PgSW5Gmm0GgxjOycDVOq7ewnwWDA==
+"@budibase/pro@2.0.30-alpha.10":
+  version "2.0.30-alpha.10"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-2.0.30-alpha.10.tgz#2bd878840f705a1d344da5fac1d588a06e5eefed"
+  integrity sha512-cXnbYsrx9Y9t4XAnzoFnNXJaJfd+vnIFaX5ULnJYTPsmouDij/A/qU8lNDtpxciss4dgxO9AnZH31ZXFVlJj0Q==
   dependencies:
-    "@budibase/backend-core" "2.0.30-alpha.7"
-    "@budibase/types" "2.0.30-alpha.7"
+    "@budibase/backend-core" "2.0.30-alpha.10"
+    "@budibase/types" "2.0.30-alpha.10"
     "@koa/router" "8.0.8"
     joi "17.6.0"
     node-fetch "^2.6.1"
 
-"@budibase/types@2.0.30-alpha.7":
-  version "2.0.30-alpha.7"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-2.0.30-alpha.7.tgz#fe85563eb42ce01869e653a790a7f213ea2d6308"
-  integrity sha512-WL+2LPQyYq1BwPGgkM7wRnIv4/QXMX1ivXpzoy9lzi1yCJw0rxg8MBpfUuVU0cmDOAnmHkTh2nBQNUhLYPyvVA==
+"@budibase/types@2.0.30-alpha.10":
+  version "2.0.30-alpha.10"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-2.0.30-alpha.10.tgz#9b0ecc9d68ad5694a10f4390dd0ca64b93127e5b"
+  integrity sha512-qaXoUdHWhvym085dHt0WB+U7Lap1mqwh2zRo+2e+kfvEqzOyvj2H7ILK3wjVGYlrFrr7qceQaMnDCAEzad6aMg==
 
 "@cspotcode/source-map-consumer@0.8.0":
   version "0.8.0"
@@ -1026,13 +1026,6 @@
   dependencies:
     "@types/koa" "*"
 
-"@types/koa-router@7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@types/koa-router/-/koa-router-7.4.4.tgz#db72bde3616365d74f00178d5f243c4fce7da572"
-  integrity sha512-3dHlZ6CkhgcWeF6wafEUvyyqjWYfKmev3vy1PtOmr0mBc3wpXPU5E8fBBd4YQo5bRpHPfmwC5yDaX7s4jhIN6A==
-  dependencies:
-    "@types/koa" "*"
-
 "@types/koa@*", "@types/koa@2.13.4":
   version "2.13.4"
   resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.13.4.tgz#10620b3f24a8027ef5cbae88b393d1b31205726b"
diff --git a/qa-core/src/config/internal-api/TestConfiguration/index.ts b/qa-core/src/config/internal-api/TestConfiguration/index.ts
index b433fd98ea..d90c315849 100644
--- a/qa-core/src/config/internal-api/TestConfiguration/index.ts
+++ b/qa-core/src/config/internal-api/TestConfiguration/index.ts
@@ -1,15 +1,18 @@
 import ApplicationApi from "./applications"
 import AuthApi from "./auth"
 import InternalAPIClient from "./InternalAPIClient"
+import ScreenApi from "./screens"
 
 export default class TestConfiguration<T> {
   applications: ApplicationApi
   auth: AuthApi
+  screen: ScreenApi
   context: T
 
   constructor(apiClient: InternalAPIClient) {
     this.applications = new ApplicationApi(apiClient)
     this.auth = new AuthApi(apiClient)
+    this.screen = new ScreenApi(apiClient)
     this.context = <T>{}
   }
 
diff --git a/qa-core/src/config/internal-api/TestConfiguration/screens.ts b/qa-core/src/config/internal-api/TestConfiguration/screens.ts
new file mode 100644
index 0000000000..30c688022a
--- /dev/null
+++ b/qa-core/src/config/internal-api/TestConfiguration/screens.ts
@@ -0,0 +1,23 @@
+import { Screen } from  "@budibase/types"
+import { Response } from "node-fetch"
+import InternalAPIClient from "./InternalAPIClient"
+  
+  export default class ScreenApi {
+    api: InternalAPIClient
+  
+    constructor(apiClient: InternalAPIClient) {
+      this.api = apiClient
+    }
+  
+    async create(body: any): Promise<[Response, Screen]> {
+      const response = await this.api.post(`/screens`, { body })
+      const json = await response.json()
+      return [response, json]
+    }
+
+    async delete(screenId: string, rev: string): Promise<[Response, Screen]> {
+      const response = await this.api.del(`/screens/${screenId}/${rev}`)
+      const json = await response.json()
+      return [response, json]
+    }
+  }
diff --git a/qa-core/src/config/internal-api/fixtures/screens.ts b/qa-core/src/config/internal-api/fixtures/screens.ts
index 28e58e8eb8..1ebc1eb5c8 100644
--- a/qa-core/src/config/internal-api/fixtures/screens.ts
+++ b/qa-core/src/config/internal-api/fixtures/screens.ts
@@ -2,33 +2,33 @@ import generator from "../../generator"
 
 const randomId = generator.guid()
 
-const generateScreen = (): any => ({
-  showNavigation: true,
-  width: "Large",
-  props: {
-    _id: randomId,
-    _component: "@budibase/standard-components/container",
-    _styles: {
-      normal: {},
-      hover: {},
-      active: {},
-      selected: {},
+const generateScreen = (roleId: string): any => ({
+    showNavigation: true,
+    width: "Large",
+    name: randomId,
+    template: "createFromScratch",
+    props: {
+        _id: randomId,
+        _component:
+            "@budibase/standard-components/container",
+        _styles: {
+            normal: {},
+            hover: {},
+            active: {},
+            selected: {}
+        },
+        _children: [],
+        _instanceName: "New Screen",
+        direction: "column",
+        hAlign: "stretch",
+        vAlign: "top",
+        size: "grow",
+        gap: "M"
+    }, routing: {
+        route: "/test",
+        roleId: roleId,
+        homeScreen: false
     },
-    _children: [],
-    _instanceName: "New Screen",
-    direction: "column",
-    hAlign: "stretch",
-    vAlign: "top",
-    size: "grow",
-    gap: "M",
-  },
-  routing: {
-    route: "/test",
-    roleId: "BASIC",
-    homeScreen: false,
-  },
-  name: randomId,
-  template: "createFromScratch",
 })
 
 export default generateScreen
diff --git a/qa-core/src/tests/internal-api/applications/create.spec.ts b/qa-core/src/tests/internal-api/applications/create.spec.ts
index c09af632de..aa71724cac 100644
--- a/qa-core/src/tests/internal-api/applications/create.spec.ts
+++ b/qa-core/src/tests/internal-api/applications/create.spec.ts
@@ -164,7 +164,7 @@ describe("Internal API - /applications endpoints", () => {
 
     // Change/add component to the app
     const [screenResponse, screen] = await config.applications.addScreentoApp(
-      generateScreen()
+      generateScreen("BASIC")
     )
     expect(screenResponse).toHaveStatusCode(200)
     expect(screen._id).toBeDefined()
diff --git a/qa-core/src/tests/internal-api/screens/screens.spec.ts b/qa-core/src/tests/internal-api/screens/screens.spec.ts
new file mode 100644
index 0000000000..68e1022cb4
--- /dev/null
+++ b/qa-core/src/tests/internal-api/screens/screens.spec.ts
@@ -0,0 +1,62 @@
+import TestConfiguration from "../../../config/internal-api/TestConfiguration"
+import { App } from "@budibase/types"
+import InternalAPIClient from "../../../config/internal-api/TestConfiguration/InternalAPIClient"
+import generateApp from "../../../config/internal-api/fixtures/applications"
+import { Screen } from  "@budibase/types"
+import generateScreen from "../../../config/internal-api/fixtures/screens"
+
+
+describe("Internal API - /screens endpoints", () => {
+  const api = new InternalAPIClient()
+  const config = new TestConfiguration<Screen>(api)
+  const appConfig = new TestConfiguration<App>(api)
+
+  beforeAll(async () => {
+    await config.beforeAll()
+  })
+
+  afterAll(async () => {
+    await config.afterAll()
+  })
+
+  it("POST - Create a screen with each role type", async () => {
+    // Create app
+    const [appResponse, app] = await appConfig.applications.create(generateApp())
+    
+    // Create Screen
+    const roleArray = ["BASIC", "POWER", "ADMIN", "PUBLIC"]
+    appConfig.applications.api.appId = app.appId
+    for (let role in roleArray) {
+      const [response, screen] = await config.screen.create(generateScreen(roleArray[role]))
+      expect(response).toHaveStatusCode(200)
+      expect(screen.routing.roleId).toEqual(roleArray[role])
+    }
+  })
+
+  it("GET - Fetch screens", async () => {
+    // Create app
+    const [appResponse, app] = await appConfig.applications.create(generateApp())
+    
+    // Create Screen
+    appConfig.applications.api.appId = app.appId
+    const [response, screen] = await config.screen.create(generateScreen("BASIC"))
+
+    // Check screen exists
+    const [routesResponse, routes] = await appConfig.applications.getRoutes()
+    expect(routesResponse).toHaveStatusCode(200)
+    expect(routes.routes["/test"]).toBeTruthy()
+  })
+
+  it("DELETE - Delete a screen", async () => {
+    // Create app
+    const [appResponse, app] = await appConfig.applications.create(generateApp())
+    
+    // Create Screen
+    appConfig.applications.api.appId = app.appId
+    const [screenResponse, screen] = await config.screen.create(generateScreen("BASIC"))
+
+    // Delete Screen
+    const [response] = await config.screen.delete(screen._id!, screen._rev!)
+    expect(response).toHaveStatusCode(200)
+  })
+})