Merge branch 'develop' into api-tests-generate-tenants

2023-01-30 12:34:11 +00:00 · 2023-01-30 12:34:11 +00:00 · fa6dcc1fbe
parent 481ad1c51d fac6032223
commit fa6dcc1fbe
240 changed files with 6004 additions and 4342 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -6,7 +6,7 @@ labels: bug
 assignees: ''

 ---
-## Checklist
+**Checklist**
 - [ ] I have searched budibase discussions and github issues to check if my issue already exists

 **Hosting**
--- a/hosting/docker-compose.dev.yaml
+++ b/hosting/docker-compose.dev.yaml
@ -6,7 +6,8 @@ services:
  minio-service:
    container_name: budi-minio-dev
    restart: on-failure
-    image: minio/minio
+    # Last version that supports the "fs" backend
+    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
    volumes:
      - minio_data:/data
    ports:
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/backend-core",
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
  "description": "Budibase backend core libraries used in server and worker",
  "main": "dist/src/index.js",
  "types": "dist/src/index.d.ts",
@ -23,7 +23,7 @@
  },
  "dependencies": {
    "@budibase/nano": "10.1.1",
-    "@budibase/types": "2.2.12-alpha.21",
+    "@budibase/types": "2.2.12-alpha.44",
    "@shopify/jest-koa-mocks": "5.0.1",
    "@techpass/passport-openidconnect": "0.3.2",
    "aws-cloudfront-sign": "2.2.0",
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/bbui",
  "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
  "license": "MPL-2.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
@ -38,7 +38,8 @@
  ],
  "dependencies": {
    "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/string-templates": "2.2.12-alpha.21",
+    "@budibase/string-templates": "2.2.12-alpha.44",
+    "@spectrum-css/accordion": "3.0.24",
    "@spectrum-css/actionbutton": "1.0.1",
    "@spectrum-css/actiongroup": "1.0.1",
    "@spectrum-css/avatar": "3.0.2",
--- a/packages/bbui/src/Accordion/Accordion.svelte
+++ b/packages/bbui/src/Accordion/Accordion.svelte
@ -0,0 +1,58 @@
+<script>
+  import "@spectrum-css/accordion"
+
+  export let itemName
+  export let initialOpen
+  export let header
+
+  let isOpen
+
+  function getOpenClass(isOpen) {
+    if (isOpen === undefined) {
+      isOpen = initialOpen
+    }
+    return isOpen ? "is-open" : ""
+  }
+</script>
+
+<div class="spectrum-Accordion" role={itemName}>
+  <div class="spectrum-Accordion-item {getOpenClass(isOpen)}">
+    <h3 class="spectrum-Accordion-itemHeading">
+      <button
+        class="spectrum-Accordion-itemHeader"
+        type="button"
+        on:click={() => (isOpen = !isOpen)}
+      >
+        {header}
+      </button>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </h3>
+    <div class="spectrum-Accordion-itemContent" role={itemName}>
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .spectrum-Accordion {
+    margin-left: -20px;
+  }
+  .spectrum-Accordion-item {
+    border: none;
+  }
+  .spectrum-Accordion-itemContent {
+    width: 97%;
+    padding-left: 30px;
+  }
+  .spectrum-Accordion-itemHeader {
+    text-transform: none;
+    font-weight: bold;
+    font-size: 0.875rem;
+  }
+</style>
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@ -88,6 +88,7 @@
  }
  .is-selected:not(.spectrum-ActionButton--emphasized) {
    background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-700);
  }
  .noPadding {
    padding: 0;
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@ -1,11 +1,11 @@
-const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
 let clickHandlers = []

 /**
 * Handle a body click event
 */
 const handleClick = event => {
-  // Ignore click if needed
+  // Ignore click if this is an ignored class
  for (let className of ignoredClasses) {
    if (event.target.closest(className)) {
      return
@ -14,9 +14,18 @@ const handleClick = event => {

  // Process handlers
  clickHandlers.forEach(handler => {
-    if (!handler.element.contains(event.target)) {
-      handler.callback?.(event)
+    if (handler.element.contains(event.target)) {
+      return
    }
+
+    // Ignore clicks for modals, unless the handler is registered from a modal
+    const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null
+    const clickInModal = event.target.closest(".spectrum-Modal") != null
+    if (clickInModal && !sourceInModal) {
+      return
+    }
+
+    handler.callback?.(event)
  })
 }
 document.documentElement.addEventListener("click", handleClick, true)
@ -24,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true)
 /**
 * Adds or updates a click handler
 */
-const updateHandler = (id, element, callback) => {
+const updateHandler = (id, element, anchor, callback) => {
  let existingHandler = clickHandlers.find(x => x.id === id)
  if (!existingHandler) {
-    clickHandlers.push({ id, element, callback })
+    clickHandlers.push({ id, element, anchor, callback })
  } else {
    existingHandler.callback = callback
  }
@ -42,12 +51,22 @@ const removeHandler = id => {

 /**
 * Svelte action to apply a click outside handler for a certain element
+ * opts.anchor is an optional param specifying the real root source of the
+ * component being observed. This is required for things like popovers, where
+ * the element using the clickoutside action is the popover, but the popover is
+ * rendered at the root of the DOM somewhere, whereas the popover anchor is the
+ * element we actually want to consider when determining the source component.
 */
-export default (element, callback) => {
+export default (element, opts) => {
  const id = Math.random()
-  updateHandler(id, element, callback)
+  const update = newOpts => {
+    const callback = newOpts?.callback || newOpts
+    const anchor = newOpts?.anchor || element
+    updateHandler(id, element, anchor, callback)
+  }
+  update(opts)
  return {
-    update: newCallback => updateHandler(id, element, newCallback),
+    update,
    destroy: () => removeHandler(id),
  }
 }
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@ -1,75 +1,68 @@
-export default function positionDropdown(element, { anchor, align, maxWidth }) {
-  let positionSide = "top"
-  let maxHeight = 0
-  let dimensions = getDimensions(anchor)
+export default function positionDropdown(
+  element,
+  { anchor, align, maxWidth, useAnchorWidth }
+) {
+  const update = () => {
+    const anchorBounds = anchor.getBoundingClientRect()
+    const elementBounds = element.getBoundingClientRect()
+    let styles = {
+      maxHeight: null,
+      minWidth: null,
+      maxWidth,
+      left: null,
+      top: null,
+    }

-  function getDimensions() {
-    const {
-      bottom,
-      top: spaceAbove,
-      left,
-      width,
-    } = anchor.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - bottom
-    const containerRect = element.getBoundingClientRect()
-
-    let y
-
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove + 5
+    // Determine vertical styles
+    if (window.innerHeight - anchorBounds.bottom < 100) {
+      styles.top = anchorBounds.top - elementBounds.height - 5
    } else {
-      positionSide = "top"
-      y = bottom + 5
-      maxHeight = spaceBelow - 20
+      styles.top = anchorBounds.bottom + 5
+      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
    }

-    return {
-      [positionSide]: y,
-      left,
-      width,
-      containerWidth: containerRect.width,
+    // Determine horizontal styles
+    if (!maxWidth && useAnchorWidth) {
+      styles.maxWidth = anchorBounds.width
    }
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
    }
-
-  function calcLeftPosition() {
-    let left
-
-    if (align == "right") {
-      left = dimensions.left + dimensions.width - dimensions.containerWidth
-    } else if (align == "right-side") {
-      left = dimensions.left + dimensions.width
+    if (align === "right") {
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-side") {
+      styles.left = anchorBounds.left + anchorBounds.width
    } else {
-      left = dimensions.left
+      styles.left = anchorBounds.left
    }

-    return left
+    // Apply styles
+    Object.entries(styles).forEach(([style, value]) => {
+      if (value) {
+        element.style[style] = `${value.toFixed(0)}px`
+      } else {
+        element.style[style] = null
+      }
+    })
  }

+  // Apply initial styles which don't need to change
  element.style.position = "absolute"
  element.style.zIndex = "9999"
-  if (maxWidth) {
-    element.style.maxWidth = `${maxWidth}px`
-  }
-  element.style.minWidth = `${dimensions.width}px`
-  element.style.maxHeight = `${maxHeight.toFixed(0)}px`
-  element.style.transformOrigin = `center ${positionSide}`
-  element.style[positionSide] = `${dimensions[positionSide]}px`
-  element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`

+  // Observe both anchor and element and resize the popover as appropriate
  const resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(() => {
-      dimensions = getDimensions()
-      element.style[positionSide] = `${dimensions[positionSide]}px`
-      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
-    })
+    entries.forEach(update)
  })
  resizeObserver.observe(anchor)
  resizeObserver.observe(element)
+
+  document.addEventListener("scroll", update, true)
+
  return {
    destroy() {
      resizeObserver.disconnect()
+      document.removeEventListener("scroll", update, true)
    },
  }
 }
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@ -58,5 +58,6 @@
    overflow: hidden;
    user-select: none;
    text-transform: uppercase;
+    flex-shrink: 0;
  }
 </style>
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@ -14,7 +14,7 @@
  export let active = false
  export let tooltip = undefined
  export let dataCy
-  export let newStyles = false
+  export let newStyles = true

  let showTooltip = false
 </script>
@ -28,6 +28,7 @@
  class:spectrum-Button--quiet={quiet}
  class:new-styles={newStyles}
  class:active
+  class:disabled
  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
  {disabled}
  data-cy={dataCy}
@ -108,7 +109,10 @@
    border-color: transparent;
    color: var(--spectrum-global-color-gray-900);
  }
-  .spectrum-Button--secondary.new-styles:hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
    background: var(--spectrum-global-color-gray-300);
  }
+  .spectrum-Button--secondary.new-styles.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
 </style>
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@ -34,7 +34,6 @@
    display: none;
  }
  .main {
-    font-family: var(--font-sans);
    padding: var(--spacing-xl);
  }
  .main :global(textarea) {
--- a/packages/bbui/src/FancyForm/FancyButton.svelte
+++ b/packages/bbui/src/FancyForm/FancyButton.svelte
@ -0,0 +1,30 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import FancyField from "./FancyField.svelte"
+
+  export let icon
+  export let disabled
+</script>
+
+<FancyField on:click clickable {disabled}>
+  {#if icon}
+    {#if icon.includes("/")}
+      <img src={icon} alt="button" />
+    {:else}
+      <Icon name={icon} />
+    {/if}
+  {/if}
+  <slot name="icon" />
+  <div>
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  img {
+    width: 22px;
+  }
+  div {
+    font-size: var(--font-size-l);
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
+++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
@ -0,0 +1,70 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} autoHeight>
+  {#if label}
+    <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="options">
+    {#each options as option}
+      <ActionButton
+        selected={getOptionValue(option) === value}
+        on:click={() => onChange(getOptionValue(option))}
+      >
+        {getOptionLabel(option)}
+      </ActionButton>
+    {/each}
+  </div>
+</FancyField>
+
+<style>
+  .options {
+    margin-top: 34px;
+    margin-bottom: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .options :global(.spectrum-ActionButton) {
+    font-size: 15px;
+    line-height: 17px;
+    height: auto;
+    padding: 6px 10px;
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte
+++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
@ -0,0 +1,53 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Checkbox from "../Form/Core/Checkbox.svelte"
+
+  export let value
+  export let text
+  export let disabled = false
+  export let error = null
+  export let validate = null
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = () => {
+    const newValue = !value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
+  <span>
+    <Checkbox {disabled} {value} />
+  </span>
+  <div class="text">
+    {#if text}
+      {text}
+    {/if}
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  span {
+    pointer-events: none;
+  }
+  .text {
+    font-size: 15px;
+    line-height: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .text > :global(*) {
+    font-size: inherit !important;
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/packages/bbui/src/FancyForm/FancyField.svelte
@ -0,0 +1,126 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
+  import { slide } from "svelte/transition"
+
+  export let disabled = false
+  export let error = null
+  export let focused = false
+  export let clickable = false
+  export let validate
+  export let value
+  export let ref
+  export let autoHeight
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
+</script>
+
+<div
+  bind:this={ref}
+  class="fancy-field"
+  class:error
+  class:disabled
+  class:focused
+  class:clickable
+  class:auto-height={autoHeight}
+>
+  <div class="content" on:click>
+    <div class="field">
+      <slot />
+    </div>
+    {#if error}
+      <div class="error-icon">
+        <Icon name="Alert" />
+      </div>
+    {/if}
+  </div>
+  {#if error}
+    <div transition:slide|local={{ duration: 130 }} class="error-message">
+      {error}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fancy-field {
+    max-width: 400px;
+    background: var(--spectrum-global-color-gray-75);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: border-color 130ms ease-out, background 130ms ease-out,
+      background 130ms ease-out;
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .fancy-field:hover {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .fancy-field.clickable:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .fancy-field.focused {
+    border-color: var(--spectrum-global-color-blue-400);
+  }
+  .fancy-field.error {
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .fancy-field.disabled {
+    background: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-400);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    pointer-events: none;
+  }
+  .content {
+    position: relative;
+    height: 64px;
+    padding: 0 16px;
+  }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
+  .content,
+  .field {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+  .field {
+    flex: 1 1 auto;
+  }
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+  .error-icon {
+    flex: 0 0 auto;
+  }
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
+++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
@ -0,0 +1,25 @@
+<script>
+  export let placeholder = true
+</script>
+
+<div class:placeholder>
+  <slot />
+</div>
+
+<style>
+  div {
+    font-size: 14px;
+    line-height: 15px;
+    font-weight: 500;
+    position: absolute;
+    top: 10px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out,
+      transform 130ms ease-out;
+  }
+  div.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyForm.svelte
+++ b/packages/bbui/src/FancyForm/FancyForm.svelte
@ -0,0 +1,40 @@
+<script>
+  import { setContext } from "svelte"
+
+  let fields = {}
+
+  setContext("fancy-form", {
+    registerField: (id, api) => {
+      fields = { ...fields, [id]: api }
+    },
+    unregisterField: id => {
+      delete fields[id]
+      fields = fields
+    },
+  })
+
+  export const validate = () => {
+    let valid = true
+    Object.values(fields).forEach(api => {
+      if (!api.validate()) {
+        valid = false
+      }
+    })
+    return valid
+  }
+</script>
+
+<div class="fancy-form">
+  <slot />
+</div>
+
+<style>
+  .fancy-form :global(.fancy-field:not(:first-of-type)) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .fancy-form :global(.fancy-field:not(:last-of-type)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancyInput.svelte
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@ -0,0 +1,77 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import { fade } from "svelte/transition"
+
+  export let label
+  export let value
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let suffix = null
+
+  const dispatch = createEventDispatcher()
+
+  let focused = false
+  $: placeholder = !focused && !value
+
+  const onChange = e => {
+    const newValue = e.target.value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} {focused}>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+  <input
+    {disabled}
+    value={value || ""}
+    type={type || "text"}
+    on:input={onChange}
+    on:focus={() => (focused = true)}
+    on:blur={() => (focused = false)}
+    class:placeholder
+  />
+  {#if suffix && !placeholder}
+    <div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
+  {/if}
+</FancyField>
+
+<style>
+  input {
+    width: 100%;
+    transition: transform 130ms ease-out;
+    transform: translateY(9px);
+    background: transparent;
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+    color: var(--spectrum-global-color-gray-900);
+    outline: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  input.placeholder {
+    transform: translateY(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+  .suffix {
+    color: var(--spectrum-global-color-gray-600);
+    transform: translateY(9px);
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+  }
+</style>
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@ -0,0 +1,147 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+  let popover
+  let wrapper
+
+  $: placeholder = !value
+  $: selectedLabel = getSelectedLabel(value)
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+    open = false
+  }
+
+  const getSelectedLabel = value => {
+    if (!value || !options?.length) {
+      return ""
+    }
+    const selectedOption = options.find(x => getOptionValue(x) === value)
+    if (!selectedOption) {
+      return value
+    }
+    return getOptionLabel(selectedOption)
+  }
+</script>
+
+<FancyField
+  bind:ref={wrapper}
+  {error}
+  {value}
+  {validate}
+  {disabled}
+  clickable
+  on:click={() => (open = true)}
+>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="value" class:placeholder>
+    {selectedLabel || ""}
+  </div>
+
+  <div class="arrow">
+    <Icon name="ChevronDown" />
+  </div>
+</FancyField>
+
+<Popover
+  anchor={wrapper}
+  align="left"
+  portalTarget={document.documentElement}
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={true}
+  maxWidth={null}
+>
+  <div class="popover-content">
+    {#if options.length}
+      {#each options as option, idx}
+        <div
+          class="popover-option"
+          tabindex="0"
+          on:click={() => onChange(getOptionValue(option, idx))}
+        >
+          <span class="option-text">
+            {getOptionLabel(option, idx)}
+          </span>
+          {#if value === getOptionValue(option, idx)}
+            <Icon name="Checkmark" />
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</Popover>
+
+<style>
+  .value {
+    display: block;
+    flex: 1 1 auto;
+    font-size: 15px;
+    line-height: 17px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    opacity: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
+    transform: translateY(9px);
+  }
+  .value.placeholder {
+    transform: translateY(0);
+    opacity: 0;
+    pointer-events: none;
+    margin-top: 0;
+  }
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 7px 0;
+  }
+  .popover-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 7px 16px;
+    transition: background 130ms ease-out;
+    font-size: 15px;
+  }
+  .popover-option:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>
--- a/packages/bbui/src/FancyForm/index.js
+++ b/packages/bbui/src/FancyForm/index.js
@ -0,0 +1,6 @@
+export { default as FancyInput } from "./FancyInput.svelte"
+export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"
+export { default as FancyButton } from "./FancyButton.svelte"
+export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@ -264,7 +264,7 @@
    max-height: 100%;
  }
  :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
  }
  .is-disabled {
    pointer-events: none !important;
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -2,12 +2,12 @@
  import "@spectrum-css/picker/dist/index-vars.css"
  import "@spectrum-css/popover/dist/index-vars.css"
  import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
  import { createEventDispatcher } from "svelte"
  import clickOutside from "../../Actions/click_outside"
  import Search from "./Search.svelte"
  import Icon from "../../Icon/Icon.svelte"
  import StatusLight from "../../StatusLight/StatusLight.svelte"
+  import Popover from "../../Popover/Popover.svelte"

  export let id = null
  export let disabled = false
@ -33,7 +33,10 @@
  export let sort = false

  const dispatch = createEventDispatcher()
+
  let searchTerm = null
+  let button
+  let popover

  $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
  $: filteredOptions = getFilteredOptions(
@ -42,7 +45,9 @@
    getOptionLabel
  )

-  const onClick = () => {
+  const onClick = e => {
+    e.preventDefault()
+    e.stopPropagation()
    dispatch("click")
    if (readonly) {
      return
@ -76,8 +81,7 @@
  }
 </script>

-<div use:clickOutside={() => (open = false)}>
-  <button
+<button
  {id}
  class="spectrum-Picker spectrum-Picker--sizeM"
  class:spectrum-Picker--quiet={quiet}
@ -86,10 +90,11 @@
  class:is-open={open}
  aria-haspopup="listbox"
  on:click={onClick}
-  >
+  bind:this={button}
+>
  {#if fieldIcon}
-      <span class="option-extra">
-        <Icon name={fieldIcon} />
+    <span class="option-extra icon">
+      <Icon size="S" name={fieldIcon} />
    </span>
  {/if}
  {#if fieldColour}
@ -121,12 +126,21 @@
  >
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
-  </button>
-  {#if open}
+</button>
+
+<Popover
+  anchor={button}
+  align="left"
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={!autoWidth}
+  maxWidth={autoWidth ? 400 : null}
+>
  <div
-      transition:fly|local={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    class="popover-content"
    class:auto-width={autoWidth}
+    use:clickOutside={() => (open = false)}
  >
    {#if autocomplete}
      <Search
@ -168,8 +182,8 @@
            class:is-disabled={!isOptionEnabled(option)}
          >
            {#if getOptionIcon(option, idx)}
-                <span class="option-extra">
-                  <Icon name={getOptionIcon(option, idx)} />
+              <span class="option-extra icon">
+                <Icon size="S" name={getOptionIcon(option, idx)} />
              </span>
            {/if}
            {#if getOptionColour(option, idx)}
@ -192,24 +206,9 @@
      {/if}
    </ul>
  </div>
-  {/if}
-</div>
+</Popover>

 <style>
-  .spectrum-Popover {
-    max-height: 240px;
-    z-index: 999;
-    top: 100%;
-  }
-  .spectrum-Popover:not(.auto-width) {
-    width: 100%;
-  }
-  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
-    max-width: 400px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
  .spectrum-Picker {
    width: 100%;
    box-shadow: none;
@ -229,9 +228,6 @@
  .spectrum-Picker-label.auto-width.is-placeholder {
    padding-right: 2px;
  }
-  .auto-width .spectrum-Menu-item {
-    padding-right: var(--spacing-xl);
-  }

  /* Icon and colour alignment */
  .spectrum-Menu-checkmark {
@ -241,27 +237,48 @@
  .option-extra {
    padding-right: 8px;
  }
+  .option-extra.icon {
+    margin: 0 -1px;
+  }

-  .spectrum-Popover :global(.spectrum-Search) {
+  /* Popover */
+  .popover-content {
+    display: contents;
+  }
+  .popover-content.auto-width .spectrum-Menu-itemLabel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .popover-content.auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
+  .spectrum-Menu-item.is-disabled {
+    pointer-events: none;
+  }
+
+  /* Search styles inside popover */
+  .popover-content :global(.spectrum-Search) {
    margin-top: -1px;
    margin-left: -1px;
    width: calc(100% + 2px);
  }
-  .spectrum-Popover :global(.spectrum-Search input) {
+  .popover-content :global(.spectrum-Search input) {
    height: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: var(--spectrum-global-dimension-size-100);
    padding-bottom: var(--spectrum-global-dimension-size-100);
  }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
+  .popover-content :global(.spectrum-Search .spectrum-ClearButton) {
    right: 1px;
    top: 2px;
  }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
+  .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
    top: 9px;
  }
-  .spectrum-Menu-item.is-disabled {
-    pointer-events: none;
-  }
 </style>
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@ -18,8 +18,11 @@
  export let autoWidth = false
  export let autocomplete = false
  export let sort = false
+
  const dispatch = createEventDispatcher()
+
  let open = false
+
  $: fieldText = getFieldText(value, options, placeholder)
  $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
  $: fieldColour = getFieldAttribute(getOptionColour, value, options)
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@ -112,8 +112,4 @@
  .spectrum-Textfield {
    width: 100%;
  }
-  input:disabled {
-    color: var(--spectrum-global-color-gray-600) !important;
-    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
-  }
 </style>
--- a/packages/bbui/src/Icon/IconAvatar.svelte
+++ b/packages/bbui/src/Icon/IconAvatar.svelte
@ -19,6 +19,7 @@
  .icon {
    width: 28px;
    height: 28px;
+    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
@ -34,6 +35,7 @@
  .icon.size--S {
    width: 22px;
    height: 22px;
+    flex: 0 0 22px;
  }
  .icon.size--S :global(.spectrum-Icon) {
    width: 16px;
@ -46,6 +48,7 @@
  .icon.size--L {
    width: 40px;
    height: 40px;
+    flex: 0 0 40px;
  }
  .icon.size--L :global(.spectrum-Icon) {
    width: 28px;
--- a/packages/bbui/src/InlineAlert/InlineAlert.svelte
+++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte
@ -56,5 +56,6 @@
    --spectrum-semantic-positive-icon-color: #2d9d78;
    --spectrum-semantic-negative-icon-color: #e34850;
    min-width: 100px;
+    margin: 0;
  }
 </style>
--- a/packages/bbui/src/Label/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@ -21,6 +21,7 @@
  label {
    padding: 0;
    white-space: nowrap;
+    color: var(--spectrum-global-color-gray-600);
  }

  .muted {
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@ -1,32 +1,101 @@
 <script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
  export let wide = false
-  export let maxWidth = "80ch"
+  export let narrow = false
  export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
 </script>

-<div style="--max-width: {maxWidth}" class:wide class:noPadding>
+<div class="page">
+  <div class="main">
+    <div class="content" class:wide class:noPadding class:narrow>
      <slot />
+      <div class="fix-scroll-padding" />
+    </div>
+  </div>
+  <div
+    id="side-panel"
+    class:visible={sidePanelVisble}
+    use:clickOutside={() => {
+      sidePanelVisble = false
+    }}
+  >
+    <slot name="side-panel" />
+  </div>
 </div>

 <style>
-  div {
+  .page {
+    position: relative;
+  }
+  .page,
+  .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+  }
+  .main {
+    overflow: auto;
+  }
+  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 1080px;
    margin: 0 auto;
-    padding: calc(var(--spacing-xl) * 2);
-    min-height: calc(100% - var(--spacing-xl) * 4);
+    flex: 1 1 auto;
+    padding: 50px 50px 0 50px;
+    z-index: 1;
  }
-
-  .wide {
+  .fix-scroll-padding {
+    content: "";
+    display: block;
+    flex: 0 0 50px;
+  }
+  .content.wide {
    max-width: none;
-    margin: 0;
+  }
+  .content.narrow {
+    max-width: 840px;
+  }
+  #side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 24px;
+    background: var(--background);
+    border-left: var(--border-light);
+    width: 320px;
+    max-width: calc(100vw - 48px - 48px);
+    overflow: auto;
+    overflow-x: hidden;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+    height: calc(100% - 48px);
+    z-index: 2;
+  }
+  #side-panel.visible {
+    transform: translateX(0);
  }

-  .noPadding {
-    padding: 0px;
-    margin: 0px;
+  @media (max-width: 640px) {
+    .content {
+      padding: 24px;
+      max-width: calc(100vw - 48px) !important;
+      width: calc(100vw - 48px) !important;
+      overflow: auto;
+    }
  }
 </style>
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@ -1,5 +1,6 @@
 <script>
  import "@spectrum-css/link/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"

  export let href = "#"
  export let size = "M"
@ -9,10 +10,12 @@
  export let overBackground = false
  export let target
  export let download
+
+  const dispatch = createEventDispatcher()
 </script>

 <a
-  on:click
+  on:click={e => dispatch("click") && e.stopPropagation()}
  {href}
  {target}
  {download}
--- a/packages/bbui/src/List/ListItem.svelte
+++ b/packages/bbui/src/List/ListItem.svelte
@ -30,9 +30,11 @@
      <Label>{subtitle}</Label>
    {/if}
  </div>
+  {#if $$slots.default}
    <div class="right">
      <slot />
    </div>
+  {/if}
 </div>

 <style>
@ -45,6 +47,7 @@
    justify-content: space-between;
    border: 1px solid var(--spectrum-global-color-gray-300);
    transition: background 130ms ease-out;
+    gap: var(--spacing-m);
  }
  .list-item:not(:first-child) {
    border-top: none;
--- a/packages/bbui/src/Modal/CustomContent.svelte
+++ b/packages/bbui/src/Modal/CustomContent.svelte
@ -26,7 +26,6 @@
    padding: 40px;
    background-color: var(--purple);
    color: white;
-    font-family: var(--font-sans);
    font-weight: bold;
    text-align: center;
    user-select: none;
--- a/packages/bbui/src/Modal/Modal.svench
+++ b/packages/bbui/src/Modal/Modal.svench
@ -19,7 +19,6 @@

 <style>
  p, span {
-    font-family: var(--font-sans);
    font-size: var(--font-size-s);
  }

--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -104,7 +104,7 @@
        {/if}

        {#if showCancelButton}
-          <Button group secondary newStyles on:click={close}>
+          <Button group secondary on:click={close}>
            {cancelText}
          </Button>
        {/if}
@ -151,7 +151,8 @@
    overflow: visible;
  }
  .spectrum-Dialog-heading {
-    font-family: var(--font-sans);
+    font-family: var(--font-accent);
+    font-weight: 600;
  }
  .spectrum-Dialog-heading.noDivider {
    margin-bottom: 12px;
--- a/packages/bbui/src/Modal/QuizModal.svelte
+++ b/packages/bbui/src/Modal/QuizModal.svelte
@ -42,7 +42,6 @@
 <style>
  p {
    margin: 0;
-    font-family: var(--font-sans);
    font-size: var(--font-size-s);
  }
  p.error {
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@ -4,6 +4,9 @@
  import { createEventDispatcher } from "svelte"
  import positionDropdown from "../Actions/position_dropdown"
  import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import { getContext } from "svelte"
+  import Context from "../context"

  const dispatch = createEventDispatcher()

@ -12,9 +15,10 @@
  export let portalTarget
  export let dataCy
  export let maxWidth
-
  export let direction = "bottom"
  export let showTip = false
+  export let open = false
+  export let useAnchorWidth = false

  let tipSvg =
    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
@ -22,6 +26,7 @@
  $: tooltipClasses = showTip
    ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
    : ""
+  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"

  export const show = () => {
    dispatch("open")
@ -35,13 +40,22 @@

  const handleOutsideClick = e => {
    if (open) {
+      // Stop propagation if the source is the anchor
+      let node = e.target
+      let fromAnchor = false
+      while (!fromAnchor && node && node.parentNode) {
+        fromAnchor = node === anchor
+        node = node.parentNode
+      }
+      if (fromAnchor) {
        e.stopPropagation()
+      }
+
+      // Hide the popover
      hide()
    }
  }

-  let open = null
-
  function handleEscape(e) {
    if (open && e.key === "Escape") {
      hide()
@ -50,15 +64,19 @@
 </script>

 {#if open}
-  <Portal target={portalTarget}>
+  <Portal {target}>
    <div
      tabindex="0"
-      use:positionDropdown={{ anchor, align, maxWidth }}
-      use:clickOutside={handleOutsideClick}
+      use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
+      use:clickOutside={{
+        callback: handleOutsideClick,
+        anchor,
+      }}
      on:keydown={handleEscape}
      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
      role="presentation"
      data-cy={dataCy}
+      transition:fly|local={{ y: -20, duration: 200 }}
    >
      {#if showTip}
        {@html tipSvg}
--- a/packages/bbui/src/Popover/Popover.svench
+++ b/packages/bbui/src/Popover/Popover.svench
@ -29,7 +29,6 @@
    font-size: var(--font-size-m);
    margin: 0 0 var(--spacing-l) 0;
    font-weight: 600;
-    font-family: var(--font-sans);
  }

  .input-group-column {
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@ -1,8 +1,11 @@
 <script>
  export let value
+  export let schema
 </script>

-<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+<div class:capitalise={schema?.capitalise}>
+  {typeof value === "object" ? JSON.stringify(value) : value}
+</div>

 <style>
  div {
@ -10,5 +13,10 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--max-cell-width);
+    width: 0;
+    flex: 1 1 auto;
+  }
+  div.capitalise {
+    text-transform: capitalize;
  }
 </style>
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -21,6 +21,8 @@
   * template: a HBS or JS binding to use as the value
   * background: the background color
   * color: the text color
+   * borderLeft: show a left border
+   * borderRight: show a right border
   */
  export let data = []
  export let schema = {}
@ -31,6 +33,7 @@
  export let allowSelectRows
  export let allowEditRows = true
  export let allowEditColumns = true
+  export let allowClickRows = true
  export let selectedRows = []
  export let customRenderers = []
  export let disableSorting = false
@ -270,6 +273,17 @@
      if (schema[field].align === "Right") {
        styles[field] += "justify-content: flex-end; text-align: right;"
      }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-left: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-right: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].minWidth) {
+        styles[field] += `min-width: ${schema[field].minWidth};`
+      }
    })
    return styles
  }
@ -290,7 +304,11 @@
        </slot>
      </div>
    {:else}
-      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+      <div
+        class="spectrum-Table"
+        class:no-scroll={!rowCount}
+        style={`${heightStyle}${gridStyle}`}
+      >
        {#if fields.length}
          <div class="spectrum-Table-head">
            {#if showEditColumn}
@ -356,7 +374,7 @@
        {/if}
        {#if sortedRows?.length}
          {#each sortedRows as row, idx}
-            <div class="spectrum-Table-row">
+            <div class="spectrum-Table-row" class:clickable={allowClickRows}>
              {#if showEditColumn}
                <div
                  class:noBorderCheckbox={!showHeaderBorder}
@ -433,10 +451,10 @@
  /* Wrapper */
  .wrapper {
    position: relative;
-    z-index: 0;
    --table-bg: var(--spectrum-global-color-gray-50);
    --table-border: 1px solid var(--spectrum-alias-border-color-mid);
    --cell-padding: var(--spectrum-global-dimension-size-250);
+    overflow: auto;
  }
  .wrapper--quiet {
    --table-bg: var(--spectrum-alias-background-color-transparent);
@ -460,6 +478,9 @@
    display: grid;
    overflow: auto;
  }
+  .spectrum-Table.no-scroll {
+    overflow: visible;
+  }

  /* Header */
  .spectrum-Table-head {
@ -546,12 +567,13 @@
  /* Table rows */
  .spectrum-Table-row {
    display: contents;
+    cursor: auto;
  }
-  .spectrum-Table-row:hover .spectrum-Table-cell {
-    /*background-color: var(--hover-bg) !important;*/
+  .spectrum-Table-row.clickable {
+    cursor: pointer;
  }
-  .spectrum-Table-row:hover .spectrum-Table-cell:after {
-    background-color: var(--spectrum-alias-highlight-hover);
+  .spectrum-Table-row.clickable:hover .spectrum-Table-cell {
+    background-color: var(--spectrum-global-color-gray-100);
  }
  .wrapper--quiet .spectrum-Table-row {
    border-left: none;
@ -584,24 +606,13 @@
    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
    background-color: var(--table-bg);
    z-index: auto;
+    transition: background-color 130ms ease-out;
  }
  .spectrum-Table-cell--edit {
    position: sticky;
    left: 0;
    z-index: 2;
  }
-  .spectrum-Table-cell:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    transition: background-color
-      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
-  }

  /* Placeholder  */
  .placeholder {
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@ -82,7 +82,8 @@
  .spectrum-Tabs-item {
    color: var(--spectrum-global-color-gray-600);
  }
-  .spectrum-Tabs-item.is-selected {
+  .spectrum-Tabs-item.is-selected,
+  .spectrum-Tabs-item:hover {
    color: var(--spectrum-global-color-gray-900);
  }
 </style>
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@ -37,7 +37,7 @@

 <style>
  .spectrum-Tags-item {
-    margin-top: 0;
    margin-bottom: 0;
+    margin-top: 0;
  }
 </style>
--- a/packages/bbui/src/Tags/Tags.svelte
+++ b/packages/bbui/src/Tags/Tags.svelte
@ -5,3 +5,13 @@
 <div class="spectrum-Tags" role="list" aria-label="list">
  <slot />
 </div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@ -15,3 +15,9 @@
 >
  <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@ -40,12 +40,14 @@
  --rounded-medium: 8px;
  --rounded-large: 16px;

-  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
  --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);

  font-size: 16px;
  --font-size-xs: 0.75rem;
@ -89,6 +91,8 @@
  --border-light-2: 2px var(--grey-3) solid;
  --border-blue: 2px var(--blue) solid;
  --border-transparent: 2px transparent solid;
+
+  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
 }

 a {
--- a/packages/bbui/src/context.js
+++ b/packages/bbui/src/context.js
@ -1,3 +1,4 @@
 export default {
  Modal: "bbui-modal",
+  PopoverRoot: "bbui-popover-root",
 }
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -75,6 +75,7 @@ export { default as ListItem } from "./List/ListItem.svelte"
 export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
+export { default as Accordion } from "./Accordion/Accordion.svelte"

 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
@ -101,3 +102,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner"

 // Helpers
 export * as Helpers from "./helpers"
+
+// Fancy form components
+export * from "./FancyForm"
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@ -109,6 +109,11 @@
    estree-walker "^1.0.1"
    picomatch "^2.2.2"

+"@spectrum-css/accordion@3.0.24":
+  version "3.0.24"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74"
+  integrity sha512-jNOmUsxmiT3lRLButnN5KKHM94fd+87fjiF8L0c4uRNgJl6ZsBuxPXrM15lV4y1f8D2IACAw01/ZkGRAeaCOFA==
+
 "@spectrum-css/actionbutton@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
--- a/packages/builder/assets/bb-emblem.svg
+++ b/packages/builder/assets/bb-emblem.svg
@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#393C44;}
+	.st0{fill:#000000;}
 	.st1{fill:#FFFFFF;}
 	.st2{fill:#4285F4;}
 </style>
--- a/packages/builder/cypress.json
+++ b/packages/builder/cypress.json
@ -11,9 +11,5 @@
    "WORKER_PORT": "4200",
    "JWT_SECRET": "test",
    "HOST_IP": ""
-  },
-  "retries": {
-    "runMode": 1,
-    "openMode": 0
  }
 }
--- a/packages/builder/cypress/integration/adminAndManagement/authentication.spec.js
+++ b/packages/builder/cypress/integration/adminAndManagement/authentication.spec.js
@ -2,7 +2,7 @@ import filterTests from "../../support/filterTests"
 // const interact = require("../support/interact")

 filterTests(["smoke", "all"], () => {
-  context("Auth Configuration", () => {
+  xcontext("Auth Configuration", () => {
    before(() => {
      cy.login()
    })
@ -21,7 +21,7 @@ filterTests(["smoke", "all"], () => {
      cy.get("[data-cy=oidc-active]").should('not.be.checked')

      cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
      cy.wait("@updateAuth")
      cy.get("@updateAuth").its("response.statusCode").should("eq", 200)

@ -45,7 +45,7 @@ filterTests(["smoke", "all"], () => {
      cy.get("button[data-cy=oidc-save]").should("not.be.disabled");

      cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
      cy.wait("@updateAuth")
      cy.get("@updateAuth").its("response.statusCode").should("eq", 200)

@ -89,7 +89,7 @@ filterTests(["smoke", "all"], () => {
      cy.get("button[data-cy=oidc-save]").should("not.be.disabled");

      cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
      cy.wait("@updateAuth")
      cy.get("@updateAuth").its("response.statusCode").should("eq", 200)

@ -123,7 +123,7 @@ filterTests(["smoke", "all"], () => {
      cy.get("button[data-cy=oidc-save]").should("not.be.disabled");

      cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
      cy.wait("@updateAuth")
      cy.get("@updateAuth").its("response.statusCode").should("eq", 200)

@ -144,7 +144,7 @@ filterTests(["smoke", "all"], () => {

      cy.get("div.content").scrollTo("bottom")

-      cy.get("[data-cy=restore-oidc-default-scopes]").click({force: true})
+      cy.get("[data-cy=restore-oidc-default-scopes]").click({ force: true })

      cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 4)

--- a/packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js
+++ b/packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js
@ -27,11 +27,11 @@ filterTests(["smoke", "all"], () => {
      })
    })

-    it("should allow copying of the users API key", () => {
+    xit("should allow copying of the users API key", () => {
      cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
      cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
-            cy.get(interact.SPECTRUM_ICON).click({force: true})
+        cy.get(interact.SPECTRUM_ICON).click({ force: true })
      })
      // There may be timing issues with this on the smoke build
      cy.wait(500)
@ -41,12 +41,17 @@ filterTests(["smoke", "all"], () => {
    })

    it("should allow API key regeneration", () => {
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+        cy.get(interact.SPECTRUM_ICON).click({ force: true })
+      })
      // Get initial API key value
      cy.get(interact.SPECTRUM_DIALOG_CONTENT)
        .find(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').as('keyOne')

      // Click re-generate key button
-        cy.get("button").contains("Re-generate key").click({ force: true })
+      cy.get("button").contains("Regenerate key").click({ force: true })

      // Verify API key was changed
      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
@ -59,7 +64,7 @@ filterTests(["smoke", "all"], () => {

    it("should update password", () => {
      // Access Update password modal
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })

      // Enter new password and update
@ -76,8 +81,8 @@ filterTests(["smoke", "all"], () => {
      cy.login("test@test.com", "newpwd")
    })

-    it("should open and close developer mode", () => {
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+    xit("should open and close developer mode", () => {
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })

      // Close developer mode & verify
      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
@ -88,13 +93,13 @@ filterTests(["smoke", "all"], () => {
      // Open developer mode & verify
      cy.get(".avatar > .icon").click({ force: true })
      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
-        cy.get(interact.SPECTRUM_SIDENAV).should('exist') // config sections available
+      cy.get(".app-table").should('exist') // config sections available
      cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
    })

    after(() => {
      // Change password back to original value
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
      cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
        for (let i = 0; i < 2; i++) {
--- a/packages/builder/cypress/integration/appOverview.spec.js
+++ b/packages/builder/cypress/integration/appOverview.spec.js
@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
 import clientPackage from "@budibase/client/package.json"

 filterTests(["all"], () => {
-  context("Application Overview screen", () => {
+  xcontext("Application Overview screen", () => {
    before(() => {
      cy.login()
      cy.deleteAllApps()
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@ -22,7 +22,7 @@ filterTests(['smoke', 'all'], () => {
      })
    }

-    it("should provide filterable templates", () => {
+    xit("should provide filterable templates", () => {
      cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
      cy.wait(500)

@ -30,7 +30,7 @@ filterTests(['smoke', 'all'], () => {
        .its("body")
        .then(val => {
          if (val.length > 0) {
-            cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true})
+            cy.get(interact.SPECTRUM_BUTTON).contains("View Templates").click({ force: true })
          }
        })

@ -123,35 +123,49 @@ filterTests(['smoke', 'all'], () => {
      const exportedApp = 'cypress/fixtures/exported-app.txt'

      cy.importApp(exportedApp, "")
-
      cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 })
-
      cy.applicationInAppTable("My app")
-      
-      cy.get(".appTable .name").eq(0).click()
-
-      cy.deleteApp("My app")
+      cy.get(".app-table .name").eq(0).click()
+      cy.closeModal()
+      cy.get(`[aria-label="ShowMenu"]`).click()
+      cy.get(".spectrum-Menu").within(() => {
+        cy.contains("Overview").click()
+      })
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
+      cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
+      cy.get(".spectrum-Dialog-grid").within(() => {
+        cy.get("input").type("My app")
+      })
+      cy.get(".spectrum-Button--warning").click()
    })

    it("should create an application from an export, using the users first name as the default app name", () => {
      const exportedApp = 'cypress/fixtures/exported-app.txt'

      cy.updateUserInformation("Ted", "Userman")
-
      cy.importApp(exportedApp, "")
-
      cy.visit(`${Cypress.config().baseUrl}/builder`)
-
      cy.applicationInAppTable("Teds app")
-      
-      cy.get(".appTable .name").eq(0).click()
-
-      cy.deleteApp("Teds app")
-
+      cy.get(".app-table .name").eq(0).click()
+      cy.closeModal()
+      cy.get(`[aria-label="ShowMenu"]`).click()
+      cy.get(".spectrum-Menu").within(() => {
+        cy.contains("Overview").click()
+      })
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
+      cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
+      cy.get(".spectrum-Dialog-grid").within(() => {
+        cy.get("input").type("Teds app")
+      })
+      cy.get(".spectrum-Button--warning").click()
      cy.updateUserInformation("", "")
    })

-    it("should generate the first application from a template", () => {
+    xit("should generate the first application from a template", () => {
      cy.visit(`${Cypress.config().baseUrl}/builder`)
      cy.wait(500)

@ -172,7 +186,7 @@ filterTests(['smoke', 'all'], () => {
        const card = cy.get('.template-card').eq(0).should("exist");
        const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist")
        cardOverlay.invoke("show")
-        cardOverlay.get("button").contains("Use template").should("exist").click({force: true})
+        cardOverlay.get("button").contains("Use template").should("exist").click({ force: true })
      })

      // CMD Create app from theme card
@ -181,7 +195,7 @@ filterTests(['smoke', 'all'], () => {
      const templateName = cy.get(".spectrum-Modal .template-thumbnail-text")
      templateName.invoke('text')
        .then(templateNameText => {
-        const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-")
+          const templateNameParsed = "/" + templateNameText.toLowerCase().replace(/\s+/g, "-")
          cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
          cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)

--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -101,7 +101,7 @@ Cypress.Commands.add("deleteUser", email => {
 })

 Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
-  cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({
+  cy.get(".user-dropdown .icon", { timeout: 2000 }).click({
    force: true,
  })

@ -132,7 +132,7 @@ Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
        .blur()
    }
    cy.get(".confirm-wrap").within(() => {
-      cy.get("button").contains("Update information").click({ force: true })
+      cy.get("button").contains("Save").click({ force: true })
    })
    cy.get(".spectrum-Dialog-grid").should("not.exist")
  })
@ -222,9 +222,12 @@ Cypress.Commands.add("deleteApp", name => {
          // Go to app overview
          const appIdParsed = appId.split("_").pop()
          const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
-          cy.get(actionEleId).within(() => {
-            cy.contains("Manage").click({ force: true })
+          cy.get(actionEleId).click()
+          cy.get(`[aria-label="ShowMenu"]`).click()
+          cy.get(".spectrum-Menu").within(() => {
+            cy.contains("Overview").click()
          })
+
          cy.wait(500)

          // Unpublish first if needed
@ -400,7 +403,7 @@ Cypress.Commands.add("searchForApplication", appName => {
        return
      } else {
        // Searches for the app
-        cy.get(".filter").then(() => {
+        cy.get(".spectrum-Search").then(() => {
          cy.get(".spectrum-Textfield").within(() => {
            cy.get("input").eq(0).clear({ force: true })
            cy.get("input").eq(0).type(appName, { force: true })
@ -413,7 +416,7 @@ Cypress.Commands.add("searchForApplication", appName => {
 // Assumes there are no others
 Cypress.Commands.add("applicationInAppTable", appName => {
  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
-  cy.get(".appTable", { timeout: 30000 }).within(() => {
+  cy.get(".app-table", { timeout: 30000 }).within(() => {
    cy.get(".title").contains(appName).should("exist")
  })
 })
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "2.2.12-alpha.21",
+  "version": "2.2.12-alpha.44",
  "license": "GPL-3.0",
  "private": true,
  "scripts": {
@ -71,11 +71,12 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "2.2.12-alpha.21",
-    "@budibase/client": "2.2.12-alpha.21",
-    "@budibase/frontend-core": "2.2.12-alpha.21",
-    "@budibase/string-templates": "2.2.12-alpha.21",
+    "@budibase/bbui": "2.2.12-alpha.44",
+    "@budibase/client": "2.2.12-alpha.44",
+    "@budibase/frontend-core": "2.2.12-alpha.44",
+    "@budibase/string-templates": "2.2.12-alpha.44",
    "@sentry/browser": "5.19.1",
+    "@spectrum-css/accordion": "^3.0.24",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
    "codemirror": "^5.59.0",
@ -87,7 +88,7 @@
    "shortid": "2.2.15",
    "svelte-dnd-action": "^0.9.8",
    "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "0.1.0",
+    "svelte-portal": "1.0.0",
    "uuid": "8.3.1",
    "yup": "0.29.2"
  },
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@ -11,11 +11,8 @@

 <div class="banner-container" />
 <BannerDisplay />
-
 <NotificationDisplay />
-
 <LicensingOverlays />
-
 <Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />
 <HelpIcon />
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@ -378,6 +378,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
          providerId,
          // Table ID is used by JSON fields to know what table the field is in
          tableId: table?._id,
+          component: component._component,
          category: component._instanceName,
          icon: def.icon,
          display: {
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -25,7 +25,6 @@
  export let loading = false
  export let hideAutocolumns
  export let rowCount
-  export let type
  export let disableSorting = false
  export let customPlaceholder = false

--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@ -20,7 +20,8 @@
    $isActive,
    $tables,
    $queries,
-    $views
+    $views,
+    openDataSources
  )
  $: openDataSource = enrichedDataSources.find(x => x.open)
  $: {
@ -36,7 +37,8 @@
    isActive,
    tables,
    queries,
-    views
+    views,
+    openDataSources
  ) => {
    if (!datasources?.list?.length) {
      return []
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@ -6,6 +6,7 @@
    Toggle,
    Button,
    TextArea,
+    Accordion,
  } from "@budibase/bbui"
  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
  import { capitalise } from "helpers"
@ -51,15 +52,24 @@

  let addButton

-  function getDisplayName(key) {
+  function getDisplayName(key, fieldKey) {
    let name
-    if (schema[key]?.display) {
+    if (fieldKey && schema[key]["fields"][fieldKey]?.display) {
+      name = schema[key]["fields"][fieldKey].display
+    } else if (fieldKey) {
+      name = fieldKey
+    } else if (schema[key]?.display) {
      name = schema[key].display
    } else {
      name = key
    }
    return capitalise(name)
  }
+  function getFieldGroupKeys(fieldGroup) {
+    return Object.entries(schema[fieldGroup].fields || {})
+      .filter(el => filter(el))
+      .map(([key]) => key)
+  }
 </script>

 <form>
@ -100,6 +110,27 @@
            error={$validation.errors[configKey]}
          />
        </div>
+      {:else if schema[configKey].type === "fieldGroup"}
+        <Accordion
+          itemName={configKey}
+          initialOpen={getFieldGroupKeys(configKey).some(
+            fieldKey => !!config[fieldKey]
+          )}
+          header={getDisplayName(configKey)}
+        >
+          <Layout gap="S">
+            {#each getFieldGroupKeys(configKey) as fieldKey}
+              <div class="form-row">
+                <Label>{getDisplayName(configKey, fieldKey)}</Label>
+                <Input
+                  type={schema[configKey]["fields"][fieldKey]?.type}
+                  on:change
+                  bind:value={config[fieldKey]}
+                />
+              </div>
+            {/each}
+          </Layout>
+        </Accordion>
      {:else}
        <div class="form-row">
          <Label>{getDisplayName(configKey)}</Label>
--- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
+++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte
@ -10,7 +10,6 @@
  } from "@budibase/bbui"
  import { tables } from "stores/backend"
  import { Helpers } from "@budibase/bbui"
-  import { writable } from "svelte/store"

  export let save
  export let datasource
@ -18,41 +17,97 @@
  export let fromRelationship = {}
  export let toRelationship = {}
  export let close
-  export let selectedFromTable

-  let originalFromName = fromRelationship.name,
-    originalToName = toRelationship.name
-  let fromTable, toTable, through, linkTable, tableOptions
-  let isManyToMany, isManyToOne, relationshipTypes
-  let errors, valid
-  let currentTables = {}
+  const colNotSet = "Please specify a column name"
+  const relationshipAlreadyExists =
+    "A relationship between these tables already exists."
+  const relationshipTypes = [
+    {
+      label: "One to Many",
+      value: RelationshipTypes.MANY_TO_ONE,
+    },
+    {
+      label: "Many to Many",
+      value: RelationshipTypes.MANY_TO_MANY,
+    },
+  ]

-  if (fromRelationship && !fromRelationship.relationshipType) {
-    fromRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
+  let originalFromColumnName = toRelationship.name,
+    originalToColumnName = fromRelationship.name
+  let originalFromTable = plusTables.find(
+    table => table._id === toRelationship?.tableId
+  )
+  let originalToTable = plusTables.find(
+    table => table._id === fromRelationship?.tableId
+  )
+
+  let tableOptions
+  let errors = {}
+  let hasClickedSave = !!fromRelationship.relationshipType
+  let fromPrimary,
+    fromForeign,
+    fromTable,
+    toTable,
+    throughTable,
+    fromColumn,
+    toColumn
+  let fromId, toId, throughId, throughToKey, throughFromKey
+  let isManyToMany, isManyToOne, relationshipType
+
+  $: {
+    if (!fromPrimary) {
+      fromPrimary = fromRelationship.foreignKey
+      fromForeign = toRelationship.foreignKey
+    }
+    if (!fromColumn && !errors.fromColumn) {
+      fromColumn = toRelationship.name
+    }
+    if (!toColumn && !errors.toColumn) {
+      toColumn = fromRelationship.name
+    }
+    if (!fromId) {
+      fromId = toRelationship.tableId
+    }
+    if (!toId) {
+      toId = fromRelationship.tableId
+    }
+    if (!throughId) {
+      throughId = fromRelationship.through
+      throughFromKey = fromRelationship.throughFrom
+      throughToKey = fromRelationship.throughTo
+    }
+    if (!relationshipType) {
+      relationshipType = fromRelationship.relationshipType
+    }
  }

-  if (toRelationship && selectedFromTable) {
-    toRelationship.tableId = selectedFromTable._id
-  }
+  $: tableOptions = plusTables.map(table => ({
+    label: table.name,
+    value: table._id,
+  }))
+  $: valid = getErrorCount(errors) === 0 || !hasClickedSave

-  function inSchema(table, prop, ogName) {
-    if (!table || !prop || prop === ogName) {
-      return false
-    }
-    const keys = Object.keys(table.schema).map(key => key.toLowerCase())
-    return keys.indexOf(prop.toLowerCase()) !== -1
-  }
+  $: isManyToMany = relationshipType === RelationshipTypes.MANY_TO_MANY
+  $: isManyToOne = relationshipType === RelationshipTypes.MANY_TO_ONE
+  $: fromTable = plusTables.find(table => table._id === fromId)
+  $: toTable = plusTables.find(table => table._id === toId)
+  $: throughTable = plusTables.find(table => table._id === throughId)

-  const touched = writable({})
+  $: toRelationship.relationshipType = fromRelationship?.relationshipType

-  function invalidThroughTable({ through, throughTo, throughFrom }) {
+  const getErrorCount = errors =>
+    Object.entries(errors)
+      .filter(entry => !!entry[1])
+      .map(entry => entry[0]).length
+
+  function invalidThroughTable() {
    // need to know the foreign key columns to check error
-    if (!through || !throughTo || !throughFrom) {
+    if (!throughId || !throughToKey || !throughFromKey) {
      return false
    }
-    const throughTable = plusTables.find(tbl => tbl._id === through)
-    const otherColumns = Object.values(throughTable.schema).filter(
-      col => col.name !== throughFrom && col.name !== throughTo
+    const throughTbl = plusTables.find(tbl => tbl._id === throughId)
+    const otherColumns = Object.values(throughTbl.schema).filter(
+      col => col.name !== throughFromKey && col.name !== throughToKey
    )
    for (let col of otherColumns) {
      if (col.constraints?.presence && !col.autocolumn) {
@ -62,142 +117,138 @@
    return false
  }

-  function checkForErrors(fromRelate, toRelate) {
-    const isMany =
-      fromRelate.relationshipType === RelationshipTypes.MANY_TO_MANY
+  function validate() {
+    const isMany = relationshipType === RelationshipTypes.MANY_TO_MANY
    const tableNotSet = "Please specify a table"
+    const foreignKeyNotSet = "Please pick a foreign key"
    const errObj = {}
-    if ($touched.from && !fromTable) {
-      errObj.from = tableNotSet
+    if (!relationshipType) {
+      errObj.relationshipType = "Please specify a relationship type"
    }
-    if ($touched.to && !toTable) {
-      errObj.to = tableNotSet
+    if (!fromTable) {
+      errObj.fromTable = tableNotSet
    }
-    if ($touched.through && isMany && !fromRelate.through) {
-      errObj.through = tableNotSet
+    if (!toTable) {
+      errObj.toTable = tableNotSet
    }
-    if ($touched.through && invalidThroughTable(fromRelate)) {
-      errObj.through =
-        "Ensure all columns in table are nullable or auto generated"
+    if (isMany && !throughTable) {
+      errObj.throughTable = tableNotSet
    }
-    if ($touched.foreign && !isMany && !fromRelate.fieldName) {
-      errObj.foreign = "Please pick the foreign key"
+    if (isMany && !throughFromKey) {
+      errObj.throughFromKey = foreignKeyNotSet
    }
-    const colNotSet = "Please specify a column name"
-    if ($touched.fromCol && !fromRelate.name) {
-      errObj.fromCol = colNotSet
+    if (isMany && !throughToKey) {
+      errObj.throughToKey = foreignKeyNotSet
    }
-    if ($touched.toCol && !toRelate.name) {
-      errObj.toCol = colNotSet
+    if (invalidThroughTable()) {
+      errObj.throughTable =
+        "Ensure non-key columns are nullable or auto-generated"
    }
-    if ($touched.primary && !fromPrimary) {
-      errObj.primary = "Please pick the primary key"
+    if (!isMany && !fromForeign) {
+      errObj.fromForeign = foreignKeyNotSet
    }
+    if (!fromColumn) {
+      errObj.fromColumn = colNotSet
+    }
+    if (!toColumn) {
+      errObj.toColumn = colNotSet
+    }
+    if (!isMany && !fromPrimary) {
+      errObj.fromPrimary = "Please pick the primary key"
+    }
+    if (isMany && relationshipExists()) {
+      errObj.fromTable = relationshipAlreadyExists
+      errObj.toTable = relationshipAlreadyExists
+    }
+
    // currently don't support relationships back onto the table itself, needs to relate out
    const tableError = "From/to/through tables must be different"
-    if (fromTable && (fromTable === toTable || fromTable === through)) {
-      errObj.from = tableError
+    if (fromTable && (fromTable === toTable || fromTable === throughTable)) {
+      errObj.fromTable = tableError
    }
-    if (toTable && (toTable === fromTable || toTable === through)) {
-      errObj.to = tableError
+    if (toTable && (toTable === fromTable || toTable === throughTable)) {
+      errObj.toTable = tableError
    }
-    if (through && (through === fromTable || through === toTable)) {
-      errObj.through = tableError
+    if (
+      throughTable &&
+      (throughTable === fromTable || throughTable === toTable)
+    ) {
+      errObj.throughTable = tableError
    }
    const colError = "Column name cannot be an existing column"
-    if (inSchema(fromTable, fromRelate.name, originalFromName)) {
-      errObj.fromCol = colError
+    if (isColumnNameBeingUsed(toTable, fromColumn, originalFromColumnName)) {
+      errObj.fromColumn = colError
    }
-    if (inSchema(toTable, toRelate.name, originalToName)) {
-      errObj.toCol = colError
+    if (isColumnNameBeingUsed(fromTable, toColumn, originalToColumnName)) {
+      errObj.toColumn = colError
    }

    let fromType, toType
-    if (fromPrimary && fromRelate.fieldName) {
+    if (fromPrimary && fromForeign) {
      fromType = fromTable?.schema[fromPrimary]?.type
-      toType = toTable?.schema[fromRelate.fieldName]?.type
+      toType = toTable?.schema[fromForeign]?.type
    }
    if (fromType && toType && fromType !== toType) {
-      errObj.foreign =
+      errObj.fromForeign =
        "Column type of the foreign key must match the primary key"
    }
+
    errors = errObj
+    return getErrorCount(errors) === 0
  }

-  let fromPrimary
-  $: {
-    if (!fromPrimary && fromTable) {
-      fromPrimary = fromTable.primary[0]
-    }
-  }
-  $: isManyToMany =
-    fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY
-  $: isManyToOne =
-    fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_ONE
-  $: tableOptions = plusTables.map(table => ({
-    label: table.name,
-    value: table._id,
-  }))
-  $: fromTable = plusTables.find(table => table._id === toRelationship?.tableId)
-  $: toTable = plusTables.find(table => table._id === fromRelationship?.tableId)
-  $: through = plusTables.find(table => table._id === fromRelationship?.through)
-  $: checkForErrors(fromRelationship, toRelationship)
-  $: valid =
-    Object.keys(errors).length === 0 && Object.keys($touched).length !== 0
-  $: linkTable = through || toTable
-  $: relationshipTypes = [
-    {
-      label: "Many",
-      value: RelationshipTypes.MANY_TO_MANY,
-    },
-    {
-      label: "One",
-      value: RelationshipTypes.MANY_TO_ONE,
-    },
-  ]
-  $: updateRelationshipType(fromRelationship?.relationshipType)
-  $: tableChanged(fromTable, toTable)
-
-  function updateRelationshipType(fromType) {
-    if (fromType === RelationshipTypes.MANY_TO_MANY) {
-      toRelationship.relationshipType = RelationshipTypes.MANY_TO_MANY
-    } else {
-      toRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
+  function isColumnNameBeingUsed(table, columnName, originalName) {
+    if (!table || !columnName || columnName === originalName) {
+      return false
    }
+    const keys = Object.keys(table.schema).map(key => key.toLowerCase())
+    return keys.indexOf(columnName.toLowerCase()) !== -1
  }

  function buildRelationships() {
-    // if any to many only need to check from
-    const manyToMany =
-      fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY
-    // main is simply used to know this is the side the user configured it from
    const id = Helpers.uuid()
-    if (!manyToMany) {
-      delete fromRelationship.through
-      delete toRelationship.through
-    }
+    //Map temporary variables
    let relateFrom = {
      ...fromRelationship,
+      tableId: toId,
+      name: toColumn,
+      relationshipType,
+      fieldName: fromForeign,
+      through: throughId,
+      throughFrom: throughFromKey,
+      throughTo: throughToKey,
      type: "link",
      main: true,
      _id: id,
    }
-    let relateTo = {
+    let relateTo = (toRelationship = {
      ...toRelationship,
+      tableId: fromId,
+      name: fromColumn,
+      through: throughId,
      type: "link",
      _id: id,
+    })
+
+    // if any to many only need to check from
+    const manyToMany =
+      relateFrom.relationshipType === RelationshipTypes.MANY_TO_MANY
+
+    if (!manyToMany) {
+      delete relateFrom.through
+      delete relateTo.through
    }

    // [0] is because we don't support composite keys for relationships right now
    if (manyToMany) {
      relateFrom = {
        ...relateFrom,
-        through: through._id,
+        through: throughTable._id,
        fieldName: toTable.primary[0],
      }
      relateTo = {
        ...relateTo,
-        through: through._id,
+        through: throughTable._id,
        fieldName: fromTable.primary[0],
        throughFrom: relateFrom.throughTo,
        throughTo: relateFrom.throughFrom,
@ -226,9 +277,56 @@
    toRelationship = relateTo
  }

-  // save the relationship on to the datasource
+  function relationshipExists() {
+    if (
+      originalFromTable &&
+      originalToTable &&
+      originalFromTable === fromTable &&
+      originalToTable === toTable
+    ) {
+      return false
+    }
+    let fromThroughLinks = Object.values(
+      datasource.entities[fromTable.name].schema
+    ).filter(value => value.through)
+    let toThroughLinks = Object.values(
+      datasource.entities[toTable.name].schema
+    ).filter(value => value.through)
+
+    const matchAgainstUserInput = (fromTableId, toTableId) =>
+      (fromTableId === fromId && toTableId === toId) ||
+      (fromTableId === toId && toTableId === fromId)
+
+    return !!fromThroughLinks.find(from =>
+      toThroughLinks.find(
+        to =>
+          from.through === to.through &&
+          matchAgainstUserInput(from.tableId, to.tableId)
+      )
+    )
+  }
+
+  function removeExistingRelationship() {
+    if (originalFromTable && originalFromColumnName) {
+      delete datasource.entities[originalFromTable.name].schema[
+        originalToColumnName
+      ]
+    }
+    if (originalToTable && originalToColumnName) {
+      delete datasource.entities[originalToTable.name].schema[
+        originalFromColumnName
+      ]
+    }
+  }
+
  async function saveRelationship() {
+    hasClickedSave = true
+    if (!validate()) {
+      return false
+    }
    buildRelationships()
+    removeExistingRelationship()
+
    // source of relationship
    datasource.entities[fromTable.name].schema[fromRelationship.name] =
      fromRelationship
@ -236,43 +334,14 @@
    datasource.entities[toTable.name].schema[toRelationship.name] =
      toRelationship

-    // If relationship has been renamed
-    if (originalFromName !== fromRelationship.name) {
-      delete datasource.entities[fromTable.name].schema[originalFromName]
-    }
-    if (originalToName !== toRelationship.name) {
-      delete datasource.entities[toTable.name].schema[originalToName]
-    }
-
-    // store the original names so it won't cause an error
-    originalToName = toRelationship.name
-    originalFromName = fromRelationship.name
    await save()
  }
-
  async function deleteRelationship() {
-    delete datasource.entities[fromTable.name].schema[fromRelationship.name]
-    delete datasource.entities[toTable.name].schema[toRelationship.name]
+    removeExistingRelationship()
    await save()
    await tables.fetch()
    close()
  }
-
-  function tableChanged(fromTbl, toTbl) {
-    if (
-      (currentTables?.from?._id === fromTbl?._id &&
-        currentTables?.to?._id === toTbl?._id) ||
-      originalFromName ||
-      originalToName
-    ) {
-      return
-    }
-    fromRelationship.name = toTbl?.name || ""
-    errors.fromCol = ""
-    toRelationship.name = fromTbl?.name || ""
-    errors.toCol = ""
-    currentTables = { from: fromTbl, to: toTbl }
-  }
 </script>

 <ModalContent
@ -284,7 +353,9 @@
  <Select
    label="Relationship type"
    options={relationshipTypes}
-    bind:value={fromRelationship.relationshipType}
+    bind:value={relationshipType}
+    bind:error={errors.relationshipType}
+    on:change={() => (errors.relationshipType = null)}
  />
  <div class="headings">
    <Detail>Tables</Detail>
@ -292,58 +363,89 @@
  <Select
    label="Select from table"
    options={tableOptions}
-    disabled={!!selectedFromTable}
-    on:change={() => ($touched.from = true)}
-    bind:error={errors.from}
-    bind:value={toRelationship.tableId}
+    bind:value={fromId}
+    bind:error={errors.fromTable}
+    on:change={e => {
+      fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
+      if (errors.fromTable === relationshipAlreadyExists) {
+        errors.toColumn = null
+      }
+      errors.fromTable = null
+      errors.fromColumn = null
+      errors.toTable = null
+      errors.throughTable = null
+    }}
  />
  {#if isManyToOne && fromTable}
    <Select
-      label={`Primary Key (${fromTable?.name})`}
-      options={Object.keys(fromTable?.schema)}
-      on:change={() => ($touched.primary = true)}
-      bind:error={errors.primary}
+      label={`Primary Key (${fromTable.name})`}
+      options={Object.keys(fromTable.schema)}
      bind:value={fromPrimary}
+      bind:error={errors.fromPrimary}
+      on:change={() => (errors.fromPrimary = null)}
    />
  {/if}
  <Select
    label={"Select to table"}
    options={tableOptions}
-    on:change={() => ($touched.to = true)}
-    bind:error={errors.to}
-    bind:value={fromRelationship.tableId}
+    bind:value={toId}
+    bind:error={errors.toTable}
+    on:change={e => {
+      toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
+      if (errors.toTable === relationshipAlreadyExists) {
+        errors.fromColumn = null
+      }
+      errors.toTable = null
+      errors.toColumn = null
+      errors.fromTable = null
+      errors.throughTable = null
+    }}
  />
  {#if isManyToMany}
    <Select
      label={"Through"}
      options={tableOptions}
-      on:change={() => ($touched.through = true)}
-      bind:error={errors.through}
-      bind:value={fromRelationship.through}
+      bind:value={throughId}
+      bind:error={errors.throughTable}
+      on:change={() => {
+        errors.fromTable = null
+        errors.toTable = null
+        errors.throughTable = null
+      }}
    />
-    {#if fromTable && toTable && through}
+    {#if fromTable && toTable && throughTable}
      <Select
        label={`Foreign Key (${fromTable?.name})`}
-        options={Object.keys(through?.schema)}
-        on:change={() => ($touched.fromForeign = true)}
-        bind:error={errors.fromForeign}
-        bind:value={fromRelationship.throughTo}
+        options={Object.keys(throughTable?.schema)}
+        bind:value={throughToKey}
+        bind:error={errors.throughToKey}
+        on:change={e => {
+          if (throughFromKey === e.detail) {
+            throughFromKey = null
+          }
+          errors.throughToKey = null
+        }}
      />
      <Select
        label={`Foreign Key (${toTable?.name})`}
-        options={Object.keys(through?.schema)}
-        on:change={() => ($touched.toForeign = true)}
-        bind:error={errors.toForeign}
-        bind:value={fromRelationship.throughFrom}
+        options={Object.keys(throughTable?.schema)}
+        bind:value={throughFromKey}
+        bind:error={errors.throughFromKey}
+        on:change={e => {
+          if (throughToKey === e.detail) {
+            throughToKey = null
+          }
+          errors.throughFromKey = null
+        }}
      />
    {/if}
  {:else if isManyToOne && toTable}
    <Select
      label={`Foreign Key (${toTable?.name})`}
      options={Object.keys(toTable?.schema)}
-      on:change={() => ($touched.foreign = true)}
-      bind:error={errors.foreign}
-      bind:value={fromRelationship.fieldName}
+      bind:value={fromForeign}
+      bind:error={errors.fromForeign}
+      on:change={() => (errors.fromForeign = null)}
    />
  {/if}
  <div class="headings">
@ -354,19 +456,21 @@
    provide a name for these columns.
  </Body>
  <Input
-    on:blur={() => ($touched.fromCol = true)}
-    bind:error={errors.fromCol}
    label="From table column"
-    bind:value={fromRelationship.name}
+    bind:value={fromColumn}
+    bind:error={errors.fromColumn}
+    on:change={e => {
+      errors.fromColumn = e.detail?.length > 0 ? null : colNotSet
+    }}
  />
  <Input
-    on:blur={() => ($touched.toCol = true)}
-    bind:error={errors.toCol}
    label="To table column"
-    bind:value={toRelationship.name}
+    bind:value={toColumn}
+    bind:error={errors.toColumn}
+    on:change={e => (errors.toColumn = e.detail?.length > 0 ? null : colNotSet)}
  />
  <div slot="footer">
-    {#if originalFromName != null}
+    {#if originalFromColumnName != null}
      <Button warning text on:click={deleteRelationship}>Delete</Button>
    {/if}
  </div>
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@ -14,7 +14,7 @@

  export let rows = []
  export let schema = {}
-  export let allValid = false
+  export let allValid = true
  export let displayColumn = null

  const typeOptions = [
@ -174,7 +174,6 @@
  }

  label {
-    font-family: var(--font-sans);
    cursor: pointer;
    font-weight: 600;
    box-sizing: border-box;
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@ -33,7 +33,7 @@
  let autoColumns = getAutoColumnInformation()
  let schema = {}
  let rows = []
-  let allValid = false
+  let allValid = true
  let displayColumn = null

  function getAutoColumns() {
@ -99,7 +99,7 @@
  title="Create Table"
  confirmText="Create"
  onConfirm={saveTable}
-  disabled={error || !name || !allValid}
+  disabled={error || !name || (rows.length && !allValid)}
 >
  <Input
    data-cy="table-name-input"
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ b/packages/builder/src/components/common/AppLockModal.svelte
@ -8,6 +8,7 @@
    ProgressCircle,
    Layout,
    Body,
+    Icon,
  } from "@budibase/bbui"
  import { auth, apps } from "stores/portal"
  import { processStringSync } from "@budibase/string-templates"
@ -56,27 +57,21 @@
  }
 </script>

-<div class="lock-status">
-  {#if lockedBy}
-    <Button
-      quiet
-      secondary
-      icon="LockClosed"
+{#if lockedBy}
+  <div class="lock-status">
+    <Icon
+      name="LockClosed"
+      hoverable
      size={buttonSize}
-      on:click={() => {
+      on:click={e => {
+        e.stopPropagation()
        appLockModal.show()
      }}
-    >
-      <span class="lock-status-text">
-        {lockedByHeading}
-      </span>
-    </Button>
-  {/if}
-</div>
+    />
+  </div>
+{/if}

-{#key app}
-  <div>
-    <Modal bind:this={appLockModal}>
+<Modal bind:this={appLockModal}>
  <ModalContent
    title={lockedByHeading}
    dataCy={"app-lock-modal"}
@ -85,13 +80,13 @@
  >
    <Layout noPadding>
      <Body size="S">
-            Apps are locked to prevent work from being lost from overlapping
-            changes between your team.
+        Apps are locked to prevent work being lost from overlapping changes
+        between your team.
      </Body>
      {#if lockedByYou && getExpiryDuration(app) > 0}
        <span class="lock-expiry-body">
          {processStringSync(
-                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
+            "This lock will expire in {{ duration time 'millisecond' }} from now.",
            {
              time: getExpiryDuration(app),
            }
@ -114,7 +109,7 @@
          </Button>
          {#if lockedByYou}
            <Button
-                  secondary
+              cta
              disabled={processing}
              on:click={() => {
                releaseLock()
@ -132,9 +127,7 @@
      </div>
    </Layout>
  </ModalContent>
-    </Modal>
-  </div>
-{/key}
+</Modal>

 <style>
  .lock-modal-actions {
@ -148,8 +141,4 @@
    gap: var(--spacing-s);
    max-width: 175px;
  }
-  .lock-status-text {
-    font-weight: 400;
-    color: var(--spectrum-global-color-gray-800);
-  }
 </style>
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@ -135,7 +135,7 @@
  div :global(.CodeMirror) {
    height: var(--code-mirror-height);
    min-height: var(--code-mirror-height);
-    font-family: monospace;
+    font-family: var(--font-mono);
    line-height: 1.3;
    border: var(--spectrum-alias-border-size-thin) solid;
    border-color: var(--spectrum-alias-border-color);
--- a/packages/builder/src/components/common/ConfigChecklist.svelte
+++ b/packages/builder/src/components/common/ConfigChecklist.svelte
@ -1,64 +0,0 @@
-<script>
-  import {
-    ActionMenu,
-    Checkbox,
-    MenuItem,
-    Heading,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import { admin } from "stores/portal"
-  import { goto } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  let width = window.innerWidth
-  $: side = width < 500 ? "right" : "left"
-
-  const resizeObserver = new ResizeObserver(entries => {
-    if (entries?.[0]) {
-      width = entries[0].contentRect?.width
-    }
-  })
-
-  onMount(() => {
-    const doc = document.documentElement
-    resizeObserver.observe(doc)
-
-    return () => {
-      resizeObserver.unobserve(doc)
-    }
-  })
-</script>
-
-<ActionMenu align={side}>
-  <div slot="control" class="icon">
-    <ProgressCircle size="S" value={$admin.onboardingProgress} />
-  </div>
-  <MenuItem disabled>
-    <header class="item">
-      <Heading size="XXS">Get Started Checklist</Heading>
-      <ProgressCircle size="S" value={$admin.onboardingProgress} />
-    </header>
-  </MenuItem>
-  {#each Object.keys($admin.checklist) as checklistItem, idx}
-    <MenuItem>
-      <div
-        class="item"
-        on:click={() => $goto($admin.checklist[checklistItem].link)}
-      >
-        <span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
-        <Checkbox value={$admin.checklist[checklistItem].checked} />
-      </div>
-    </MenuItem>
-  {/each}
-</ActionMenu>
-
-<style>
-  .item {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 175px 20px;
-  }
-  .icon {
-    cursor: pointer;
-  }
-</style>
--- a/packages/builder/src/components/common/EditableIcon.svelte
+++ b/packages/builder/src/components/common/EditableIcon.svelte
@ -1,47 +1,46 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Modal } from "@budibase/bbui"
  import ChooseIconModal from "components/start/ChooseIconModal.svelte"

  export let name
-  export let size
+  export let size = "M"
  export let app
+  export let color
+  export let autoSave = false

-  let iconModal
+  let modal
 </script>

 <div class="editable-icon">
-  <div
-    class="edit-hover"
-    on:click={() => {
-      iconModal.show()
-    }}
-  >
-    <Icon name={"Edit"} size={"L"} />
+  <div class="hover" on:click={modal.show}>
+    <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
  </div>
-  <div class="app-icon">
-    <Icon {name} {size} />
+  <div class="normal">
+    <Icon {name} {size} {color} />
  </div>
 </div>
-<ChooseIconModal {app} bind:this={iconModal} />
+
+<Modal bind:this={modal}>
+  <ChooseIconModal {name} {color} {app} {autoSave} on:change />
+</Modal>

 <style>
-  .editable-icon:hover .app-icon {
-    opacity: 0;
-  }
  .editable-icon {
    position: relative;
+    display: flex;
+    justify-content: flex-start;
  }
-  .editable-icon:hover .edit-hover {
-    opacity: 1;
+  .normal {
+    display: block;
  }
-  .edit-hover {
-    color: var(--spectrum-global-color-gray-600);
+  .hover {
+    display: none;
    cursor: pointer;
-    z-index: 100;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    opacity: 0;
-    /* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
+  }
+  .editable-icon:hover .normal {
+    display: none;
+  }
+  .editable-icon:hover .hover {
+    display: block;
  }
 </style>
--- a/packages/builder/src/components/common/HelpIcon.svelte
+++ b/packages/builder/src/components/common/HelpIcon.svelte
@ -31,6 +31,7 @@
    bottom: var(--spacing-m);
    right: var(--spacing-m);
    border-radius: 55%;
+    z-index: 99999;
  }
  .hidden {
    display: none;
--- a/packages/builder/src/components/common/RoleSelect.svelte
+++ b/packages/builder/src/components/common/RoleSelect.svelte
@ -2,6 +2,7 @@
  import { Select } from "@budibase/bbui"
  import { roles } from "stores/backend"
  import { Constants, RoleUtils } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"

  export let value
  export let error
@ -9,26 +10,62 @@
  export let autoWidth = false
  export let quiet = false
  export let allowPublic = true
+  export let allowRemove = false

-  $: options = getOptions($roles, allowPublic)
+  const dispatch = createEventDispatcher()
+  const RemoveID = "remove"
+
+  $: options = getOptions($roles, allowPublic, allowRemove)

  const getOptions = (roles, allowPublic) => {
+    if (allowRemove) {
+      roles = [
+        ...roles,
+        {
+          _id: RemoveID,
+          name: "Remove",
+        },
+      ]
+    }
    if (allowPublic) {
      return roles
    }
    return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
  }
+
+  const getColor = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return null
+    }
+    return RoleUtils.getRoleColour(role._id)
+  }
+
+  const getIcon = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return "Close"
+    }
+    return null
+  }
+
+  const onChange = e => {
+    if (allowRemove && e.detail === RemoveID) {
+      dispatch("remove")
+    } else {
+      dispatch("change", e.detail)
+    }
+  }
 </script>

 <Select
  {autoWidth}
  {quiet}
  bind:value
-  on:change
+  on:change={onChange}
  {options}
  getOptionLabel={role => role.name}
  getOptionValue={role => role._id}
-  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  getOptionColour={getColor}
+  getOptionIcon={getIcon}
  {placeholder}
  {error}
 />
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@ -1,96 +1,77 @@
 <script>
-  import {
-    Layout,
-    Detail,
-    Heading,
-    Button,
-    Modal,
-    ActionGroup,
-    ActionButton,
-  } from "@budibase/bbui"
+  import { Layout, Detail, Button, Modal } from "@budibase/bbui"
  import TemplateCard from "components/common/TemplateCard.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
  import { licensing } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"

  export let templates

-  let selectedTemplateCategory
+  let selectedCategory
  let creationModal
  let template

-  const groupTemplatesByCategory = (templates, categoryFilter) => {
-    let grouped = templates.reduce((acc, template) => {
-      if (
-        typeof categoryFilter === "string" &&
-        [categoryFilter].indexOf(template.category) < 0
-      ) {
-        return acc
+  $: categories = getCategories(templates)
+  $: filteredCategories = getFilteredCategories(categories, selectedCategory)
+
+  const getCategories = templates => {
+    let categories = {}
+    templates?.forEach(template => {
+      if (!categories[template.category]) {
+        categories[template.category] = []
+      }
+      categories[template.category].push(template)
+    })
+    categories = Object.entries(categories).map(
+      ([category, categoryTemplates]) => {
+        return {
+          name: category,
+          templates: categoryTemplates,
        }
-
-      acc[template.category] = !acc[template.category]
-        ? []
-        : acc[template.category]
-      acc[template.category].push(template)
-
-      return acc
-    }, {})
-    return grouped
      }
-
-  $: filteredTemplates = groupTemplatesByCategory(
-    templates,
-    selectedTemplateCategory
    )
+    categories.sort((a, b) => {
+      return a.name < b.name ? -1 : 1
+    })
+    return categories
+  }

-  $: filteredTemplateCategories = filteredTemplates
-    ? Object.keys(filteredTemplates).sort()
-    : []
-
-  $: templateCategories = templates
-    ? Object.keys(groupTemplatesByCategory(templates)).sort()
-    : []
+  const getFilteredCategories = (categories, selectedCategory) => {
+    if (!selectedCategory) {
+      return categories
+    }
+    return categories.filter(x => x.name === selectedCategory)
+  }

  const stopAppCreation = () => {
    template = null
  }
 </script>

-<div class="template-header">
-  <Layout noPadding gap="S">
-    <Heading size="S">Templates</Heading>
-    <div class="template-category-filters spectrum-ActionGroup">
-      <ActionGroup>
-        <ActionButton
-          selected={!selectedTemplateCategory}
-          on:click={() => {
-            selectedTemplateCategory = null
-          }}
-        >
-          All
-        </ActionButton>
-        {#each templateCategories as templateCategoryKey}
-          <ActionButton
-            dataCy={templateCategoryKey}
-            selected={templateCategoryKey == selectedTemplateCategory}
-            on:click={() => {
-              selectedTemplateCategory = templateCategoryKey
-            }}
-          >
-            {templateCategoryKey}
-          </ActionButton>
+<Content>
+  <div slot="side-nav">
+    <SideNav>
+      <SideNavItem
+        on:click={() => (selectedCategory = null)}
+        text="All"
+        active={selectedCategory == null}
+      />
+      {#each categories as category}
+        <SideNavItem
+          on:click={() => (selectedCategory = category.name)}
+          text={category.name}
+          active={selectedCategory === category.name}
+        />
      {/each}
-      </ActionGroup>
+    </SideNav>
  </div>
-  </Layout>
-</div>
-
-<div class="template-categories">
+  <div class="template-categories">
    <Layout gap="XL" noPadding>
-    {#each filteredTemplateCategories as templateCategoryKey}
-      <div class="template-category" data-cy={templateCategoryKey}>
-        <Detail size="M">{templateCategoryKey}</Detail>
+      {#each filteredCategories as category}
+        <div class="template-category" data-cy={category.name}>
+          <Detail size="M">{category.name}</Detail>
          <div class="template-grid">
-          {#each filteredTemplates[templateCategoryKey] as templateEntry}
+            {#each category.templates as templateEntry}
              <TemplateCard
                name={templateEntry.name}
                imageSrc={templateEntry.image}
@ -122,7 +103,8 @@
        </div>
      {/each}
    </Layout>
-</div>
+  </div>
+</Content>

 <Modal
  bind:this={creationModal}
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -469,7 +469,7 @@
  }

  .binding__type {
-    font-family: monospace;
+    font-family: var(--font-mono);
    background-color: var(--spectrum-global-color-gray-200);
    border-radius: var(--border-radius-s);
    padding: 2px 4px;
--- a/packages/builder/src/components/common/inputs/CopyInput.svelte
+++ b/packages/builder/src/components/common/inputs/CopyInput.svelte
@ -12,7 +12,7 @@
    dummy.select()
    document.execCommand("copy")
    document.body.removeChild(dummy)
-    notifications.success(`URL copied to clipboard`)
+    notifications.success(`Copied to clipboard`)
  }
 </script>

--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/packages/builder/src/components/deploy/DeployModal.svelte
@ -57,15 +57,13 @@
 <Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={publishModal}>
  <ModalContent
-    title="Publish to Production"
+    title="Publish to production"
    confirmText="Publish"
    onConfirm={publishApp}
    dataCy={"deploy-app-modal"}
  >
-    <span
-      >The changes you have made will be published to the production version of
-      the application.</span
-    >
+    The changes you have made will be published to the production version of the
+    application.
  </ModalContent>
 </Modal>

--- a/packages/builder/src/components/deploy/DeployNavigation.svelte
+++ b/packages/builder/src/components/deploy/DeployNavigation.svelte
@ -179,7 +179,7 @@
 </ConfirmDialog>

 <div class="buttons">
-  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <Button on:click={previewApp} secondary>Preview</Button>
  <DeployModal onOk={completePublish} />
 </div>

--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte
@ -70,7 +70,10 @@
      type: "provider",
    }))
  $: links = bindings
+    // Get only link bindings
    .filter(x => x.fieldSchema?.type === "link")
+    // Filter out bindings provided by forms
+    .filter(x => !x.component?.endsWith("/form"))
    .map(binding => {
      const { providerId, readableBinding, fieldSchema } = binding || {}
      const { name, tableId } = fieldSchema || {}
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@ -185,7 +185,7 @@
  div :global(.CodeMirror) {
    height: var(--code-mirror-height) !important;
    border-radius: var(--border-radius-s);
-    font-family: monospace !important;
+    font-family: var(--font-mono);
    line-height: 1.3;
  }
 </style>
--- a/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
+++ b/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
@ -1,106 +0,0 @@
-<script>
-  import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
-  import { goto } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  export let history
-  export let appId
-  export let close
-  const STOPPED_ERROR = "stopped_error"
-
-  $: exists = $automationStore.automations?.find(
-    auto => auto._id === history?.automationId
-  )
-</script>
-
-{#if history}
-  <div class="body">
-    <div class="top">
-      <div class="controls">
-        <StatusRenderer value={history.status} />
-        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
-      </div>
-    </div>
-    <Layout paddingY="XL" paddingX="XL" gap="S">
-      <div class="icon">
-        <Icon name="Clock" />
-        <DateTimeRenderer value={history.createdAt} />
-      </div>
-      <div class="icon">
-        <Icon name="JourneyVoyager" />
-        <div>{history.automationName}</div>
-      </div>
-      {#if history.status === STOPPED_ERROR}
-        <div class="cron-error">
-          <InlineAlert
-            type="error"
-            header="CRON automation disabled"
-            message="Fix the error and re-publish your app to re-activate."
-          />
-        </div>
-      {/if}
-      <div>
-        {#if exists}
-          <ActionButton
-            icon="Edit"
-            fullWidth={false}
-            on:click={() =>
-              $goto(`../../../app/${appId}/automate/${history.automationId}`)}
-            >Edit automation</ActionButton
-          >
-        {/if}
-      </div>
-    </Layout>
-    <div class="bottom">
-      {#key history}
-        <TestDisplay testResults={history} width="100%" />
-      {/key}
-    </div>
-  </div>
-{:else}
-  <div>No details found</div>
-{/if}
-
-<style>
-  .body {
-    right: 0;
-    background-color: var(--background);
-    border-left: var(--border-light);
-    width: 420px;
-    height: calc(100vh - 240px);
-    position: fixed;
-    overflow: auto;
-  }
-
-  .top {
-    padding: var(--spacing-m) 0 var(--spacing-m) 0;
-    border-bottom: var(--border-light);
-  }
-
-  .bottom {
-    border-top: var(--border-light);
-    padding-top: calc(var(--spacing-xl) * 2);
-    padding-bottom: calc(var(--spacing-xl) * 2);
-  }
-
-  .icon {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .controls {
-    padding: 0 var(--spacing-l) 0 var(--spacing-l);
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: var(--spacing-s);
-  }
-
-  .cron-error {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-</style>
--- a/packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte
@ -1,39 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: status = getStatus(isError, isStopped)
-
-  function getStatus(error, stopped) {
-    if (error) {
-      return { color: "var(--red)", message: "Error", icon: "Alert" }
-    } else if (stopped) {
-      return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
-    } else {
-      return {
-        color: "var(--green)",
-        message: "Success",
-        icon: "CheckmarkCircle",
-      }
-    }
-  }
-</script>
-
-<div class="cell">
-  <Icon color={status.color} name={status.icon} />
-  <div style={`color: ${status.color};`}>
-    {status.message}
-  </div>
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>
--- a/packages/builder/src/components/portal/page/Breadcrumb.svelte
+++ b/packages/builder/src/components/portal/page/Breadcrumb.svelte
@ -0,0 +1,37 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let url
+  export let text
+</script>
+
+<div>
+  <a href={url}>
+    {text}
+  </a>
+  <Icon name="ChevronRight" />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-700);
+    gap: var(--spacing-m);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  div :global(.spectrum-Icon),
+  a {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>
--- a/packages/builder/src/components/portal/page/Breadcrumbs.svelte
+++ b/packages/builder/src/components/portal/page/Breadcrumbs.svelte
@ -0,0 +1,22 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  div :global(> *:last-child .spectrum-Icon) {
+    display: none;
+  }
+  div :global(> *:last-child) {
+    color: var(--spectrum-global-color-gray-900);
+    flex: 1 1 auto;
+    width: 0;
+  }
+</style>
--- a/packages/builder/src/components/portal/page/Content.svelte
+++ b/packages/builder/src/components/portal/page/Content.svelte
@ -0,0 +1,46 @@
+<script>
+  export let narrow = false
+  export let showMobileNav = false
+</script>
+
+<div class="content">
+  <div class="side-nav" class:show-mobile={showMobileNav}>
+    <slot name="side-nav" />
+  </div>
+  <div class="main" class:narrow>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 40px;
+  }
+  .side-nav {
+    flex: 0 0 200px;
+  }
+  .main {
+    flex: 1 1 auto;
+  }
+  .main.narrow {
+    max-width: 600px;
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+    }
+    .side-nav:not(.show-mobile) {
+      display: none;
+    }
+    .side-nav.show-mobile :global(.side-nav) {
+      border-bottom: var(--border-light);
+      margin: 0 -24px;
+      padding: 0 24px 32px 24px;
+    }
+  }
+</style>
--- a/packages/builder/src/components/portal/page/Header.svelte
+++ b/packages/builder/src/components/portal/page/Header.svelte
@ -0,0 +1,52 @@
+<script>
+  import { Heading } from "@budibase/bbui"
+
+  export let title
+  export let wrap = true
+</script>
+
+<div class="header" class:wrap>
+  <slot name="icon" />
+  <Heading size="L">{title}</Heading>
+  <div class="buttons">
+    <slot name="buttons" />
+  </div>
+</div>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .header.wrap {
+    flex-wrap: wrap;
+  }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    margin-top: -2px;
+  }
+  .header:not(.wrap) :global(.spectrum-Heading) {
+    overflow: hidden;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .buttons :global(> div) {
+    display: contents;
+  }
+  @media (max-width: 640px) {
+    .wrap .buttons {
+      margin-bottom: var(--spacing-m);
+    }
+  }
+</style>
--- a/packages/builder/src/components/portal/page/SideNav.svelte
+++ b/packages/builder/src/components/portal/page/SideNav.svelte
@ -0,0 +1,26 @@
+<script>
+  export let title
+</script>
+
+<div class="side-nav">
+  {#if title}
+    <div class="title">{title}</div>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 4px;
+  }
+  .title {
+    margin-left: var(--spacing-m);
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@ -0,0 +1,23 @@
+<script>
+  export let text
+  export let url
+  export let active = false
+</script>
+
+<a on:click href={url} class:active>
+  {text || ""}
+</a>
+
+<style>
+  a {
+    padding: var(--spacing-s) var(--spacing-m);
+    color: var(--spectrum-global-color-gray-900);
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+  }
+  .active,
+  a:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>
--- a/packages/builder/src/components/portal/page/index.js
+++ b/packages/builder/src/components/portal/page/index.js
@ -0,0 +1,6 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte"
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
+export { default as Header } from "./Header.svelte"
+export { default as Content } from "./Content.svelte"
+export { default as SideNavItem } from "./SideNavItem.svelte"
+export { default as SideNav } from "./SideNav.svelte"
--- a/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte
+++ b/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte
@ -1,5 +1,6 @@
 <script>
-  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import { ModalContent } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
  import { auth } from "stores/portal"
  import { onMount } from "svelte"
  import CopyInput from "components/common/inputs/CopyInput.svelte"
@ -27,15 +28,13 @@
 </script>

 <ModalContent
-  title="Developer information"
-  showConfirmButton={false}
-  showSecondaryButton={true}
-  secondaryButtonText="Re-generate key"
+  title="API Key"
+  showSecondaryButton
+  secondaryButtonText="Regenerate key"
  secondaryAction={generateAPIKey}
+  showCancelButton={false}
+  confirmText="Close"
 >
-  <Body size="S">
-    You can find information about your developer account here, such as the API
-    key used to access the Budibase API.
-  </Body>
-  <CopyInput bind:value={apiKey} label="API key" />
+  <Body size="S">Your API key for accessing the Budibase public API:</Body>
+  <CopyInput bind:value={apiKey} />
 </ModalContent>
--- a/packages/builder/src/components/settings/UpdateUserInfoModal.svelte
+++ b/packages/builder/src/components/settings/UpdateUserInfoModal.svelte
@ -18,11 +18,7 @@
  }
 </script>

-<ModalContent
-  title="Update user information"
-  confirmText="Update information"
-  onConfirm={updateInfo}
->
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
  <Body size="S">
    Personalise the platform by adding your first name and last name.
  </Body>
--- a/packages/builder/src/components/settings/ThemeModal.svelte
+++ b/packages/builder/src/components/settings/ThemeModal.svelte
@ -0,0 +1,16 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
+</script>
+
+<ModalContent title="Theme">
+  <Select
+    options={Constants.Themes}
+    bind:value={$themeStore.theme}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.class}
+  />
+</ModalContent>
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -1,26 +1,47 @@
 <script>
-  import { Heading, Button, Icon } from "@budibase/bbui"
+  import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
  import AppLockModal from "../common/AppLockModal.svelte"
  import { processStringSync } from "@budibase/string-templates"
+  import { goto } from "@roxi/routify"

  export let app
-  export let editApp
-  export let appOverview
+
+  const handleDefaultClick = () => {
+    if (window.innerWidth < 640) {
+      goToOverview()
+    } else {
+      goToBuilder()
+    }
+  }
+
+  const goToBuilder = () => {
+    if (app.lockedOther) {
+      notifications.error(
+        `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
+      )
+      return
+    }
+    $goto(`../../app/${app.devId}`)
+  }
+
+  const goToOverview = () => {
+    $goto(`../overview/${app.devId}`)
+  }
 </script>

-<div class="title" data-cy={`${app.devId}`}>
-  <div>
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
+<div class="app-row" on:click={handleDefaultClick}>
+  <div class="title" data-cy={`${app.devId}`}>
+    <div class="app-icon">
+      <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
    </div>
-    <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
-      <Heading size="XS">
+    <div class="name" data-cy="app-name-link">
+      <Heading size="S">
        {app.name}
      </Heading>
    </div>
  </div>
-</div>
-<div class="desktop">
+
+  <div class="updated">
    {#if app.updatedAt}
      {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
        time: new Date().getTime() - new Date(app.updatedAt).getTime(),
@ -28,58 +49,78 @@
    {:else}
      Never updated
    {/if}
-</div>
-<div class="desktop">
-  <span><AppLockModal {app} buttonSize="M" /></span>
-</div>
-<div class="desktop">
-  <div class="app-status">
-    {#if app.deployed}
-      <Icon name="Globe" disabled={false} />
-      Published
-    {:else}
-      <Icon name="GlobeStrike" disabled={true} />
-      <span class="disabled"> Unpublished </span>
-    {/if}
  </div>
-</div>
-<div data-cy={`row_actions_${app.appId}`}>
-  <div class="app-row-actions">
-    <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
-      Manage
-    </Button>
-    <Button
-      size="S"
-      primary
-      newStyles
-      disabled={app.lockedOther}
-      on:click={() => editApp(app)}
-    >
+
+  <div class="title app-status" class:deployed={app.deployed}>
+    <Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
+    <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
+  </div>
+
+  <div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
+    <AppLockModal {app} buttonSize="M" />
+    <Button size="S" secondary on:click={goToOverview}>Manage</Button>
+    <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
      Edit
    </Button>
  </div>
 </div>

 <style>
-  div.title,
-  div.title > div {
-    display: flex;
-    max-width: 100%;
+  .app-row {
+    background: var(--background);
+    padding: 24px 32px;
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: 35% 25% 15% auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    transition: border 130ms ease-out;
+    border: 1px solid transparent;
  }
+  .app-row:hover {
+    cursor: pointer;
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .updated {
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .title,
+  .name {
+    flex: 1 1 auto;
+  }
+  .name {
+    width: 0;
+  }
+  .title,
+  .app-status {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .title :global(.spectrum-Heading),
+  .title :global(.spectrum-Icon),
+  .title :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .app-status:not(.deployed) :global(.spectrum-Icon),
+  .app-status:not(.deployed) :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
  .app-row-actions {
-    grid-gap: var(--spacing-s);
+    gap: var(--spacing-m);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
+    align-items: center;
  }
-  .app-status {
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: 24px 100px;
-  }
-  .app-status span.disabled {
-    opacity: 0.3;
-  }
+
  .name {
    text-decoration: none;
    overflow: hidden;
@ -88,17 +129,30 @@
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
  }

+  @media (max-width: 1000px) {
+    .app-row {
+      grid-template-columns: 45% 30% auto;
+    }
+    .updated {
+      display: none;
+    }
+  }
+  @media (max-width: 800px) {
+    .app-row {
+      grid-template-columns: 1fr auto;
+    }
+    .app-status {
+      display: none;
+    }
+  }
  @media (max-width: 640px) {
-    .desktop {
-      display: none !important;
+    .app-row {
+      padding: 20px;
+    }
+    .app-row-actions {
+      display: none;
    }
  }
 </style>
--- a/packages/builder/src/components/start/ChooseIconModal.svelte
+++ b/packages/builder/src/components/start/ChooseIconModal.svelte
@ -1,18 +1,20 @@
 <script>
  import {
    ModalContent,
-    Modal,
    Icon,
    ColorPicker,
    Label,
    notifications,
  } from "@budibase/bbui"
  import { apps } from "stores/portal"
+  import { createEventDispatcher } from "svelte"

  export let app
-  let modal
-  $: selectedIcon = app?.icon?.name || "Apps"
-  $: selectedColor = app?.icon?.color
+  export let name
+  export let color
+  export let autoSave = false
+
+  const dispatch = createEventDispatcher()

  let iconsList = [
    "Apps",
@ -40,30 +42,15 @@
    "GraphBarHorizontal",
    "Demographic",
  ]
-  export const show = () => {
-    modal.show()
-  }
-  export const hide = () => {
-    modal.hide()
-  }
-
-  const onCancel = () => {
-    selectedIcon = ""
-    selectedColor = ""
-    hide()
-  }
-
-  const changeColor = val => {
-    selectedColor = val
-  }

  const save = async () => {
+    if (!autoSave) {
+      dispatch("change", { color, name })
+      return
+    }
    try {
      await apps.update(app.instance._id, {
-        icon: {
-          name: selectedIcon,
-          color: selectedColor,
-        },
+        icon: { name, color },
      })
    } catch (error) {
      notifications.error("Error updating app")
@ -71,12 +58,7 @@
  }
 </script>

-<Modal bind:this={modal} on:hide={onCancel}>
-  <ModalContent
-    title={"Edit Icon"}
-    confirmText={"Save"}
-    onConfirm={() => save()}
-  >
+<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
  <div class="scrollable-icons">
    <div class="title-spacing">
      <Label>Select an icon</Label>
@ -85,8 +67,8 @@
      {#each iconsList as item}
        <div
          class="icon-item"
-            class:selected={item === selectedIcon}
-            on:click={() => (selectedIcon = item)}
+          class:selected={item === name}
+          on:click={() => (name = item)}
        >
          <Icon name={item} />
        </div>
@ -98,14 +80,10 @@
      <Label>Select a color</Label>
    </div>
    <div class="color-selection-item">
-        <ColorPicker
-          bind:value={selectedColor}
-          on:change={e => changeColor(e.detail)}
-        />
+      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
    </div>
  </div>
-  </ModalContent>
-</Modal>
+</ModalContent>

 <style>
  .scrollable-icons {
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -138,6 +138,7 @@
      }

      $goto(`/builder/app/${createdApp.instance._id}`)
+      // apps.load()
    } catch (error) {
      creating = false
      console.error(error)
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@ -1,22 +1,29 @@
 <script>
  import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
  import { apps } from "stores/portal"
  import { onMount } from "svelte"
  import { createValidationStore } from "helpers/validation/yup"
  import * as appValidation from "helpers/validation/yup/app"
+  import EditableIcon from "../common/EditableIcon.svelte"

  export let app

-  const values = writable({ name: "", url: null })
-  const validation = createValidationStore()
-  $: validation.check($values)
-
-  onMount(async () => {
-    $values.name = app.name
-    $values.url = app.url
-    setupValidation()
+  const values = writable({
+    name: app.name,
+    url: app.url,
+    iconName: app.icon?.name,
+    iconColor: app.icon?.color,
  })
+  const validation = createValidationStore()
+
+  $: validation.check($values)

  const setupValidation = async () => {
    const applications = svelteGet(apps)
@ -28,14 +35,14 @@

  async function updateApp() {
    try {
-      // Update App
-      const body = {
-        name: $values.name.trim(),
-      }
-      if ($values.url) {
-        body.url = $values.url.trim()
-      }
-      await apps.update(app.instance._id, body)
+      await apps.update(app.instance._id, {
+        name: $values.name?.trim(),
+        url: $values.url?.trim(),
+        icon: {
+          name: $values.iconName,
+          color: $values.iconColor,
+        },
+      })
    } catch (error) {
      console.error(error)
      notifications.error("Error updating app")
@ -68,15 +75,22 @@
    let resolvedUrl = resolveAppUrl(null, appName)
    tidyUrl(resolvedUrl)
  }
+
+  const updateIcon = e => {
+    const { name, color } = e.detail
+    $values.iconColor = color
+    $values.iconName = name
+  }
+
+  onMount(setupValidation)
 </script>

 <ModalContent
-  title={"Edit app"}
-  confirmText={"Save"}
+  title="Edit name and URL"
+  confirmText="Save"
  onConfirm={updateApp}
  disabled={!$validation.valid}
 >
-  <Body size="S">Update the name of your app.</Body>
  <Input
    bind:value={$values.name}
    error={$validation.touched.name && $validation.errors.name}
@ -84,6 +98,16 @@
    on:change={nameToUrl($values.name)}
    label="Name"
  />
+  <Layout noPadding gap="XS">
+    <Label>Icon</Label>
+    <EditableIcon
+      {app}
+      size="XL"
+      name={$values.iconName}
+      color={$values.iconColor}
+      on:change={updateIcon}
+    />
+  </Layout>
  <Input
    bind:value={$values.url}
    error={$validation.touched.url && $validation.errors.url}
--- a/packages/builder/src/components/usage/Usage.svelte
+++ b/packages/builder/src/components/usage/Usage.svelte
@ -39,15 +39,21 @@
      {#if showWarning}
        <Icon name="Alert" />
      {/if}
-      <div class="heading header-item">
-        <Heading size="XS" weight="light">{usage.name}</Heading>
-      </div>
+      <Heading size="XS" weight="light">
+        <span class="nowrap">
+          {usage.name}
+        </span>
+      </Heading>
    </div>
+    <Body size="S">
+      <span class="nowrap">
        {#if unlimited}
-      <Body size="S">{usage.used} / Unlimited</Body>
+          {usage.used} / Unlimited
        {:else}
-      <Body size="S">{usage.used} / {usage.total}</Body>
+          {usage.used} / {usage.total}
        {/if}
+      </span>
+    </Body>
  </div>
  <div>
    {#if unlimited}
@ -89,13 +95,14 @@
    display: flex;
    flex-direction: row;
    justify-content: space-between;
+    align-items: flex-end;
    margin-bottom: 12px;
+    gap: var(--spacing-m);
  }
  .header-container {
    display: flex;
  }
-  .heading {
-    margin-top: 3px;
-    margin-left: 5px;
+  .nowrap {
+    white-space: nowrap;
  }
 </style>
--- a/packages/builder/src/components/usage/UsageDashCard.svelte
+++ b/packages/builder/src/components/usage/UsageDashCard.svelte
@ -47,7 +47,7 @@
    <div class="header-actions">
      {#if secondaryDefined}
        <div>
-          <Button newStyles secondary on:click={secondaryAction}
+          <Button secondary on:click={secondaryAction}
            >{secondaryActionText}</Button
          >
        </div>
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@ -23,7 +23,6 @@ body {
  --grey-8: var(--spectrum-global-color-gray-800);
  --grey-9: var(--spectrum-global-color-gray-900);

-  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--background-alt);
 }
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -105,32 +105,34 @@
          </MenuItem>
          <MenuItem
            on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Access`)}
+              $goto(`../../portal/overview/${application}/access`)}
          >
            Access
          </MenuItem>
          <MenuItem
            on:click={() =>
-              $goto(
-                `../../portal/overview/${application}?tab=${encodeURIComponent(
-                  "Automation History"
-                )}`
-              )}
+              $goto(`../../portal/overview/${application}/automation-history`)}
          >
            Automation history
          </MenuItem>
          <MenuItem
            on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Backups`)}
+              $goto(`../../portal/overview/${application}/backups`)}
          >
            Backups
          </MenuItem>

          <MenuItem
            on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Settings`)}
+              $goto(`../../portal/overview/${application}/name-and-url`)}
          >
-            Settings
+            Name and URL
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
+          >
+            Version
          </MenuItem>
        </ActionMenu>
        <Heading size="XS">{$store.name || "App"}</Heading>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@ -176,7 +176,6 @@
  const addComponent = async component => {
    try {
      await store.actions.components.create(component)
-      $goto("../")
    } catch (error) {
      notifications.error(error || "Error creating component")
    }
@ -263,6 +262,7 @@
                    orderMap[component.component]}
                  on:click={() => addComponent(component.component)}
                  on:mouseover={() => (selectedIndex = null)}
+                  on:focus
                >
                  <Icon name={component.icon} />
                  <Body size="XS">{component.name}</Body>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
@ -20,6 +20,7 @@
  class="container"
  on:mouseover={() => (showTooltip = true)}
  on:mouseleave={() => (showTooltip = false)}
+  on:focus
  style="--color: {color};"
 >
  <StatusLight square {color} />
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
@ -172,7 +172,7 @@
        {bindings}
      />
    {/each}
-    <Button secondary newStyles on:click={() => $goto("../components")}>
+    <Button secondary on:click={() => $goto("../components")}>
      View components
    </Button>
  </Layout>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
@ -17,7 +17,7 @@
 <div class="container">
  <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
  <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
-    <Button primary newStyles>Button</Button>
+    <Button primary>Button</Button>
  </div>
 </div>

--- a/Show More
+++ b/Show More