diff --git a/hosting/docker-compose.test.yaml b/hosting/docker-compose.test.yaml
deleted file mode 100644
index f059173d2d..0000000000
--- a/hosting/docker-compose.test.yaml
+++ /dev/null
@@ -1,47 +0,0 @@
-version: "3"
-
-# optional ports are specified throughout for more advanced use cases.
-
-services:
-  minio-service:
-    restart: on-failure
-    # Last version that supports the "fs" backend
-    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
-    ports:
-      - "9000"
-      - "9001"
-    environment:
-      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
-      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
-    command: server /data --console-address ":9001"
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
-      interval: 30s
-      timeout: 20s
-      retries: 3
-
-  couchdb-service:
-    # platform: linux/amd64
-    restart: on-failure
-    image: budibase/couchdb
-    environment:
-      - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
-      - COUCHDB_USER=${COUCH_DB_USER}
-    ports:
-      - "5984"
-      - "4369"
-      - "9100"
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:5984/_up"]
-      interval: 30s
-      timeout: 20s
-      retries: 3
-
-  redis-service:
-    restart: on-failure
-    image: redis
-    command: redis-server --requirepass ${REDIS_PASSWORD}
-    ports:
-      - "6379"
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
\ No newline at end of file
diff --git a/hosting/dependencies/Dockerfile b/hosting/tests/Dockerfile
similarity index 100%
rename from hosting/dependencies/Dockerfile
rename to hosting/tests/Dockerfile
diff --git a/hosting/dependencies/README.md b/hosting/tests/README.md
similarity index 100%
rename from hosting/dependencies/README.md
rename to hosting/tests/README.md
diff --git a/hosting/dependencies/runner.sh b/hosting/tests/runner.sh
similarity index 100%
rename from hosting/dependencies/runner.sh
rename to hosting/tests/runner.sh
diff --git a/jestTestcontainersConfigGenerator.js b/jestTestcontainersConfigGenerator.js
index 4b8afe327d..1e39ed771f 100644
--- a/jestTestcontainersConfigGenerator.js
+++ b/jestTestcontainersConfigGenerator.js
@@ -9,18 +9,8 @@ module.exports = () => {
       },
       wait: {
         type: "ports",
-        timeout: 10000,
+        timeout: 20000,
       }
     }
   }
 }
-
-// module.exports = () => {
-//   return {
-//     dockerCompose: {
-//       composeFilePath: "../../hosting",
-//       composeFile: "docker-compose.test.yaml",
-//       startupTimeout: 10000,
-//     },
-//   }
-// }
diff --git a/lerna.json b/lerna.json
index a5b5a4a968..05fea191af 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.9.30-alpha.9",
+  "version": "2.9.30-alpha.13",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/backend-core/src/cache/user.ts b/packages/backend-core/src/cache/user.ts
index 8281bfca62..e2af78adfd 100644
--- a/packages/backend-core/src/cache/user.ts
+++ b/packages/backend-core/src/cache/user.ts
@@ -4,6 +4,8 @@ import * as context from "../context"
 import * as platform from "../platform"
 import env from "../environment"
 import * as accounts from "../accounts"
+import { UserDB } from "../users"
+import { sdk } from "@budibase/shared-core"
 
 const EXPIRY_SECONDS = 3600
 
@@ -60,6 +62,18 @@ export async function getUser(
     // make sure the tenant ID is always correct/set
     user.tenantId = tenantId
   }
+  // if has groups, could have builder permissions granted by a group
+  if (user.userGroups && !sdk.users.isGlobalBuilder(user)) {
+    await context.doInTenant(tenantId, async () => {
+      const appIds = await UserDB.getGroupBuilderAppIds(user)
+      if (appIds.length) {
+        const existing = user.builder?.apps || []
+        user.builder = {
+          apps: [...new Set(existing.concat(appIds))],
+        }
+      }
+    })
+  }
   return user
 }
 
diff --git a/packages/backend-core/src/middleware/builderOnly.ts b/packages/backend-core/src/middleware/builderOnly.ts
index 8c1c54a44c..fafcc524cc 100644
--- a/packages/backend-core/src/middleware/builderOnly.ts
+++ b/packages/backend-core/src/middleware/builderOnly.ts
@@ -5,11 +5,12 @@ import env from "../environment"
 
 export default async (ctx: UserCtx, next: any) => {
   const appId = getAppId()
-  const builderFn = env.isWorker()
-    ? hasBuilderPermissions
-    : env.isApps()
-    ? isBuilder
-    : undefined
+  const builderFn =
+    env.isWorker() || !appId
+      ? hasBuilderPermissions
+      : env.isApps()
+      ? isBuilder
+      : undefined
   if (!builderFn) {
     throw new Error("Service name unknown - middleware inactive.")
   }
diff --git a/packages/backend-core/src/middleware/builderOrAdmin.ts b/packages/backend-core/src/middleware/builderOrAdmin.ts
index c03e856233..4b8badec15 100644
--- a/packages/backend-core/src/middleware/builderOrAdmin.ts
+++ b/packages/backend-core/src/middleware/builderOrAdmin.ts
@@ -5,11 +5,12 @@ import env from "../environment"
 
 export default async (ctx: UserCtx, next: any) => {
   const appId = getAppId()
-  const builderFn = env.isWorker()
-    ? hasBuilderPermissions
-    : env.isApps()
-    ? isBuilder
-    : undefined
+  const builderFn =
+    env.isWorker() || !appId
+      ? hasBuilderPermissions
+      : env.isApps()
+      ? isBuilder
+      : undefined
   if (!builderFn) {
     throw new Error("Service name unknown - middleware inactive.")
   }
diff --git a/packages/backend-core/src/users/db.ts b/packages/backend-core/src/users/db.ts
index 14140cba81..c288540f35 100644
--- a/packages/backend-core/src/users/db.ts
+++ b/packages/backend-core/src/users/db.ts
@@ -20,6 +20,8 @@ import {
   SaveUserOpts,
   User,
   UserStatus,
+  UserGroup,
+  ContextUser,
 } from "@budibase/types"
 import {
   getAccountHolderFromUserIds,
@@ -32,8 +34,14 @@ import { hash } from "../utils"
 type QuotaUpdateFn = (change: number, cb?: () => Promise<any>) => Promise<any>
 type GroupUpdateFn = (groupId: string, userIds: string[]) => Promise<any>
 type FeatureFn = () => Promise<Boolean>
+type GroupGetFn = (ids: string[]) => Promise<UserGroup[]>
+type GroupBuildersFn = (user: User) => Promise<string[]>
 type QuotaFns = { addUsers: QuotaUpdateFn; removeUsers: QuotaUpdateFn }
-type GroupFns = { addUsers: GroupUpdateFn }
+type GroupFns = {
+  addUsers: GroupUpdateFn
+  getBulk: GroupGetFn
+  getGroupBuilderAppIds: GroupBuildersFn
+}
 type FeatureFns = { isSSOEnforced: FeatureFn; isAppBuildersEnabled: FeatureFn }
 
 const bulkDeleteProcessing = async (dbUser: User) => {
@@ -465,4 +473,12 @@ export class UserDB {
     await cache.user.invalidateUser(userId)
     await sessions.invalidateSessions(userId, { reason: "deletion" })
   }
+
+  static async getGroups(groupIds: string[]) {
+    return await this.groups.getBulk(groupIds)
+  }
+
+  static async getGroupBuilderAppIds(user: User) {
+    return await this.groups.getGroupBuilderAppIds(user)
+  }
 }
diff --git a/packages/backend-core/tests/core/utilities/mocks/licenses.ts b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
index 14a1f1f4d3..309f0fd159 100644
--- a/packages/backend-core/tests/core/utilities/mocks/licenses.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
@@ -102,6 +102,10 @@ export const useAppBuilders = () => {
   return useFeature(Feature.APP_BUILDERS)
 }
 
+export const useViewPermissions = () => {
+  return useFeature(Feature.VIEW_PERMISSIONS)
+}
+
 // QUOTAS
 
 export const setAutomationLogsQuota = (value: number) => {
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 8fa02bb8f3..4a5ef890bf 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -32,11 +32,10 @@ export default function positionDropdown(element, opts) {
       left: null,
       top: null,
     }
-
     // Determine vertical styles
     if (align === "right-outside") {
       styles.top = anchorBounds.top
-    } else if (window.innerHeight - anchorBounds.bottom < 100) {
+    } else if (window.innerHeight - anchorBounds.bottom < (maxHeight || 100)) {
       styles.top = anchorBounds.top - elementBounds.height - offset
       styles.maxHeight = maxHeight || 240
     } else {
diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 9a70134fb6..2ba5309860 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -1,8 +1,8 @@
 <script>
+  import Popover from "../Popover/Popover.svelte"
+  import Layout from "../Layout/Layout.svelte"
   import { createEventDispatcher } from "svelte"
   import "@spectrum-css/popover/dist/index-vars.css"
-  import clickOutside from "../Actions/click_outside"
-  import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import Input from "../Form/Input.svelte"
   import { capitalise } from "../helpers"
@@ -10,9 +10,11 @@
   export let value
   export let size = "M"
   export let spectrumTheme
-  export let alignRight = false
+  export let offset
+  export let align
 
-  let open = false
+  let dropdown
+  let preview
 
   $: customValue = getCustomValue(value)
   $: checkColor = getCheckColor(value)
@@ -82,7 +84,7 @@
 
   const onChange = value => {
     dispatch("change", value)
-    open = false
+    dropdown.hide()
   }
 
   const getCustomValue = value => {
@@ -119,30 +121,25 @@
 
     return "var(--spectrum-global-color-static-gray-900)"
   }
-
-  const handleOutsideClick = event => {
-    if (open) {
-      event.stopPropagation()
-      open = false
-    }
-  }
 </script>
 
-<div class="container">
-  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
-    <div
-      class="fill {spectrumTheme || ''}"
-      style={value ? `background: ${value};` : ""}
-      class:placeholder={!value}
-    />
-  </div>
-  {#if open}
-    <div
-      use:clickOutside={handleOutsideClick}
-      transition:fly|local={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      class:spectrum-Popover--align-right={alignRight}
-    >
+<div
+  bind:this={preview}
+  class="preview size--{size || 'M'}"
+  on:click={() => {
+    dropdown.toggle()
+  }}
+>
+  <div
+    class="fill {spectrumTheme || ''}"
+    style={value ? `background: ${value};` : ""}
+    class:placeholder={!value}
+  />
+</div>
+
+<Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
+  <Layout paddingX="XL" paddingY="L">
+    <div class="container">
       {#each categories as category}
         <div class="category">
           <div class="heading">{category.label}</div>
@@ -187,8 +184,8 @@
         </div>
       </div>
     </div>
-  {/if}
-</div>
+  </Layout>
+</Popover>
 
 <style>
   .container {
@@ -248,20 +245,6 @@
     width: 48px;
     height: 48px;
   }
-  .spectrum-Popover {
-    width: 210px;
-    z-index: 999;
-    top: 100%;
-    padding: var(--spacing-l) var(--spacing-xl);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xl);
-  }
-  .spectrum-Popover--align-right {
-    right: 0;
-  }
   .colors {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@@ -297,7 +280,11 @@
   .category--custom .heading {
     margin-bottom: var(--spacing-xs);
   }
-
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+  }
   .spectrum-wrapper {
     background-color: transparent;
   }
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 6706bf7a8b..1259f2704f 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -35,6 +35,14 @@
     open = false
   }
 
+  export const toggle = () => {
+    if (!open) {
+      show()
+    } else {
+      hide()
+    }
+  }
+
   const handleOutsideClick = e => {
     if (open) {
       // Stop propagation if the source is the anchor
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 2ca8057b48..eecccab7a6 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -4,7 +4,7 @@ import { getTemporalStore } from "./store/temporal"
 import { getThemeStore } from "./store/theme"
 import { getUserStore } from "./store/users"
 import { getDeploymentStore } from "./store/deployments"
-import { derived } from "svelte/store"
+import { derived, writable } from "svelte/store"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 import { createHistoryStore } from "builderStore/store/history"
@@ -61,6 +61,12 @@ export const selectedLayout = derived(store, $store => {
 export const selectedComponent = derived(
   [store, selectedScreen],
   ([$store, $selectedScreen]) => {
+    if (
+      $selectedScreen &&
+      $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
+    ) {
+      return $selectedScreen?.props
+    }
     if (!$selectedScreen || !$store.selectedComponentId) {
       return null
     }
@@ -141,3 +147,5 @@ export const userSelectedResourceMap = derived(userStore, $userStore => {
 export const isOnlyUser = derived(userStore, $userStore => {
   return $userStore.length < 2
 })
+
+export const screensHeight = writable("210px")
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index f312a58e97..8f4f6cc2c4 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -225,7 +225,6 @@ export const getFrontendStore = () => {
         // Select new screen
         store.update(state => {
           state.selectedScreenId = screen._id
-          state.selectedComponentId = screen.props?._id
           return state
         })
       },
@@ -769,9 +768,13 @@ export const getFrontendStore = () => {
         else {
           await store.actions.screens.patch(screen => {
             // Find the selected component
+            let selectedComponentId = state.selectedComponentId
+            if (selectedComponentId.startsWith(`${screen._id}-`)) {
+              selectedComponentId = screen?.props._id
+            }
             const currentComponent = findComponent(
               screen.props,
-              state.selectedComponentId
+              selectedComponentId
             )
             if (!currentComponent) {
               return false
@@ -994,12 +997,20 @@ export const getFrontendStore = () => {
         const componentId = state.selectedComponentId
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
-
-        // Check we aren't right at the top of the tree
         const index = parent?._children.findIndex(x => x._id === componentId)
-        if (!parent || componentId === screen.props._id) {
+
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        if (componentId === screenComponentId) {
           return null
         }
+        if (componentId === navComponentId) {
+          return screenComponentId
+        }
+        if (parent._id === screen.props._id && index === 0) {
+          return navComponentId
+        }
 
         // If we have siblings above us, choose the sibling or a descendant
         if (index > 0) {
@@ -1021,12 +1032,20 @@ export const getFrontendStore = () => {
         return parent._id
       },
       getNext: () => {
+        const state = get(store)
         const component = get(selectedComponent)
         const componentId = component?._id
         const screen = get(selectedScreen)
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
+        // Check for screen and navigation component edge cases
+        const screenComponentId = `${screen._id}-screen`
+        const navComponentId = `${screen._id}-navigation`
+        if (state.selectedComponentId === screenComponentId) {
+          return navComponentId
+        }
+
         // If we have children, select first child
         if (component._children?.length) {
           return component._children[0]._id
diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index fe0e58060d..b9a4c0a412 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -127,7 +127,9 @@
       type: "Screen",
       name: screen.routing.route,
       icon: "WebPage",
-      action: () => $goto(`./design/${screen._id}/components`),
+      action: () => {
+        $goto(`./design/${screen._id}/${screen._id}-screen`)
+      },
     })),
     ...($automationStore?.automations?.map(automation => ({
       type: "Automation",
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 6590463408..a65da55c8f 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -21,6 +21,7 @@
   export let id
   export let showTooltip = false
   export let selectedBy = null
+  export let compact = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -80,8 +81,9 @@
     {#if withArrow}
       <div
         class:opened
-        class:relative={indentLevel === 0}
-        class:absolute={indentLevel > 0}
+        class:relative={indentLevel === 0 && !compact}
+        class:absolute={indentLevel > 0 && !compact}
+        class:compact
         class="icon arrow"
         on:click={onIconClick}
       >
@@ -194,10 +196,21 @@
     padding: 8px;
     margin-left: -8px;
   }
+
+  .compact {
+    position: absolute;
+    left: 6px;
+    padding: 8px;
+    margin-left: -8px;
+  }
   .icon.arrow :global(svg) {
     width: 12px;
     height: 12px;
   }
+  .icon.arrow.compact :global(svg) {
+    width: 9px;
+    height: 9px;
+  }
   .icon.arrow.relative {
     position: relative;
     margin: 0 -6px 0 -4px;
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 3968292ba9..f649a9bd06 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Heading } from "@budibase/bbui"
+  import { Icon, Body } from "@budibase/bbui"
 
   export let title
   export let icon
@@ -25,7 +25,7 @@
       <Icon name={icon} />
     {/if}
     <div class="title">
-      <Heading size="XXS">{title || ""}</Heading>
+      <Body size="S">{title}</Body>
     </div>
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
@@ -78,15 +78,14 @@
     align-items: center;
     padding: 0 var(--spacing-l);
     border-bottom: var(--border-light);
-    gap: var(--spacing-l);
+    gap: var(--spacing-m);
   }
   .title {
     flex: 1 1 auto;
     width: 0;
   }
-  .title :global(h1) {
+  .title :global(p) {
     overflow: hidden;
-    font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
index a03d22386d..8e3079101a 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
@@ -42,7 +42,6 @@
         <ColorPicker
           value={column.background}
           on:change={e => (column.background = e.detail)}
-          alignRight
           spectrumTheme={$store.theme}
         />
       </Layout>
@@ -51,7 +50,6 @@
         <ColorPicker
           value={column.color}
           on:change={e => (column.color = e.detail)}
-          alignRight
           spectrumTheme={$store.theme}
         />
       </Layout>
diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index c4c48fb3fb..2408dde2f1 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -56,6 +56,11 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    // Clean URL
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Allow custom URL handling
     if (beforeNavigate) {
       const res = beforeNavigate(url, params)
       if (res?.url) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
similarity index 75%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
index 895c82495d..b081ea6d72 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Button, Drawer } from "@budibase/bbui"
-  import NavigationLinksDrawer from "./NavigationLinksDrawer.svelte"
+  import NavigationLinksDrawer from "./LinksDrawer.svelte"
   import { cloneDeep } from "lodash/fp"
   import { store } from "builderStore"
 
@@ -20,12 +20,8 @@
   }
 </script>
 
-<Button cta on:click={openDrawer}>Configure links</Button>
-<Drawer
-  bind:this={drawer}
-  title={"Navigation Links"}
-  width="calc(100% - 334px)"
->
+<Button cta on:click={openDrawer}>Configure Links</Button>
+<Drawer bind:this={drawer} title={"Navigation Links"}>
   <svelte:fragment slot="description">
     Configure the links in your navigation bar.
   </svelte:fragment>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
new file mode 100644
index 0000000000..383026c4f8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -0,0 +1,225 @@
+<script>
+  import LinksEditor from "./LinksEditor.svelte"
+  import { get } from "svelte/store"
+  import Panel from "components/design/Panel.svelte"
+  import {
+    Detail,
+    Toggle,
+    Body,
+    Icon,
+    ColorPicker,
+    Input,
+    Label,
+    ActionGroup,
+    ActionButton,
+    Checkbox,
+    notifications,
+    Select,
+  } from "@budibase/bbui"
+  import { selectedScreen, store } from "builderStore"
+  import { DefaultAppTheme } from "constants"
+
+  const updateShowNavigation = async e => {
+    await store.actions.screens.updateSetting(
+      get(selectedScreen),
+      "showNavigation",
+      e.detail
+    )
+  }
+
+  const update = async (key, value) => {
+    try {
+      let navigation = $store.navigation
+      navigation[key] = value
+      await store.actions.navigation.save(navigation)
+    } catch (error) {
+      notifications.error("Error updating navigation settings")
+    }
+  }
+</script>
+
+<Panel
+  title="Navigation"
+  icon={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
+  borderLeft
+  wide
+>
+  <div class="generalSection">
+    <div class="subheading">
+      <Detail>General</Detail>
+    </div>
+    <div class="toggle">
+      <Toggle
+        on:change={updateShowNavigation}
+        value={$selectedScreen.showNavigation}
+      />
+      <Body size="S">Show nav on this screen</Body>
+    </div>
+  </div>
+
+  {#if $selectedScreen.showNavigation}
+    <div class="divider" />
+    <div class="customizeSection">
+      <div class="subheading">
+        <Detail>Customize</Detail>
+      </div>
+      <div class="info">
+        <Icon name="InfoOutline" size="S" />
+        <Body size="S">These settings apply to all screens</Body>
+      </div>
+      <div class="configureLinks">
+        <LinksEditor />
+      </div>
+      <div class="controls">
+        <div class="label">
+          <Label size="M">Position</Label>
+        </div>
+        <ActionGroup quiet>
+          <ActionButton
+            selected={$store.navigation.navigation === "Top"}
+            quiet={$store.navigation.navigation !== "Top"}
+            icon="PaddingTop"
+            on:click={() => update("navigation", "Top")}
+          />
+          <ActionButton
+            selected={$store.navigation.navigation === "Left"}
+            quiet={$store.navigation.navigation !== "Left"}
+            icon="PaddingLeft"
+            on:click={() => update("navigation", "Left")}
+          />
+        </ActionGroup>
+
+        {#if $store.navigation.navigation === "Top"}
+          <div class="label">
+            <Label size="M">Sticky header</Label>
+          </div>
+          <Checkbox
+            value={$store.navigation.sticky}
+            on:change={e => update("sticky", e.detail)}
+          />
+          <div class="label">
+            <Label size="M">Width</Label>
+          </div>
+          <Select
+            options={["Max", "Large", "Medium", "Small"]}
+            plaveholder={null}
+            value={$store.navigation.navWidth}
+            on:change={e => update("navWidth", e.detail)}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show logo</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideLogo}
+          on:change={e => update("hideLogo", !e.detail)}
+        />
+        {#if !$store.navigation.hideLogo}
+          <div class="label">
+            <Label size="M">Logo URL</Label>
+          </div>
+          <Input
+            value={$store.navigation.logoUrl}
+            on:change={e => update("logoUrl", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show title</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideTitle}
+          on:change={e => update("hideTitle", !e.detail)}
+        />
+        {#if !$store.navigation.hideTitle}
+          <div class="label">
+            <Label size="M">Title</Label>
+          </div>
+          <Input
+            value={$store.navigation.title}
+            on:change={e => update("title", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label>Background</Label>
+        </div>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navBackground ||
+            DefaultAppTheme.navBackground}
+          on:change={e => update("navBackground", e.detail)}
+        />
+        <div class="label">
+          <Label>Text</Label>
+        </div>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
+          on:change={e => update("navTextColor", e.detail)}
+        />
+      </div>
+    </div>
+  {/if}
+</Panel>
+
+<style>
+  .generalSection {
+    padding: 13px 13px 25px;
+  }
+
+  .customizeSection {
+    padding: 13px 13px 25px;
+  }
+  .subheading {
+    margin-bottom: 10px;
+  }
+
+  .subheading :global(p) {
+    color: var(--grey-6);
+  }
+
+  .toggle {
+    display: flex;
+    align-items: center;
+  }
+
+  .divider {
+    border-top: 1px solid var(--grey-3);
+  }
+
+  .controls {
+    position: relative;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    align-items: start;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    border-left: 4px solid transparent;
+    margin: 0 calc(-1 * var(--spacing-xl));
+    padding: 0 var(--spacing-xl) 0 calc(var(--spacing-xl) - 4px);
+    gap: 12px;
+  }
+
+  .label {
+    margin-top: 16px;
+    transform: translateY(-50%);
+  }
+
+  .info {
+    background-color: var(--background-alt);
+    padding: 12px;
+    display: flex;
+    border-radius: 4px;
+    gap: 4px;
+    margin-bottom: 16px;
+  }
+  .info :global(svg) {
+    margin-right: 5px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .configureLinks :global(button) {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ButtonRoundnessSelect.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ButtonRoundnessSelect.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
similarity index 72%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 8982cd20de..a08ded8eee 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -1,12 +1,8 @@
 <script>
-  import Panel from "components/design/Panel.svelte"
   import { get } from "svelte/store"
   import { Helpers } from "@budibase/bbui"
   import {
     Input,
-    Layout,
-    Button,
-    Toggle,
     Checkbox,
     Banner,
     Select,
@@ -16,7 +12,6 @@
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { goto } from "@roxi/routify"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "builderStore/dataBinding"
 
@@ -119,15 +114,6 @@
       label: "On screen load",
       control: ButtonActionEditor,
     },
-    {
-      key: "showNavigation",
-      label: "Navigation",
-      control: Toggle,
-      props: {
-        text: "Show nav",
-        disabled: !!$selectedScreen.layoutId,
-      },
-    },
     {
       key: "width",
       label: "Width",
@@ -145,36 +131,24 @@
   }
 </script>
 
-<Panel
-  title={$selectedScreen.routing.route}
-  icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
-  borderLeft
-  wide
->
-  <Layout gap="S" paddingX="L" paddingY="XL">
-    {#if $selectedScreen.layoutId}
-      <Banner
-        type="warning"
-        extraButtonText="Detach custom layout"
-        extraButtonAction={removeCustomLayout}
-        showCloseButton={false}
-      >
-        This screen uses a custom layout, which is deprecated
-      </Banner>
-    {/if}
-    {#each screenSettings as setting (setting.key)}
-      <PropertyControl
-        control={setting.control}
-        label={setting.label}
-        key={setting.key}
-        value={Helpers.deepGet($selectedScreen, setting.key)}
-        onChange={val => setScreenSetting(setting, val)}
-        props={{ ...setting.props, error: errors[setting.key] }}
-        {bindings}
-      />
-    {/each}
-    <Button secondary on:click={() => $goto("../components")}>
-      View components
-    </Button>
-  </Layout>
-</Panel>
+{#if $selectedScreen.layoutId}
+  <Banner
+    type="warning"
+    extraButtonText="Detach custom layout"
+    extraButtonAction={removeCustomLayout}
+    showCloseButton={false}
+  >
+    This screen uses a custom layout, which is deprecated
+  </Banner>
+{/if}
+{#each screenSettings as setting (setting.key)}
+  <PropertyControl
+    control={setting.control}
+    label={setting.label}
+    key={setting.key}
+    value={Helpers.deepGet($selectedScreen, setting.key)}
+    onChange={val => setScreenSetting(setting, val)}
+    props={{ ...setting.props, error: errors[setting.key] }}
+    {bindings}
+  />
+{/each}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
new file mode 100644
index 0000000000..13a008fae0
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
@@ -0,0 +1,78 @@
+<script>
+  import {
+    Layout,
+    Label,
+    ColorPicker,
+    notifications,
+    Icon,
+    Body,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { get } from "svelte/store"
+  import { DefaultAppTheme } from "constants"
+  import AppThemeSelect from "./AppThemeSelect.svelte"
+  import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
+  import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+
+  $: customTheme = $store.customTheme || {}
+
+  const update = async (property, value) => {
+    try {
+      store.actions.customTheme.save({
+        ...get(store).customTheme,
+        [property]: value,
+      })
+    } catch (error) {
+      notifications.error("Error updating custom theme")
+    }
+  }
+</script>
+
+<div class="info">
+  <Icon name="InfoOutline" size="S" />
+  <Body size="S">These settings apply to all screens</Body>
+</div>
+<Layout noPadding gap="S">
+  <Layout noPadding gap="XS">
+    <AppThemeSelect />
+  </Layout>
+  <Layout noPadding gap="XS">
+    <Label>Button roundness</Label>
+    <ButtonRoundnessSelect
+      {customTheme}
+      on:change={e => update("buttonBorderRadius", e.detail)}
+    />
+  </Layout>
+  <PropertyControl
+    label="Accent color"
+    control={ColorPicker}
+    value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
+    onChange={val => update("primaryColor", val)}
+    props={{
+      spectrumTheme: $store.theme,
+    }}
+  />
+  <PropertyControl
+    label="Hover"
+    control={ColorPicker}
+    value={customTheme.primaryColorHover || DefaultAppTheme.primaryColorHover}
+    onChange={val => update("primaryColorHover", val)}
+    props={{
+      spectrumTheme: $store.theme,
+    }}
+  />
+</Layout>
+
+<style>
+  .info {
+    background-color: var(--background-alt);
+    padding: 12px;
+    display: flex;
+    border-radius: 4px;
+    gap: 4px;
+  }
+  .info :global(svg) {
+    margin-right: 5px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
new file mode 100644
index 0000000000..778fa303cc
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
@@ -0,0 +1,51 @@
+<script>
+  import GeneralPanel from "./GeneralPanel.svelte"
+  import ThemePanel from "./ThemePanel.svelte"
+  import { selectedScreen } from "builderStore"
+  import Panel from "components/design/Panel.svelte"
+  import { capitalise } from "helpers"
+  import { ActionButton, Layout } from "@budibase/bbui"
+
+  let activeTab = "general"
+  const tabs = ["general", "theme"]
+</script>
+
+<Panel
+  title={$selectedScreen.routing.route}
+  icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
+  borderLeft
+  wide
+>
+  <div slot="panel-header-content">
+    <div class="settings-tabs">
+      {#each tabs as tab}
+        <ActionButton
+          size="M"
+          quiet
+          selected={activeTab === tab}
+          on:click={() => {
+            activeTab = tab
+          }}
+        >
+          {capitalise(tab)}
+        </ActionButton>
+      {/each}
+    </div>
+  </div>
+  <Layout gap="S" paddingX="L" paddingY="XL">
+    {#if activeTab === "theme"}
+      <ThemePanel />
+    {:else}
+      <GeneralPanel />
+    {/if}
+  </Layout>
+</Panel>
+
+<style>
+  .settings-tabs {
+    display: flex;
+    gap: var(--spacing-s);
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
new file mode 100644
index 0000000000..19cb1d8dff
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { syncURLToState } from "helpers/urlStateSync"
+  import { store, selectedScreen } from "builderStore"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+  import { findComponent } from "builderStore/componentUtils"
+  import ComponentSettingsPanel from "./_components/Component/ComponentSettingsPanel.svelte"
+  import NavigationPanel from "./_components/Navigation/index.svelte"
+  import ScreenSettingsPanel from "./_components/Screen/index.svelte"
+
+  $: componentId = $store.selectedComponentId
+  $: store.actions.websocket.selectResource(componentId)
+  $: params = routify.params
+  $: routeComponentId = $params.componentId
+
+  // Hide new component panel whenever component ID changes
+  const closeNewComponentPanel = url => {
+    if (url?.endsWith("/new")) {
+      url = url.replace("/new", "")
+    }
+    return { url }
+  }
+
+  const validate = id => {
+    if (id === `${$store.selectedScreenId}-screen`) return true
+    if (id === `${$store.selectedScreenId}-navigation`) return true
+
+    return !!findComponent($selectedScreen.props, id)
+  }
+
+  // Keep URL and state in sync for selected component ID
+  const stopSyncing = syncURLToState({
+    urlParam: "componentId",
+    stateKey: "selectedComponentId",
+    validate,
+    fallbackUrl: "../",
+    store,
+    routify,
+    beforeNavigate: closeNewComponentPanel,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+{#if routeComponentId === `${$store.selectedScreenId}-screen`}
+  <ScreenSettingsPanel />
+{:else if routeComponentId === `${$store.selectedScreenId}-navigation`}
+  <NavigationPanel />
+{:else}
+  <ComponentSettingsPanel />
+{/if}
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
new file mode 100644
index 0000000000..0ff63d1ead
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte
@@ -0,0 +1 @@
+<!-- Required to make Routify happy -->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
similarity index 98%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index 7dca5b792b..248bbc8141 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -31,6 +31,10 @@
   $: orderMap = createComponentOrderMap(componentList)
 
   const getAllowedComponents = (allComponents, screen, component) => {
+    // Default to using the root screen container if no component specified
+    if (!component) {
+      component = screen.props
+    }
     const path = findComponentPath(screen?.props, component?._id)
     if (!path?.length) {
       return []
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 785b221239..09f97302fd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -1,32 +1,16 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store, sortedScreens, screenHistoryStore } from "builderStore"
-  import { Select } from "@budibase/bbui"
-  import { RoleUtils } from "@budibase/frontend-core"
+  import { store, screenHistoryStore } from "builderStore"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
-  import { isActive } from "@roxi/routify"
 </script>
 
 <div class="app-panel">
   <div class="header">
     <div class="header-left">
-      <Select
-        placeholder={null}
-        options={$sortedScreens}
-        getOptionLabel={x => x.routing.route}
-        getOptionValue={x => x._id}
-        getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
-        value={$store.selectedScreenId}
-        on:change={e => store.actions.screens.select(e.detail)}
-        quiet
-        autoWidth
-      />
+      <UndoRedoControl store={screenHistoryStore} />
     </div>
     <div class="header-right">
-      {#if $isActive("./screens") || $isActive("./components")}
-        <UndoRedoControl store={screenHistoryStore} />
-      {/if}
       {#if $store.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
@@ -47,37 +31,24 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
-    padding: var(--spacing-l) var(--spacing-xl);
+    padding: 9px var(--spacing-m);
   }
   .header {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-l);
-    margin: 0 2px;
-    z-index: 1;
+    margin-bottom: 9px;
+  }
+
+  .header-left :global(div) {
+    border-right: none;
   }
-  .header-left,
   .header-right {
+    margin-left: auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
   }
-  .header-left {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .header-left :global(> *) {
-    max-width: 100%;
-  }
-  .header-left :global(.spectrum-Picker) {
-    font-weight: 600;
-    color: var(--spectrum-global-color-gray-900);
-  }
   .content {
     flex: 1 1 auto;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 23b6ff5586..45fe005ceb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,13 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import {
-    store,
-    selectedComponent,
-    selectedScreen,
-    selectedLayout,
-    currentAsset,
-  } from "builderStore"
+  import { store, selectedScreen, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -20,12 +14,10 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
-  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
 
   let iframe
   let layout
   let screen
-  let selectedComponentId
   let confirmDeleteDialog
   let idToDelete
   let loading = true
@@ -39,36 +31,11 @@
     BUDIBASE: "type",
   }
 
-  const placeholderScreen = new Screen()
-    .name("Screen Placeholder")
-    .route("/")
-    .component("@budibase/standard-components/screenslot")
-    .instanceName("Content Placeholder")
-    .normalStyle({ flex: "1 1 auto" })
-    .json()
-
   // Extract data to pass to the iframe
-  $: {
-    // If viewing legacy layouts, always show the custom layout
-    if ($isActive("./layouts")) {
-      screen = placeholderScreen
-      layout = $selectedLayout
-    } else {
-      screen = $selectedScreen
-      layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
-    }
-  }
+  $: screen = $selectedScreen
 
   // Determine selected component ID
-  $: {
-    if ($isActive("./components")) {
-      selectedComponentId = $store.selectedComponentId
-    } else if ($isActive("./navigation")) {
-      selectedComponentId = "navigation"
-    } else {
-      selectedComponentId = null
-    }
-  }
+  $: selectedComponentId = $store.selectedComponentId
 
   $: previewData = {
     appId: $store.appId,
@@ -98,9 +65,7 @@
   $: refreshContent(json)
 
   // Determine if the add component menu is active
-  $: isAddingComponent = $isActive(
-    `./components/${$selectedComponent?._id}/new`
-  )
+  $: isAddingComponent = $isActive(`./${selectedComponentId}/new`)
 
   // Register handler to send custom to the preview
   $: sendPreviewEvent = (name, payload) => {
@@ -152,9 +117,6 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
-      if (!$isActive("./components")) {
-        $goto("./components")
-      }
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {
@@ -194,10 +156,6 @@
         store.actions.components.copy(source, true, false)
         await store.actions.components.paste(destination, data.mode)
       }
-    } else if (type === "click-nav") {
-      if (!$isActive("./navigation")) {
-        $goto("./navigation")
-      }
     } else if (type === "request-add-component") {
       toggleAddComponent()
     } else if (type === "highlight-setting") {
@@ -247,11 +205,10 @@
   }
 
   const toggleAddComponent = () => {
-    if (isAddingComponent) {
-      $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
+    if ($isActive(`./:componentId/new`)) {
+      $goto(`./:componentId`)
     } else {
-      const id = $selectedComponent?._id || $selectedScreen?.props?._id
-      $goto(`../${$selectedScreen._id}/components/${id}/new`)
+      $goto(`./:componentId/new`)
     }
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
similarity index 90%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index 4813757727..b6957f64f3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -5,7 +5,6 @@
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { isBuilderInputFocused } from "helpers"
 
   let confirmDeleteDialog
   let confirmEjectDialog
@@ -37,7 +36,7 @@
       confirmEjectDialog.show()
     },
     ["Ctrl+Enter"]: () => {
-      $goto("./new")
+      $goto(`./:componentId/new`)
     },
     ["Delete"]: component => {
       // Don't show confirmation for the screen itself
@@ -54,8 +53,8 @@
       store.actions.components.selectNext()
     },
     ["Escape"]: () => {
-      if ($isActive("./new")) {
-        $goto("./")
+      if ($isActive(`./:componentId/new`)) {
+        $goto(`./${$store.selectedComponentId}`)
       }
     },
   }
@@ -85,10 +84,13 @@
       const handler = keyHandlers[key]
       if (!handler) {
         return false
-      } else if (event) {
+      }
+
+      if (event && key !== "Escape") {
         event.preventDefault()
         event.stopPropagation()
       }
+
       return await handler(component)
     } catch (error) {
       notifications.error(error || "Error handling key press")
@@ -101,7 +103,13 @@
       return
     }
     // Ignore events when typing
-    if (isBuilderInputFocused(e)) {
+    const activeTag = document.activeElement?.tagName.toLowerCase()
+    const inCodeEditor =
+      document.activeElement?.classList?.contains("cm-content")
+    if (
+      (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
+      e.key !== "Escape"
+    ) {
       return
     }
     // Key events are always for the selected component
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
similarity index 93%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
index 15ba7acecf..484b56f21c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
@@ -9,14 +9,14 @@
     if (!bounds) {
       return
     }
-    const sidebarWidth = 259
+    const sidebarWidth = 310
     const navItemHeight = 32
     const { scrollLeft, scrollTop, offsetHeight } = scrollRef
     let scrollBounds = scrollRef.getBoundingClientRect()
     let newOffsets = {}
 
     // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft - 36
+    const offsetX = bounds.left + bounds.width + scrollLeft + 16
     if (offsetX > sidebarWidth) {
       newOffsets.left = offsetX - sidebarWidth
     } else {
@@ -64,6 +64,7 @@
 </script>
 
 <div
+  on:scroll
   bind:this={scrollRef}
   on:drop={onDrop}
   ondragover="return false"
@@ -74,7 +75,6 @@
 
 <style>
   div {
-    padding: var(--spacing-xl) 0;
     flex: 1 1 auto;
     overflow: auto;
     height: 0;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
similarity index 98%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index 18319e4b33..0e23f82946 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -107,6 +107,7 @@
       id={`component-${component._id}`}
     >
       <NavItem
+        compact
         scrollable
         draggable
         on:dragend={dndStore.actions.reset}
@@ -117,7 +118,7 @@
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
         withArrow={componentHasChildren(component)}
-        indentLevel={level + 1}
+        indentLevel={level}
         selected={$store.selectedComponentId === component._id}
         {opened}
         highlighted={isChildOfSelectedComponent(component)}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
new file mode 100644
index 0000000000..7851fe61f8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
@@ -0,0 +1,163 @@
+<script>
+  import { notifications, Icon, Body } from "@budibase/bbui"
+  import { isActive, goto } from "@roxi/routify"
+  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import ComponentTree from "./ComponentTree.svelte"
+  import { dndStore } from "./dndStore.js"
+  import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
+  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
+  import { DropPosition } from "./dndStore"
+  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
+  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
+
+  let scrolling = false
+
+  const toNewComponentRoute = () => {
+    if ($isActive(`./:componentId/new`)) {
+      $goto(`./:componentId`)
+    } else {
+      $goto(`./:componentId/new`)
+    }
+  }
+
+  const onDrop = async () => {
+    try {
+      await dndStore.actions.drop()
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error saving component")
+    }
+  }
+
+  const handleScroll = e => {
+    scrolling = e.target.scrollTop !== 0
+  }
+</script>
+
+<div class="components">
+  <div class="header" class:scrolling>
+    <Body size="S">Components</Body>
+    <div on:click={toNewComponentRoute} class="addButton">
+      <Icon name="Add" />
+    </div>
+  </div>
+  <div class="list-panel">
+    <ComponentScrollWrapper on:scroll={handleScroll}>
+      <ul>
+        <li>
+          <NavItem
+            text="Screen"
+            indentLevel={0}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-screen`}
+            opened
+            scrollable
+            icon="WebPage"
+            on:drop={onDrop}
+            on:click={() => {
+              $store.selectedComponentId = `${$store.selectedScreenId}-screen`
+            }}
+            id={`component-screen`}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-screen`
+            ]}
+          >
+            <ScreenslotDropdownMenu component={$selectedScreen?.props} />
+          </NavItem>
+          <NavItem
+            text="Navigation"
+            indentLevel={0}
+            selected={$store.selectedComponentId ===
+              `${$store.selectedScreenId}-navigation`}
+            opened
+            scrollable
+            icon={$selectedScreen.showNavigation
+              ? "Visibility"
+              : "VisibilityOff"}
+            on:drop={onDrop}
+            on:click={() => {
+              $store.selectedComponentId = `${$store.selectedScreenId}-navigation`
+            }}
+            id={`component-nav`}
+            selectedBy={$userSelectedResourceMap[
+              `${$store.selectedScreenId}-navigation`
+            ]}
+          />
+          <ComponentTree
+            level={0}
+            components={$selectedScreen?.props._children}
+          />
+
+          <!-- Show drop indicators for the target and the parent -->
+          {#if $dndStore.dragging && $dndStore.valid}
+            <DNDPositionIndicator
+              component={$dndStore.target}
+              position={$dndStore.dropPosition}
+            />
+            {#if $dndStore.dropPosition !== DropPosition.INSIDE}
+              <DNDPositionIndicator
+                component={$dndStore.targetParent}
+                position={DropPosition.INSIDE}
+              />
+            {/if}
+          {/if}
+        </li>
+      </ul>
+    </ComponentScrollWrapper>
+  </div>
+  <ComponentKeyHandler />
+</div>
+
+<style>
+  .components {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .header {
+    height: 50px;
+    box-sizing: border-box;
+    padding: var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 130ms ease-out;
+  }
+  .header.scrolling {
+    border-bottom: var(--border-light);
+  }
+
+  .components :global(.nav-item) {
+    padding-right: 8px !important;
+  }
+
+  .addButton {
+    margin-left: auto;
+    color: var(--grey-7);
+    cursor: pointer;
+  }
+
+  .addButton:hover {
+    color: var(--ink);
+  }
+
+  .list-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    position: relative;
+  }
+  ul,
+  li {
+    min-width: max-content;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
new file mode 100644
index 0000000000..96d4579eeb
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -0,0 +1,21 @@
+<script>
+  import ScreenList from "./ScreenList/index.svelte"
+  import ComponentList from "./ComponentList/index.svelte"
+</script>
+
+<div class="panel">
+  <ScreenList />
+  <ComponentList />
+</div>
+
+<style>
+  .panel {
+    width: 310px;
+    height: 100%;
+    border-right: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    position: relative;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
similarity index 97%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
index fd5ddd9459..c117c7e9dd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
@@ -56,7 +56,7 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      notifications.success("Deleted screen successfully.")
+      notifications.success("Deleted screen successfully")
     } catch (err) {
       notifications.error("Error deleting screen")
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
similarity index 87%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
index 2555b0b2a2..694abe444a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
@@ -26,7 +26,7 @@
   <StatusLight square {color} />
   {#if showTooltip}
     <div class="tooltip">
-      <Tooltip textWrapping text={tooltip} direction="left" />
+      <Tooltip textWrapping text={tooltip} direction="right" />
     </div>
   {/if}
 </div>
@@ -38,13 +38,11 @@
   .tooltip {
     z-index: 1;
     position: absolute;
-    top: 50%;
-    left: calc(50% - 8px);
-    transform: translateX(-100%) translateY(-50%);
+    bottom: -5px;
+    left: 13px;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    width: 200px;
     pointer-events: none;
   }
   .tooltip :global(.spectrum-Tooltip) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
new file mode 100644
index 0000000000..c5475b9c16
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -0,0 +1,304 @@
+<script>
+  import { Icon, Layout, Body } from "@budibase/bbui"
+  import {
+    store,
+    sortedScreens,
+    userSelectedResourceMap,
+    screensHeight,
+  } from "builderStore"
+  import NavItem from "components/common/NavItem.svelte"
+  import RoleIndicator from "./RoleIndicator.svelte"
+  import DropdownMenu from "./DropdownMenu.svelte"
+  import { onMount, tick } from "svelte"
+  import { goto } from "@roxi/routify"
+
+  let search = false
+  let resizing = false
+  let searchValue = ""
+  let searchInput
+  let container
+  let screensContainer
+  let scrolling = false
+  let previousHeight = null
+  let dragOffset
+
+  $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
+
+  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+  const openSearch = async () => {
+    search = true
+    await tick()
+    searchInput.focus()
+    screensContainer.scroll({ top: 0, behavior: "smooth" })
+    previousHeight = $screensHeight
+    $screensHeight = "calc(100% + 1px)"
+  }
+
+  const closeSearch = async () => {
+    if (previousHeight) {
+      // Restore previous height and wait for animation
+      $screensHeight = previousHeight
+      previousHeight = null
+      await sleep(300)
+    }
+    search = false
+    searchValue = ""
+  }
+
+  const getFilteredScreens = (screens, search) => {
+    return screens.filter(screen => {
+      return !search || screen.routing.route.includes(search)
+    })
+  }
+
+  const handleAddButton = () => {
+    if (search) {
+      closeSearch()
+    } else {
+      $goto("../new")
+    }
+  }
+
+  const onKeyDown = e => {
+    if (e.key === "Escape") {
+      closeSearch()
+    }
+  }
+
+  const handleScroll = e => {
+    scrolling = e.target.scrollTop !== 0
+  }
+
+  const startResizing = e => {
+    // Reset the height store to match the true height
+    $screensHeight = `${container.getBoundingClientRect().height}px`
+
+    // Store an offset to easily compute new height when moving the mouse
+    dragOffset = parseInt($screensHeight) - e.clientY
+
+    // Add event listeners
+    resizing = true
+    document.addEventListener("mousemove", resize)
+    document.addEventListener("mouseup", stopResizing)
+  }
+
+  const resize = e => {
+    // Prevent negative heights as this screws with layout
+    const newHeight = Math.max(0, e.clientY + dragOffset)
+    if (newHeight == null || isNaN(newHeight)) {
+      return
+    }
+    $screensHeight = `${newHeight}px`
+  }
+
+  const stopResizing = () => {
+    resizing = false
+    document.removeEventListener("mousemove", resize)
+  }
+
+  onMount(() => {
+    // Ensure we aren't stuck at 100% height from leaving while searching
+    if ($screensHeight == null || isNaN(parseInt($screensHeight))) {
+      $screensHeight = "210px"
+    }
+  })
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<div
+  class="screens"
+  class:search
+  class:resizing
+  style={`height:${$screensHeight};`}
+  bind:this={container}
+>
+  <div class="header" class:scrolling>
+    <input
+      readonly={!search}
+      bind:value={searchValue}
+      bind:this={searchInput}
+      class="input"
+      placeholder="Search for screens"
+    />
+    <div class="title" class:hide={search}>
+      <Body size="S">Screens</Body>
+    </div>
+    <div on:click={openSearch} class="searchButton" class:hide={search}>
+      <Icon size="S" name="Search" />
+    </div>
+    <div
+      on:click={handleAddButton}
+      class="addButton"
+      class:closeButton={search}
+    >
+      <Icon name="Add" />
+    </div>
+  </div>
+  <div on:scroll={handleScroll} bind:this={screensContainer} class="content">
+    {#if filteredScreens?.length}
+      {#each filteredScreens as screen (screen._id)}
+        <NavItem
+          icon={screen.routing.homeScreen ? "Home" : null}
+          indentLevel={0}
+          selected={$store.selectedScreenId === screen._id}
+          text={screen.routing.route}
+          on:click={() => store.actions.screens.select(screen._id)}
+          rightAlignIcon
+          showTooltip
+          selectedBy={$userSelectedResourceMap[screen._id]}
+        >
+          <DropdownMenu screenId={screen._id} />
+          <div slot="icon" class="icon">
+            <RoleIndicator roleId={screen.routing.roleId} />
+          </div>
+        </NavItem>
+      {/each}
+    {:else}
+      <Layout paddingY="none" paddingX="L">
+        <div class="no-results">
+          There aren't any screens matching that route
+        </div>
+      </Layout>
+    {/if}
+  </div>
+
+  <div
+    class="divider"
+    on:mousedown={startResizing}
+    on:dblclick={() => screensHeight.set("210px")}
+  />
+</div>
+
+<style>
+  .screens {
+    display: flex;
+    flex-direction: column;
+    min-height: 147px;
+    max-height: calc(100% - 147px);
+    position: relative;
+  }
+  .screens.search {
+    transition: height 300ms ease-out;
+    max-height: none;
+  }
+  .screens.resizing {
+    user-select: none;
+    cursor: row-resize;
+  }
+
+  .header {
+    flex-shrink: 0;
+    position: relative;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 0 var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+    transition: border-bottom 130ms ease-out;
+  }
+  .header.scrolling {
+    border-bottom: var(--border-light);
+  }
+
+  .input {
+    font-family: var(--font-sans);
+    position: absolute;
+    color: var(--ink);
+    background-color: transparent;
+    border: none;
+    font-size: var(--spectrum-alias-font-size-default);
+    width: 260px;
+    box-sizing: border-box;
+    display: none;
+  }
+  .input:focus {
+    outline: none;
+  }
+  .input::placeholder {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .screens.search input {
+    display: block;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+    flex: 1;
+    opacity: 1;
+    z-index: 1;
+  }
+
+  .content {
+    overflow: auto;
+    flex-grow: 1;
+  }
+  .screens.resizing .content {
+    pointer-events: none;
+  }
+
+  .screens :global(.nav-item) {
+    padding-right: 8px !important;
+  }
+
+  .searchButton {
+    color: var(--grey-7);
+    cursor: pointer;
+    margin-right: 10px;
+    opacity: 1;
+  }
+  .searchButton:hover {
+    color: var(--ink);
+  }
+
+  .hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .addButton {
+    color: var(--grey-7);
+    cursor: pointer;
+    transition: transform 300ms ease-out;
+  }
+  .addButton:hover {
+    color: var(--ink);
+  }
+
+  .closeButton {
+    transform: rotate(45deg);
+  }
+
+  .icon {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .no-results {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .divider {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    height: 16px;
+    width: 100%;
+  }
+  .divider:after {
+    content: "";
+    position: absolute;
+    background: var(--spectrum-global-color-gray-200);
+    height: 2px;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .divider:hover {
+    cursor: row-resize;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
deleted file mode 100644
index 00165e4ee9..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-
-  $redirect("../screens")
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 8bc0dcc3e5..0e630b4f39 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -1,14 +1,10 @@
 <script>
-  import { IconSideNav, IconSideNavItem } from "@budibase/bbui"
-  import * as routify from "@roxi/routify"
   import AppPanel from "./_components/AppPanel.svelte"
+  import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import { onDestroy } from "svelte"
-  const { isActive, goto } = routify
-
-  $: screenId = $store.selectedScreenId
-  $: store.actions.websocket.selectResource(screenId)
+  import LeftPanel from "./_components/LeftPanel.svelte"
 
   // Keep URL and state in sync for selected screen ID
   const stopSyncing = syncURLToState({
@@ -23,51 +19,15 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="design">
-  <div class="icon-nav">
-    <IconSideNav>
-      <IconSideNavItem
-        icon="WebPage"
-        tooltip="Screens"
-        active={$isActive("./screens")}
-        on:click={() => $goto("./screens")}
-      />
-      <IconSideNavItem
-        icon="ViewList"
-        tooltip="Components"
-        active={$isActive("./components")}
-        on:click={() => $goto("./components")}
-      />
-      <IconSideNavItem
-        icon="Brush"
-        tooltip="Theme"
-        active={$isActive("./theme")}
-        on:click={() => $goto("./theme")}
-      />
-      <IconSideNavItem
-        icon="Link"
-        tooltip="Navigation"
-        active={$isActive("./navigation")}
-        on:click={() => $goto("./navigation")}
-      />
-      {#if $store.layouts?.length}
-        <IconSideNavItem
-          icon="Experience"
-          tooltip="Layouts"
-          active={$isActive("./layouts")}
-          on:click={() => $goto("./layouts")}
-        />
-      {/if}
-    </IconSideNav>
-  </div>
-
-  <div class="content">
-    {#if $selectedScreen}
-      <slot />
+{#if $selectedScreen}
+  <div class="design">
+    <div class="content">
+      <LeftPanel />
       <AppPanel />
-    {/if}
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .design {
@@ -78,10 +38,7 @@
     align-items: stretch;
     height: 0;
   }
-  .icon-nav {
-    background: var(--background);
-    border-right: var(--border-light);
-  }
+
   .content {
     display: flex;
     flex-direction: row;
@@ -89,17 +46,4 @@
     align-items: stretch;
     flex: 1 1 auto;
   }
-  /*
-    This is hacky, yes, but it's the only way to prevent routify from
-    remounting the iframe on route changes.
-  */
-  .content :global(> *:last-child) {
-    order: 1;
-  }
-  .content :global(> *:first-child) {
-    order: 0;
-  }
-  .content :global(> *:nth-child(2)) {
-    order: 2;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
deleted file mode 100644
index 9513753d76..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import ComponentTree from "./ComponentTree.svelte"
-  import { dndStore } from "./dndStore.js"
-  import { goto } from "@roxi/routify"
-  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
-  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import { DropPosition } from "./dndStore"
-  import { notifications, Button } from "@budibase/bbui"
-  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
-  import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
-
-  const onDrop = async () => {
-    try {
-      await dndStore.actions.drop()
-    } catch (error) {
-      console.error(error)
-      notifications.error("Error saving component")
-    }
-  }
-</script>
-
-<Panel title="Components" showExpandIcon borderRight>
-  <div class="add-component">
-    <Button on:click={() => $goto("./new")} cta>Add component</Button>
-  </div>
-  <ComponentScrollWrapper>
-    <ul>
-      <li>
-        <NavItem
-          text="Screen"
-          indentLevel={0}
-          selected={$store.selectedComponentId === $selectedScreen?.props._id}
-          opened
-          scrollable
-          icon="WebPage"
-          on:drop={onDrop}
-          on:click={() => {
-            $store.selectedComponentId = $selectedScreen?.props._id
-          }}
-          id={`component-${$selectedScreen?.props._id}`}
-          selectedBy={$userSelectedResourceMap[$selectedScreen?.props._id]}
-        >
-          <ScreenslotDropdownMenu component={$selectedScreen?.props} />
-        </NavItem>
-        <ComponentTree
-          level={0}
-          components={$selectedScreen?.props._children}
-        />
-
-        <!-- Show drop indicators for the target and the parent -->
-        {#if $dndStore.dragging && $dndStore.valid}
-          <DNDPositionIndicator
-            component={$dndStore.target}
-            position={$dndStore.dropPosition}
-          />
-          {#if $dndStore.dropPosition !== DropPosition.INSIDE}
-            <DNDPositionIndicator
-              component={$dndStore.targetParent}
-              position={DropPosition.INSIDE}
-            />
-          {/if}
-        {/if}
-      </li>
-    </ul>
-  </ComponentScrollWrapper>
-</Panel>
-<ComponentKeyHandler />
-
-<style>
-  .add-component {
-    padding: var(--spacing-xl) var(--spacing-l);
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    position: relative;
-  }
-  ul,
-  li {
-    min-width: max-content;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
deleted file mode 100644
index 860258c940..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { store, selectedScreen } from "builderStore"
-  import * as routify from "@roxi/routify"
-  import { onDestroy } from "svelte"
-  import { findComponent } from "builderStore/componentUtils"
-  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
-
-  $: componentId = $store.selectedComponentId
-  $: store.actions.websocket.selectResource(componentId)
-
-  const cleanUrl = url => {
-    // Strip trailing slashes
-    if (url?.endsWith("/index")) {
-      url = url.replace("/index", "")
-    }
-    // Hide new component panel whenever component ID changes
-    if (url?.endsWith("/new")) {
-      url = url.replace("/new", "")
-    }
-    return { url }
-  }
-
-  // Keep URL and state in sync for selected component ID
-  const stopSyncing = syncURLToState({
-    urlParam: "componentId",
-    stateKey: "selectedComponentId",
-    validate: id => !!findComponent($selectedScreen.props, id),
-    fallbackUrl: "../",
-    store,
-    routify,
-    beforeNavigate: cleanUrl,
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<ComponentListPanel />
-<ComponentSettingsPanel />
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
deleted file mode 100644
index 9b5d05fe57..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--
-  Placeholder file so that routify works.
-  No unique content is needed in this index page.
--->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
deleted file mode 100644
index f8c4cc0868..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { selectedScreen, selectedComponent } from "builderStore"
-  import { onMount } from "svelte"
-  import { redirect } from "@roxi/routify"
-
-  onMount(() => {
-    if ($selectedComponent) {
-      // Navigate to the selected component if one exists
-      $redirect(`./${$selectedComponent._id}`)
-    } else if ($selectedScreen) {
-      // Otherwise the screen slot if a screen exists
-      $redirect(`./${$selectedScreen.props._id}`)
-    } else {
-      // Otherwise go up so we can select a new valid screen
-      $redirect("../")
-    }
-  })
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
index f5e3806bd6..c4ed7d949c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { redirect } from "@roxi/routify"
+  import { store } from "builderStore"
 
-  $redirect("./screens")
+  $redirect(`./${$store.selectedScreenId}-screen`)
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
deleted file mode 100644
index cba68f899d..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { notifications } from "@budibase/bbui"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
-
-  export let layout
-
-  let confirmDeleteDialog
-
-  const deleteLayout = async () => {
-    try {
-      await store.actions.layouts.delete(layout)
-      notifications.success("Layout deleted successfully")
-    } catch (err) {
-      notifications.error(err?.message || "Error deleting layout")
-    }
-  }
-</script>
-
-<ActionMenu>
-  <div slot="control" class="icon">
-    <Icon size="S" hoverable name="MoreSmallList" />
-  </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
-</ActionMenu>
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={"Are you sure you wish to delete this layout?"}
-  okText="Delete layout"
-  onOk={deleteLayout}
-/>
-
-<style>
-  .icon {
-    display: grid;
-    place-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
deleted file mode 100644
index cc895317fd..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import NavItem from "components/common/NavItem.svelte"
-  import { store } from "builderStore"
-  import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
-</script>
-
-<Panel title="Layouts" borderRight>
-  <div class="layouts">
-    {#each $store.layouts as layout (layout._id)}
-      <NavItem
-        icon="Experience"
-        indentLevel={0}
-        selected={$store.selectedLayoutId === layout._id}
-        text={layout.name}
-        on:click={() => store.actions.layouts.select(layout._id)}
-      >
-        <LayoutDropdownMenu {layout} />
-      </NavItem>
-    {/each}
-  </div>
-</Panel>
-
-<style>
-  .layouts {
-    margin-top: var(--spacing-xl);
-    overflow: hidden;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
deleted file mode 100644
index bfc2f94f43..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { store, selectedLayout } from "builderStore"
-  import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
-  import { Component } from "builderStore/store/screenTemplates/utils/Component"
-
-  const copyLayout = () => {
-    // Build an outer container component to put layout contents inside
-    let container = new Component("@budibase/standard-components/container")
-      .instanceName($selectedLayout.name)
-      .customProps({
-        gap: "M",
-        direction: "column",
-        hAlign: "stretch",
-        vAlign: "top",
-        size: "shrink",
-      })
-      .json()
-
-    // Attach layout components
-    container._children = $selectedLayout.props._children
-
-    // Replace the screenslot component with a container. This is better than
-    // simply removing it as it still shows its position.
-    container = JSON.parse(
-      JSON.stringify(container).replace(
-        "@budibase/standard-components/screenslot",
-        "@budibase/standard-components/container"
-      )
-    )
-
-    // Copy new component structure
-    store.actions.components.copy(container)
-    notifications.success("Components copied successfully")
-  }
-</script>
-
-<Panel title={$selectedLayout?.name} icon="Experience" borderLeft wide>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Banner type="warning" showCloseButton={false}>
-      Custom layouts are being deprecated. They will be removed in a future
-      release.
-    </Banner>
-    <Body size="S">
-      You can save the content of this layout by pressing the button below.
-    </Body>
-    <Body size="S">
-      This will copy all components inside your layout, which you can then paste
-      into a screen.
-    </Body>
-    <Button cta on:click={copyLayout}>Copy components</Button>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
deleted file mode 100644
index c82fefab3e..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { syncURLToState } from "helpers/urlStateSync"
-  import { store } from "builderStore"
-  import * as routify from "@roxi/routify"
-  import { onDestroy } from "svelte"
-
-  // Keep URL and state in sync for selected component ID
-  const stopSyncing = syncURLToState({
-    urlParam: "layoutId",
-    stateKey: "selectedLayoutId",
-    validate: id => $store.layouts?.some(layout => layout._id === id),
-    fallbackUrl: "../",
-    store,
-    routify,
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
deleted file mode 100644
index 4d39403bc3..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import LayoutListPanel from "./_components/LayoutListPanel.svelte"
-  import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
-</script>
-
-<LayoutListPanel />
-<LayoutSettingsPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
deleted file mode 100644
index 1333c6afe3..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  $: {
-    if (!$store.layouts?.length) {
-      $redirect("../")
-    }
-  }
-</script>
-
-<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
deleted file mode 100644
index 09d45f8fde..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import { onMount } from "svelte"
-  import { redirect } from "@roxi/routify"
-
-  onMount(() => {
-    if ($store.layouts?.length) {
-      $redirect(`./${$store.layouts[0]._id}`)
-    }
-    // The redirection when no layouts exist is handled by the routify layout
-  })
-</script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
deleted file mode 100644
index 614e1eed80..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout, Banner } from "@budibase/bbui"
-  import { selectedScreen, store } from "builderStore"
-  import { get } from "svelte/store"
-
-  const removeCustomLayout = async () => {
-    return store.actions.screens.removeCustomLayout(get(selectedScreen))
-  }
-</script>
-
-<Panel borderLeft title="Navigation" icon="InfoOutline" wide>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    {#if $selectedScreen.layoutId}
-      <Banner
-        type="warning"
-        extraButtonText="Detach custom layout"
-        extraButtonAction={removeCustomLayout}
-        showCloseButton={false}
-      >
-        You can't preview your navigation settings using this screen as it uses
-        a custom layout, which is deprecated
-      </Banner>
-    {/if}
-    <Body size="S">
-      Your navigation is configured for all the screens within your app.
-    </Body>
-    <Body size="S">
-      You can hide and show your navigation for each screen in the screen
-      settings.
-    </Body>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
deleted file mode 100644
index c6d43984b2..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import {
-    Layout,
-    Label,
-    ActionGroup,
-    ActionButton,
-    Checkbox,
-    Select,
-    ColorPicker,
-    Input,
-    notifications,
-  } from "@budibase/bbui"
-  import NavigationLinksEditor from "./NavigationLinksEditor.svelte"
-  import { store } from "builderStore"
-  import { DefaultAppTheme } from "constants"
-
-  const update = async (key, value) => {
-    try {
-      let navigation = $store.navigation
-      navigation[key] = value
-      await store.actions.navigation.save(navigation)
-    } catch (error) {
-      notifications.error("Error updating navigation settings")
-    }
-  }
-</script>
-
-<Panel title="Navigation" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <NavigationLinksEditor />
-    <Layout noPadding gap="XS">
-      <Label>Position</Label>
-      <ActionGroup quiet>
-        <ActionButton
-          selected={$store.navigation.navigation === "Top"}
-          quiet={$store.navigation.navigation !== "Top"}
-          icon="PaddingTop"
-          on:click={() => update("navigation", "Top")}
-        />
-        <ActionButton
-          selected={$store.navigation.navigation === "Left"}
-          quiet={$store.navigation.navigation !== "Left"}
-          icon="PaddingLeft"
-          on:click={() => update("navigation", "Left")}
-        />
-      </ActionGroup>
-    </Layout>
-    {#if $store.navigation.navigation === "Top"}
-      <Checkbox
-        text="Sticky header"
-        value={$store.navigation.sticky}
-        on:change={e => update("sticky", e.detail)}
-      />
-      <Select
-        label="Width"
-        options={["Max", "Large", "Medium", "Small"]}
-        plaveholder={null}
-        value={$store.navigation.navWidth}
-        on:change={e => update("navWidth", e.detail)}
-      />
-    {/if}
-    <Layout noPadding gap="XS">
-      <Checkbox
-        text="Logo"
-        value={!$store.navigation.hideLogo}
-        on:change={e => update("hideLogo", !e.detail)}
-      />
-      {#if !$store.navigation.hideLogo}
-        <Input
-          value={$store.navigation.logoUrl}
-          on:change={e => update("logoUrl", e.detail)}
-          placeholder="Add logo URL"
-          updateOnChange={false}
-        />
-      {/if}
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Checkbox
-        text="Title"
-        value={!$store.navigation.hideTitle}
-        on:change={e => update("hideTitle", !e.detail)}
-      />
-      {#if !$store.navigation.hideTitle}
-        <Input
-          value={$store.navigation.title}
-          on:change={e => update("title", e.detail)}
-          placeholder="Add title"
-          updateOnChange={false}
-        />
-      {/if}
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Background color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
-        on:change={e => update("navBackground", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Text color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
-        on:change={e => update("navTextColor", e.detail)}
-      />
-    </Layout>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
deleted file mode 100644
index fc2e03d8e8..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import NavigationSettingsPanel from "./_components/NavigationSettingsPanel.svelte"
-  import NavigationInfoPanel from "./_components/NavigationInfoPanel.svelte"
-</script>
-
-<NavigationSettingsPanel />
-<NavigationInfoPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
deleted file mode 100644
index 6362af3073..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-  import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
-  import Panel from "components/design/Panel.svelte"
-  import { goto } from "@roxi/routify"
-  import { roles } from "stores/backend"
-  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import RoleIndicator from "./RoleIndicator.svelte"
-  import { RoleUtils } from "@budibase/frontend-core"
-
-  let searchString
-  let accessRole = "all"
-
-  $: filteredScreens = getFilteredScreens(
-    $sortedScreens,
-    searchString,
-    accessRole
-  )
-
-  const getFilteredScreens = (screens, search, role) => {
-    return screens.filter(screen => {
-      const searchMatch = !search || screen.routing.route.includes(search)
-      const roleMatch =
-        !role || role === "all" || screen.routing.roleId === role
-      return searchMatch && roleMatch
-    })
-  }
-</script>
-
-<Panel title="Screens" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button on:click={() => $goto("../../new")} cta>Add screen</Button>
-    <Search
-      placeholder="Search"
-      value={searchString}
-      on:change={e => (searchString = e.detail)}
-    />
-    <Select
-      bind:value={accessRole}
-      placeholder={null}
-      getOptionLabel={role => role.name}
-      getOptionValue={role => role._id}
-      getOptionColour={role => {
-        if (role?._id === "all") {
-          return null
-        }
-        return RoleUtils.getRoleColour(role._id)
-      }}
-      options={[{ name: "All screens", _id: "all" }, ...$roles]}
-    />
-  </Layout>
-  {#each filteredScreens as screen (screen._id)}
-    <NavItem
-      icon={screen.routing.homeScreen ? "Home" : null}
-      indentLevel={0}
-      selected={$store.selectedScreenId === screen._id}
-      text={screen.routing.route}
-      on:click={() => store.actions.screens.select(screen._id)}
-      rightAlignIcon
-      showTooltip
-      selectedBy={$userSelectedResourceMap[screen._id]}
-    >
-      <ScreenDropdownMenu screenId={screen._id} />
-      <RoleIndicator slot="right" roleId={screen.routing.roleId} />
-    </NavItem>
-  {/each}
-  {#if !filteredScreens?.length}
-    <Layout paddingY="" paddingX="L">
-      <Body size="S">
-        There aren't any screens matching the current filters
-      </Body>
-    </Layout>
-  {/if}
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
deleted file mode 100644
index 6236721e1a..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { selectedScreen } from "builderStore"
-  import ScreenListPanel from "./_components/ScreenListPanel.svelte"
-  import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
-</script>
-
-<ScreenListPanel />
-{#if $selectedScreen}
-  {#key $selectedScreen._id}
-    <ScreenSettingsPanel />
-  {/key}
-{/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
deleted file mode 100644
index c3325852c8..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-</script>
-
-<Panel borderLeft title="Theme" icon="InfoOutline" wide>
-  <Layout paddingX="L" paddingY="XL">
-    <Body size="S">
-      Your theme is set across all the screens within your app.
-    </Body>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
deleted file mode 100644
index 1c86a51f67..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Layout, Label, ColorPicker, notifications } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { get } from "svelte/store"
-  import { DefaultAppTheme } from "constants"
-  import AppThemeSelect from "./AppThemeSelect.svelte"
-  import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
-
-  $: customTheme = $store.customTheme || {}
-
-  const update = async (property, value) => {
-    try {
-      store.actions.customTheme.save({
-        ...get(store).customTheme,
-        [property]: value,
-      })
-    } catch (error) {
-      notifications.error("Error updating custom theme")
-    }
-  }
-</script>
-
-<Panel title="Theme" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Layout noPadding gap="XS">
-      <Label>Theme</Label>
-      <AppThemeSelect />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Button roundness</Label>
-      <ButtonRoundnessSelect
-        {customTheme}
-        on:change={e => update("buttonBorderRadius", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Accent color</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
-        on:change={e => update("primaryColor", e.detail)}
-      />
-    </Layout>
-    <Layout noPadding gap="XS">
-      <Label>Accent color (hover)</Label>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={customTheme.primaryColorHover ||
-          DefaultAppTheme.primaryColorHover}
-        on:change={e => update("primaryColorHover", e.detail)}
-      />
-    </Layout>
-  </Layout>
-</Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
deleted file mode 100644
index 013257d8e1..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import ThemeSettingsPanel from "./_components/ThemeSettingsPanel.svelte"
-  import ThemeInfoPanel from "./_components/ThemeInfoPanel.svelte"
-</script>
-
-<ThemeSettingsPanel />
-<ThemeInfoPanel />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
similarity index 94%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index 3ca3e6b419..cc4415ce2c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -58,16 +58,17 @@
         const response = await store.actions.screens.save(screen)
         screenId = response._id
 
-        // Add link in layout for list screens
-        if (screen.props._instanceName.endsWith("List")) {
-          await store.actions.links.save(
-            screen.routing.route,
-            capitalise(screen.routing.route.split("/")[1])
-          )
-        }
+        // Add link in layout. We only ever actually create 1 screen now, even
+        // for autoscreens, so it's always safe to do this.
+        await store.actions.links.save(
+          screen.routing.route,
+          capitalise(screen.routing.route.split("/")[1])
+        )
       }
 
+      // Go to new screen
       $goto(`./${screenId}`)
+      store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
       notifications.error("Error creating screens")
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/blank.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/blank.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
new file mode 100644
index 0000000000..b504940ca7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
@@ -0,0 +1,105 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import CreationPage from "components/common/CreationPage.svelte"
+  import blankImage from "./blank.png"
+  import tableImage from "./table.png"
+  import CreateScreenModal from "./CreateScreenModal.svelte"
+  import { store } from "builderStore"
+
+  export let onClose = null
+
+  let createScreenModal
+
+  $: hasScreens = $store.screens?.length
+</script>
+
+<div class="page">
+  <CreationPage
+    showClose={!!onClose}
+    {onClose}
+    heading={hasScreens ? "Create new screen" : "Create your first screen"}
+  >
+    <div class="subHeading">
+      <Body>Start from scratch or create screens from your data</Body>
+    </div>
+
+    <div class="cards">
+      <div class="card" on:click={() => createScreenModal.show("blank")}>
+        <div class="image">
+          <img alt="" src={blankImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Blank screen</Body>
+          <Body size="XS">Add an empty blank screen</Body>
+        </div>
+      </div>
+
+      <div class="card" on:click={() => createScreenModal.show("table")}>
+        <div class="image">
+          <img alt="" src={tableImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Table</Body>
+          <Body size="XS">View, edit and delete rows on a table</Body>
+        </div>
+      </div>
+    </div>
+  </CreationPage>
+</div>
+
+<CreateScreenModal bind:this={createScreenModal} />
+
+<style>
+  .page {
+    padding: 28px 40px 40px 40px;
+  }
+
+  .subHeading :global(p) {
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 36px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  .card {
+    max-width: 235px;
+    transition: filter 150ms;
+  }
+
+  .card:hover {
+    filter: brightness(1.1);
+    cursor: pointer;
+  }
+
+  .image {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    max-height: 127px;
+    overflow: hidden;
+  }
+
+  .image img {
+    width: 100%;
+  }
+
+  .text {
+    border: 1px solid var(--grey-4);
+    border-radius: 0 0 4px 4px;
+    padding: 8px 16px 13px 16px;
+  }
+
+  .text :global(p:nth-child(1)) {
+    margin-bottom: 6px;
+  }
+
+  .text :global(p:nth-child(2)) {
+    color: var(--grey-6);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/table.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/table.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
index ab9c8eb91d..6fd08447b2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -1,104 +1,23 @@
 <script>
-  import { Body } from "@budibase/bbui"
-  import CreationPage from "components/common/CreationPage.svelte"
-  import blankImage from "./blank.png"
-  import tableImage from "./table.png"
-  import CreateScreenModal from "./_components/CreateScreenModal.svelte"
+  import NewScreen from "./_components/NewScreen/index.svelte"
   import { store } from "builderStore"
   import { goto } from "@roxi/routify"
 
-  let createScreenModal
+  $: onClose = getOnClose($store)
 
-  $: hasScreens = $store.screens?.length
+  const getOnClose = ({ screens, selectedScreenId }) => {
+    if (!screens?.length) {
+      return null
+    }
+    if (selectedScreenId) {
+      return () => {
+        $goto(`./${selectedScreenId}`)
+      }
+    }
+    return () => {
+      $goto(`./${screens[0]._id}`)
+    }
+  }
 </script>
 
-<div class="page">
-  <CreationPage
-    showClose={$store.screens.length > 0}
-    onClose={() => $goto(`./${$store.screens[0]._id}`)}
-    heading={hasScreens ? "Create new screen" : "Create your first screen"}
-  >
-    <div class="subHeading">
-      <Body>Start from scratch or create screens from your data</Body>
-    </div>
-
-    <div class="cards">
-      <div class="card" on:click={() => createScreenModal.show("blank")}>
-        <div class="image">
-          <img alt="" src={blankImage} />
-        </div>
-        <div class="text">
-          <Body size="S">Blank screen</Body>
-          <Body size="XS">Add an empty blank screen</Body>
-        </div>
-      </div>
-
-      <div class="card" on:click={() => createScreenModal.show("table")}>
-        <div class="image">
-          <img alt="" src={tableImage} />
-        </div>
-        <div class="text">
-          <Body size="S">Table</Body>
-          <Body size="XS">View, edit and delete rows on a table</Body>
-        </div>
-      </div>
-    </div>
-  </CreationPage>
-</div>
-
-<CreateScreenModal bind:this={createScreenModal} />
-
-<style>
-  .page {
-    padding: 28px 40px 40px 40px;
-  }
-
-  .subHeading :global(p) {
-    text-align: center;
-    margin-top: 12px;
-    margin-bottom: 36px;
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .cards {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 24px;
-  }
-
-  .card {
-    max-width: 235px;
-    transition: filter 150ms;
-  }
-
-  .card:hover {
-    filter: brightness(1.1);
-    cursor: pointer;
-  }
-
-  .image {
-    border-radius: 4px 4px 0 0;
-    width: 100%;
-    max-height: 127px;
-    overflow: hidden;
-  }
-
-  .image img {
-    width: 100%;
-  }
-
-  .text {
-    border: 1px solid var(--grey-4);
-    border-radius: 0 0 4px 4px;
-    padding: 8px 16px 13px 16px;
-  }
-
-  .text :global(p:nth-child(1)) {
-    margin-bottom: 6px;
-  }
-
-  .text :global(p:nth-child(2)) {
-    color: var(--grey-6);
-  }
-</style>
+<NewScreen {onClose} />
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f17a8db0c9..94e7587010 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -33,7 +33,7 @@
 
   export let instance = {}
   export let isLayout = false
-  export let isScreen = false
+  export let isRoot = false
   export let isBlock = false
 
   // Get parent contexts
@@ -104,7 +104,7 @@
   // Extract component instance info
   $: children = instance._children || []
   $: id = instance._id
-  $: name = isScreen ? "Screen" : instance._instanceName
+  $: name = isRoot ? "Screen" : instance._instanceName
   $: icon = definition?.icon
 
   // Determine if the component is selected or is part of the critical path
@@ -133,13 +133,13 @@
   $: builderInteractive =
     $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
-  $: interactive = builderInteractive || devToolsInteractive
+  $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
   $: editing = editable && selected && $builderStore.editMode
   $: draggable =
     !inDragPath &&
     interactive &&
     !isLayout &&
-    !isScreen &&
+    !isRoot &&
     definition?.draggable !== false
   $: droppable = interactive
   $: builderHidden =
@@ -475,7 +475,7 @@
     node.style.scrollMargin = "100px"
     node.scrollIntoView({
       behavior: "smooth",
-      block: "start",
+      block: "nearest",
       inline: "start",
     })
   }
@@ -538,7 +538,7 @@
             <svelte:self instance={child} />
           {/each}
         {:else if emptyState}
-          {#if isScreen}
+          {#if isRoot}
             <ScreenPlaceholder />
           {:else}
             <EmptyPlaceholder />
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index f6f9a932f0..4b3acb2019 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -44,7 +44,7 @@
 {#if $routeStore.routerLoaded}
   {#key screenDefinition?._id}
     <Provider key="url" data={params}>
-      <Component isScreen instance={screenDefinition} />
+      <Component isRoot instance={screenDefinition} />
     </Provider>
   {/key}
 {/if}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index c1dec0b119..e557874edb 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -72,19 +72,27 @@
     $context.device.height
   )
   $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
+  $: screenId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-screen`
+    : "screen"
+  $: navigationId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-navigation`
+    : "navigation"
 
-  // Scroll navigation into view if selected
+  // Scroll navigation into view if selected.
+  // Memoize into a primitive to avoid spamming this whenever builder store
+  // changes.
+  $: selected =
+    $builderStore.inBuilder &&
+    $builderStore.selectedComponentId?.endsWith("-navigation")
   $: {
-    if (
-      $builderStore.inBuilder &&
-      $builderStore.selectedComponentId === "navigation"
-    ) {
+    if (selected) {
       const node = document.getElementsByClassName("nav-wrapper")?.[0]
       if (node) {
         node.style.scrollMargin = "100px"
         node.scrollIntoView({
           behavior: "smooth",
-          block: "start",
+          block: "nearest",
           inline: "start",
         })
       }
@@ -146,26 +154,29 @@
 </script>
 
 <div
-  class="layout layout--{typeClass}"
+  class="component {screenId} layout layout--{typeClass}"
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
+  data-id={screenId}
+  data-name="Screen"
+  data-icon="WebPage"
 >
-  <div class="layout-body">
+  <div class="{screenId}-dom screen-wrapper layout-body">
     {#if typeClass !== "none"}
       <div
-        class="interactive component navigation"
-        data-id="navigation"
+        class="interactive component {navigationId}"
+        data-id={navigationId}
         data-name="Navigation"
-        data-icon="Link"
+        data-icon="Visibility"
       >
         <div
-          class="nav-wrapper"
+          class="nav-wrapper {navigationId}-dom"
           class:sticky
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}
           on:click={$builderStore.inBuilder
-            ? builderStore.actions.clickNav
+            ? builderStore.actions.selectComponent(navigationId)
             : null}
           style={navStyle}
         >
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index e1bfe4f7e5..b69b8ce050 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -30,7 +30,7 @@
     }
   }
   $: settings = getBarSettings(definition)
-  $: isScreen = id === $builderStore.screen?.props?._id
+  $: isRoot = id === $builderStore.screen?.props?._id
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -160,11 +160,11 @@
       {:else if setting.type === "color"}
         <SettingsColorPicker prop={setting.key} />
       {/if}
-      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isScreen)}
+      {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />
       {/if}
     {/each}
-    {#if !isScreen}
+    {#if !isRoot}
       <SettingsButton
         icon="Duplicate"
         on:click={() => {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 23d789dc2c..036558e8b2 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -80,9 +80,6 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
-    clickNav: () => {
-      eventStore.actions.dispatchEvent("click-nav")
-    },
     requestAddComponent: () => {
       eventStore.actions.dispatchEvent("request-add-component")
     },
diff --git a/packages/pro b/packages/pro
index 06a28b18a4..b7815e099b 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 06a28b18a409cc12e9e8a5b69a094adcc6babd5a
+Subproject commit b7815e099bbd5e1410185c464dbd54f7287e732f
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index f8b6bd6d16..bd5960e858 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -281,12 +281,7 @@ async function performAppCreate(ctx: UserCtx) {
         title: name,
         navWidth: "Large",
         navBackground: "var(--spectrum-global-color-gray-100)",
-        links: [
-          {
-            url: "/home",
-            text: "Home",
-          },
-        ],
+        links: [],
       },
       theme: "spectrum--light",
       customTheme: {
diff --git a/packages/server/src/api/controllers/auth.ts b/packages/server/src/api/controllers/auth.ts
index bca6c4e64e..eabfe10bab 100644
--- a/packages/server/src/api/controllers/auth.ts
+++ b/packages/server/src/api/controllers/auth.ts
@@ -2,9 +2,9 @@ import { outputProcessing } from "../../utilities/rowProcessor"
 import { InternalTables } from "../../db/utils"
 import { getFullUser } from "../../utilities/users"
 import { roles, context } from "@budibase/backend-core"
-import { groups } from "@budibase/pro"
-import { ContextUser, User, Row, UserCtx } from "@budibase/types"
+import { ContextUser, Row, UserCtx } from "@budibase/types"
 import sdk from "../../sdk"
+import { processUser } from "../../utilities/global"
 
 const PUBLIC_ROLE = roles.BUILTIN_ROLE_IDS.PUBLIC
 
@@ -26,7 +26,7 @@ export async function fetchSelf(ctx: UserCtx) {
   }
 
   const appId = context.getAppId()
-  const user: ContextUser = await getFullUser(ctx, userId)
+  let user: ContextUser = await getFullUser(ctx, userId)
   // this shouldn't be returned by the app self
   delete user.roles
   // forward the csrf token from the session
@@ -36,8 +36,7 @@ export async function fetchSelf(ctx: UserCtx) {
     const db = context.getAppDB()
     // check for group permissions
     if (!user.roleId || user.roleId === PUBLIC_ROLE) {
-      const groupRoleId = await groups.getGroupRoleId(user as User, appId)
-      user.roleId = groupRoleId || user.roleId
+      user = await processUser(user, { appId })
     }
     // remove the full roles structure
     delete user.roles
diff --git a/packages/server/src/api/controllers/permission.ts b/packages/server/src/api/controllers/permission.ts
index 20e64d2cfb..8314f29398 100644
--- a/packages/server/src/api/controllers/permission.ts
+++ b/packages/server/src/api/controllers/permission.ts
@@ -1,11 +1,12 @@
-import { permissions, roles, context } from "@budibase/backend-core"
+import { permissions, roles, context, HTTPError } from "@budibase/backend-core"
+import { UserCtx, Database, Role, PermissionLevel } from "@budibase/types"
 import { getRoleParams } from "../../db/utils"
 import {
   CURRENTLY_SUPPORTED_LEVELS,
   getBasePermissions,
 } from "../../utilities/security"
 import { removeFromArray } from "../../utilities"
-import { UserCtx, Database, Role } from "@budibase/types"
+import sdk from "../../sdk"
 
 const PermissionUpdateType = {
   REMOVE: "remove",
@@ -25,14 +26,25 @@ async function getAllDBRoles(db: Database) {
 }
 
 async function updatePermissionOnRole(
-  appId: string,
   {
     roleId,
     resourceId,
     level,
-  }: { roleId: string; resourceId: string; level: string },
+  }: { roleId: string; resourceId: string; level: PermissionLevel },
   updateType: string
 ) {
+  const allowedAction = await sdk.permissions.resourceActionAllowed({
+    resourceId,
+    level,
+  })
+
+  if (!allowedAction.allowed) {
+    throw new HTTPError(
+      `You are not allowed to '${allowedAction.level}' the resource type '${allowedAction.resourceType}'`,
+      403
+    )
+  }
+
   const db = context.getAppDB()
   const remove = updateType === PermissionUpdateType.REMOVE
   const isABuiltin = roles.isBuiltin(roleId)
@@ -163,16 +175,11 @@ export async function getResourcePerms(ctx: UserCtx) {
 }
 
 export async function addPermission(ctx: UserCtx) {
-  ctx.body = await updatePermissionOnRole(
-    ctx.appId,
-    ctx.params,
-    PermissionUpdateType.ADD
-  )
+  ctx.body = await updatePermissionOnRole(ctx.params, PermissionUpdateType.ADD)
 }
 
 export async function removePermission(ctx: UserCtx) {
   ctx.body = await updatePermissionOnRole(
-    ctx.appId,
     ctx.params,
     PermissionUpdateType.REMOVE
   )
diff --git a/packages/server/src/api/routes/tests/permissions.spec.js b/packages/server/src/api/routes/tests/permissions.spec.ts
similarity index 57%
rename from packages/server/src/api/routes/tests/permissions.spec.js
rename to packages/server/src/api/routes/tests/permissions.spec.ts
index ed131aed80..118d35f8fd 100644
--- a/packages/server/src/api/routes/tests/permissions.spec.js
+++ b/packages/server/src/api/routes/tests/permissions.spec.ts
@@ -1,5 +1,20 @@
-const { roles } = require("@budibase/backend-core")
-const setup = require("./utilities")
+const mockedSdk = sdk.permissions as jest.Mocked<typeof sdk.permissions>
+jest.mock("../../../sdk/app/permissions", () => ({
+  resourceActionAllowed: jest.fn(),
+}))
+
+import sdk from "../../../sdk"
+
+import { roles } from "@budibase/backend-core"
+import {
+  Document,
+  DocumentType,
+  PermissionLevel,
+  Row,
+  Table,
+} from "@budibase/types"
+import * as setup from "./utilities"
+
 const { basicRow } = setup.structures
 const { BUILTIN_ROLE_IDS } = roles
 
@@ -9,29 +24,27 @@ const STD_ROLE_ID = BUILTIN_ROLE_IDS.PUBLIC
 describe("/permission", () => {
   let request = setup.getRequest()
   let config = setup.getConfig()
-  let table
-  let perms
-  let row
+  let table: Table & { _id: string }
+  let perms: Document[]
+  let row: Row
 
   afterAll(setup.afterAll)
 
   beforeAll(async () => {
     await config.init()
   })
-  
-  beforeEach(async () => {
-    table = await config.createTable()
-    row = await config.createRow()
-    perms = await config.addPermission(STD_ROLE_ID, table._id)
-  })
 
-  async function getTablePermissions() {
-    return request
-      .get(`/api/permission/${table._id}`)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-  }
+  beforeEach(async () => {
+    mockedSdk.resourceActionAllowed.mockResolvedValue({ allowed: true })
+
+    table = (await config.createTable()) as typeof table
+    row = await config.createRow()
+    perms = await config.api.permission.set({
+      roleId: STD_ROLE_ID,
+      resourceId: table._id,
+      level: PermissionLevel.READ,
+    })
+  })
 
   describe("levels", () => {
     it("should be able to get levels", async () => {
@@ -65,8 +78,12 @@ describe("/permission", () => {
     })
 
     it("should get resource permissions with multiple roles", async () => {
-      perms = await config.addPermission(HIGHER_ROLE_ID, table._id, "write")
-      const res = await getTablePermissions()
+      perms = await config.api.permission.set({
+        roleId: HIGHER_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.WRITE,
+      })
+      const res = await config.api.permission.get(table._id)
       expect(res.body["read"]).toEqual(STD_ROLE_ID)
       expect(res.body["write"]).toEqual(HIGHER_ROLE_ID)
       const allRes = await request
@@ -77,19 +94,59 @@ describe("/permission", () => {
       expect(allRes.body[table._id]["write"]).toEqual(HIGHER_ROLE_ID)
       expect(allRes.body[table._id]["read"]).toEqual(STD_ROLE_ID)
     })
+
+    it("throw forbidden if the action is not allowed for the resource", async () => {
+      mockedSdk.resourceActionAllowed.mockResolvedValue({
+        allowed: false,
+        resourceType: DocumentType.DATASOURCE,
+        level: PermissionLevel.READ,
+      })
+
+      const response = await config.api.permission.set(
+        {
+          roleId: STD_ROLE_ID,
+          resourceId: table._id,
+          level: PermissionLevel.EXECUTE,
+        },
+        { expectStatus: 403 }
+      )
+      expect(response.message).toEqual(
+        "You are not allowed to 'read' the resource type 'datasource'"
+      )
+    })
   })
 
   describe("remove", () => {
     it("should be able to remove the permission", async () => {
-      const res = await request
-        .delete(`/api/permission/${STD_ROLE_ID}/${table._id}/read`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
+      const res = await config.api.permission.revoke({
+        roleId: STD_ROLE_ID,
+        resourceId: table._id,
+        level: PermissionLevel.READ,
+      })
       expect(res.body[0]._id).toEqual(STD_ROLE_ID)
-      const permsRes = await getTablePermissions()
+      const permsRes = await config.api.permission.get(table._id)
       expect(permsRes.body[STD_ROLE_ID]).toBeUndefined()
     })
+
+    it("throw forbidden if the action is not allowed for the resource", async () => {
+      mockedSdk.resourceActionAllowed.mockResolvedValue({
+        allowed: false,
+        resourceType: DocumentType.DATASOURCE,
+        level: PermissionLevel.READ,
+      })
+
+      const response = await config.api.permission.revoke(
+        {
+          roleId: STD_ROLE_ID,
+          resourceId: table._id,
+          level: PermissionLevel.EXECUTE,
+        },
+        { expectStatus: 403 }
+      )
+      expect(response.body.message).toEqual(
+        "You are not allowed to 'read' the resource type 'datasource'"
+      )
+    })
   })
 
   describe("check public user allowed", () => {
@@ -124,7 +181,9 @@ describe("/permission", () => {
         .expect("Content-Type", /json/)
         .expect(200)
       expect(Array.isArray(res.body)).toEqual(true)
-      const publicPerm = res.body.find(perm => perm._id === "public")
+      const publicPerm = res.body.find(
+        (perm: Document) => perm._id === "public"
+      )
       expect(publicPerm).toBeDefined()
       expect(publicPerm.permissions).toBeDefined()
       expect(publicPerm.name).toBeDefined()
diff --git a/packages/server/src/api/routes/tests/role.spec.js b/packages/server/src/api/routes/tests/role.spec.js
index 5282597897..a6418c2277 100644
--- a/packages/server/src/api/routes/tests/role.spec.js
+++ b/packages/server/src/api/routes/tests/role.spec.js
@@ -1,5 +1,6 @@
 const { roles, events, permissions } = require("@budibase/backend-core")
 const setup = require("./utilities")
+const { PermissionLevel } = require("@budibase/types")
 const { basicRole } = setup.structures
 const { BUILTIN_ROLE_IDS } = roles
 const { BuiltinPermissionID } = permissions
@@ -16,7 +17,7 @@ describe("/roles", () => {
 
   const createRole = async (role) => {
     if (!role) {
-      role =  basicRole()
+      role = basicRole()
     }
 
     return request
@@ -98,7 +99,7 @@ describe("/roles", () => {
 
     it("should be able to get the role with a permission added", async () => {
       const table = await config.createTable()
-      await config.addPermission(BUILTIN_ROLE_IDS.POWER, table._id)
+      await config.api.permission.set({ roleId: BUILTIN_ROLE_IDS.POWER, resourceId: table._id, level: PermissionLevel.READ })
       const res = await request
         .get(`/api/roles`)
         .set(config.defaultHeaders())
diff --git a/packages/server/src/integration-test/postgres.spec.ts b/packages/server/src/integration-test/postgres.spec.ts
index 1b64c763e6..6b0e7b4266 100644
--- a/packages/server/src/integration-test/postgres.spec.ts
+++ b/packages/server/src/integration-test/postgres.spec.ts
@@ -18,7 +18,7 @@ import {
 import _ from "lodash"
 import { generator } from "@budibase/backend-core/tests"
 import { utils } from "@budibase/backend-core"
-import { GenericContainer } from "testcontainers"
+import { GenericContainer, Wait, StartedTestContainer } from "testcontainers"
 
 const config = setup.getConfig()!
 
@@ -37,22 +37,36 @@ describe("postgres integrations", () => {
 
   let host: string
   let port: number
+  const containers: StartedTestContainer[] = []
 
   beforeAll(async () => {
-    const container = await new GenericContainer("postgres")
+    const containerPostgres = await new GenericContainer("postgres")
       .withExposedPorts(5432)
       .withEnv("POSTGRES_PASSWORD", "password")
+      .withWaitStrategy(
+        Wait.forLogMessage(
+          "PostgreSQL init process complete; ready for start up."
+        )
+      )
       .start()
 
-    host = container.getContainerIpAddress()
-    port = container.getMappedPort(5432)
+    host = containerPostgres.getContainerIpAddress()
+    port = containerPostgres.getMappedPort(5432)
 
     await config.init()
     const apiKey = await config.generateApiKey()
 
+    containers.push(containerPostgres)
+
     makeRequest = generateMakeRequest(apiKey, true)
   })
 
+  afterAll(async () => {
+    for (let container of containers) {
+      await container.stop()
+    }
+  })
+
   function pgDatasourceConfig() {
     return {
       datasource: {
diff --git a/packages/server/src/sdk/app/permissions/index.ts b/packages/server/src/sdk/app/permissions/index.ts
new file mode 100644
index 0000000000..2219120db6
--- /dev/null
+++ b/packages/server/src/sdk/app/permissions/index.ts
@@ -0,0 +1,37 @@
+import {
+  DocumentType,
+  PermissionLevel,
+  VirtualDocumentType,
+} from "@budibase/types"
+import { isViewID } from "../../../db/utils"
+import { features } from "@budibase/pro"
+
+type ResourceActionAllowedResult =
+  | { allowed: true }
+  | {
+      allowed: false
+      level: PermissionLevel
+      resourceType: DocumentType | VirtualDocumentType
+    }
+
+export async function resourceActionAllowed({
+  resourceId,
+  level,
+}: {
+  resourceId: string
+  level: PermissionLevel
+}): Promise<ResourceActionAllowedResult> {
+  if (!isViewID(resourceId)) {
+    return { allowed: true }
+  }
+
+  if (await features.isViewPermissionEnabled()) {
+    return { allowed: true }
+  }
+
+  return {
+    allowed: false,
+    level,
+    resourceType: VirtualDocumentType.VIEW,
+  }
+}
diff --git a/packages/server/src/sdk/app/permissions/tests/permissions.spec.ts b/packages/server/src/sdk/app/permissions/tests/permissions.spec.ts
new file mode 100644
index 0000000000..4c2768dde4
--- /dev/null
+++ b/packages/server/src/sdk/app/permissions/tests/permissions.spec.ts
@@ -0,0 +1,52 @@
+import TestConfiguration from "../../../../tests/utilities/TestConfiguration"
+import { PermissionLevel } from "@budibase/types"
+import { mocks, structures } from "@budibase/backend-core/tests"
+import { resourceActionAllowed } from ".."
+import { generateViewID } from "../../../../db/utils"
+
+describe("permissions sdk", () => {
+  beforeEach(() => {
+    new TestConfiguration()
+    mocks.licenses.useCloudFree()
+  })
+
+  describe("resourceActionAllowed", () => {
+    it("non view resources actions are always allowed", async () => {
+      const resourceId = structures.users.user()._id!
+
+      const result = await resourceActionAllowed({
+        resourceId,
+        level: PermissionLevel.READ,
+      })
+
+      expect(result).toEqual({ allowed: true })
+    })
+
+    it("view resources actions allowed if the feature flag is enabled", async () => {
+      mocks.licenses.useViewPermissions()
+      const resourceId = generateViewID(structures.generator.guid())
+
+      const result = await resourceActionAllowed({
+        resourceId,
+        level: PermissionLevel.READ,
+      })
+
+      expect(result).toEqual({ allowed: true })
+    })
+
+    it("view resources actions allowed if the feature flag is disabled", async () => {
+      const resourceId = generateViewID(structures.generator.guid())
+
+      const result = await resourceActionAllowed({
+        resourceId,
+        level: PermissionLevel.READ,
+      })
+
+      expect(result).toEqual({
+        allowed: false,
+        level: "read",
+        resourceType: "view",
+      })
+    })
+  })
+})
diff --git a/packages/server/src/sdk/index.ts b/packages/server/src/sdk/index.ts
index 85ac483c05..24eb1ebf3c 100644
--- a/packages/server/src/sdk/index.ts
+++ b/packages/server/src/sdk/index.ts
@@ -8,6 +8,7 @@ import { default as rows } from "./app/rows"
 import { default as users } from "./users"
 import { default as plugins } from "./plugins"
 import * as views from "./app/views"
+import * as permissions from "./app/permissions"
 
 const sdk = {
   backups,
@@ -20,6 +21,7 @@ const sdk = {
   queries,
   plugins,
   views,
+  permissions,
 }
 
 // default export for TS
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index c8b917f626..c1db54fe60 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -620,18 +620,6 @@ class TestConfiguration {
     return this._req(config, null, controllers.role.save)
   }
 
-  async addPermission(roleId: string, resourceId: string, level = "read") {
-    return this._req(
-      null,
-      {
-        roleId,
-        resourceId,
-        level,
-      },
-      controllers.perms.addPermission
-    )
-  }
-
   // VIEW
 
   async createView(config?: any) {
diff --git a/packages/server/src/tests/utilities/api/index.ts b/packages/server/src/tests/utilities/api/index.ts
index a6002a72d8..40995b62f2 100644
--- a/packages/server/src/tests/utilities/api/index.ts
+++ b/packages/server/src/tests/utilities/api/index.ts
@@ -1,4 +1,5 @@
 import TestConfiguration from "../TestConfiguration"
+import { PermissionAPI } from "./permission"
 import { RowAPI } from "./row"
 import { TableAPI } from "./table"
 import { ViewV2API } from "./viewV2"
@@ -7,10 +8,12 @@ export default class API {
   table: TableAPI
   viewV2: ViewV2API
   row: RowAPI
+  permission: PermissionAPI
 
   constructor(config: TestConfiguration) {
     this.table = new TableAPI(config)
     this.viewV2 = new ViewV2API(config)
     this.row = new RowAPI(config)
+    this.permission = new PermissionAPI(config)
   }
 }
diff --git a/packages/server/src/tests/utilities/api/permission.ts b/packages/server/src/tests/utilities/api/permission.ts
new file mode 100644
index 0000000000..ffa89e88f9
--- /dev/null
+++ b/packages/server/src/tests/utilities/api/permission.ts
@@ -0,0 +1,52 @@
+import { AnyDocument, PermissionLevel } from "@budibase/types"
+import TestConfiguration from "../TestConfiguration"
+import { TestAPI } from "./base"
+
+export class PermissionAPI extends TestAPI {
+  constructor(config: TestConfiguration) {
+    super(config)
+  }
+
+  get = async (
+    resourceId: string,
+    { expectStatus } = { expectStatus: 200 }
+  ) => {
+    return this.request
+      .get(`/api/permission/${resourceId}`)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+  }
+
+  set = async (
+    {
+      roleId,
+      resourceId,
+      level,
+    }: { roleId: string; resourceId: string; level: PermissionLevel },
+    { expectStatus } = { expectStatus: 200 }
+  ): Promise<any> => {
+    const res = await this.request
+      .post(`/api/permission/${roleId}/${resourceId}/${level}`)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+    return res.body
+  }
+
+  revoke = async (
+    {
+      roleId,
+      resourceId,
+      level,
+    }: { roleId: string; resourceId: string; level: PermissionLevel },
+    { expectStatus } = { expectStatus: 200 }
+  ) => {
+    const res = await this.request
+      .delete(`/api/permission/${roleId}/${resourceId}/${level}`)
+      .set(this.config.defaultHeaders())
+      .expect("Content-Type", /json/)
+      .expect(expectStatus)
+    return res
+  }
+}
diff --git a/packages/server/src/utilities/global.ts b/packages/server/src/utilities/global.ts
index 5561b59233..5aa201990c 100644
--- a/packages/server/src/utilities/global.ts
+++ b/packages/server/src/utilities/global.ts
@@ -12,75 +12,65 @@ import { groups } from "@budibase/pro"
 import { UserCtx, ContextUser, User, UserGroup } from "@budibase/types"
 import cloneDeep from "lodash/cloneDeep"
 
-export function updateAppRole(
+export async function processUser(
   user: ContextUser,
-  { appId }: { appId?: string } = {}
+  opts: { appId?: string; groups?: UserGroup[] } = {}
 ) {
-  appId = appId || context.getAppId()
-
   if (!user || (!user.roles && !user.userGroups)) {
     return user
   }
-  // if in an multi-tenancy environment make sure roles are never updated
+  user = cloneDeep(user)
+  delete user.password
+  const appId = opts.appId || context.getAppId()
+  if (!appId) {
+    throw new Error("Unable to process user without app ID")
+  }
+  // if in a multi-tenancy environment and in wrong tenant make sure roles are never updated
   if (env.MULTI_TENANCY && appId && !tenancy.isUserInAppTenant(appId, user)) {
     user = users.removePortalUserPermissions(user)
     user.roleId = roles.BUILTIN_ROLE_IDS.PUBLIC
     return user
   }
-  // always use the deployed app
-  if (appId && user.roles) {
+  let groupList: UserGroup[] = []
+  if (appId && user?.userGroups?.length) {
+    groupList = opts.groups
+      ? opts.groups
+      : await groups.getBulk(user.userGroups)
+  }
+  // check if a group provides builder access
+  const builderAppIds = await groups.getGroupBuilderAppIds(user, {
+    appId,
+    groups: groupList,
+  })
+  if (builderAppIds.length && !users.isBuilder(user, appId)) {
+    const existingApps = user.builder?.apps || []
+    user.builder = {
+      apps: [...new Set(existingApps.concat(builderAppIds))],
+    }
+  }
+  // builders are always admins within the app
+  if (users.isBuilder(user, appId)) {
+    user.roleId = roles.BUILTIN_ROLE_IDS.ADMIN
+  }
+  // try to get the role from the user list
+  if (!user.roleId && appId && user.roles) {
     user.roleId = user.roles[dbCore.getProdAppID(appId)]
   }
-  // if a role wasn't found then either set as admin (builder) or public (everyone else)
-  if (!user.roleId && users.isBuilder(user, appId)) {
-    user.roleId = roles.BUILTIN_ROLE_IDS.ADMIN
-  } else if (!user.roleId && !user?.userGroups?.length) {
-    user.roleId = roles.BUILTIN_ROLE_IDS.PUBLIC
-  }
-
-  delete user.roles
-  return user
-}
-
-async function checkGroupRoles(
-  user: ContextUser,
-  opts: { appId?: string; groups?: UserGroup[] } = {}
-) {
-  if (user.roleId && user.roleId !== roles.BUILTIN_ROLE_IDS.PUBLIC) {
-    return user
-  }
-  if (opts.appId) {
-    user.roleId = await groups.getGroupRoleId(user as User, opts.appId, {
-      groups: opts.groups,
+  // try to get the role from the group list
+  if (!user.roleId && groupList) {
+    user.roleId = await groups.getGroupRoleId(user, appId, {
+      groups: groupList,
     })
   }
   // final fallback, simply couldn't find a role - user must be public
   if (!user.roleId) {
     user.roleId = roles.BUILTIN_ROLE_IDS.PUBLIC
   }
+  // remove the roles as it is now set
+  delete user.roles
   return user
 }
 
-export async function processUser(
-  user: ContextUser,
-  opts: { appId?: string; groups?: UserGroup[] } = {}
-) {
-  let clonedUser = cloneDeep(user)
-  if (clonedUser) {
-    delete clonedUser.password
-  }
-  const appId = opts.appId || context.getAppId()
-  clonedUser = updateAppRole(clonedUser, { appId })
-  if (!clonedUser.roleId && clonedUser?.userGroups?.length) {
-    clonedUser = await checkGroupRoles(clonedUser, {
-      appId,
-      groups: opts?.groups,
-    })
-  }
-
-  return clonedUser
-}
-
 export async function getCachedSelf(ctx: UserCtx, appId: string) {
   // this has to be tenant aware, can't depend on the context to find it out
   // running some middlewares before the tenancy causes context to break
diff --git a/packages/server/src/utilities/workerRequests.ts b/packages/server/src/utilities/workerRequests.ts
index 5230e25bf7..fa9fde7297 100644
--- a/packages/server/src/utilities/workerRequests.ts
+++ b/packages/server/src/utilities/workerRequests.ts
@@ -8,10 +8,9 @@ import {
   logging,
   env as coreEnv,
 } from "@budibase/backend-core"
-import { updateAppRole } from "./global"
-import { BBContext, User, EmailInvite } from "@budibase/types"
+import { Ctx, User, EmailInvite } from "@budibase/types"
 
-export function request(ctx?: BBContext, request?: any) {
+export function request(ctx?: Ctx, request?: any) {
   if (!request.headers) {
     request.headers = {}
   }
@@ -43,7 +42,7 @@ export function request(ctx?: BBContext, request?: any) {
 async function checkResponse(
   response: any,
   errorMsg: string,
-  { ctx }: { ctx?: BBContext } = {}
+  { ctx }: { ctx?: Ctx } = {}
 ) {
   if (response.status !== 200) {
     let error
@@ -105,21 +104,7 @@ export async function sendSmtpEmail({
   return checkResponse(response, "send email")
 }
 
-export async function getGlobalSelf(ctx: BBContext, appId?: string) {
-  const endpoint = `/api/global/self`
-  const response = await fetch(
-    checkSlashesInUrl(env.WORKER_URL + endpoint),
-    // we don't want to use API key when getting self
-    request(ctx, { method: "GET" })
-  )
-  let json = await checkResponse(response, "get self globally", { ctx })
-  if (appId) {
-    json = updateAppRole(json)
-  }
-  return json
-}
-
-export async function removeAppFromUserRoles(ctx: BBContext, appId: string) {
+export async function removeAppFromUserRoles(ctx: Ctx, appId: string) {
   const prodAppId = dbCore.getProdAppID(appId)
   const response = await fetch(
     checkSlashesInUrl(env.WORKER_URL + `/api/global/roles/${prodAppId}`),
@@ -130,7 +115,7 @@ export async function removeAppFromUserRoles(ctx: BBContext, appId: string) {
   return checkResponse(response, "remove app role")
 }
 
-export async function allGlobalUsers(ctx: BBContext) {
+export async function allGlobalUsers(ctx: Ctx) {
   const response = await fetch(
     checkSlashesInUrl(env.WORKER_URL + "/api/global/users"),
     // we don't want to use API key when getting self
@@ -139,7 +124,7 @@ export async function allGlobalUsers(ctx: BBContext) {
   return checkResponse(response, "get users", { ctx })
 }
 
-export async function saveGlobalUser(ctx: BBContext) {
+export async function saveGlobalUser(ctx: Ctx) {
   const response = await fetch(
     checkSlashesInUrl(env.WORKER_URL + "/api/global/users"),
     // we don't want to use API key when getting self
@@ -148,7 +133,7 @@ export async function saveGlobalUser(ctx: BBContext) {
   return checkResponse(response, "save user", { ctx })
 }
 
-export async function deleteGlobalUser(ctx: BBContext) {
+export async function deleteGlobalUser(ctx: Ctx) {
   const response = await fetch(
     checkSlashesInUrl(
       env.WORKER_URL + `/api/global/users/${ctx.params.userId}`
@@ -159,7 +144,7 @@ export async function deleteGlobalUser(ctx: BBContext) {
   return checkResponse(response, "delete user", { ctx })
 }
 
-export async function readGlobalUser(ctx: BBContext): Promise<User> {
+export async function readGlobalUser(ctx: Ctx): Promise<User> {
   const response = await fetch(
     checkSlashesInUrl(
       env.WORKER_URL + `/api/global/users/${ctx.params.userId}`
diff --git a/packages/types/src/documents/global/userGroup.ts b/packages/types/src/documents/global/userGroup.ts
index b74e59c020..e6b70a160c 100644
--- a/packages/types/src/documents/global/userGroup.ts
+++ b/packages/types/src/documents/global/userGroup.ts
@@ -7,6 +7,10 @@ export interface UserGroup extends Document {
   color: string
   users?: GroupUser[]
   roles?: UserGroupRoles
+  // same structure as users
+  builder?: {
+    apps: string[]
+  }
   createdAt?: number
   scimInfo?: {
     externalId: string
diff --git a/packages/types/src/sdk/licensing/feature.ts b/packages/types/src/sdk/licensing/feature.ts
index a1ace01e48..218c2c5429 100644
--- a/packages/types/src/sdk/licensing/feature.ts
+++ b/packages/types/src/sdk/licensing/feature.ts
@@ -12,6 +12,7 @@ export enum Feature {
   APP_BUILDERS = "appBuilders",
   OFFLINE = "offline",
   USER_ROLE_PUBLIC_API = "userRolePublicApi",
+  VIEW_PERMISSIONS = "viewPermission",
 }
 
 export type PlanFeatures = { [key in PlanType]: Feature[] | undefined }
diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index 7167d91b23..47dbef964e 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -48,7 +48,7 @@ export async function generateAPIKey(ctx: any) {
   } catch (err) {
     devInfo = { _id: id, userId }
   }
-  devInfo.apiKey = await apiKey
+  devInfo.apiKey = apiKey
   await db.put(devInfo)
   ctx.body = cleanupDevInfo(devInfo)
 }
@@ -63,7 +63,7 @@ export async function fetchAPIKey(ctx: any) {
     devInfo = {
       _id: id,
       userId: ctx.user._id,
-      apiKey: await newApiKey(),
+      apiKey: newApiKey(),
     }
     await db.put(devInfo)
   }
diff --git a/packages/worker/src/api/controllers/global/users.ts b/packages/worker/src/api/controllers/global/users.ts
index a8207ea89e..ad906c8688 100644
--- a/packages/worker/src/api/controllers/global/users.ts
+++ b/packages/worker/src/api/controllers/global/users.ts
@@ -25,11 +25,11 @@ import {
 import {
   accounts,
   cache,
+  ErrorCode,
   events,
   migrations,
-  tenancy,
   platform,
-  ErrorCode,
+  tenancy,
 } from "@budibase/backend-core"
 import { checkAnyUserExists } from "../../../utilities/users"
 import { isEmailConfigured } from "../../../utilities/email"
@@ -280,7 +280,7 @@ export const onboardUsers = async (ctx: Ctx<InviteUsersRequest>) => {
     let bulkCreateReponse = await userSdk.db.bulkCreate(users, [])
 
     // Apply temporary credentials
-    let createWithCredentials = {
+    ctx.body = {
       ...bulkCreateReponse,
       successful: bulkCreateReponse?.successful.map(user => {
         return {
@@ -290,8 +290,6 @@ export const onboardUsers = async (ctx: Ctx<InviteUsersRequest>) => {
       }),
       created: true,
     }
-
-    ctx.body = createWithCredentials
   } else {
     ctx.throw(400, "User onboarding failed")
   }
diff --git a/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts b/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts
index f98ebbe15c..228715b860 100644
--- a/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/appBuilder.spec.ts
@@ -33,7 +33,9 @@ describe("/api/global/users/:userId/app/builder", () => {
         MOCK_APP_ID,
         400
       )
-      expect(resp.body.message).toContain("Feature not enabled")
+      expect(resp.body.message).toContain(
+        "appBuilders are not currently enabled"
+      )
     })
   })
 
diff --git a/packages/worker/src/api/routes/global/tests/scim.spec.ts b/packages/worker/src/api/routes/global/tests/scim.spec.ts
index 2eda482ed2..5686e39fa8 100644
--- a/packages/worker/src/api/routes/global/tests/scim.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/scim.spec.ts
@@ -10,6 +10,8 @@ import {
 import { TestConfiguration } from "../../../../tests"
 import { events } from "@budibase/backend-core"
 
+jest.setTimeout(30000)
+
 mocks.licenses.useScimIntegration()
 
 describe("scim", () => {
diff --git a/packages/worker/src/tests/jestEnv.ts b/packages/worker/src/tests/jestEnv.ts
index fc92bbbf23..9153676b8e 100644
--- a/packages/worker/src/tests/jestEnv.ts
+++ b/packages/worker/src/tests/jestEnv.ts
@@ -9,4 +9,4 @@ process.env.MINIO_SECRET_KEY = "test"
 process.env.PLATFORM_URL = "http://localhost:10000"
 process.env.INTERNAL_API_KEY = "tet"
 process.env.DISABLE_ACCOUNT_PORTAL = "0"
-process.env.REDIS_PASSWORD = "budibase"
+process.env.MOCK_REDIS = "1"