diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 124f43ff04..526659cb7a 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -71,8 +71,8 @@ const handleMouseDown = e => {
 
   // Clear any previous listeners in case of multiple down events, and register
   // a single mouse up listener
-  document.removeEventListener("mouseup", handleMouseUp)
-  document.addEventListener("mouseup", handleMouseUp, true)
+  document.removeEventListener("click", handleMouseUp)
+  document.addEventListener("click", handleMouseUp, true)
 }
 
 // Global singleton listeners for our events
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 2243570cd5..4873430fa0 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -17,6 +17,8 @@
   export let customPopoverHeight
   export let open = false
   export let loading
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
@@ -97,4 +99,6 @@
   {autoWidth}
   {customPopoverHeight}
   {loading}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index eb7a5db655..c6d4ed3353 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -41,6 +41,8 @@
   export let footer = null
   export let customAnchor = null
   export let loading
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
@@ -199,6 +201,8 @@
             aria-selected="true"
             tabindex="0"
             on:click={() => onSelectOption(getOptionValue(option, idx))}
+            on:mouseenter={e => onOptionMouseenter(e, option)}
+            on:mouseleave={e => onOptionMouseleave(e, option)}
             class:is-disabled={!isOptionEnabled(option)}
           >
             {#if getOptionIcon(option, idx)}
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 5754c683ed..0111bd6bcf 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -26,6 +26,8 @@
   export let tag = null
   export let searchTerm = null
   export let loading
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
@@ -95,6 +97,8 @@
   {autocomplete}
   {sort}
   {tag}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder === false ? null : placeholder}
   isOptionSelected={option => compareOptionAndValue(option, value)}
diff --git a/packages/bbui/src/Form/Core/Signature.svelte b/packages/bbui/src/Form/Core/Signature.svelte
new file mode 100644
index 0000000000..729d3ac5e2
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Signature.svelte
@@ -0,0 +1,267 @@
+<script>
+  import { onMount, createEventDispatcher } from "svelte"
+  import Atrament from "atrament"
+  import Icon from "../../Icon/Icon.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  let last
+
+  export let value
+  export let disabled = false
+  export let editable = true
+  export let width = 400
+  export let height = 220
+  export let saveIcon = false
+  export let darkMode
+
+  export function toDataUrl() {
+    // PNG to preserve transparency
+    return canvasRef.toDataURL("image/png")
+  }
+
+  export function toFile() {
+    const data = canvasContext
+      .getImageData(0, 0, width, height)
+      .data.some(channel => channel !== 0)
+
+    if (!data) {
+      return
+    }
+
+    let dataURIParts = toDataUrl().split(",")
+    if (!dataURIParts.length) {
+      console.error("Could not retrieve signature data")
+    }
+
+    // Pull out the base64 encoded byte data
+    let binaryVal = atob(dataURIParts[1])
+    let blobArray = new Uint8Array(binaryVal.length)
+    let pos = 0
+    while (pos < binaryVal.length) {
+      blobArray[pos] = binaryVal.charCodeAt(pos)
+      pos++
+    }
+
+    const signatureBlob = new Blob([blobArray], {
+      type: "image/png",
+    })
+
+    return new File([signatureBlob], "signature.png", {
+      type: signatureBlob.type,
+    })
+  }
+
+  export function clearCanvas() {
+    return canvasContext.clearRect(0, 0, canvasWidth, canvasHeight)
+  }
+
+  let canvasRef
+  let canvasContext
+  let canvasWrap
+  let canvasWidth
+  let canvasHeight
+  let signature
+
+  let updated = false
+  let signatureFile
+  let urlFailed
+
+  $: if (value) {
+    signatureFile = value
+  }
+
+  $: if (signatureFile?.url) {
+    updated = false
+  }
+
+  $: if (last) {
+    dispatch("update")
+  }
+
+  onMount(() => {
+    if (!editable) {
+      return
+    }
+
+    const getPos = e => {
+      var rect = canvasRef.getBoundingClientRect()
+      const canvasX = e.offsetX || e.targetTouches?.[0].pageX - rect.left
+      const canvasY = e.offsetY || e.targetTouches?.[0].pageY - rect.top
+
+      return { x: canvasX, y: canvasY }
+    }
+
+    const checkUp = e => {
+      last = getPos(e)
+    }
+
+    canvasRef.addEventListener("pointerdown", e => {
+      const current = getPos(e)
+      //If the cursor didn't move at all, block the default pointerdown
+      if (last?.x === current?.x && last?.y === current?.y) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    })
+
+    document.addEventListener("pointerup", checkUp)
+
+    signature = new Atrament(canvasRef, {
+      width,
+      height,
+      color: "white",
+    })
+
+    signature.weight = 4
+    signature.smoothing = 2
+
+    canvasWrap.style.width = `${width}px`
+    canvasWrap.style.height = `${height}px`
+
+    const { width: wrapWidth, height: wrapHeight } =
+      canvasWrap.getBoundingClientRect()
+
+    canvasHeight = wrapHeight
+    canvasWidth = wrapWidth
+
+    canvasContext = canvasRef.getContext("2d")
+
+    return () => {
+      signature.destroy()
+      document.removeEventListener("pointerup", checkUp)
+    }
+  })
+</script>
+
+<div class="signature" class:light={!darkMode} class:image-error={urlFailed}>
+  {#if !disabled}
+    <div class="overlay">
+      {#if updated && saveIcon}
+        <span class="save">
+          <Icon
+            name="Checkmark"
+            hoverable
+            tooltip={"Save"}
+            tooltipPosition={"top"}
+            tooltipType={"info"}
+            on:click={() => {
+              dispatch("change", toDataUrl())
+            }}
+          />
+        </span>
+      {/if}
+      {#if signatureFile?.url && !updated}
+        <span class="delete">
+          <Icon
+            name="DeleteOutline"
+            hoverable
+            tooltip={"Delete"}
+            tooltipPosition={"top"}
+            tooltipType={"info"}
+            on:click={() => {
+              if (editable) {
+                clearCanvas()
+              }
+              dispatch("clear")
+            }}
+          />
+        </span>
+      {/if}
+    </div>
+  {/if}
+  {#if !editable && signatureFile?.url}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    {#if !urlFailed}
+      <img
+        src={signatureFile?.url}
+        on:error={() => {
+          urlFailed = true
+        }}
+      />
+    {:else}
+      Could not load signature
+    {/if}
+  {:else}
+    <div bind:this={canvasWrap} class="canvas-wrap">
+      <canvas
+        id="signature-canvas"
+        bind:this={canvasRef}
+        style="--max-sig-width: {width}px; --max-sig-height: {height}px"
+      />
+      {#if editable}
+        <div class="indicator-overlay">
+          <div class="sign-here">
+            <Icon name="Close" />
+            <hr />
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .indicator-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    padding: var(--spectrum-global-dimension-size-150);
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+  .sign-here {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spectrum-global-dimension-size-150);
+  }
+  .sign-here hr {
+    border: 0;
+    border-top: 2px solid var(--spectrum-global-color-gray-200);
+    width: 100%;
+  }
+  .canvas-wrap {
+    position: relative;
+    margin: auto;
+  }
+  .signature img {
+    max-width: 100%;
+  }
+  #signature-canvas {
+    max-width: var(--max-sig-width);
+    max-height: var(--max-sig-height);
+  }
+  .signature.light img,
+  .signature.light #signature-canvas {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+  }
+  .signature.image-error .overlay {
+    padding-top: 0px;
+  }
+  .signature {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    text-align: center;
+  }
+  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    padding: var(--spectrum-global-dimension-size-150);
+    text-align: right;
+    z-index: 2;
+    box-sizing: border-box;
+  }
+  .save,
+  .delete {
+    display: inline-block;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 7117b90081..6395fe2fac 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -16,3 +16,4 @@ export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
 export { default as CoreSlider } from "./Slider.svelte"
 export { default as CoreFile } from "./File.svelte"
+export { default as CoreSignature } from "./Signature.svelte"
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index b0246c8530..9878605f4b 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -19,6 +19,8 @@
   export let searchTerm = null
   export let customPopoverHeight
   export let helpText = null
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -41,6 +43,8 @@
     {autoWidth}
     {autocomplete}
     {customPopoverHeight}
+    {onOptionMouseenter}
+    {onOptionMouseleave}
     bind:searchTerm
     on:change={onChange}
     on:click
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 2119a37980..260090c7b7 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -29,6 +29,9 @@
   export let tag = null
   export let helpText = null
   export let compare
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
+
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -67,6 +70,8 @@
     {customPopoverHeight}
     {tag}
     {compare}
+    {onOptionMouseenter}
+    {onOptionMouseleave}
     on:change={onChange}
     on:click
   />
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index be9c338892..4656be69d1 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -173,6 +173,7 @@
   }
 
   .spectrum-Modal {
+    border: 2px solid var(--spectrum-global-color-gray-200);
     overflow: visible;
     max-height: none;
     margin: 40px 0;
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 189ef70c2b..61ceaeb00a 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -27,6 +27,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
+  export let custom = false
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -63,12 +64,13 @@
   class:spectrum-Dialog--medium={size === "M"}
   class:spectrum-Dialog--large={size === "L"}
   class:spectrum-Dialog--extraLarge={size === "XL"}
+  class:no-grid={custom}
   style="position: relative;"
   role="dialog"
   tabindex="-1"
   aria-modal="true"
 >
-  <div class="spectrum-Dialog-grid">
+  <div class="modal-core" class:spectrum-Dialog-grid={!custom}>
     {#if title || $$slots.header}
       <h1
         class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
@@ -153,6 +155,25 @@
   .spectrum-Dialog-content {
     overflow: visible;
   }
+
+  .no-grid .spectrum-Dialog-content {
+    border-top: 2px solid var(--spectrum-global-color-gray-200);
+    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+  }
+
+  .no-grid .spectrum-Dialog-heading {
+    margin-top: 12px;
+    margin-left: 12px;
+  }
+
+  .spectrum-Dialog.no-grid {
+    width: 100%;
+  }
+
+  .spectrum-Dialog.no-grid .spectrum-Dialog-buttonGroup {
+    padding: 12px;
+  }
+
   .spectrum-Dialog-heading {
     font-family: var(--font-accent);
     font-weight: 600;
diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index f51ad96e05..627d7e525a 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -1,40 +1,28 @@
 <script>
-  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import { getContext, onDestroy } from "svelte"
   import Portal from "svelte-portal"
 
   export let title
   export let icon = ""
   export let id
 
-  const dispatch = createEventDispatcher()
   let selected = getContext("tab")
-  let tab_internal
-  let tabInfo
+  let observer
+  let ref
 
-  const setTabInfo = () => {
-    // If the tabs are being rendered inside a component which uses
-    // a svelte transition to enter, then this initial getBoundingClientRect
-    // will return an incorrect position.
-    // We just need to get this off the main thread to fix this, by using
-    // a 0ms timeout.
-    setTimeout(() => {
-      tabInfo = tab_internal?.getBoundingClientRect()
-      if (tabInfo && $selected.title === title) {
-        $selected.info = tabInfo
-      }
-    }, 0)
+  $: isSelected = $selected.title === title
+  $: {
+    if (isSelected && ref) {
+      observe()
+    } else {
+      stopObserving()
+    }
   }
 
-  onMount(() => {
-    setTabInfo()
-  })
-
-  //Ensure that the underline is in the correct location
-  $: {
-    if ($selected.title === title && tab_internal) {
-      if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
-        setTabInfo()
-      }
+  const setTabInfo = () => {
+    const tabInfo = ref?.getBoundingClientRect()
+    if (tabInfo) {
+      $selected.info = tabInfo
     }
   }
 
@@ -42,10 +30,25 @@
     $selected = {
       ...$selected,
       title,
-      info: tab_internal.getBoundingClientRect(),
+      info: ref.getBoundingClientRect(),
     }
-    dispatch("click")
   }
+
+  const observe = () => {
+    if (!observer) {
+      observer = new ResizeObserver(setTabInfo)
+      observer.observe(ref)
+    }
+  }
+
+  const stopObserving = () => {
+    if (observer) {
+      observer.unobserve(ref)
+      observer = null
+    }
+  }
+
+  onDestroy(stopObserving)
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -53,11 +56,12 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   {id}
-  bind:this={tab_internal}
+  bind:this={ref}
   on:click={onClick}
-  class:is-selected={$selected.title === title}
+  on:click
   class="spectrum-Tabs-item"
-  class:emphasized={$selected.title === title && $selected.emphasized}
+  class:is-selected={isSelected}
+  class:emphasized={isSelected && $selected.emphasized}
   tabindex="0"
 >
   {#if icon}
@@ -72,7 +76,8 @@
   {/if}
   <span class="spectrum-Tabs-itemLabel">{title}</span>
 </div>
-{#if $selected.title === title}
+
+{#if isSelected}
   <Portal target=".spectrum-Tabs-content-{$selected.id}">
     <slot />
   </Portal>
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
new file mode 100644
index 0000000000..84d6fbbb73
--- /dev/null
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -0,0 +1,79 @@
+<script>
+  import Portal from "svelte-portal"
+  import { getContext } from "svelte"
+  import Context from "../context"
+
+  export let anchor
+  export let visible = false
+  export let offset = 0
+
+  $: target = getContext(Context.PopoverRoot) || "#app"
+
+  let hovering = false
+  let tooltip
+  let x = 0
+  let y = 0
+
+  const updatePosition = (anchor, tooltip) => {
+    if (anchor == null || tooltip == null) {
+      return
+    }
+
+    requestAnimationFrame(() => {
+      const rect = anchor.getBoundingClientRect()
+      const windowOffset =
+        window.innerHeight - offset - (tooltip.clientHeight + rect.y)
+      const tooltipWidth = tooltip.clientWidth
+
+      x = rect.x - tooltipWidth - offset
+      y = windowOffset < 0 ? rect.y + windowOffset : rect.y
+    })
+  }
+
+  $: updatePosition(anchor, tooltip)
+
+  const handleMouseenter = () => {
+    hovering = true
+  }
+
+  const handleMouseleave = () => {
+    hovering = false
+  }
+</script>
+
+<Portal {target}>
+  <div
+    role="tooltip"
+    on:mouseenter={handleMouseenter}
+    on:mouseleave={handleMouseleave}
+    style:left={`${x}px`}
+    style:top={`${y}px`}
+    class="wrapper"
+    class:visible={visible || hovering}
+  >
+    <div bind:this={tooltip} class="tooltip">
+      <slot />
+    </div>
+  </div>
+</Portal>
+
+<style>
+  .wrapper {
+    background-color: var(--spectrum-global-color-gray-100);
+    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.42);
+    opacity: 0;
+    overflow: hidden;
+
+    border-radius: 5px;
+    box-sizing: border-box;
+    border: 1px solid var(--grey-4);
+    position: absolute;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index f28e185305..e746e3a72b 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -53,6 +53,7 @@ export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as ContextTooltip } from "./Tooltip/Context.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 22303dec1f..d68e57ca36 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -9,7 +9,7 @@
   import TestDataModal from "./TestDataModal.svelte"
   import { flip } from "svelte/animate"
   import { fly } from "svelte/transition"
-  import { Icon, notifications, Modal } from "@budibase/bbui"
+  import { Icon, notifications, Modal, Toggle } from "@budibase/bbui"
   import { ActionStepID } from "constants/backend/automations"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
 
@@ -73,6 +73,16 @@
         Test details
       </div>
     </div>
+    <div class="setting-spacing">
+      <Toggle
+        text={automation.disabled ? "Paused" : "Activated"}
+        on:change={automationStore.actions.toggleDisabled(
+          automation._id,
+          automation.disabled
+        )}
+        value={!automation.disabled}
+      />
+    </div>
   </div>
 </div>
 <div class="canvas" on:scroll={handleScroll}>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index ac1c4f91cb..7898e13ec8 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -61,6 +61,7 @@
         selected={automation._id === selectedAutomationId}
         on:click={() => selectAutomation(automation._id)}
         selectedBy={$userSelectedResourceMap[automation._id]}
+        disabled={automation.disabled}
       >
         <EditAutomationPopover {automation} />
       </NavItem>
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 1bc4b0f18e..9465374ae2 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -39,6 +39,15 @@
     >Duplicate</MenuItem
   >
   <MenuItem icon="Edit" on:click={updateAutomationDialog.show}>Edit</MenuItem>
+  <MenuItem
+    icon={automation.disabled ? "CheckmarkCircle" : "Cancel"}
+    on:click={automationStore.actions.toggleDisabled(
+      automation._id,
+      automation.disabled
+    )}
+  >
+    {automation.disabled ? "Activate" : "Pause"}
+  </MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 879927343f..85ae1924d0 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -364,6 +364,7 @@
       value.customType !== "cron" &&
       value.customType !== "triggerSchema" &&
       value.customType !== "automationFields" &&
+      value.type !== "signature_single" &&
       value.type !== "attachment" &&
       value.type !== "attachment_single"
     )
@@ -456,7 +457,7 @@
               value={inputData[key]}
               options={Object.keys(table?.schema || {})}
             />
-          {:else if value.type === "attachment"}
+          {:else if value.type === "attachment" || value.type === "signature_single"}
             <div class="attachment-field-wrapper">
               <div class="label-wrapper">
                 <Label>{label}</Label>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index ab020aad08..b5a54138ca 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -24,6 +24,11 @@
 
   let table
   let schemaFields
+  let attachmentTypes = [
+    FieldType.ATTACHMENTS,
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.SIGNATURE_SINGLE,
+  ]
 
   $: {
     table = $tables.list.find(table => table._id === value?.tableId)
@@ -120,15 +125,9 @@
 {#if schemaFields.length}
   {#each schemaFields as [field, schema]}
     {#if !schema.autocolumn}
-      <div
-        class:schema-fields={schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE}
-      >
+      <div class:schema-fields={!attachmentTypes.includes(schema.type)}>
         <Label>{field}</Label>
-        <div
-          class:field-width={schema.type !== FieldType.ATTACHMENTS &&
-            schema.type !== FieldType.ATTACHMENT_SINGLE}
-        >
+        <div class:field-width={!attachmentTypes.includes(schema.type)}>
           {#if isTestModal}
             <RowSelectorTypes
               {isTestModal}
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
index 1b52e35314..087d0b94fc 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -21,6 +21,12 @@
     return clone
   })
 
+  let attachmentTypes = [
+    FieldType.ATTACHMENTS,
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.SIGNATURE_SINGLE,
+  ]
+
   function schemaHasOptions(schema) {
     return !!schema.constraints?.inclusion?.length
   }
@@ -29,7 +35,8 @@
     let params = {}
 
     if (
-      schema.type === FieldType.ATTACHMENT_SINGLE &&
+      (schema.type === FieldType.ATTACHMENT_SINGLE ||
+        schema.type === FieldType.SIGNATURE_SINGLE) &&
       Object.keys(keyValueObj).length === 0
     ) {
       return []
@@ -100,16 +107,20 @@
     on:change={e => onChange(e, field)}
     useLabel={false}
   />
-{:else if schema.type === FieldType.ATTACHMENTS || schema.type === FieldType.ATTACHMENT_SINGLE}
+{:else if attachmentTypes.includes(schema.type)}
   <div class="attachment-field-spacinng">
     <KeyValueBuilder
       on:change={e =>
         onChange(
           {
             detail:
-              schema.type === FieldType.ATTACHMENT_SINGLE
+              schema.type === FieldType.ATTACHMENT_SINGLE ||
+              schema.type === FieldType.SIGNATURE_SINGLE
                 ? e.detail.length > 0
-                  ? { url: e.detail[0].name, filename: e.detail[0].value }
+                  ? {
+                      url: e.detail[0].name,
+                      filename: e.detail[0].value,
+                    }
                   : {}
                 : e.detail.map(({ name, value }) => ({
                     url: name,
@@ -125,7 +136,8 @@
       customButtonText={"Add attachment"}
       keyPlaceholder={"URL"}
       valuePlaceholder={"Filename"}
-      actionButtonDisabled={schema.type === FieldType.ATTACHMENT_SINGLE &&
+      actionButtonDisabled={(schema.type === FieldType.ATTACHMENT_SINGLE ||
+        schema.type === FieldType.SIGNATURE) &&
         Object.keys(value[field]).length >= 1}
     />
   </div>
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 4ff8ae994b..1a6bb86113 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { API } from "api"
   import {
     Input,
     Select,
@@ -8,11 +9,16 @@
     Label,
     RichTextField,
     TextArea,
+    CoreSignature,
+    ActionButton,
+    notifications,
   } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "helpers"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
   import Editor from "../../integration/QueryEditor.svelte"
+  import { SignatureModal } from "@budibase/frontend-core/src/components"
+  import { themeStore } from "stores/portal"
 
   export let meta
   export let value
@@ -38,8 +44,35 @@
 
   const timeStamp = resolveTimeStamp(value)
   const isTimeStamp = !!timeStamp || meta?.timeOnly
+
+  $: currentTheme = $themeStore?.theme
+  $: darkMode = !currentTheme.includes("light")
+
+  let signatureModal
 </script>
 
+<SignatureModal
+  {darkMode}
+  onConfirm={async sigCanvas => {
+    const signatureFile = sigCanvas.toFile()
+
+    let attachRequest = new FormData()
+    attachRequest.append("file", signatureFile)
+
+    try {
+      const uploadReq = await API.uploadBuilderAttachment(attachRequest)
+      const [signatureAttachment] = uploadReq
+      value = signatureAttachment
+    } catch (error) {
+      $notifications.error(error.message || "Failed to save signature")
+      value = []
+    }
+  }}
+  title={meta.name}
+  {value}
+  bind:this={signatureModal}
+/>
+
 {#if type === "options" && meta.constraints.inclusion.length !== 0}
   <Select
     {label}
@@ -58,7 +91,51 @@
     bind:value
   />
 {:else if type === "attachment"}
-  <Dropzone {label} {error} bind:value />
+  <Dropzone
+    compact
+    {label}
+    {error}
+    {value}
+    on:change={e => {
+      value = e.detail
+    }}
+  />
+{:else if type === "attachment_single"}
+  <Dropzone
+    compact
+    {label}
+    {error}
+    value={value ? [value] : []}
+    on:change={e => {
+      value = e.detail?.[0]
+    }}
+    maximum={1}
+  />
+{:else if type === "signature_single"}
+  <div class="signature">
+    <Label>{label}</Label>
+    <div class="sig-wrap" class:display={value}>
+      {#if value}
+        <CoreSignature
+          {darkMode}
+          {value}
+          editable={false}
+          on:clear={() => {
+            value = null
+          }}
+        />
+      {:else}
+        <ActionButton
+          fullWidth
+          on:click={() => {
+            signatureModal.show()
+          }}
+        >
+          Add signature
+        </ActionButton>
+      {/if}
+    </div>
+  </div>
 {:else if type === "boolean"}
   <Toggle text={label} {error} bind:value />
 {:else if type === "array" && meta.constraints.inclusion.length !== 0}
@@ -94,3 +171,22 @@
 {:else}
   <Input {label} {type} {error} bind:value disabled={readonly} />
 {/if}
+
+<style>
+  .signature :global(label.spectrum-FieldLabel) {
+    padding-top: var(--spectrum-fieldlabel-padding-top);
+    padding-bottom: var(--spectrum-fieldlabel-padding-bottom);
+  }
+  .sig-wrap.display {
+    min-height: 50px;
+    justify-content: center;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--spectrum-global-color-gray-50);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
index 26972ede16..e8e1008e3c 100644
--- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
@@ -1,6 +1,6 @@
 <script>
   import { datasources, tables, integrations, appStore } from "stores/builder"
-  import { admin } from "stores/portal"
+  import { themeStore, admin } from "stores/portal"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import { TableNames } from "constants"
   import { Grid } from "@budibase/frontend-core"
@@ -38,6 +38,9 @@
   })
   $: relationshipsEnabled = relationshipSupport(tableDatasource)
 
+  $: currentTheme = $themeStore?.theme
+  $: darkMode = !currentTheme.includes("light")
+
   const relationshipSupport = datasource => {
     const integration = $integrations[datasource?.source]
     return !isInternal && integration?.relationships !== false
@@ -56,6 +59,7 @@
 <div class="wrapper">
   <Grid
     {API}
+    {darkMode}
     datasource={gridDatasource}
     canAddRows={!isUsersTable}
     canDeleteRows={!isUsersTable}
diff --git a/packages/builder/src/components/backend/DataTable/formula.js b/packages/builder/src/components/backend/DataTable/formula.js
index b339729391..7220a5ba4f 100644
--- a/packages/builder/src/components/backend/DataTable/formula.js
+++ b/packages/builder/src/components/backend/DataTable/formula.js
@@ -9,6 +9,7 @@ const MAX_DEPTH = 1
 const TYPES_TO_SKIP = [
   FieldType.FORMULA,
   FieldType.LONGFORM,
+  FieldType.SIGNATURE_SINGLE,
   FieldType.ATTACHMENTS,
   //https://github.com/Budibase/budibase/issues/3030
   FieldType.INTERNAL,
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 4e74e38f9a..e88c28a9d9 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -412,6 +412,7 @@
         FIELDS.FORMULA,
         FIELDS.JSON,
         FIELDS.BARCODEQR,
+        FIELDS.SIGNATURE_SINGLE,
         FIELDS.BIGINT,
         FIELDS.AUTO,
       ]
diff --git a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
index 318f459f46..de56fa8ce5 100644
--- a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
@@ -54,6 +54,10 @@
       label: "Attachment",
       value: FieldType.ATTACHMENT_SINGLE,
     },
+    {
+      label: "Signature",
+      value: FieldType.SIGNATURE_SINGLE,
+    },
     {
       label: "Attachment list",
       value: FieldType.ATTACHMENTS,
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index ba5f75083a..0102d8f7a9 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -54,6 +54,7 @@
   export let autofocus = false
   export let jsBindingWrapping = true
   export let readonly = false
+  export let readonlyLineNumbers = false
 
   const dispatch = createEventDispatcher()
 
@@ -240,6 +241,9 @@
 
     if (readonly) {
       complete.push(EditorState.readOnly.of(true))
+      if (readonlyLineNumbers) {
+        complete.push(lineNumbers())
+      }
     } else {
       complete = [
         ...complete,
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 66b21e95a1..5cc6db65a0 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -25,6 +25,7 @@
   export let selectedBy = null
   export let compact = false
   export let hovering = false
+  export let disabled = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -74,6 +75,7 @@
   class:scrollable
   class:highlighted
   class:selectedBy
+  class:disabled
   on:dragend
   on:dragstart
   on:dragover
@@ -165,6 +167,9 @@
     --avatars-background: var(--spectrum-global-color-gray-300);
     color: var(--ink);
   }
+  .nav-item.disabled span {
+    color: var(--spectrum-global-color-gray-700);
+  }
   .nav-item:hover,
   .hovering {
     background-color: var(--spectrum-global-color-gray-200);
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index fb448cca8d..3a787a70cb 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -28,6 +28,12 @@
   let bindingDrawer
   let currentVal = value
 
+  let attachmentTypes = [
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.ATTACHMENTS,
+    FieldType.SIGNATURE_SINGLE,
+  ]
+
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
   $: isJS = isJSBinding(value)
@@ -105,6 +111,7 @@
     boolean: isValidBoolean,
     attachment: false,
     attachment_single: false,
+    signature_single: false,
   }
 
   const isValid = value => {
@@ -126,6 +133,7 @@
         "bigint",
         "barcodeqr",
         "attachment",
+        "signature_single",
         "attachment_single",
       ].includes(type)
     ) {
@@ -169,7 +177,7 @@
       {updateOnChange}
     />
   {/if}
-  {#if !disabled && type !== "formula" && !disabled && type !== FieldType.ATTACHMENTS && !disabled && type !== FieldType.ATTACHMENT_SINGLE}
+  {#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
     <div
       class={`icon ${getIconClass(value, type)}`}
       on:click={() => {
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 2a5483d77c..e174a2e6f7 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -76,6 +76,7 @@ const componentMap = {
   "field/array": FormFieldSelect,
   "field/json": FormFieldSelect,
   "field/barcodeqr": FormFieldSelect,
+  "field/signature_single": FormFieldSelect,
   "field/bb_reference": FormFieldSelect,
   // Some validation types are the same as others, so not all types are
   // explicitly listed here. e.g. options uses string validation
@@ -85,6 +86,8 @@ const componentMap = {
   "validation/boolean": ValidationEditor,
   "validation/datetime": ValidationEditor,
   "validation/attachment": ValidationEditor,
+  "validation/attachment_single": ValidationEditor,
+  "validation/signature_single": ValidationEditor,
   "validation/link": ValidationEditor,
   "validation/bb_reference": ValidationEditor,
 }
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index 0a52a693c3..5cd5658063 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -24,7 +24,9 @@
     parameters
   }
   $: automations = $automationStore.automations
-    .filter(a => a.definition.trigger?.stepId === TriggerStepID.APP)
+    .filter(
+      a => a.definition.trigger?.stepId === TriggerStepID.APP && !a.disabled
+    )
     .map(automation => {
       const schema = Object.entries(
         automation.definition.trigger.inputs.fields || {}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
index 9a88875140..2387fda683 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
   import { runtimeToReadableBinding } from "dataBinding"
   import { isJSBinding } from "@budibase/string-templates"
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
index 0eb74da94c..0ba7de42c2 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
@@ -100,9 +100,6 @@
       on:click={() => {
         get(store).actions.select(draggableItem.id)
       }}
-      on:mousedown={() => {
-        get(store).actions.select()
-      }}
       bind:this={anchors[draggableItem.id]}
       class:highlighted={draggableItem.id === $store.selected}
     >
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
similarity index 81%
rename from packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte
rename to packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index 39e4bc2ada..65f75af875 100644
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -3,7 +3,6 @@
   import { componentStore } from "stores/builder"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
-  import { customPositionHandler } from "."
   import ComponentSettingsSection from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
 
   export let anchor
@@ -18,76 +17,74 @@
 
   let popover
   let drawers = []
-  let open = false
+  let isOpen = false
 
   // Auto hide the component when another item is selected
   $: if (open && $draggable.selected !== componentInstance._id) {
-    popover.hide()
+    close()
   }
-
   // Open automatically if the component is marked as selected
   $: if (!open && $draggable.selected === componentInstance._id && popover) {
-    popover.show()
-    open = true
+    open()
   }
-
   $: componentDef = componentStore.getDefinition(componentInstance._component)
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
+  const open = () => {
+    isOpen = true
+    drawers = []
+    $draggable.actions.select(componentInstance._id)
+  }
+
+  const close = () => {
+    // Slight delay allows us to be able to properly toggle open/close state by
+    // clicking again on the settings icon
+    setTimeout(() => {
+      isOpen = false
+      if ($draggable.selected === componentInstance._id) {
+        $draggable.actions.select()
+      }
+    }, 10)
+  }
+
+  const toggleOpen = () => {
+    if (isOpen) {
+      close()
+    } else {
+      open()
+    }
+  }
+
   const processComponentDefinitionSettings = componentDef => {
     if (!componentDef) {
       return {}
     }
     const clone = cloneDeep(componentDef)
-
     if (typeof parseSettings === "function") {
       clone.settings = parseSettings(clone.settings)
     }
-
     return clone
   }
 
   const updateSetting = async (setting, value) => {
     const nestedComponentInstance = cloneDeep(componentInstance)
-
     const patchFn = componentStore.updateComponentSetting(setting.key, value)
     patchFn(nestedComponentInstance)
-
     dispatch("change", nestedComponentInstance)
   }
 </script>
 
-<Icon
-  name="Settings"
-  hoverable
-  size="S"
-  on:click={() => {
-    if (!open) {
-      popover.show()
-      open = true
-    }
-  }}
-/>
+<Icon name="Settings" hoverable size="S" on:click={toggleOpen} />
 
 <Popover
-  bind:this={popover}
-  on:open={() => {
-    drawers = []
-    $draggable.actions.select(componentInstance._id)
-  }}
-  on:close={() => {
-    open = false
-    if ($draggable.selected === componentInstance._id) {
-      $draggable.actions.select()
-    }
-  }}
+  open={isOpen}
+  on:close={close}
   {anchor}
   align="left-outside"
   showPopover={drawers.length === 0}
   clickOutsideOverride={drawers.length > 0}
   maxHeight={600}
   offset={18}
-  handlePostionUpdate={customPositionHandler}
 >
   <span class="popover-wrap">
     <Layout noPadding noGap>
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js b/packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js
deleted file mode 100644
index 2dc3f60185..0000000000
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
-  let { left, top, offset } = cfg
-  let percentageOffset = 30
-  // left-outside
-  left = anchorBounds.left - eleBounds.width - (offset || 5)
-
-  // shift up from the anchor, if space allows
-  let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
-  let defaultTop = anchorBounds.top - offsetPos
-
-  if (window.innerHeight - defaultTop < eleBounds.height) {
-    top = window.innerHeight - eleBounds.height - 5
-  } else {
-    top = anchorBounds.top - offsetPos
-  }
-
-  return { ...cfg, left, top }
-}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
new file mode 100644
index 0000000000..d9714c2e7a
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { ContextTooltip } from "@budibase/bbui"
+  import {
+    StringsAsDates,
+    NumbersAsDates,
+    ScalarJsonOnly,
+    Column,
+    Support,
+    NotRequired,
+    StringsAsNumbers,
+    DatesAsNumbers,
+  } from "./subjects"
+  import subjects from "../subjects"
+
+  export let anchor
+  export let schema
+  export let columnName
+  export let subject = subjects.none
+</script>
+
+<ContextTooltip visible={subject !== subjects.none} {anchor} offset={20}>
+  <div class="explanationModalContent">
+    {#if subject === subjects.column}
+      <Column {columnName} {schema} />
+    {:else if subject === subjects.support}
+      <Support />
+    {:else if subject === subjects.stringsAsNumbers}
+      <StringsAsNumbers />
+    {:else if subject === subjects.notRequired}
+      <NotRequired />
+    {:else if subject === subjects.datesAsNumbers}
+      <DatesAsNumbers />
+    {:else if subject === subjects.scalarJsonOnly}
+      <ScalarJsonOnly {columnName} {schema} />
+    {:else if subject === subjects.numbersAsDates}
+      <NumbersAsDates {columnName} />
+    {:else if subject === subjects.stringsAsDates}
+      <StringsAsDates {columnName} />
+    {/if}
+  </div>
+</ContextTooltip>
+
+<style>
+  .explanationModalContent {
+    max-width: 300px;
+    padding: 16px 12px 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
new file mode 100644
index 0000000000..7fbac09827
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
@@ -0,0 +1,147 @@
+<script>
+  import { tables } from "stores/builder"
+  import {
+    BindingValue,
+    Block,
+    Subject,
+    JSONValue,
+    Property,
+    Section,
+  } from "./components"
+
+  export let schema
+  export let columnName
+
+  const parseDate = isoString => {
+    if ([null, undefined, ""].includes(isoString)) {
+      return "None"
+    }
+
+    const unixTime = Date.parse(isoString)
+    const date = new Date(unixTime)
+
+    return date.toLocaleString()
+  }
+</script>
+
+<Subject>
+  <div class="heading" slot="heading">
+    Column Overview for <Block>{columnName}</Block>
+  </div>
+  <Section>
+    {#if schema.type === "string"}
+      <Property
+        name="Max Length"
+        value={schema?.constraints?.length?.maximum ?? "None"}
+      />
+    {:else if schema.type === "datetime"}
+      <Property
+        name="Earliest"
+        value={parseDate(schema?.constraints?.datetime?.earliest)}
+      />
+      <Property
+        name="Latest"
+        value={parseDate(schema?.constraints?.datetime?.latest)}
+      />
+      <Property
+        name="Ignore time zones"
+        value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+      />
+      <Property
+        name="Date only"
+        value={schema?.dateOnly === true ? "Yes" : "No"}
+      />
+    {:else if schema.type === "number"}
+      <Property
+        name="Min Value"
+        value={[null, undefined, ""].includes(
+          schema?.constraints?.numericality?.greaterThanOrEqualTo
+        )
+          ? "None"
+          : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+      />
+      <Property
+        name="Max Value"
+        value={[null, undefined, ""].includes(
+          schema?.constraints?.numericality?.lessThanOrEqualTo
+        )
+          ? "None"
+          : schema?.constraints?.numericality?.lessThanOrEqualTo}
+      />
+    {:else if schema.type === "array"}
+      {#each schema?.constraints?.inclusion ?? [] as option, index}
+        <Property name={`Option ${index + 1}`} truncate>
+          <span
+            style:background-color={schema?.optionColors?.[option]}
+            class="optionCircle"
+          />{option}
+        </Property>
+      {/each}
+    {:else if schema.type === "options"}
+      {#each schema?.constraints?.inclusion ?? [] as option, index}
+        <Property name={`Option ${index + 1}`} truncate>
+          <span
+            style:background-color={schema?.optionColors?.[option]}
+            class="optionCircle"
+          />{option}
+        </Property>
+      {/each}
+    {:else if schema.type === "json"}
+      <Property name="Schema">
+        <JSONValue value={JSON.stringify(schema?.schema ?? {}, null, 2)} />
+      </Property>
+    {:else if schema.type === "formula"}
+      <Property name="Formula">
+        <BindingValue value={schema?.formula} />
+      </Property>
+      <Property
+        name="Formula type"
+        value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
+      />
+    {:else if schema.type === "link"}
+      <Property name="Type" value={schema?.relationshipType} />
+      <Property
+        name="Related Table"
+        value={$tables?.list?.find(table => table._id === schema?.tableId)
+          ?.name}
+      />
+      <Property name="Column in Related Table" value={schema?.fieldName} />
+    {:else if schema.type === "bb_reference"}
+      <Property
+        name="Allow multiple users"
+        value={schema?.relationshipType === "many-to-many" ? "Yes" : "No"}
+      />
+    {/if}
+    <Property
+      name="Required"
+      value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
+    />
+  </Section>
+</Subject>
+
+<style>
+  .heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .heading > :global(.block) {
+    margin-left: 4px;
+    flex-grow: 0;
+    flex-shrink: 1;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .optionCircle {
+    display: inline-block;
+    background-color: hsla(0, 1%, 50%, 0.3);
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
new file mode 100644
index 0000000000..e5cab5dc15
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -0,0 +1,63 @@
+<script>
+  import { onMount } from "svelte"
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
+
+  let timestamp = Date.now()
+
+  onMount(() => {
+    let run = true
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now()
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp()
+
+    return () => {
+      run = false
+    }
+  })
+</script>
+
+<Subject heading="Dates as Numbers">
+  <Section>
+    A datetime value can be used in place of a numeric value, but it will be
+    converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds
+    since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>
+        {new Date(946684800000).toLocaleString()}
+      </Block>
+      <span class="separator">{"->"} </span><Block>946684800000</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>
+        {new Date(1577836800000).toLocaleString()}
+      </Block>
+      <span class="separator">{"->"} </span><Block>1577836800000</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>Now</Block><span class="separator">{"->"} </span><Block
+        >{timestamp}</Block
+      >
+    </ExampleLine>
+  </ExampleSection>
+</Subject>
+
+<style>
+  .separator {
+    margin: 0 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
new file mode 100644
index 0000000000..f28e9a227e
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { Block, Subject, Section } from "./components"
+</script>
+
+<Subject heading="Required Constraint">
+  <Section>
+    A <Block>required</Block> constraint can be applied to columns to ensure a value
+    is always present. If a column doesn't have this constraint, then its value for
+    a particular row could he missing.
+  </Section>
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
new file mode 100644
index 0000000000..d69228544e
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { onMount } from "svelte"
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
+
+  let timestamp = Date.now()
+
+  onMount(() => {
+    let run = true
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now()
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp()
+
+    return () => {
+      run = false
+    }
+  })
+</script>
+
+<Subject heading="Numbers as Dates">
+  <Section>
+    A number value can be used in place of a datetime value, but it will be
+    parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds
+    since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>946684800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(946684800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>1577836800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(1577836800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>{timestamp}</Block>
+      <span class="separator">{"->"}</span>
+      <Block>Now</Block>
+    </ExampleLine>
+  </ExampleSection>
+</Subject>
+
+<style>
+  .separator {
+    margin: 0 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
new file mode 100644
index 0000000000..11fe3c7838
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
@@ -0,0 +1,71 @@
+<script>
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
+
+  export let schema
+  export let columnName
+
+  const maxScalarDescendantsToFind = 3
+
+  const getScalarDescendants = schema => {
+    const newScalarDescendants = []
+
+    const getScalarDescendantFromSchema = (path, schema) => {
+      if (newScalarDescendants.length >= maxScalarDescendantsToFind) {
+        return
+      }
+
+      if (["string", "number", "boolean"].includes(schema.type)) {
+        newScalarDescendants.push({ name: path.join("."), type: schema.type })
+      } else if (schema.type === "json") {
+        Object.entries(schema.schema ?? {}).forEach(
+          ([childName, childSchema]) =>
+            getScalarDescendantFromSchema([...path, childName], childSchema)
+        )
+      }
+    }
+
+    Object.entries(schema?.schema ?? {}).forEach(([childName, childSchema]) =>
+      getScalarDescendantFromSchema([columnName, childName], childSchema)
+    )
+
+    return newScalarDescendants
+  }
+
+  $: scalarDescendants = getScalarDescendants(schema)
+</script>
+
+<Subject heading="Using Scalar JSON Values">
+  <Section>
+    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block
+    >, <Block>string</Block> or <Block>boolean</Block> values nested within said
+    object can be if they are otherwise compatible with the input. These scalar values
+    can be selected from the same menu as this parent and take the form <Block
+      >parent.child</Block
+    >.
+  </Section>
+
+  {#if scalarDescendants.length > 0}
+    <ExampleSection heading="Examples scalar descendants of this object:">
+      {#each scalarDescendants as descendant}
+        <ExampleLine>
+          <Block truncate>{descendant.name}</Block><span class="separator"
+            >-</span
+          ><Block truncate noShrink>{descendant.type}</Block>
+        </ExampleLine>
+      {/each}
+    </ExampleSection>
+  {/if}
+</Subject>
+
+<style>
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
new file mode 100644
index 0000000000..7303eac7cb
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
@@ -0,0 +1,107 @@
+<script>
+  import { onMount } from "svelte"
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
+
+  let timestamp = Date.now()
+  $: iso = new Date(timestamp).toISOString()
+
+  onMount(() => {
+    let run = true
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now()
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp()
+
+    return () => {
+      run = false
+    }
+  })
+</script>
+
+<Subject heading="Strings as Dates">
+  <Section>
+    A string value can be used in place of a datetime value, but it will be
+    parsed as:
+  </Section>
+  <Section>
+    A <Block>UNIX time</Block> timestamp, which is the number of milliseconds since
+    Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>946684800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(946684800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>1577836800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(1577836800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>{timestamp}</Block>
+      <span class="separator">{"->"}</span>
+      <Block>Now</Block>
+    </ExampleLine>
+  </ExampleSection>
+  <Section>
+    An <Block>ISO 8601</Block> datetime string, which represents an exact moment
+    in time as well as the potentional to store the timezone it occured in.
+  </Section>
+  <div class="isoExamples">
+    <ExampleSection heading="Examples:">
+      <ExampleLine>
+        <Block>2000-01-01T00:00:00.000Z</Block>
+        <span class="separator">↓</span>
+        <Block>
+          {new Date(946684800000).toLocaleString()}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+        <Block>2000-01-01T00:00:00.000Z</Block>
+        <span class="separator">↓</span>
+        <Block>
+          {new Date(1577836800000).toLocaleString()}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+        <Block>{iso}</Block>
+        <span class="separator">↓</span>
+        <Block>Now</Block>
+      </ExampleLine>
+    </ExampleSection>
+  </div>
+</Subject>
+
+<style>
+  .separator {
+    margin: 0 5px;
+  }
+
+  .isoExamples :global(.block) {
+    word-break: break-all;
+  }
+
+  .isoExamples :global(.exampleLine) {
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 16px;
+    width: 162px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
new file mode 100644
index 0000000000..e30a450d80
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
@@ -0,0 +1,56 @@
+<script>
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
+</script>
+
+<Subject heading="Text as Numbers">
+  <Section>
+    Text can be used in place of numbers in certain scenarios, but care needs to
+    be taken; if the value isn't purely numerical it may be converted in an
+    unexpected way.
+  </Section>
+
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block
+      >
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100k"</Block><span class="separator">{"->"}</span><Block
+        >100</Block
+      >
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100,000"</Block><span class="separator">{"->"}</span><Block
+        >100</Block
+      >
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100 million"</Block><span class="separator">{"->"}</span><Block
+        >100</Block
+      >
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100.9"</Block><span class="separator">{"->"}</span><Block
+        >100.9</Block
+      >
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"One hundred"</Block><span class="separator">{"->"}</span><Block
+        >Error</Block
+      >
+    </ExampleLine>
+  </ExampleSection>
+</Subject>
+
+<style>
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
new file mode 100644
index 0000000000..0419c0ad16
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { InfoWord } from "../../typography"
+  import { Subject, Section } from "./components"
+</script>
+
+<Subject heading="Data/Component Compatibility">
+  <Section>
+    <InfoWord icon="CheckmarkCircle" color="var(--green)" text="Compatible" />
+    <span class="body"
+      >Fully compatible with the input as long as the data is present.</span
+    >
+  </Section>
+  <Section>
+    <InfoWord
+      icon="AlertCheck"
+      color="var(--yellow)"
+      text="Partially compatible"
+    />
+    <span class="body"
+      >Partially compatible with the input, but beware of other caveats
+      mentioned.</span
+    >
+  </Section>
+  <Section>
+    <InfoWord icon="Alert" color="var(--red)" text="Not compatible" />
+    <span class="body">Incompatible with the component.</span>
+  </Section>
+</Subject>
+
+<style>
+  .body {
+    display: block;
+    margin-top: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
new file mode 100644
index 0000000000..811283ba51
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { decodeJSBinding } from "@budibase/string-templates"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import { EditorModes } from "components/common/CodeEditor"
+  import {
+    runtimeToReadableBinding,
+    getDatasourceForProvider,
+  } from "dataBinding"
+  import { tables, selectedScreen, selectedComponent } from "stores/builder"
+  import { getBindings } from "components/backend/DataTable/formula"
+
+  export let value
+  $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
+  $: tableId = datasource.tableId
+  $: table = $tables?.list?.find(table => table._id === tableId)
+  $: bindings = getBindings({ table })
+
+  $: readableBinding = runtimeToReadableBinding(bindings, value)
+
+  $: isJs = value?.startsWith?.("{{ js ")
+</script>
+
+<div class="editor">
+  <CodeEditor
+    readonly
+    readonlyLineNumbers
+    value={isJs ? decodeJSBinding(readableBinding) : readableBinding}
+    jsBindingWrapping={isJs}
+    mode={isJs ? EditorModes.JS : EditorModes.Handlebars}
+  />
+</div>
+
+<style>
+  .editor {
+    border: 1px solid var(--grey-2);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
new file mode 100644
index 0000000000..449b40304d
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
@@ -0,0 +1,30 @@
+<script>
+  export let truncate = false
+  export let noShrink = false
+</script>
+
+<span class:truncate class:noShrink class="block">
+  <slot />
+</span>
+
+<style>
+  .block {
+    font-style: italic;
+    border-radius: 1px;
+    padding: 0px 5px 0px 3px;
+    border-radius: 1px;
+    background-color: var(--grey-3);
+    color: var(--ink);
+    word-break: break-word;
+  }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .noShrink {
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
new file mode 100644
index 0000000000..6dd3e10a39
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
@@ -0,0 +1,12 @@
+<li>
+  <div class="exampleLine">
+    <slot />
+  </div>
+</li>
+
+<style>
+  .exampleLine {
+    display: flex;
+    margin-bottom: 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
new file mode 100644
index 0000000000..4da4f5141b
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
@@ -0,0 +1,32 @@
+<script>
+  import Section from "./Section.svelte"
+
+  export let heading
+</script>
+
+<Section>
+  <span class="exampleSectionHeading">
+    <slot name="heading">
+      {heading}
+    </slot>
+  </span>
+  <ul>
+    <slot />
+  </ul>
+</Section>
+
+<style>
+  .exampleSectionHeading {
+    display: inline-block;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  ul {
+    padding: 0 0 0 23px;
+    margin: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
new file mode 100644
index 0000000000..4703398b2d
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
@@ -0,0 +1,22 @@
+<script>
+  export let value
+</script>
+
+<pre class="pre">
+  {value}
+</pre>
+
+<style>
+  .pre {
+    border: 1px solid var(--grey-2);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 0;
+    margin-top: 3px;
+    padding: 4px;
+    border-radius: 3px;
+    width: 250px;
+    box-sizing: border-box;
+    background-color: black;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
new file mode 100644
index 0000000000..8d6e853ab4
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
@@ -0,0 +1,49 @@
+<script>
+  export let name
+  export let value
+  export let truncate = false
+</script>
+
+<div class:truncate class="property">
+  <span class="propertyName">
+    <slot name="name">
+      {name}
+    </slot>
+  </span>
+  <span class="propertyDivider">-</span>
+  <span class="propertyValue">
+    <slot>
+      {value}
+    </slot>
+  </span>
+</div>
+
+<style>
+  .property {
+    max-width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .truncate {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .propertyName {
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .propertyDivider {
+    padding: 0 4px;
+    flex-shrink: 0;
+  }
+
+  .propertyValue {
+    word-break: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Section.svelte
new file mode 100644
index 0000000000..486e111725
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Section.svelte
@@ -0,0 +1,11 @@
+<div class="section">
+  <slot />
+</div>
+
+<style>
+  .section {
+    line-height: 20px;
+    margin-bottom: 13px;
+    overflow: hidden;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
new file mode 100644
index 0000000000..4e21160cae
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let heading = ""
+  let body
+
+  const handleScroll = e => {
+    if (!body) return
+
+    body.scrollTo({ top: body.scrollTop + e.deltaY, behavior: "smooth" })
+  }
+
+  onMount(() => {
+    window.addEventListener("wheel", handleScroll)
+
+    return () => {
+      window.removeEventListener("wheel", handleScroll)
+    }
+  })
+</script>
+
+<div class="heading">
+  <span class="heading">
+    <slot name="heading">
+      {heading}
+    </slot>
+  </span>
+</div>
+<div class="divider" />
+<div bind:this={body} class="body">
+  <slot />
+</div>
+
+<style>
+  .heading {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 12px 0 12px;
+  }
+
+  .body {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/index.js
new file mode 100644
index 0000000000..d174f4d6cc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/index.js
@@ -0,0 +1,8 @@
+export { default as Subject } from "./Subject.svelte"
+export { default as Property } from "./Property.svelte"
+export { default as JSONValue } from "./JSONValue.svelte"
+export { default as BindingValue } from "./BindingValue.svelte"
+export { default as Section } from "./Section.svelte"
+export { default as Block } from "./Block.svelte"
+export { default as ExampleSection } from "./ExampleSection.svelte"
+export { default as ExampleLine } from "./ExampleLine.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
new file mode 100644
index 0000000000..c7f54d6415
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
@@ -0,0 +1,8 @@
+export { default as Column } from "./Column.svelte"
+export { default as NotRequired } from "./NotRequired.svelte"
+export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
+export { default as Support } from "./Support.svelte"
+export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
+export { default as ScalarJsonOnly } from "./ScalarJsonOnly.svelte"
+export { default as StringsAsDates } from "./StringsAsDates.svelte"
+export { default as NumbersAsDates } from "./NumbersAsDates.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
new file mode 100644
index 0000000000..bc45e410c9
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -0,0 +1,102 @@
+<script>
+  import DetailsModal from "./DetailsModal/index.svelte"
+  import {
+    messages as messageConstants,
+    getExplanationMessagesAndSupport,
+    getExplanationWithPresets,
+  } from "./explanation"
+  import {
+    StringAsDate,
+    NumberAsDate,
+    Column,
+    Support,
+    NotRequired,
+    StringAsNumber,
+    JSONPrimitivesOnly,
+    DateAsNumber,
+  } from "./lines"
+  import subjects from "./subjects"
+  import { appStore } from "stores/builder"
+
+  export let explanation
+  export let columnIcon
+  export let columnType
+  export let columnName
+
+  export let tableHref = () => {}
+
+  export let schema
+
+  $: explanationWithPresets = getExplanationWithPresets(
+    explanation,
+    $appStore.typeSupportPresets
+  )
+  let support
+  let messages = []
+
+  $: {
+    const explanationMessagesAndSupport = getExplanationMessagesAndSupport(
+      schema,
+      explanationWithPresets
+    )
+    support = explanationMessagesAndSupport.support
+    messages = explanationMessagesAndSupport.messages
+  }
+
+  let root = null
+
+  let detailsModalSubject = subjects.none
+
+  const setExplanationSubject = option => {
+    detailsModalSubject = option
+    root = root
+  }
+</script>
+
+<div bind:this={root} class="tooltipContents">
+  <Column
+    {columnName}
+    {columnIcon}
+    {columnType}
+    {tableHref}
+    {setExplanationSubject}
+  />
+  <Support {support} {setExplanationSubject} />
+  {#if messages.includes(messageConstants.stringAsNumber)}
+    <StringAsNumber {setExplanationSubject} />
+  {/if}
+  {#if messages.includes(messageConstants.notRequired)}
+    <NotRequired {setExplanationSubject} />
+  {/if}
+  {#if messages.includes(messageConstants.jsonPrimitivesOnly)}
+    <JSONPrimitivesOnly {setExplanationSubject} />
+  {/if}
+  {#if messages.includes(messageConstants.dateAsNumber)}
+    <DateAsNumber {setExplanationSubject} />
+  {/if}
+  {#if messages.includes(messageConstants.numberAsDate)}
+    <NumberAsDate {setExplanationSubject} />
+  {/if}
+  {#if messages.includes(messageConstants.stringAsDate)}
+    <StringAsDate {setExplanationSubject} />
+  {/if}
+</div>
+
+{#if detailsModalSubject !== subjects.none}
+  <DetailsModal
+    {columnName}
+    anchor={root}
+    {schema}
+    subject={detailsModalSubject}
+  />
+{/if}
+
+<style>
+  .tooltipContents {
+    max-width: 450px;
+    display: block;
+    padding: 20px 16px 10px;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
new file mode 100644
index 0000000000..4e024c67fc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
@@ -0,0 +1,100 @@
+export const messages = {
+  jsonPrimitivesOnly: Symbol("explanation-json-primitives-only"),
+  stringAsNumber: Symbol("explanation-string-as-number"),
+  dateAsNumber: Symbol("explanation-date-as-number"),
+  numberAsDate: Symbol("explanation-number-as-date"),
+  stringAsDate: Symbol("explanation-string-as-date"),
+  notRequired: Symbol("explanation-not-required"),
+  contextError: Symbol("explanation-context-error"),
+}
+
+export const support = {
+  unsupported: Symbol("explanation-unsupported"),
+  partialSupport: Symbol("explanation-partialSupport"),
+  supported: Symbol("explanation-supported"),
+}
+
+const getSupport = (type, explanation) => {
+  if (!explanation?.typeSupport) {
+    return support.supported
+  }
+
+  if (
+    explanation?.typeSupport?.supported?.find(
+      mapping => mapping === type || mapping?.type === type
+    )
+  ) {
+    return support.supported
+  }
+
+  if (
+    explanation?.typeSupport?.partialSupport?.find(
+      mapping => mapping === type || mapping?.type === type
+    )
+  ) {
+    return support.partialSupport
+  }
+
+  return support.unsupported
+}
+
+const getSupportMessage = (type, explanation) => {
+  if (!explanation?.typeSupport) {
+    return null
+  }
+
+  const supported = explanation?.typeSupport?.supported?.find(
+    mapping => mapping?.type === type
+  )
+  if (supported) {
+    return messages[supported?.message]
+  }
+
+  const partialSupport = explanation?.typeSupport?.partialSupport?.find(
+    mapping => mapping?.type === type
+  )
+  if (partialSupport) {
+    return messages[partialSupport?.message]
+  }
+
+  const unsupported = explanation?.typeSupport?.unsupported?.find(
+    mapping => mapping?.type === type
+  )
+  if (unsupported) {
+    return messages[unsupported?.message]
+  }
+
+  return null
+}
+
+export const getExplanationMessagesAndSupport = (fieldSchema, explanation) => {
+  try {
+    const explanationMessagesAndSupport = {
+      support: getSupport(fieldSchema.type, explanation),
+      messages: [getSupportMessage(fieldSchema.type, explanation)],
+    }
+
+    const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
+    if (!isRequired) {
+      explanationMessagesAndSupport.messages.push(messages.notRequired)
+    }
+
+    return explanationMessagesAndSupport
+  } catch (e) {
+    return {
+      support: support.partialSupport,
+      messages: [messages.contextError],
+    }
+  }
+}
+
+export const getExplanationWithPresets = (explanation, presets) => {
+  if (explanation?.typeSupport?.preset) {
+    return {
+      ...explanation,
+      typeSupport: presets[explanation?.typeSupport?.preset],
+    }
+  }
+
+  return explanation
+}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/index.js b/packages/builder/src/components/design/settings/controls/Explanation/index.js
new file mode 100644
index 0000000000..5780c1de14
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/index.js
@@ -0,0 +1 @@
+export { default as Explanation } from "./Explanation.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
new file mode 100644
index 0000000000..9c3b87f8b9
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
@@ -0,0 +1,84 @@
+<script>
+  import {
+    Line,
+    InfoWord,
+    DocumentationLink,
+    Text,
+    Period,
+  } from "../typography"
+  import subjects from "../subjects"
+
+  export let columnName
+  export let columnIcon
+  export let columnType
+  export let tableHref
+  export let setExplanationSubject
+
+  const getDocLink = columnType => {
+    if (columnType === "Number") {
+      return "https://docs.budibase.com/docs/number"
+    }
+    if (columnType === "Text") {
+      return "https://docs.budibase.com/docs/text"
+    }
+    if (columnType === "Attachment") {
+      return "https://docs.budibase.com/docs/attachments"
+    }
+    if (columnType === "Multi-select") {
+      return "https://docs.budibase.com/docs/multi-select"
+    }
+    if (columnType === "JSON") {
+      return "https://docs.budibase.com/docs/json"
+    }
+    if (columnType === "Date/Time") {
+      return "https://docs.budibase.com/docs/datetime"
+    }
+    if (columnType === "User") {
+      return "https://docs.budibase.com/docs/user"
+    }
+    if (columnType === "QR") {
+      return "https://docs.budibase.com/docs/barcodeqr"
+    }
+    if (columnType === "Relationship") {
+      return "https://docs.budibase.com/docs/relationships"
+    }
+    if (columnType === "Formula") {
+      return "https://docs.budibase.com/docs/formula"
+    }
+    if (columnType === "Options") {
+      return "https://docs.budibase.com/docs/options"
+    }
+    if (columnType === "BigInt") {
+      // No BigInt docs
+      return null
+    }
+    if (columnType === "Boolean") {
+      return "https://docs.budibase.com/docs/boolean-truefalse"
+    }
+    if (columnType === "Signature") {
+      // No Signature docs
+      return null
+    }
+
+    return null
+  }
+
+  $: docLink = getDocLink(columnType)
+</script>
+
+<Line noWrap>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.column)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    href={tableHref}
+    text={columnName}
+  />
+  <Text value=" is a " />
+  <DocumentationLink
+    disabled={docLink === null}
+    href={docLink}
+    icon={columnIcon}
+    text={`${columnType} column`}
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
new file mode 100644
index 0000000000..ba5eb9b0e1
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, Text, Period } from "../typography"
+  import subjects from "../subjects"
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be converted to a " />
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
new file mode 100644
index 0000000000..2286c09044
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { Line, InfoWord, Text, Period } from "../typography"
+  import subjects from "../subjects"
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    >Scalar JSON values</InfoWord
+  >
+  <Text
+    value=" can be used with this input if their individual types are supported"
+  />
+  <Period />
+</Line>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
new file mode 100644
index 0000000000..e705bd68e6
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text } from "../typography"
+  import subjects from "../subjects"
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="No " />
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="required"
+  />
+  <Space />
+  <DocumentationLink
+    icon="DataUnavailable"
+    href="https://docs.budibase.com/docs/budibasedb#constraints"
+    text="Constraint"
+  />
+  <Text value=", so values may be missing." />
+</Line>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
new file mode 100644
index 0000000000..c6413c13a5
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, Text, Period } from "../typography"
+  import subjects from "../subjects"
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be treated as a " />
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.numbersAsDates)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
new file mode 100644
index 0000000000..72267b6f47
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, Text, Period } from "../typography"
+  import subjects from "../subjects"
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be treated as a " />
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.stringsAsDates)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time or ISO 8601 value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
new file mode 100644
index 0000000000..937545c1c3
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, Text, Period } from "../typography"
+  import subjects from "../subjects"
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be converted to a number, ignoring any " />
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="non-numerical values"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
new file mode 100644
index 0000000000..848ab208fb
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Text } from "../typography"
+  import subjects from "../subjects"
+  import * as explanation from "../explanation"
+
+  export let setExplanationSubject
+  export let support
+
+  const getIcon = support => {
+    if (support === explanation.support.unsupported) {
+      return "Alert"
+    } else if (support === explanation.support.supported) {
+      return "CheckmarkCircle"
+    }
+
+    return "AlertCheck"
+  }
+
+  const getColor = support => {
+    if (support === explanation.support.unsupported) {
+      return "var(--red)"
+    } else if (support === explanation.support.supported) {
+      return "var(--green)"
+    }
+
+    return "var(--yellow)"
+  }
+
+  const getText = support => {
+    if (support === explanation.support.unsupported) {
+      return "Not compatible"
+    } else if (support === explanation.support.supported) {
+      return "Compatible"
+    }
+
+    return "Partially compatible"
+  }
+
+  $: icon = getIcon(support)
+  $: color = getColor(support)
+  $: text = getText(support)
+</script>
+
+<Line>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject(subjects.support)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    {icon}
+    {color}
+    {text}
+  />
+  <Text value=" with this " />
+  <DocumentationLink
+    href="https://docs.budibase.com/docs/chart"
+    icon="GraphPie"
+    text="Chart component"
+  />
+  <Text value=" input." />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
new file mode 100644
index 0000000000..beff239398
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
@@ -0,0 +1,8 @@
+export { default as Column } from "./Column.svelte"
+export { default as NotRequired } from "./NotRequired.svelte"
+export { default as StringAsNumber } from "./StringAsNumber.svelte"
+export { default as Support } from "./Support.svelte"
+export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
+export { default as DateAsNumber } from "./DateAsNumber.svelte"
+export { default as NumberAsDate } from "./NumberAsDate.svelte"
+export { default as StringAsDate } from "./StringAsDate.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
new file mode 100644
index 0000000000..1f94fa6fd0
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
@@ -0,0 +1,13 @@
+const subjects = {
+  column: Symbol("details-modal-column"),
+  support: Symbol("details-modal-support"),
+  stringsAsNumbers: Symbol("details-modal-strings-as-numbers"),
+  datesAsNumbers: Symbol("details-modal-dates-as-numbers"),
+  numbersAsDates: Symbol("explanation-numbers-as-dates"),
+  stringsAsDates: Symbol("explanation-strings-as-dates"),
+  notRequired: Symbol("details-modal-not-required"),
+  scalarJsonOnly: Symbol("explanation-scalar-json-only"),
+  none: Symbol("details-modal-none"),
+}
+
+export default subjects
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Comma.svelte
new file mode 100644
index 0000000000..f16bd16054
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Comma.svelte
@@ -0,0 +1,14 @@
+<span class="comma">,</span>
+
+<style>
+  .comma {
+    color: var(--grey-6);
+    font-size: 17px;
+    display: inline block;
+    margin-left: 2px;
+    margin-right: 2px;
+    flex-shrink: 0;
+    position: relative;
+    bottom: 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
new file mode 100644
index 0000000000..55b9732d4a
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let icon
+  export let text
+  export let href
+  export let disabled = false
+</script>
+
+<a
+  class:disabled
+  tabindex="0"
+  {href}
+  rel="noopener noreferrer"
+  target="_blank"
+  class="link"
+>
+  <Icon size="XS" name={icon} />
+  <span class="text">
+    <slot>
+      {text}
+    </slot>
+  </span>
+</a>
+
+<style>
+  .text {
+    color: var(--ink);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .link {
+    display: inline-flex;
+    box-sizing: border-box;
+    padding: 1px 0 2px;
+    filter: brightness(100%);
+    align-items: center;
+
+    overflow: hidden;
+    flex-shrink: 0;
+    border-radius: 0;
+    border-bottom: 1px solid var(--blue);
+    transition: filter 300ms;
+    margin-right: 0px;
+  }
+
+  .link:hover {
+    filter: brightness(120%);
+  }
+
+  .disabled {
+    filter: brightness(100%);
+    border-bottom: 1px solid var(--grey-6);
+  }
+
+  .link :global(svg) {
+    margin-right: 3px;
+    color: var(--blue);
+  }
+
+  .disabled :global(svg) {
+    color: var(--grey-6);
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
new file mode 100644
index 0000000000..cac12cbfb5
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
@@ -0,0 +1,78 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let icon = null
+  export let color = null
+  export let text
+  export let href = null
+</script>
+
+{#if href !== null}
+  <a
+    tabindex="0"
+    {href}
+    rel="noopener noreferrer"
+    target="_blank"
+    class="infoWord"
+    style:color
+    style:border-color={color}
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if icon}
+      <Icon size="XS" name={icon} />
+    {/if}
+    <span class="text">
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </a>
+{:else}
+  <div
+    role="tooltip"
+    class="infoWord"
+    style:color
+    style:border-color={color}
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if icon}
+      <Icon size="XS" name={icon} />
+    {/if}
+    <span class="text">
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </div>
+{/if}
+
+<style>
+  .infoWord {
+    display: inline-flex;
+    box-sizing: border-box;
+    padding: 1px 0 2px;
+    filter: brightness(100%);
+    overflow: hidden;
+    transition: filter 300ms;
+    align-items: center;
+    border-bottom: 1px solid var(--grey-6);
+  }
+
+  .infoWord:hover {
+    filter: brightness(120%);
+  }
+
+  .infoWord :global(svg) {
+    color: inherit;
+    margin-right: 4px;
+  }
+
+  .text {
+    color: var(--ink);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
new file mode 100644
index 0000000000..5d28ba0423
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
@@ -0,0 +1,41 @@
+<script>
+  export let noWrap = false
+</script>
+
+<div class="line">
+  <span class="bullet">•</span>
+  <div class="content" class:noWrap>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .line {
+    color: var(--ink);
+    align-items: flex-start;
+    display: flex;
+
+    margin-bottom: 10px;
+  }
+
+  .bullet {
+    color: var(--grey-6);
+    font-size: 17px;
+    display: inline block;
+    margin-right: 10px;
+  }
+
+  .content {
+    line-height: 17px;
+    min-width: 0;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 3px;
+  }
+
+  .noWrap {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Period.svelte
new file mode 100644
index 0000000000..d1bbafe6a6
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Period.svelte
@@ -0,0 +1,13 @@
+<span class="period">.</span>
+
+<style>
+  .period {
+    color: var(--grey-6);
+    font-size: 20px;
+    display: inline block;
+    margin-left: 2px;
+    flex-shrink: 0;
+    position: relative;
+    bottom: 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Space.svelte
new file mode 100644
index 0000000000..b88831d760
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Space.svelte
@@ -0,0 +1,9 @@
+<span class="space">{" "}</span>
+
+<style>
+  .space {
+    white-space: pre;
+    width: 3px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
new file mode 100644
index 0000000000..6562c9e864
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
@@ -0,0 +1,64 @@
+<script>
+  import Comma from "./Comma.svelte"
+  import Period from "./Period.svelte"
+  import Space from "./Space.svelte"
+
+  export let value = null
+
+  const punctuation = [" ", ",", "."]
+
+  // TODO regex might work here now
+  const getWords = value => {
+    if (typeof value !== "string") {
+      return []
+    }
+
+    const newWords = []
+    let lastIndex = 0
+
+    const makeWord = i => {
+      // No word to make, multiple spaces, spaces at start of text etc
+      if (i - lastIndex > 0) {
+        newWords.push(value.substring(lastIndex, i))
+      }
+
+      lastIndex = i + 1
+    }
+
+    value.split("").forEach((character, i) => {
+      if (punctuation.includes(character)) {
+        makeWord(i)
+        newWords.push(character)
+      }
+    })
+
+    makeWord(value.length)
+
+    return newWords
+  }
+
+  $: words = getWords(value)
+</script>
+
+{#each words as word}
+  {#if word === " "}
+    <Space />
+  {:else if word === ","}
+    <Comma />
+  {:else if word === "."}
+    <Period />
+  {:else}
+    <span class="text">
+      {word}
+    </span>
+  {/if}
+{/each}
+
+<style>
+  .text {
+    /* invisible properties to match other inline text elements that do have borders. If we don't match here we run into subpixel issues */
+    box-sizing: border-box;
+    border-bottom: 1px solid transparent;
+    padding: 1px 0 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/index.js b/packages/builder/src/components/design/settings/controls/Explanation/typography/index.js
new file mode 100644
index 0000000000..102b65190d
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/index.js
@@ -0,0 +1,7 @@
+export { default as Space } from "./Space.svelte"
+export { default as Comma } from "./Comma.svelte"
+export { default as Period } from "./Period.svelte"
+export { default as Text } from "./Text.svelte"
+export { default as InfoWord } from "./InfoWord.svelte"
+export { default as DocumentationLink } from "./DocumentationLink.svelte"
+export { default as Line } from "./Line.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
index 771bcf20e0..27590a9858 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
index d41967061c..26aa5930a4 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
@@ -41,6 +41,7 @@ export const FieldTypeToComponentMap = {
   [FieldType.BOOLEAN]: "booleanfield",
   [FieldType.LONGFORM]: "longformfield",
   [FieldType.DATETIME]: "datetimefield",
+  [FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
   [FieldType.ATTACHMENTS]: "attachmentfield",
   [FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
   [FieldType.LINK]: "relationshipfield",
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index e50a0e8030..15b67ded18 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -1,12 +1,22 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { Select, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
+  import { Explanation } from "./Explanation"
+  import { debounce } from "lodash"
+  import { params } from "@roxi/routify"
+  import { Constants } from "@budibase/frontend-core"
+  import { FIELDS } from "constants/backend"
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let explanation
+
+  let contextTooltipAnchor = null
+  let currentOption = null
+  let contextTooltipVisible = false
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
@@ -32,6 +42,77 @@
     boundValue = getValidValue(value.detail, options)
     dispatch("change", boundValue)
   }
+
+  const updateTooltip = debounce((e, option) => {
+    if (option == null) {
+      contextTooltipVisible = false
+    } else {
+      contextTooltipAnchor = e?.target
+      currentOption = option
+      contextTooltipVisible = true
+    }
+  }, 200)
+
+  const onOptionMouseenter = (e, option) => {
+    updateTooltip(e, option)
+  }
+
+  const onOptionMouseleave = e => {
+    updateTooltip(e, null)
+  }
+  const getOptionIcon = optionKey => {
+    const option = schema[optionKey]
+    if (!option) return ""
+
+    if (option.autocolumn) {
+      return "MagicWand"
+    }
+    const { type, subtype } = option
+
+    const result =
+      typeof Constants.TypeIconMap[type] === "object" && subtype
+        ? Constants.TypeIconMap[type][subtype]
+        : Constants.TypeIconMap[type]
+
+    return result || "Text"
+  }
+
+  const getOptionIconTooltip = optionKey => {
+    const option = schema[optionKey]
+
+    const type = option?.type
+    const field = Object.values(FIELDS).find(f => f.type === type)
+
+    if (field) {
+      return field.name
+    }
+
+    return ""
+  }
 </script>
 
-<Select {placeholder} value={boundValue} on:change={onChange} {options} />
+<Select
+  {placeholder}
+  value={boundValue}
+  on:change={onChange}
+  {options}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
+/>
+
+{#if explanation}
+  <ContextTooltip
+    visible={contextTooltipVisible}
+    anchor={contextTooltipAnchor}
+    offset={20}
+  >
+    <Explanation
+      tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
+      schema={schema[currentOption]}
+      columnIcon={getOptionIcon(currentOption)}
+      columnName={currentOption}
+      columnType={getOptionIconTooltip(currentOption)}
+      {explanation}
+    />
+  </ContextTooltip>
+{/if}
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
index 5fc5c96db8..668f2f7d59 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Toggle, Icon } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
index 14cffb5df9..57423e8667 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte
@@ -1,5 +1,5 @@
 <script>
-  import EditComponentPopover from "../EditComponentPopover/EditComponentPopover.svelte"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
   import { Icon } from "@budibase/bbui"
   import { setContext } from "svelte"
   import { writable } from "svelte/store"
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index 7bf718d1e7..4af3e48110 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -67,6 +67,7 @@ const toGridFormat = draggableListColumns => {
     label: entry.label,
     field: entry.field,
     active: entry.active,
+    width: entry.width,
   }))
 }
 
@@ -81,6 +82,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         field: column.field,
         label: column.label,
         columnType: schema[column.field].type,
+        width: column.width,
       },
       {}
     )
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index d0224fb1db..d6c9a0b1e3 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -1,12 +1,22 @@
 <script>
-  import { Multiselect } from "@budibase/bbui"
+  import { Multiselect, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
+  import { Explanation } from "./Explanation"
+  import { FIELDS } from "constants/backend"
+  import { params } from "@roxi/routify"
+  import { debounce } from "lodash"
+  import { Constants } from "@budibase/frontend-core"
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let explanation
+
+  let contextTooltipAnchor = null
+  let currentOption = null
+  let contextTooltipVisible = false
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
@@ -26,6 +36,84 @@
     boundValue = getValidOptions(value.detail, options)
     dispatch("change", boundValue)
   }
+
+  const getOptionIcon = optionKey => {
+    const option = schema[optionKey]
+    if (!option) return ""
+
+    if (option.autocolumn) {
+      return "MagicWand"
+    }
+    const { type, subtype } = option
+
+    const result =
+      typeof Constants.TypeIconMap[type] === "object" && subtype
+        ? Constants.TypeIconMap[type][subtype]
+        : Constants.TypeIconMap[type]
+
+    return result || "Text"
+  }
+
+  const getOptionIconTooltip = optionKey => {
+    const option = schema[optionKey]
+
+    const type = option?.type
+    const field = Object.values(FIELDS).find(f => f.type === type)
+
+    if (field) {
+      return field.name
+    } else if (type === "jsonarray") {
+      // `jsonarray` isn't present in the above FIELDS constant
+
+      return "JSON Array"
+    }
+
+    return ""
+  }
+
+  const updateTooltip = debounce((e, option) => {
+    if (option == null) {
+      contextTooltipVisible = false
+    } else {
+      contextTooltipAnchor = e?.target
+      currentOption = option
+      contextTooltipVisible = true
+    }
+  }, 200)
+
+  const onOptionMouseenter = (e, option) => {
+    updateTooltip(e, option)
+  }
+
+  const onOptionMouseleave = e => {
+    updateTooltip(e, null)
+  }
 </script>
 
-<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
+<Multiselect
+  iconPosition="right"
+  {placeholder}
+  value={boundValue}
+  on:change={setValue}
+  {options}
+  align="right"
+  {onOptionMouseenter}
+  {onOptionMouseleave}
+/>
+
+{#if explanation}
+  <ContextTooltip
+    visible={contextTooltipVisible}
+    anchor={contextTooltipAnchor}
+    offset={20}
+  >
+    <Explanation
+      tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
+      schema={schema[currentOption]}
+      columnIcon={getOptionIcon(currentOption)}
+      columnName={currentOption}
+      columnType={getOptionIconTooltip(currentOption)}
+      {explanation}
+    />
+  </ContextTooltip>
+{/if}
diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
index 3a98de94cd..f70c0910e0 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
@@ -108,6 +108,8 @@
       Constraints.MaxFileSize,
       Constraints.MaxUploadSize,
     ],
+    ["attachment_single"]: [Constraints.Required, Constraints.MaxUploadSize],
+    ["signature_single"]: [Constraints.Required],
     ["link"]: [
       Constraints.Required,
       Constraints.Contains,
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index fab97cdd03..6a3fe1daf0 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -10,7 +10,6 @@ import {
   NewFormSteps,
 } from "./steps"
 import { API } from "api"
-import { customPositionHandler } from "components/design/settings/controls/EditComponentPopover"
 
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
@@ -187,7 +186,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_CREATE_STEPS)
             builderStore.highlightSetting("steps", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
         },
       ],
@@ -203,7 +201,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_ROW_ID)
             builderStore.highlightSetting("rowId", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
         },
         {
@@ -219,7 +216,6 @@ const getTours = () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_FORM_VIEW_UPDATE_STEPS)
             builderStore.highlightSetting("steps", "info")
           },
-          positionHandler: customPositionHandler,
           align: "left-outside",
           scrollIntoView: true,
         },
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 6ac37e60be..78e90d6298 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -127,6 +127,14 @@ export const FIELDS = {
       presence: false,
     },
   },
+  SIGNATURE_SINGLE: {
+    name: "Signature",
+    type: FieldType.SIGNATURE_SINGLE,
+    icon: "AnnotatePen",
+    constraints: {
+      presence: false,
+    },
+  },
   LINK: {
     name: "Relationship",
     type: FieldType.LINK,
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 7d4958db04..6094c93a26 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -105,10 +105,6 @@
   }
 
   onMount(async () => {
-    document.fonts.onloadingdone = e => {
-      builderStore.loadFonts(e.fontfaces)
-    }
-
     if (!hasSynced && application) {
       try {
         await API.syncApp(application)
@@ -149,19 +145,17 @@
           />
         </span>
         <Tabs {selected} size="M">
-          {#key $builderStore?.fonts}
-            {#each $layout.children as { path, title }}
-              <TourWrap stepKeys={[`builder-${title}-section`]}>
-                <Tab
-                  quiet
-                  selected={$isActive(path)}
-                  on:click={topItemNavigate(path)}
-                  title={capitalise(title)}
-                  id={`builder-${title}-tab`}
-                />
-              </TourWrap>
-            {/each}
-          {/key}
+          {#each $layout.children as { path, title }}
+            <TourWrap stepKeys={[`builder-${title}-section`]}>
+              <Tab
+                quiet
+                selected={$isActive(path)}
+                on:click={topItemNavigate(path)}
+                title={capitalise(title)}
+                id={`builder-${title}-tab`}
+              />
+            </TourWrap>
+          {/each}
         </Tabs>
       </div>
       <div class="topcenternav">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 9ff2a764b7..54241ea1cc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -191,6 +191,9 @@
                 // Number fields
                 min: setting.min ?? null,
                 max: setting.max ?? null,
+
+                // Field select settings
+                explanation: setting.explanation,
               }}
               {bindings}
               {componentBindings}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
index 0f85d2e3e3..ba6f403d81 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@@ -71,6 +71,7 @@
       "multifieldselect",
       "s3upload",
       "codescanner",
+      "signaturesinglefield",
       "bbreferencesinglefield",
       "bbreferencefield"
     ]
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.js
index 7dfee4daa9..e57a079185 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.js
@@ -19,6 +19,7 @@ export const INITIAL_APP_META_STATE = {
     showNotificationAction: false,
     sidePanel: false,
   },
+  typeSupportPresets: {},
   features: {
     componentValidation: false,
     disableUserMetadata: false,
@@ -79,6 +80,13 @@ export class AppMetaStore extends BudiStore {
     }))
   }
 
+  syncClientTypeSupportPresets(typeSupportPresets) {
+    this.update(state => ({
+      ...state,
+      typeSupportPresets,
+    }))
+  }
+
   async syncAppRoutes() {
     const resp = await API.fetchAppRoutes()
     this.update(state => ({
diff --git a/packages/builder/src/stores/builder/automations.js b/packages/builder/src/stores/builder/automations.js
index cbe48cef33..ff53dda86b 100644
--- a/packages/builder/src/stores/builder/automations.js
+++ b/packages/builder/src/stores/builder/automations.js
@@ -82,6 +82,7 @@ const automationActions = store => ({
         steps: [],
         trigger,
       },
+      disabled: false,
     }
     const response = await store.actions.save(automation)
     await store.actions.fetch()
@@ -134,6 +135,28 @@ const automationActions = store => ({
     })
     await store.actions.fetch()
   },
+  toggleDisabled: async automationId => {
+    let automation
+    try {
+      automation = store.actions.getDefinition(automationId)
+      if (!automation) {
+        return
+      }
+      automation.disabled = !automation.disabled
+      await store.actions.save(automation)
+      notifications.success(
+        `Automation ${
+          automation.disabled ? "enabled" : "disabled"
+        } successfully`
+      )
+    } catch (error) {
+      notifications.error(
+        `Error ${
+          automation && automation.disabled ? "enabling" : "disabling"
+        } automation`
+      )
+    }
+  },
   updateBlockInputs: async (block, data) => {
     // Create new modified block
     let newBlock = {
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.js
index 055498bc91..d002062da9 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.js
@@ -14,7 +14,6 @@ export const INITIAL_BUILDER_STATE = {
   tourKey: null,
   tourStepKey: null,
   hoveredComponentId: null,
-  fonts: null,
 }
 
 export class BuilderStore extends BudiStore {
@@ -37,16 +36,6 @@ export class BuilderStore extends BudiStore {
     this.websocket
   }
 
-  loadFonts(fontFaces) {
-    const ff = fontFaces.map(
-      fontFace => `${fontFace.family}-${fontFace.weight}`
-    )
-    this.update(state => ({
-      ...state,
-      fonts: [...(state.fonts || []), ...ff],
-    }))
-  }
-
   init(app) {
     if (!app?.appId) {
       console.error("BuilderStore: No appId supplied for websocket")
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 19a4f41532..8498214313 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -108,6 +108,7 @@ export class ComponentStore extends BudiStore {
 
     // Sync client features to app store
     appStore.syncClientFeatures(components.features)
+    appStore.syncClientTypeSupportPresets(components?.typeSupportPresets ?? {})
 
     return components
   }
diff --git a/packages/builder/src/stores/builder/tests/app.test.js b/packages/builder/src/stores/builder/tests/app.test.js
index e0e5d17ba6..728f472317 100644
--- a/packages/builder/src/stores/builder/tests/app.test.js
+++ b/packages/builder/src/stores/builder/tests/app.test.js
@@ -91,6 +91,14 @@ describe("Application Meta Store", () => {
     })
   })
 
+  it("Sync type support information to state", async ctx => {
+    ctx.test.appStore.syncClientTypeSupportPresets({ preset: "information" })
+
+    expect(ctx.test.store.typeSupportPresets).toStrictEqual({
+      preset: "information",
+    })
+  })
+
   it("Sync component feature flags to state", async ctx => {
     ctx.test.appStore.syncClientFeatures(clientFeaturesResp)
 
diff --git a/packages/builder/src/stores/builder/tests/component.test.js b/packages/builder/src/stores/builder/tests/component.test.js
index b6c9ca27cd..b8baefc5e6 100644
--- a/packages/builder/src/stores/builder/tests/component.test.js
+++ b/packages/builder/src/stores/builder/tests/component.test.js
@@ -42,6 +42,7 @@ vi.mock("stores/builder", async () => {
     update: mockAppStore.update,
     set: mockAppStore.set,
     syncClientFeatures: vi.fn(),
+    syncClientTypeSupportPresets: vi.fn(),
   }
   const mockTableStore = writable()
   const tables = {
diff --git a/packages/cli/src/environment.ts b/packages/cli/src/environment.ts
index 9d017f99b2..51f6e9b972 100644
--- a/packages/cli/src/environment.ts
+++ b/packages/cli/src/environment.ts
@@ -1,3 +1,4 @@
+process.env.DISABLE_PINO_LOGGER = "1"
 process.env.NO_JS = "1"
 process.env.JS_BCRYPT = "1"
 process.env.DISABLE_JWT_WARNING = "1"
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 86a6d2b7b3..317ccea974 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-process.env.DISABLE_PINO_LOGGER = "1"
+// have to import this before anything else
 import "./environment"
 import { getCommands } from "./options"
 import { Command } from "commander"
diff --git a/packages/cli/start.sh b/packages/cli/start.sh
index 9650f0bbfa..ae39f73753 100755
--- a/packages/cli/start.sh
+++ b/packages/cli/start.sh
@@ -1,3 +1,3 @@
 #!/bin/bash
 dir="$(dirname -- "$(readlink -f "${BASH_SOURCE}")")"
-${dir}/node_modules/ts-node/dist/bin.js ${dir}/src/index.ts $@
+${dir}/../../node_modules/ts-node/dist/bin.js ${dir}/src/index.ts $@
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 2fae9c0213..afe17c2a76 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -13,6 +13,42 @@
     "sidePanel": true,
     "skeletonLoader": true
   },
+  "typeSupportPresets": {
+    "numberLike": {
+      "supported": ["number", "boolean"],
+      "partialSupport": [
+        { "type": "longform", "message": "stringAsNumber" },
+        { "type": "string", "message": "stringAsNumber" },
+        { "type": "bigint", "message": "stringAsNumber" },
+        { "type": "options", "message": "stringAsNumber" },
+        { "type": "formula", "message": "stringAsNumber" },
+        { "type": "datetime", "message": "dateAsNumber"}
+      ],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
+    },
+    "stringLike": {
+      "supported": ["string", "number", "bigint", "options", "longform", "boolean", "datetime"],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
+    },
+    "datetimeLike": {
+      "supported": ["datetime"],
+      "partialSupport": [
+        { "type": "longform", "message": "stringAsDate" },
+        { "type": "string", "message": "stringAsDate" },
+        { "type": "options", "message": "stringAsDate" },
+        { "type": "formula", "message": "stringAsDate" },
+        { "type": "bigint", "message": "stringAsDate" },
+        { "type": "number", "message": "numberAsDate"}
+      ],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
+    }
+  },
   "layout": {
     "name": "Layout",
     "description": "This component is specific only to layouts",
@@ -1602,6 +1638,7 @@
     ]
   },
   "bar": {
+    "documentationLink": "https://docs.budibase.com/docs/bar-chart",
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
@@ -1626,6 +1663,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -1633,6 +1675,11 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -1760,6 +1807,7 @@
     ]
   },
   "line": {
+    "documentationLink": "https://docs.budibase.com/docs/line-chart",
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
@@ -1784,6 +1832,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -1791,6 +1844,11 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -1913,6 +1971,7 @@
     ]
   },
   "area": {
+    "documentationLink": "https://docs.budibase.com/docs/area-chart",
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
@@ -1937,6 +1996,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -1944,6 +2008,11 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2078,6 +2147,7 @@
     ]
   },
   "pie": {
+    "documentationLink": "https://docs.budibase.com/docs/pie-donut-chart",
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
@@ -2102,13 +2172,23 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
         "type": "field",
-        "label": "Data columns",
+        "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2207,6 +2287,7 @@
     ]
   },
   "donut": {
+    "documentationLink": "https://docs.budibase.com/docs/pie-donut-chart",
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
@@ -2231,6 +2312,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -2238,6 +2324,11 @@
         "label": "Data columns",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2336,6 +2427,7 @@
     ]
   },
   "candlestick": {
+    "documentationLink": "https://docs.budibase.com/docs/candlestick-chart",
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
@@ -2360,6 +2452,11 @@
         "label": "Date column",
         "key": "dateColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "datetimeLike"
+          }
+        },
         "required": true
       },
       {
@@ -2367,6 +2464,11 @@
         "label": "Open column",
         "key": "openColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2374,6 +2476,11 @@
         "label": "Close column",
         "key": "closeColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2381,6 +2488,11 @@
         "label": "High column",
         "key": "highColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2388,6 +2500,11 @@
         "label": "Low column",
         "key": "lowColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2427,6 +2544,7 @@
     ]
   },
   "histogram": {
+    "documentationLink": "https://docs.budibase.com/docs/histogram-chart",
     "name": "Histogram Chart",
     "description": "Histogram chart",
     "icon": "Histogram",
@@ -2434,7 +2552,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -2452,6 +2569,11 @@
         "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2746,6 +2868,14 @@
         "type": "plainText",
         "label": "Label",
         "key": "label"
+      },
+      {
+        "type": "number",
+        "label": "Initial width",
+        "key": "width",
+        "placeholder": "Auto",
+        "min": 80,
+        "max": 9999
       }
     ]
   },
@@ -4107,6 +4237,55 @@
       }
     ]
   },
+  "signaturesinglefield": {
+    "name": "Signature",
+    "icon": "AnnotatePen",
+    "styles": ["size"],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
+    "settings": [
+      {
+        "type": "field/signature_single",
+        "label": "Field",
+        "key": "field",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "validation/signature_single",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "embeddedmap": {
     "name": "Embedded Map",
     "icon": "Location",
@@ -4372,7 +4551,7 @@
         "defaultValue": false
       },
       {
-        "type": "validation/attachment",
+        "type": "validation/attachment_single",
         "label": "Validation",
         "key": "validation"
       },
@@ -5256,6 +5435,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5263,6 +5447,11 @@
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           }
         ]
@@ -5281,6 +5470,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5288,6 +5482,11 @@
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           }
         ]
@@ -5306,6 +5505,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5313,6 +5517,11 @@
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5360,6 +5569,11 @@
             "label": "Value column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5401,6 +5615,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5408,6 +5627,11 @@
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5450,6 +5674,11 @@
             "label": "Label columns",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5457,6 +5686,11 @@
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5511,6 +5745,11 @@
             "label": "Date column",
             "key": "dateColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "datetimeLike"
+              }
+            },
             "required": true
           },
           {
@@ -5518,6 +5757,11 @@
             "label": "Open column",
             "key": "openColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5525,6 +5769,11 @@
             "label": "Close column",
             "key": "closeColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5532,6 +5781,11 @@
             "label": "High column",
             "key": "highColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5539,6 +5793,11 @@
             "label": "Low column",
             "key": "lowColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
diff --git a/packages/client/package.json b/packages/client/package.json
index 71a9e2e055..68c8ec15b1 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -25,7 +25,7 @@
     "@budibase/string-templates": "0.0.0",
     "@budibase/types": "0.0.0",
     "@spectrum-css/card": "3.0.3",
-    "apexcharts": "^3.22.1",
+    "apexcharts": "^3.48.0",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "html5-qrcode": "^2.2.1",
@@ -33,8 +33,8 @@
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
-    "svelte-apexcharts": "^1.0.2",
-    "svelte-spa-router": "^4.0.1"
+    "svelte-spa-router": "^4.0.1",
+    "atrament": "^4.3.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.0",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 378fa64b73..8eacbdf041 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -193,6 +193,9 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
+
   // Update component context
   $: store.set({
     id,
@@ -222,6 +225,7 @@
     parent: id,
     ancestors: [...($component?.ancestors ?? []), instance._component],
     path: [...($component?.path ?? []), id],
+    darkMode,
   })
 
   const initialise = (instance, force = false) => {
@@ -283,10 +287,23 @@
         const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
         const dependsOnValue = setting.dependsOn.value
         const realDependentValue = instance[dependsOnKey]
+
+        const sectionDependsOnKey =
+          setting.sectionDependsOn?.setting || setting.sectionDependsOn
+        const sectionDependsOnValue = setting.sectionDependsOn?.value
+        const sectionRealDependentValue = instance[sectionDependsOnKey]
+
         if (dependsOnValue == null && realDependentValue == null) {
           return false
         }
-        if (dependsOnValue !== realDependentValue) {
+        if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
+          return false
+        }
+
+        if (
+          sectionDependsOnValue != null &&
+          sectionDependsOnValue !== sectionRealDependentValue
+        ) {
           return false
         }
       }
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index cf0ec76109..7a07ceb6e1 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -37,13 +37,16 @@
 
   let grid
   let gridContext
-  let minHeight
+  let minHeight = 0
 
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
   $: parsedColumns = getParsedColumns(columns)
   $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
   $: schemaOverrides = getSchemaOverrides(parsedColumns)
   $: enrichedButtons = enrichButtons(buttons)
   $: selectedRows = deriveSelectedRows(gridContext)
+  $: styles = patchStyles($component.styles, minHeight)
   $: data = { selectedRows: $selectedRows }
   $: actions = [
     {
@@ -84,9 +87,11 @@
 
   const getSchemaOverrides = columns => {
     let overrides = {}
-    columns.forEach(column => {
+    columns.forEach((column, idx) => {
       overrides[column.field] = {
         displayName: column.label,
+        width: column.width,
+        order: idx,
       }
     })
     return overrides
@@ -128,52 +133,55 @@
     )
   }
 
+  const patchStyles = (styles, minHeight) => {
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        "min-height": `${minHeight}px`,
+      },
+    }
+  }
+
   onMount(() => {
     gridContext = grid.getContext()
     gridContext.minHeight.subscribe($height => (minHeight = $height))
   })
 </script>
 
-<span style="--min-height:{minHeight}px">
-  <div
-    use:styleable={$component.styles}
-    class:in-builder={$builderStore.inBuilder}
-  >
-    <Grid
-      bind:this={grid}
-      datasource={table}
-      {API}
-      {stripeRows}
-      {quiet}
-      {initialFilter}
-      {initialSortColumn}
-      {initialSortOrder}
-      {fixedRowHeight}
-      {columnWhitelist}
-      {schemaOverrides}
-      canAddRows={allowAddRows}
-      canEditRows={allowEditRows}
-      canDeleteRows={allowDeleteRows}
-      canEditColumns={false}
-      canExpandRows={false}
-      canSaveSchema={false}
-      canSelectRows={true}
-      showControls={false}
-      notifySuccess={notificationStore.actions.success}
-      notifyError={notificationStore.actions.error}
-      buttons={enrichedButtons}
-      isCloud={$environmentStore.cloud}
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
-  </div>
-</span>
+<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
+  <Grid
+    bind:this={grid}
+    datasource={table}
+    {API}
+    {stripeRows}
+    {quiet}
+    {darkMode}
+    {initialFilter}
+    {initialSortColumn}
+    {initialSortOrder}
+    {fixedRowHeight}
+    {columnWhitelist}
+    {schemaOverrides}
+    canAddRows={allowAddRows}
+    canEditRows={allowEditRows}
+    canDeleteRows={allowDeleteRows}
+    canEditColumns={false}
+    canExpandRows={false}
+    canSaveSchema={false}
+    canSelectRows={true}
+    showControls={false}
+    notifySuccess={notificationStore.actions.success}
+    notifyError={notificationStore.actions.error}
+    buttons={enrichedButtons}
+    isCloud={$environmentStore.cloud}
+    on:rowclick={e => onRowClick?.({ row: e.detail })}
+  />
+</div>
 
 <Provider {data} {actions} />
 
 <style>
-  span {
-    display: contents;
-  }
   div {
     display: flex;
     flex-direction: column;
@@ -182,7 +190,6 @@
     border-radius: 4px;
     overflow: hidden;
     height: 410px;
-    min-height: var(--min-height);
   }
   div.in-builder :global(*) {
     pointer-events: none;
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 2767c44b8e..ddfc7b522b 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -32,7 +32,7 @@
 
   // Bar/Line/Area
   export let valueColumns
-  export let yAxisUnits
+  export let valueUnits
   export let yAxisLabel
   export let xAxisLabel
   export let curve
@@ -51,8 +51,6 @@
   export let bucketCount
 
   let dataProviderId
-
-  $: colors = c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null
 </script>
 
 <Block>
@@ -84,8 +82,7 @@
           dataLabels,
           legend,
           animate,
-          ...colors,
-          yAxisUnits,
+          valueUnits,
           yAxisLabel,
           xAxisLabel,
           stacked,
@@ -98,6 +95,11 @@
           lowColumn,
           dateColumn,
           bucketCount,
+          c1,
+          c2,
+          c3,
+          c4,
+          c5,
         }}
       />
     {/if}
diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
index 31610f79ac..396dfcf808 100644
--- a/packages/client/src/components/app/blocks/FormBlockComponent.svelte
+++ b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
@@ -15,6 +15,7 @@
     [FieldType.BOOLEAN]: "booleanfield",
     [FieldType.LONGFORM]: "longformfield",
     [FieldType.DATETIME]: "datetimefield",
+    [FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
     [FieldType.ATTACHMENTS]: "attachmentfield",
     [FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
     [FieldType.LINK]: "relationshipfield",
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index b25be421f7..33e6cdfa80 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -1,25 +1,85 @@
 <script>
   import { getContext } from "svelte"
-  import { chart } from "svelte-apexcharts"
-  import Placeholder from "../Placeholder.svelte"
+  import ApexCharts from "apexcharts"
+  import { Icon } from "@budibase/bbui"
+  import { cloneDeep } from "./utils"
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let options
+
+  // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
+  $: optionsCopy = cloneDeep(options)
+
+  let chartElement
+  let chart
+  let currentType = null
+
+  const updateChart = async newOptions => {
+    // Line charts have issues transitioning between "datetime" and "category" types, and will ignore the provided formatters
+    // in certain scenarios. Rerendering the chart when the user changes label type fixes this, but unfortunately it does
+    // cause a little bit of jankiness with animations.
+    if (newOptions?.xaxis?.type && newOptions.xaxis.type !== currentType) {
+      await renderChart(chartElement)
+    } else {
+      await chart?.updateOptions(newOptions)
+    }
+  }
+
+  const renderChart = async newChartElement => {
+    try {
+      await chart?.destroy()
+      chart = new ApexCharts(newChartElement, optionsCopy)
+      currentType = optionsCopy?.xaxis?.type
+      await chart.render()
+    } catch (e) {
+      // Apex for some reason throws this error when creating a new chart.
+      // It doesn't actually cause any issues with the function of the chart, so
+      // just suppress it so the console doesn't get spammed
+      if (
+        e.message !==
+        "Cannot read properties of undefined (reading 'parentNode')"
+      ) {
+        throw e
+      }
+    }
+  }
+
+  $: noData = optionsCopy == null || optionsCopy?.series?.length === 0
+
+  // Call render chart upon changes to noData, as apex charts has issues with rendering upon changes automatically
+  // if the chart is hidden.
+  $: renderChart(chartElement, noData)
+  $: updateChart(optionsCopy)
 </script>
 
-{#if options}
-  {#key options.customColor}
-    <div use:chart={options} use:styleable={$component.styles} />
-  {/key}
-{:else if $builderStore.inBuilder}
-  <div use:styleable={$component.styles}>
-    <Placeholder />
-  </div>
-{/if}
+{#key optionsCopy?.customColor}
+  <div
+    class:hide={noData}
+    use:styleable={$component.styles}
+    bind:this={chartElement}
+  />
+  {#if $builderStore.inBuilder && noData}
+    <div
+      class="component-placeholder"
+      use:styleable={{
+        ...$component.styles,
+        normal: {},
+        custom: null,
+        empty: true,
+      }}
+    >
+      <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
+      Add rows to your data source to start using your component
+    </div>
+  {/if}
+{/key}
 
 <style>
+  .hide {
+    display: none;
+  }
   div :global(.apexcharts-legend-series) {
     display: flex !important;
     text-transform: capitalize;
@@ -59,4 +119,25 @@
     ) {
     padding-bottom: 0;
   }
+
+  .component-placeholder {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-xs);
+    gap: var(--spacing-s);
+  }
+
+  /* Common styles for all error states to use */
+  .component-placeholder :global(mark) {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0 4px;
+    border-radius: 2px;
+  }
+  .component-placeholder :global(.spectrum-Link) {
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
deleted file mode 100644
index 04b5805df3..0000000000
--- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js
+++ /dev/null
@@ -1,195 +0,0 @@
-export class ApexOptionsBuilder {
-  constructor() {
-    this.formatters = {
-      ["Default"]: val => (isNaN(val) ? val : Math.round(val * 100) / 100),
-      ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-      ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-    }
-    this.options = {
-      series: [],
-      legend: {
-        show: false,
-        position: "top",
-        horizontalAlign: "right",
-        showForSingleSeries: true,
-        showForNullSeries: true,
-        showForZeroSeries: true,
-      },
-      chart: {
-        toolbar: {
-          show: false,
-        },
-        zoom: {
-          enabled: false,
-        },
-      },
-      xaxis: {
-        labels: {
-          formatter: this.formatters.Default,
-        },
-      },
-      yaxis: {
-        labels: {
-          formatter: this.formatters.Default,
-        },
-      },
-    }
-  }
-
-  setOption(path, value) {
-    if (value == null || value === "") {
-      return this
-    }
-    let tmp = this.options
-    for (let i = 0; i < path.length - 1; i++) {
-      const step = path[i]
-      if (!tmp[step]) {
-        tmp[step] = {}
-      }
-      tmp = tmp[step]
-    }
-    tmp[path[path.length - 1]] = value
-    return this
-  }
-
-  getOptions() {
-    return this.options
-  }
-
-  type(type) {
-    return this.setOption(["chart", "type"], type)
-  }
-
-  title(title) {
-    return this.setOption(["title", "text"], title)
-  }
-
-  colors(colors) {
-    if (!colors) {
-      delete this.options.colors
-      this.options["customColor"] = false
-      return this
-    }
-    this.options["customColor"] = true
-    return this.setOption(["colors"], colors)
-  }
-
-  width(width) {
-    return this.setOption(["chart", "width"], width || undefined)
-  }
-
-  height(height) {
-    return this.setOption(["chart", "height"], height || undefined)
-  }
-
-  xLabel(label) {
-    return this.setOption(["xaxis", "title", "text"], label)
-  }
-
-  yLabel(label) {
-    return this.setOption(["yaxis", "title", "text"], label)
-  }
-
-  xCategories(categories) {
-    return this.setOption(["xaxis", "categories"], categories)
-  }
-
-  yCategories(categories) {
-    return this.setOption(["yaxis", "categories"], categories)
-  }
-
-  series(series) {
-    return this.setOption(["series"], series)
-  }
-
-  horizontal(horizontal) {
-    return this.setOption(["plotOptions", "bar", "horizontal"], horizontal)
-  }
-
-  dataLabels(dataLabels) {
-    return this.setOption(["dataLabels", "enabled"], dataLabels)
-  }
-
-  animate(animate) {
-    return this.setOption(["chart", "animations", "enabled"], animate)
-  }
-
-  curve(curve) {
-    return this.setOption(["stroke", "curve"], curve)
-  }
-
-  gradient(gradient) {
-    const fill = {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.7,
-        opacityTo: 0.9,
-        stops: [0, 90, 100],
-      },
-    }
-    return this.setOption(["fill"], gradient ? fill : undefined)
-  }
-
-  legend(legend) {
-    return this.setOption(["legend", "show"], legend)
-  }
-
-  legendPosition(position) {
-    return this.setOption(["legend", "position"], position)
-  }
-
-  stacked(stacked) {
-    return this.setOption(["chart", "stacked"], stacked)
-  }
-
-  labels(labels) {
-    return this.setOption(["labels"], labels)
-  }
-
-  xUnits(units) {
-    return this.setOption(
-      ["xaxis", "labels", "formatter"],
-      this.formatters[units || "Default"]
-    )
-  }
-
-  yUnits(units) {
-    return this.setOption(
-      ["yaxis", "labels", "formatter"],
-      this.formatters[units || "Default"]
-    )
-  }
-
-  clearXFormatter() {
-    delete this.options.xaxis.labels
-    return this
-  }
-
-  clearYFormatter() {
-    delete this.options.yaxis.labels
-    return this
-  }
-
-  xType(type) {
-    return this.setOption(["xaxis", "type"], type)
-  }
-
-  yType(type) {
-    return this.setOption(["yaxis", "type"], type)
-  }
-
-  yTooltip(yTooltip) {
-    return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
-  }
-
-  palette(palette) {
-    if (!palette) {
-      return this
-    }
-    return this.setOption(
-      ["theme", "palette"],
-      palette.toLowerCase().replace(/[\W]/g, "")
-    )
-  }
-}
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index dc80b2b9da..a9a61e59f6 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,5 +1,159 @@
 <script>
-  import LineChart from "./LineChart.svelte"
+  import ApexChart from "./ApexChart.svelte"
+  import { formatters, parsePalette } from "./utils"
+
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumns
+  export let xAxisLabel
+  export let yAxisLabel
+  export let height
+  export let width
+  export let animate
+  export let dataLabels
+  export let curve
+  export let legend
+  export let yAxisUnits
+  export let palette
+  export let c1, c2, c3, c4, c5
+
+  // Area specific props
+  export let area
+  export let stacked
+  export let gradient
+
+  $: series = getSeries(dataProvider, valueColumns)
+  $: categories = getCategories(dataProvider, labelColumn)
+
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
+  $: xAxisFormatter = getFormatter(labelType, yAxisUnits, "x")
+  $: yAxisFormatter = getFormatter(labelType, yAxisUnits, "y")
+  $: fill = getFill(gradient)
+
+  $: options = {
+    series,
+    stroke: {
+      curve: curve.toLowerCase(),
+    },
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: parsePalette(palette),
+    },
+    fill,
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "area",
+      stacked,
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      type: labelType,
+      categories,
+      labels: {
+        formatter: xAxisFormatter,
+      },
+      title: {
+        text: xAxisLabel,
+      },
+    },
+    yaxis: {
+      labels: {
+        formatter: yAxisFormatter,
+      },
+      title: {
+        text: yAxisLabel,
+      },
+    },
+  }
+
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? []
+
+    return valueColumns.map(column => ({
+      name: column,
+      data: rows.map(row => {
+        const value = row?.[column]
+
+        if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
+          return Date.parse(value)
+        }
+
+        return value
+      }),
+    }))
+  }
+
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? []
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      }
+
+      return value
+    })
+  }
+
+  const getFormatter = (labelType, yAxisUnits, axis) => {
+    const isLabelAxis = axis === "x"
+
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
+    }
+
+    if (isLabelAxis) {
+      return formatters["Default"]
+    }
+
+    return formatters[yAxisUnits]
+  }
+
+  const getFill = gradient => {
+    if (gradient) {
+      return {
+        type: "gradient",
+        gradient: {
+          shadeIntensity: 1,
+          opacityFrom: 0.7,
+          opacityTo: 0.9,
+          stops: [0, 90, 100],
+        },
+      }
+    }
+
+    return { type: "solid" }
+  }
 </script>
 
-<LineChart {...$$props} area />
+<ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index fd8443e2d6..aeebfe9461 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,11 +1,12 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { formatters, parsePalette } from "./utils"
 
-  export let title
   export let dataProvider
   export let labelColumn
   export let valueColumns
+
+  export let title
   export let xAxisLabel
   export let yAxisLabel
   export let height
@@ -19,116 +20,122 @@
   export let c1, c2, c3, c4, c5
   export let horizontal
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    stacked,
-    yAxisUnits,
-    palette,
-    horizontal,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor
-  )
+  $: series = getSeries(dataProvider, valueColumns)
+  $: categories = getCategories(dataProvider, labelColumn)
 
-  $: customColor = palette === "Custom"
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
+  $: xAxisFormatter = getFormatter(labelType, yAxisUnits, horizontal, "x")
+  $: yAxisFormatter = getFormatter(labelType, yAxisUnits, horizontal, "y")
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    stacked,
-    yAxisUnits,
-    palette,
-    horizontal,
-    colors,
-    customColor
-  ) => {
-    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+  $: options = {
+    series,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: parsePalette(palette),
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "bar",
+      stacked,
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal,
+      },
+    },
+    // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
+    xaxis: {
+      type: labelType,
+      categories,
+      labels: {
+        formatter: xAxisFormatter,
+      },
+      title: {
+        text: xAxisLabel,
+      },
+    },
+    // Providing `type: "datetime"` normally makes Apex Charts parse unix time nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix time value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manually format the labels, the chart still sorts the dates correctly in any case
+    yaxis: {
+      labels: {
+        formatter: yAxisFormatter,
+      },
+      title: {
+        text: yAxisLabel,
+      },
+    },
+  }
 
-    // Fetch data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? []
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("bar")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .legend(legend)
-      .stacked(stacked)
-      .palette(palette)
-      .horizontal(horizontal)
-      .colors(customColor ? colors : null)
-
-    // Add data
-    let useDates = false
-    if (schema[labelColumn]) {
-      const labelFieldType = schema[labelColumn].type
-      if (horizontal) {
-        builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
-      } else {
-        builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
-      }
-      useDates = labelFieldType === "datetime"
-    }
-    const series = valueColumns.map(column => ({
+    return valueColumns.map(column => ({
       name: column,
-      data: data.map(row => {
-        if (!useDates) {
-          return row[column]
-        } else {
-          return [row[labelColumn], row[column]]
+      data: rows.map(row => {
+        const value = row?.[column]
+
+        if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
+          return Date.parse(value)
         }
+
+        return value
       }),
     }))
-    builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.xCategories(data.map(row => row[labelColumn]))
-    } else {
-      // Horizontal dates don't work anyway, but this is the correct logic
-      if (horizontal) {
-        builder = builder.clearYFormatter()
-      } else {
-        builder = builder.clearXFormatter()
+  }
+
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? []
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
       }
+
+      return value
+    })
+  }
+
+  const getFormatter = (labelType, yAxisUnits, horizontal, axis) => {
+    const isLabelAxis =
+      (axis === "y" && horizontal) || (axis === "x" && !horizontal)
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
     }
 
-    // Build chart options
-    return builder.getOptions()
+    if (isLabelAxis) {
+      return formatters["Default"]
+    }
+
+    return formatters[yAxisUnits]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index b2760b005e..61cdef180b 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
@@ -16,78 +16,121 @@
   export let animate
   export let yAxisUnits
 
-  $: options = setUpChart(
-    title,
+  $: series = getSeries(
     dataProvider,
     dateColumn,
     openColumn,
     highColumn,
     lowColumn,
-    closeColumn,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    yAxisUnits
+    closeColumn
   )
 
-  const setUpChart = (
-    title,
+  $: options = {
+    series,
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "candlestick",
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      tooltip: {
+        formatter: formatters["Datetime"],
+      },
+      type: "datetime",
+      title: {
+        text: xAxisLabel,
+      },
+    },
+    yaxis: {
+      labels: {
+        formatter: formatters[yAxisUnits],
+      },
+      title: {
+        text: yAxisLabel,
+      },
+    },
+  }
+
+  const getValueAsUnixTime = (dataprovider, dateColumn, row) => {
+    const value = row[dateColumn]
+
+    if (dataProvider?.schema?.[dateColumn]?.type === "datetime") {
+      return Date.parse(value)
+    }
+
+    if (typeof value === "number") {
+      return value
+    }
+
+    const isString = typeof value === "string"
+    // "2025" could be either an ISO 8601 datetime string or Unix time.
+    // There's no way to tell the user's intent without providing more
+    // granular controls.
+    // We'll just assume any string without dashes is Unix time.
+
+    if (isString && value.includes("-")) {
+      const unixTime = Date.parse(value)
+
+      if (isNaN(unixTime)) {
+        return null
+      }
+
+      return unixTime
+    }
+
+    if (isString) {
+      const unixTime = parseInt(value, 10)
+
+      if (isNaN(unixTime)) {
+        return null
+      }
+
+      return unixTime
+    }
+
+    return null
+  }
+
+  const getSeries = (
     dataProvider,
     dateColumn,
     openColumn,
     highColumn,
     lowColumn,
-    closeColumn,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    yAxisUnits
+    closeColumn
   ) => {
-    const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+    const rows = dataProvider.rows ?? []
 
-    // Fetch data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
-    if (!schema || !data.length) {
-      return null
-    }
+    return [
+      {
+        data: rows.map(row => {
+          const open = parseFloat(row[openColumn])
+          const high = parseFloat(row[highColumn])
+          const low = parseFloat(row[lowColumn])
+          const close = parseFloat(row[closeColumn])
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("candlestick")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .animate(animate)
-      .yUnits(yAxisUnits)
-      .yTooltip(true)
-      .xType("datetime")
-
-    // Add data
-    const parseDate = d => (isNaN(d) ? Date.parse(d).valueOf() : parseInt(d))
-    const chartData = data.map(row => ({
-      x: parseDate(row[dateColumn]),
-      y: [row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]],
-    }))
-    builder = builder.series([{ data: chartData }])
-
-    // Build chart options
-    return builder.getOptions()
+          return [
+            getValueAsUnixTime(dataProvider, dateColumn, row),
+            isNaN(open) ? 0 : open,
+            isNaN(high) ? 0 : high,
+            isNaN(low) ? 0 : low,
+            isNaN(close) ? 0 : close,
+          ]
+        }),
+      },
+    ]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 721a09053a..dad9edfd67 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,5 +1,99 @@
 <script>
-  import PieChart from "./PieChart.svelte"
+  import ApexChart from "./ApexChart.svelte"
+  import { formatters, parsePalette } from "./utils"
+
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumn
+  export let height
+  export let width
+  export let animate
+  export let dataLabels
+  export let legend
+  export let palette
+  export let c1, c2, c3, c4, c5
+
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
+  $: series = getSeries(dataProvider, valueColumn)
+  $: labels = getLabels(dataProvider, labelColumn, labelType)
+
+  $: options = {
+    series,
+    labels,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: parsePalette(palette),
+    },
+    legend: {
+      show: legend,
+      position: "right",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "donut",
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+  }
+
+  const getSeries = (dataProvider, valueColumn) => {
+    const rows = dataProvider.rows ?? []
+
+    return rows.map(row => {
+      const value = row?.[valueColumn]
+
+      if (dataProvider?.schema?.[valueColumn]?.type === "datetime" && value) {
+        return Date.parse(value)
+      }
+
+      // This chart doesn't automatically parse strings into numbers
+      const numValue = parseFloat(value)
+      if (isNaN(numValue)) {
+        return 0
+      }
+
+      return numValue
+    })
+  }
+
+  const getLabels = (dataProvider, labelColumn, labelType) => {
+    const rows = dataProvider.rows ?? []
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      } else if (labelType === "datetime") {
+        return formatters["Datetime"](value)
+      }
+
+      return value
+    })
+  }
 </script>
 
-<PieChart {...$$props} donut />
+<ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 26b9028550..37c395d45f 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -1,135 +1,154 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { parsePalette } from "./utils"
 
-  export let title
   export let dataProvider
   export let valueColumn
+  export let title
   export let xAxisLabel
   export let yAxisLabel
   export let height
   export let width
   export let dataLabels
   export let animate
+  export let stacked
   export let palette
   export let c1, c2, c3, c4, c5
   export let horizontal
   export let bucketCount = 10
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    valueColumn,
-    xAxisLabel || valueColumn,
-    yAxisLabel,
-    height,
-    width,
-    dataLabels,
-    animate,
-    palette,
-    horizontal,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor,
-    bucketCount
-  )
+  $: series = getSeries(dataProvider, valueColumn, bucketCount)
 
-  $: customColor = palette === "Custom"
+  $: xAxisFormatter = getFormatter(horizontal, "x")
+  $: yAxisFormatter = getFormatter(horizontal, "y")
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    valueColumn,
-    xAxisLabel, //freqAxisLabel
-    yAxisLabel, //valueAxisLabel
-    height,
-    width,
-    dataLabels,
-    animate,
-    palette,
-    horizontal,
-    colors,
-    customColor,
-    bucketCount
-  ) => {
-    const allCols = [valueColumn]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+  $: options = {
+    series,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: parsePalette(palette),
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "bar",
+      stacked,
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal,
+      },
+    },
+    xaxis: {
+      type: "category",
+      title: {
+        text: xAxisLabel,
+      },
+      labels: {
+        formatter: xAxisFormatter,
+      },
+    },
+    yaxis: {
+      decimalsInFloat: 0,
+      title: {
+        text: yAxisLabel,
+      },
+      labels: {
+        formatter: yAxisFormatter,
+      },
+    },
+  }
 
-    // Fetch data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
+  const getSeries = (dataProvider, valueColumn, bucketCount) => {
+    const rows = dataProvider.rows ?? []
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("bar")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(horizontal ? yAxisLabel : xAxisLabel)
-      .yLabel(horizontal ? xAxisLabel : yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .palette(palette)
-      .horizontal(horizontal)
-      .colors(customColor ? colors : null)
+    const values = rows
+      .map(row => parseFloat(row[valueColumn]))
+      .filter(value => !isNaN(value))
+    const [min, max] = getValuesRange(values)
+    const buckets = getBuckets(min, max, bucketCount)
+    const counts = Array(bucketCount).fill(0)
 
-    if (horizontal) {
-      builder = builder.setOption(["plotOptions", "bar", "barHeight"], "90%")
-    } else {
-      builder = builder.setOption(["plotOptions", "bar", "columnWidth"], "99%")
-    }
+    values.forEach(value => {
+      const bucketIndex = buckets.findIndex(
+        bucket => bucket.min <= value && value <= bucket.max
+      )
 
-    // Pull occurences of the value.
-    let flatlist = data.map(row => {
-      return row[valueColumn]
+      counts[bucketIndex]++
     })
 
-    // Build range buckets
-    let interval = Math.max(...flatlist) / bucketCount
-    let counts = Array(bucketCount).fill(0)
+    const series = buckets.map((bucket, index) => ({
+      x: `${bucket.min} – ${bucket.max}`,
+      y: counts[index],
+    }))
 
-    // Assign row data to a bucket
-    let buckets = flatlist.reduce((acc, val) => {
-      let dest = Math.min(Math.floor(val / interval), bucketCount - 1)
-      acc[dest] = acc[dest] + 1
-      return acc
-    }, counts)
+    return [{ data: series }]
+  }
 
-    const rangeLabel = bucketIdx => {
-      return `${Math.floor(interval * bucketIdx)} - ${Math.floor(
-        interval * (bucketIdx + 1)
-      )}`
+  const getValuesRange = values => {
+    // Ensure min is nearest integer including the actual minimum e.g.`-10.2` -> `-11`
+    const min = Math.floor(Math.min(...values))
+    // Ensure max is nearest integer including the actual maximum e.g. `20.2` -> `21`
+    const max = Math.ceil(Math.max(...values))
+
+    return [min, max]
+  }
+
+  const getBuckets = (min, max, bucketCount) => {
+    // Assure bucketCount is >= 2 and an integer
+    bucketCount = bucketCount < 2 ? 2 : Math.floor(bucketCount)
+
+    const range = max - min
+    // Assure bucketSize is never a decimal value, we'll redistribute any size truncated here later
+    const bucketSize = Math.floor(range / bucketCount)
+    const bucketRemainder = range - bucketSize * bucketCount
+
+    const buckets = []
+
+    for (let i = 0; i < bucketCount; i++) {
+      const lastBucketMax = buckets?.[buckets.length - 1]?.max ?? min
+      // Distribute any remaining size, the remainder will never be larger than the number of buckets
+      const remainderPadding = i < bucketRemainder ? 1 : 0
+
+      buckets.push({
+        min: lastBucketMax,
+        max: lastBucketMax + bucketSize + remainderPadding,
+      })
     }
 
-    const series = [
-      {
-        name: yAxisLabel,
-        data: Array.from({ length: buckets.length }, (_, i) => ({
-          x: rangeLabel(i),
-          y: buckets[i],
-        })),
-      },
-    ]
+    return buckets
+  }
 
-    builder = builder.setOption(["xaxis", "labels"], {
-      formatter: x => {
-        return x + ""
-      },
-    })
+  const getFormatter = (horizontal, axis) => {
+    // Don't display decimals in between integers on the value axis
+    if ((horizontal && axis === "x") || (!horizontal && axis === "y")) {
+      return value => {
+        if (Math.floor(value) === value) {
+          return value
+        }
 
-    builder = builder.series(series)
+        // Returning an empty string or even a normal space here causes Apex Charts to push the value axis label of the screen
+        // This is an `em space`, `U+2003`
+        return " "
+      }
+    }
 
-    return builder.getOptions()
+    return value => value
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 7f82a833d2..c2dac189e1 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,8 +1,7 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { formatters, parsePalette } from "./utils"
 
-  // Common props
   export let title
   export let dataProvider
   export let labelColumn
@@ -19,118 +18,117 @@
   export let palette
   export let c1, c2, c3, c4, c5
 
-  // Area specific props
-  export let area
-  export let stacked
-  export let gradient
+  $: series = getSeries(dataProvider, valueColumns)
+  $: categories = getCategories(dataProvider, labelColumn)
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    dataLabels,
-    curve,
-    legend,
-    yAxisUnits,
-    palette,
-    area,
-    stacked,
-    gradient,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor
-  )
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
+  $: xAxisFormatter = getFormatter(labelType, yAxisUnits, "x")
+  $: yAxisFormatter = getFormatter(labelType, yAxisUnits, "y")
 
-  $: customColor = palette === "Custom"
+  $: options = {
+    series,
+    stroke: {
+      curve: curve.toLowerCase(),
+    },
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: parsePalette(palette),
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "line",
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      type: labelType,
+      categories,
+      labels: {
+        formatter: xAxisFormatter,
+      },
+      title: {
+        text: xAxisLabel,
+      },
+    },
+    yaxis: {
+      labels: {
+        formatter: yAxisFormatter,
+      },
+      title: {
+        text: yAxisLabel,
+      },
+    },
+  }
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    dataLabels,
-    curve,
-    legend,
-    yAxisUnits,
-    palette,
-    area,
-    stacked,
-    gradient,
-    colors,
-    customColor
-  ) => {
-    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? []
 
-    // Fetch, filter and sort data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
-    if (!schema || !data.length) {
-      return null
-    }
-
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .title(title)
-      .type(area ? "area" : "line")
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .curve(curve.toLowerCase())
-      .gradient(gradient)
-      .stacked(stacked)
-      .legend(legend)
-      .yUnits(yAxisUnits)
-      .palette(palette)
-      .colors(customColor ? colors : null)
-
-    // Add data
-    let useDates = false
-    if (schema[labelColumn]) {
-      const labelFieldType = schema[labelColumn].type
-      builder = builder.xType(labelFieldType)
-      useDates = labelFieldType === "datetime"
-    }
-    const series = valueColumns.map(column => ({
+    return valueColumns.map(column => ({
       name: column,
-      data: data.map(row => {
-        if (!useDates) {
-          return row[column]
-        } else {
-          return [row[labelColumn], row[column]]
+      data: rows.map(row => {
+        const value = row?.[column]
+
+        if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
+          return Date.parse(value)
         }
+
+        return value
       }),
     }))
-    builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.xCategories(data.map(row => row[labelColumn]))
-    } else {
-      builder = builder.clearXFormatter()
+  }
+
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? []
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      }
+
+      return value
+    })
+  }
+
+  const getFormatter = (labelType, yAxisUnits, axis) => {
+    const isLabelAxis = axis === "x"
+
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
     }
 
-    // Build chart options
-    return builder.getOptions()
+    if (isLabelAxis) {
+      return formatters["Default"]
+    }
+
+    return formatters[yAxisUnits]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 8cb7317d94..3250a2ca95 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -8,84 +8,91 @@
   export let valueColumn
   export let height
   export let width
-  export let dataLabels
   export let animate
+  export let dataLabels
   export let legend
-  export let donut
   export let palette
   export let c1, c2, c3, c4, c5
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumn,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    donut,
-    palette,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor
-  )
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
+  $: series = getSeries(dataProvider, valueColumn)
+  $: labels = getLabels(dataProvider, labelColumn, labelType)
 
-  $: customColor = palette === "Custom"
+  $: options = {
+    series,
+    labels,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: parsePalette(palette),
+    },
+    legend: {
+      show: legend,
+      position: "right",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "pie",
+      animations: {
+        enabled: animate,
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+  }
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumn,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    donut,
-    palette,
-    colors,
-    customColor
-  ) => {
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      !labelColumn ||
-      !valueColumn
-    ) {
-      return null
-    }
+  const getSeries = (dataProvider, valueColumn) => {
+    const rows = dataProvider.rows ?? []
 
-    // Fetch, filter and sort data
-    const { schema, rows } = dataProvider
-    const data = rows
-      .filter(row => row[labelColumn] != null && row[valueColumn] != null)
-      .slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
+    return rows.map(row => {
+      const value = row?.[valueColumn]
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .title(title)
-      .type(donut ? "donut" : "pie")
-      .width(width)
-      .height(height)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .legend(legend)
-      .legendPosition("right")
-      .palette(palette)
-      .colors(customColor ? colors : null)
+      if (dataProvider?.schema?.[valueColumn]?.type === "datetime" && value) {
+        return Date.parse(value)
+      }
 
-    // Add data if valid datasource
-    const series = data.map(row => parseFloat(row[valueColumn]))
-    const labels = data.map(row => row[labelColumn])
-    builder = builder.series(series).labels(labels)
+      // This chart doesn't automatically parse strings into numbers
+      const numValue = parseFloat(value)
+      if (isNaN(numValue)) {
+        return 0
+      }
 
-    // Build chart options
-    return builder.getOptions()
+      return numValue
+    })
+  }
+
+  const getLabels = (dataProvider, labelColumn, labelType) => {
+    const rows = dataProvider.rows ?? []
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      } else if (labelType === "datetime") {
+        return formatters["Datetime"](value)
+      }
+
+      return value
+    })
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
new file mode 100644
index 0000000000..1aea22c991
--- /dev/null
+++ b/packages/client/src/components/app/charts/utils.js
@@ -0,0 +1,51 @@
+export const formatters = {
+  ["Default"]: val => val,
+  ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+  ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+  ["Datetime"]: val => new Date(val).toLocaleString(),
+}
+
+export const parsePalette = paletteName => {
+  if (paletteName === "Custom") {
+    // return null in this case so that the palette option doesn't get consumed by Apex Charts
+    return null
+  }
+
+  const [_, number] = paletteName.split(" ")
+
+  return `palette${number}`
+}
+
+// Deep clone which copies function references
+export const cloneDeep = value => {
+  const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]
+
+  if (value === null) {
+    return null
+  }
+
+  if (value === undefined) {
+    return undefined
+  }
+
+  if (typesToNaiveCopy.includes(typeof value)) {
+    return value
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(element => cloneDeep(element))
+  }
+
+  // Only copy "pure" objects, we want to error on stuff like Maps or Sets
+  if (typeof value === "object" && value.constructor.name === "Object") {
+    const cloneObject = {}
+
+    Object.entries(value).forEach(([key, childValue]) => {
+      cloneObject[key] = cloneDeep(childValue)
+    })
+
+    return cloneObject
+  }
+
+  throw `Unsupported value: "${value}" of type: "${typeof value}"`
+}
diff --git a/packages/client/src/components/app/charts/utils.test.js b/packages/client/src/components/app/charts/utils.test.js
new file mode 100644
index 0000000000..1b065e2fae
--- /dev/null
+++ b/packages/client/src/components/app/charts/utils.test.js
@@ -0,0 +1,31 @@
+import { expect, describe, it, vi } from "vitest"
+import { cloneDeep } from "./utils"
+
+describe("utils", () => {
+  let context
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    context = {}
+  })
+
+  describe("cloneDeep", () => {
+    beforeEach(() => {
+      context.value = {
+        obj: { one: 1, two: 2 },
+        arr: [1, { first: null, second: undefined }, 2],
+        str: "test",
+        num: 123,
+        bool: true,
+        sym: Symbol("test"),
+        func: () => "some value",
+      }
+      context.cloneValue = cloneDeep(context.value)
+    })
+
+    it("to clone the object and not copy object references", () => {
+      expect(context.cloneValue.obj.one).toEqual(1)
+      expect(context.cloneValue.obj.two).toEqual(2)
+    })
+  })
+})
diff --git a/packages/client/src/components/app/forms/SignatureField.svelte b/packages/client/src/components/app/forms/SignatureField.svelte
new file mode 100644
index 0000000000..bdae148368
--- /dev/null
+++ b/packages/client/src/components/app/forms/SignatureField.svelte
@@ -0,0 +1,129 @@
+<script>
+  import { CoreSignature, ActionButton } from "@budibase/bbui"
+  import { getContext } from "svelte"
+  import Field from "./Field.svelte"
+  import { SignatureModal } from "@budibase/frontend-core/src/components"
+
+  export let field
+  export let label
+  export let disabled = false
+  export let readonly = false
+  export let validation
+  export let onChange
+  export let span
+  export let helpText = null
+
+  let fieldState
+  let fieldApi
+  let fieldSchema
+  let modal
+
+  const { API, notificationStore, builderStore } = getContext("sdk")
+  const context = getContext("context")
+  const formContext = getContext("form")
+
+  const saveSignature = async canvas => {
+    try {
+      const signatureFile = canvas.toFile()
+      let updateValue
+
+      if (signatureFile) {
+        let attachRequest = new FormData()
+        attachRequest.append("file", signatureFile)
+
+        const resp = await API.uploadAttachment({
+          data: attachRequest,
+          tableId: formContext?.dataSource?.tableId,
+        })
+        const [signatureAttachment] = resp
+        updateValue = signatureAttachment
+      } else {
+        updateValue = null
+      }
+
+      const changed = fieldApi.setValue(updateValue)
+      if (onChange && changed) {
+        onChange({ value: updateValue })
+      }
+    } catch (error) {
+      notificationStore.actions.error(
+        `There was a problem saving your signature`
+      )
+      console.error(error)
+    }
+  }
+
+  const deleteSignature = async () => {
+    const changed = fieldApi.setValue(null)
+    if (onChange && changed) {
+      onChange({ value: null })
+    }
+  }
+
+  $: currentTheme = $context?.device?.theme
+  $: darkMode = !currentTheme?.includes("light")
+</script>
+
+<SignatureModal
+  onConfirm={saveSignature}
+  title={label || fieldSchema?.name || ""}
+  value={fieldState?.value}
+  {darkMode}
+  bind:this={modal}
+/>
+
+<Field
+  {label}
+  {field}
+  {disabled}
+  {readonly}
+  {validation}
+  {span}
+  {helpText}
+  type="signature_single"
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema
+  defaultValue={[]}
+>
+  {#if fieldState}
+    {#if (Array.isArray(fieldState?.value) && !fieldState?.value?.length) || !fieldState?.value}
+      <ActionButton
+        fullWidth
+        disabled={fieldState.disabled}
+        on:click={() => {
+          if (!$builderStore.inBuilder) {
+            modal.show()
+          }
+        }}
+      >
+        Add signature
+      </ActionButton>
+    {:else}
+      <div class="signature-field">
+        <CoreSignature
+          {darkMode}
+          disabled={$builderStore.inBuilder || fieldState.disabled}
+          editable={false}
+          value={fieldState?.value}
+          on:clear={deleteSignature}
+        />
+      </div>
+    {/if}
+  {/if}
+</Field>
+
+<style>
+  .signature-field {
+    min-height: 50px;
+    justify-content: center;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--spectrum-global-color-gray-50);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+  }
+</style>
diff --git a/packages/client/src/components/app/forms/index.js b/packages/client/src/components/app/forms/index.js
index 15966c3765..391b5fa19f 100644
--- a/packages/client/src/components/app/forms/index.js
+++ b/packages/client/src/components/app/forms/index.js
@@ -16,5 +16,6 @@ export { default as formstep } from "./FormStep.svelte"
 export { default as jsonfield } from "./JSONField.svelte"
 export { default as s3upload } from "./S3Upload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
+export { default as signaturesinglefield } from "./SignatureField.svelte"
 export { default as bbreferencefield } from "./BBReferenceField.svelte"
 export { default as bbreferencesinglefield } from "./BBReferenceSingleField.svelte"
diff --git a/packages/client/src/components/app/forms/validation.js b/packages/client/src/components/app/forms/validation.js
index bdd7213cb0..46a5330cf3 100644
--- a/packages/client/src/components/app/forms/validation.js
+++ b/packages/client/src/components/app/forms/validation.js
@@ -200,6 +200,17 @@ const parseType = (value, type) => {
     return value
   }
 
+  // Parse attachment/signature single, treating no key as null
+  if (
+    type === FieldTypes.ATTACHMENT_SINGLE ||
+    type === FieldTypes.SIGNATURE_SINGLE
+  ) {
+    if (!value?.key) {
+      return null
+    }
+    return value
+  }
+
   // Parse links, treating no elements as null
   if (type === FieldTypes.LINK) {
     if (!Array.isArray(value) || !value.length) {
@@ -246,10 +257,8 @@ const maxLengthHandler = (value, rule) => {
 // Evaluates a max file size (MB) constraint
 const maxFileSizeHandler = (value, rule) => {
   const limit = parseType(rule.value, "number")
-  return (
-    value == null ||
-    !value.some(attachment => attachment.size / 1000000 > limit)
-  )
+  const check = attachment => attachment.size / 1000000 > limit
+  return value == null || !(value?.key ? check(value) : value.some(check))
 }
 
 // Evaluates a max total upload size (MB) constraint
@@ -257,8 +266,11 @@ const maxUploadSizeHandler = (value, rule) => {
   const limit = parseType(rule.value, "number")
   return (
     value == null ||
-    value.reduce((acc, currentItem) => acc + currentItem.size, 0) / 1000000 <=
-      limit
+    (value?.key
+      ? value.size / 1000000 <= limit
+      : value.reduce((acc, currentItem) => acc + currentItem.size, 0) /
+          1000000 <=
+        limit)
   )
 }
 
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index efe69938e7..bdf74c8014 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -108,7 +108,12 @@ export const getSettingsDefinition = definition => {
   let settings = []
   definition.settings?.forEach(setting => {
     if (setting.section) {
-      settings = settings.concat(setting.settings || [])
+      settings = settings.concat(
+        (setting.settings || [])?.map(childSetting => ({
+          ...childSetting,
+          sectionDependsOn: setting.dependsOn,
+        }))
+      )
     } else {
       settings.push(setting)
     }
diff --git a/packages/frontend-core/src/components/SignatureModal.svelte b/packages/frontend-core/src/components/SignatureModal.svelte
new file mode 100644
index 0000000000..8132c5bced
--- /dev/null
+++ b/packages/frontend-core/src/components/SignatureModal.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { Modal, ModalContent, Body, CoreSignature } from "@budibase/bbui"
+
+  export let onConfirm = () => {}
+  export let value
+  export let title
+  export let darkMode
+
+  export const show = () => {
+    edited = false
+    modal.show()
+  }
+
+  let modal
+  let canvas
+  let edited = false
+</script>
+
+<Modal bind:this={modal}>
+  <ModalContent
+    showConfirmButton
+    showCancelButton={false}
+    showCloseIcon={false}
+    custom
+    disabled={!edited}
+    showDivider={false}
+    onConfirm={() => {
+      onConfirm(canvas)
+    }}
+  >
+    <div slot="header">
+      <Body>{title}</Body>
+    </div>
+    <div class="signature-wrap modal">
+      <CoreSignature
+        {darkMode}
+        {value}
+        saveIcon={false}
+        bind:this={canvas}
+        on:update={() => {
+          edited = true
+        }}
+      />
+    </div>
+  </ModalContent>
+</Modal>
+
+<style>
+  .signature-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    box-sizing: border-box;
+    position: relative;
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index ea452c86a8..f485593c46 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -8,7 +8,6 @@
   export let onChange
   export let readonly = false
   export let api
-  export let invertX = false
   export let schema
   export let maximum
 
@@ -92,13 +91,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover
-    open={isOpen}
-    {anchor}
-    {invertX}
-    maxHeight={null}
-    on:close={close}
-  >
+  <GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
     <div class="dropzone">
       <Dropzone
         {value}
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index d8cff26b9d..0156313d03 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -18,8 +18,6 @@
   export let row
   export let cellId
   export let updateValue = rows.actions.updateValue
-  export let invertX = false
-  export let invertY = false
   export let contentLines = 1
   export let hidden = false
 
@@ -93,8 +91,6 @@
     onChange={cellAPI.setValue}
     {focused}
     {readonly}
-    {invertY}
-    {invertX}
     {contentLines}
   />
   <slot />
diff --git a/packages/frontend-core/src/components/grid/cells/DateCell.svelte b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
index 3c86fe3605..8922422b43 100644
--- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
@@ -10,7 +10,6 @@
   export let focused = false
   export let readonly = false
   export let api
-  export let invertX = false
 
   let isOpen
   let anchor
@@ -111,7 +110,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover {anchor} {invertX} maxHeight={null} on:close={close}>
+  <GridPopover {anchor} maxHeight={null} on:close={close}>
     <CoreDatePickerPopoverContents
       value={parsedValue}
       useKeyboardShortcuts={false}
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 530595fe40..de527246ca 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -23,7 +23,6 @@
     subscribe,
     config,
     ui,
-    columns,
     definition,
     datasource,
     schema,
@@ -158,17 +157,13 @@
   }
 
   const makeDisplayColumn = () => {
-    columns.actions.changePrimaryDisplay(column.name)
+    datasource.actions.changePrimaryDisplay(column.name)
     open = false
   }
 
   const hideColumn = () => {
-    columns.update(state => {
-      const index = state.findIndex(col => col.name === column.name)
-      state[index].visible = false
-      return state.slice()
-    })
-    columns.actions.saveChanges()
+    datasource.actions.addSchemaMutation(column.name, { visible: false })
+    datasource.actions.saveSchemaMutations()
     open = false
   }
 
diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
index 6a05b4ae49..7829e5da7d 100644
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@@ -8,7 +8,6 @@
   export let onChange
   export let readonly = false
   export let api
-  export let invertX = false
 
   let textarea
   let isOpen = false
@@ -67,7 +66,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover {anchor} {invertX} on:close={close}>
+  <GridPopover {anchor} on:close={close}>
     <textarea
       bind:this={textarea}
       value={value || ""}
diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
index a815855b09..ae4bd38f09 100644
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@@ -11,7 +11,6 @@
   export let multi = false
   export let readonly = false
   export let api
-  export let invertX
   export let contentLines = 1
 
   let isOpen = false
@@ -120,7 +119,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover {anchor} {invertX} on:close={close}>
+  <GridPopover {anchor} on:close={close}>
     <div class="options">
       {#each options as option, idx}
         {@const color = optionColors[option] || getOptionColor(option)}
diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index f5a8351604..8ebe64ffb6 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -13,7 +13,6 @@
   export let focused
   export let schema
   export let onChange
-  export let invertX = false
   export let contentLines = 1
   export let searchFunction = API.searchTable
   export let primaryDisplay
@@ -275,7 +274,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if isOpen}
-  <GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
+  <GridPopover open={isOpen} {anchor} on:close={close}>
     <div class="dropdown" on:wheel|stopPropagation>
       <div class="search">
         <Input
diff --git a/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte b/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte
new file mode 100644
index 0000000000..8b37cd8847
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/SignatureCell.svelte
@@ -0,0 +1,162 @@
+<script>
+  import { onMount, getContext } from "svelte"
+  import { SignatureModal } from "@budibase/frontend-core/src/components"
+  import { CoreSignature, ActionButton } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
+
+  export let schema
+  export let value
+  export let focused = false
+  export let onChange
+  export let readonly = false
+  export let api
+
+  const { API, notifications, props } = getContext("grid")
+
+  let isOpen = false
+  let modal
+  let anchor
+
+  $: editable = focused && !readonly
+  $: {
+    if (!focused) {
+      close()
+    }
+  }
+
+  const onKeyDown = () => {
+    return false
+  }
+
+  const open = () => {
+    isOpen = true
+  }
+
+  const close = () => {
+    isOpen = false
+  }
+
+  const deleteSignature = async () => {
+    onChange(null)
+  }
+
+  const saveSignature = async sigCanvas => {
+    const signatureFile = sigCanvas.toFile()
+
+    let attachRequest = new FormData()
+    attachRequest.append("file", signatureFile)
+
+    try {
+      const uploadReq = await API.uploadBuilderAttachment(attachRequest)
+      const [signatureAttachment] = uploadReq
+      onChange(signatureAttachment)
+    } catch (error) {
+      $notifications.error(error.message || "Failed to save signature")
+      return []
+    }
+  }
+
+  onMount(() => {
+    api = {
+      focus: () => open(),
+      blur: () => close(),
+      isActive: () => isOpen,
+      onKeyDown,
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="signature-cell"
+  class:light={!$props?.darkMode}
+  class:editable
+  bind:this={anchor}
+  on:click={editable ? open : null}
+>
+  {#if value?.url}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img src={value?.url} />
+  {/if}
+</div>
+
+<SignatureModal
+  onConfirm={saveSignature}
+  title={schema?.name}
+  {value}
+  darkMode={$props.darkMode}
+  bind:this={modal}
+/>
+
+{#if isOpen}
+  <GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
+    <div class="signature" class:empty={!value}>
+      {#if value?.key}
+        <div class="signature-wrap">
+          <CoreSignature
+            darkMode={$props.darkMode}
+            editable={false}
+            {value}
+            on:change={saveSignature}
+            on:clear={deleteSignature}
+          />
+        </div>
+      {:else}
+        <div class="add-signature">
+          <ActionButton
+            fullWidth
+            on:click={() => {
+              modal.show()
+            }}
+          >
+            Add signature
+          </ActionButton>
+        </div>
+      {/if}
+    </div>
+  </GridPopover>
+{/if}
+
+<style>
+  .signature {
+    min-width: 320px;
+    padding: var(--cell-padding);
+    background: var(--grid-background-alt);
+    border: var(--cell-border);
+  }
+  .signature.empty {
+    width: 100%;
+    min-width: unset;
+  }
+  .signature-cell.light img {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+  }
+  .signature-cell {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    max-width: 320px;
+    padding-left: var(--cell-padding);
+    padding-right: var(--cell-padding);
+    flex-wrap: nowrap;
+    align-self: stretch;
+    overflow: hidden;
+    user-select: none;
+  }
+  .signature-cell.editable:hover {
+    cursor: pointer;
+  }
+  .signature-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    box-sizing: border-box;
+    position: relative;
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
index 4e19e64297..5b74e01958 100644
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -3,7 +3,7 @@
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
-  const { columns, stickyColumn, dispatch } = getContext("grid")
+  const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
   let open = false
   let anchor
@@ -11,36 +11,20 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleVisibility = async (column, visible) => {
-    columns.update(state => {
-      const index = state.findIndex(col => col.name === column.name)
-      state[index].visible = visible
-      return state.slice()
-    })
-    await columns.actions.saveChanges()
+  const toggleColumn = async (column, visible) => {
+    datasource.actions.addSchemaMutation(column.name, { visible })
+    await datasource.actions.saveSchemaMutations()
     dispatch(visible ? "show-column" : "hide-column")
   }
 
-  const showAll = async () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: true,
-      }))
+  const toggleAll = async visible => {
+    let mutations = {}
+    $columns.forEach(column => {
+      mutations[column.name] = { visible }
     })
-    await columns.actions.saveChanges()
-    dispatch("show-column")
-  }
-
-  const hideAll = async () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: false,
-      }))
-    })
-    await columns.actions.saveChanges()
-    dispatch("hide-column")
+    datasource.actions.addSchemaMutations(mutations)
+    await datasource.actions.saveSchemaMutations()
+    dispatch(visible ? "show-column" : "hide-column")
   }
 
   const getText = columns => {
@@ -80,14 +64,14 @@
         <Toggle
           size="S"
           value={column.visible}
-          on:change={e => toggleVisibility(column, e.detail)}
+          on:change={e => toggleColumn(column, e.detail)}
           disabled={column.primaryDisplay}
         />
       {/each}
     </div>
     <div class="buttons">
-      <ActionButton on:click={showAll}>Show all</ActionButton>
-      <ActionButton on:click={hideAll}>Hide all</ActionButton>
+      <ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
+      <ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
     </div>
   </div>
 </Popover>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 7dbb86ab23..4fb3747bfd 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -54,6 +54,7 @@
   export let notifySuccess = null
   export let notifyError = null
   export let buttons = null
+  export let darkMode
   export let isCloud = null
 
   // Unique identifier for DOM nodes inside this instance
@@ -109,6 +110,7 @@
     notifySuccess,
     notifyError,
     buttons,
+    darkMode,
     isCloud,
   })
 
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index 566c54e61b..87fcfe2d32 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -9,7 +9,6 @@
     bounds,
     renderedRows,
     visibleColumns,
-    rowVerticalInversionIndex,
     hoveredRowId,
     dispatch,
     isDragging,
@@ -41,11 +40,7 @@
 <div bind:this={body} class="grid-body">
   <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
-      <GridRow
-        {row}
-        top={idx === 0}
-        invertY={idx >= $rowVerticalInversionIndex}
-      />
+      <GridRow {row} top={idx === 0} />
     {/each}
     {#if $config.canAddRows}
       <div
diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
index 88a6fc488f..c3d6f6eb86 100644
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@@ -5,7 +5,6 @@
 
   export let row
   export let top = false
-  export let invertY = false
 
   const {
     focusedCellId,
@@ -15,7 +14,6 @@
     hoveredRowId,
     selectedCellMap,
     focusedRow,
-    columnHorizontalInversionIndex,
     contentLines,
     isDragging,
     dispatch,
@@ -38,15 +36,13 @@
   on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
   on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
 >
-  {#each $visibleColumns as column, columnIdx}
+  {#each $visibleColumns as column}
     {@const cellId = getCellID(row._id, column.name)}
     <DataCell
       {cellId}
       {column}
       {row}
-      {invertY}
       {rowFocused}
-      invertX={columnIdx >= $columnHorizontalInversionIndex}
       highlighted={rowHovered || rowFocused || reorderSource === column.name}
       selected={rowSelected}
       rowIdx={row.__idx}
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 4a4979f535..c6076aea73 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -24,8 +24,6 @@
     rowHeight,
     hasNextPage,
     maxScrollTop,
-    rowVerticalInversionIndex,
-    columnHorizontalInversionIndex,
     selectedRows,
     loaded,
     refreshing,
@@ -43,17 +41,9 @@
   $: firstColumn = $stickyColumn || $visibleColumns[0]
   $: width = GutterWidth + ($stickyColumn?.width || 0)
   $: $datasource, (visible = false)
-  $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
   $: selectedRowCount = Object.values($selectedRows).length
   $: hasNoRows = !$rows.length
 
-  const shouldInvertY = (offset, inversionIndex, rows) => {
-    if (offset === 0) {
-      return false
-    }
-    return rows.length >= inversionIndex
-  }
-
   const addRow = async () => {
     // Blur the active cell and tick to let final value updates propagate
     isAdding = true
@@ -205,7 +195,6 @@
           width={$stickyColumn.width}
           {updateValue}
           topRow={offset === 0}
-          {invertY}
         >
           {#if $stickyColumn?.schema?.autocolumn}
             <div class="readonly-overlay">Can't edit auto column</div>
@@ -219,7 +208,7 @@
     <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
       <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
-          {#each $visibleColumns as column, columnIdx}
+          {#each $visibleColumns as column}
             {@const cellId = `new-${column.name}`}
             <DataCell
               {cellId}
@@ -230,8 +219,6 @@
               focused={$focusedCellId === cellId}
               width={column.width}
               topRow={offset === 0}
-              invertX={columnIdx >= $columnHorizontalInversionIndex}
-              {invertY}
               hidden={!$columnRenderMap[column.name]}
             >
               {#if column?.schema?.autocolumn}
diff --git a/packages/frontend-core/src/components/grid/lib/renderers.js b/packages/frontend-core/src/components/grid/lib/renderers.js
index 8911d68cba..2e22ee1871 100644
--- a/packages/frontend-core/src/components/grid/lib/renderers.js
+++ b/packages/frontend-core/src/components/grid/lib/renderers.js
@@ -13,6 +13,7 @@ import JSONCell from "../cells/JSONCell.svelte"
 import AttachmentCell from "../cells/AttachmentCell.svelte"
 import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
+import SignatureCell from "../cells/SignatureCell.svelte"
 import BBReferenceSingleCell from "../cells/BBReferenceSingleCell.svelte"
 
 const TypeComponentMap = {
@@ -20,6 +21,7 @@ const TypeComponentMap = {
   [FieldType.OPTIONS]: OptionsCell,
   [FieldType.DATETIME]: DateCell,
   [FieldType.BARCODEQR]: TextCell,
+  [FieldType.SIGNATURE_SINGLE]: SignatureCell,
   [FieldType.LONGFORM]: LongFormCell,
   [FieldType.ARRAY]: MultiSelectCell,
   [FieldType.NUMBER]: NumberCell,
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index 8ceaae105f..a3281be936 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -1,5 +1,4 @@
 import { derived, get, writable } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
 import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
 
 export const createStores = () => {
@@ -75,72 +74,23 @@ export const deriveStores = context => {
 }
 
 export const createActions = context => {
-  const { columns, stickyColumn, datasource, definition, schema } = context
-
-  // Updates the datasources primary display column
-  const changePrimaryDisplay = async column => {
-    return await datasource.actions.saveDefinition({
-      ...get(definition),
-      primaryDisplay: column,
-    })
-  }
+  const { columns, datasource, schema } = context
 
   // Updates the width of all columns
   const changeAllColumnWidths = async width => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        width,
-      }))
-    })
-    if (get(stickyColumn)) {
-      stickyColumn.update(state => ({
-        ...state,
-        width,
-      }))
-    }
-    await saveChanges()
-  }
-
-  // Persists column changes by saving metadata against datasource schema
-  const saveChanges = async () => {
-    const $columns = get(columns)
-    const $definition = get(definition)
-    const $stickyColumn = get(stickyColumn)
-    let newSchema = cloneDeep(get(schema)) || {}
-
-    // Build new updated datasource schema
-    Object.keys(newSchema).forEach(column => {
-      // Respect order specified by columns
-      const index = $columns.findIndex(x => x.name === column)
-      if (index !== -1) {
-        newSchema[column].order = index
-      } else {
-        delete newSchema[column].order
-      }
-
-      // Copy over metadata
-      if (column === $stickyColumn?.name) {
-        newSchema[column].visible = true
-        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
-      } else {
-        newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
-      }
-    })
-
-    await datasource.actions.saveDefinition({
-      ...$definition,
-      schema: newSchema,
+    const $schema = get(schema)
+    let mutations = {}
+    Object.keys($schema).forEach(field => {
+      mutations[field] = { width }
     })
+    datasource.actions.addSchemaMutations(mutations)
+    await datasource.actions.saveSchemaMutations()
   }
 
   return {
     columns: {
       ...columns,
       actions: {
-        saveChanges,
-        changePrimaryDisplay,
         changeAllColumnWidths,
       },
     },
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
index 6c309380e6..1fc973f171 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -4,15 +4,23 @@ import { memo } from "../../../utils"
 
 export const createStores = () => {
   const definition = memo(null)
+  const schemaMutations = memo({})
 
   return {
     definition,
+    schemaMutations,
   }
 }
 
 export const deriveStores = context => {
-  const { API, definition, schemaOverrides, columnWhitelist, datasource } =
-    context
+  const {
+    API,
+    definition,
+    schemaOverrides,
+    columnWhitelist,
+    datasource,
+    schemaMutations,
+  } = context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -35,42 +43,26 @@ export const deriveStores = context => {
     return schema
   })
 
+  // Derives the total enriched schema, made up of the saved schema and any
+  // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, columnWhitelist],
-    ([$schema, $schemaOverrides, $columnWhitelist]) => {
+    [schema, schemaOverrides, schemaMutations, columnWhitelist],
+    ([$schema, $schemaOverrides, $schemaMutations, $columnWhitelist]) => {
       if (!$schema) {
         return null
       }
-      let enrichedSchema = { ...$schema }
-
-      // Apply schema overrides
-      Object.keys($schemaOverrides || {}).forEach(field => {
-        if (enrichedSchema[field]) {
-          enrichedSchema[field] = {
-            ...enrichedSchema[field],
-            ...$schemaOverrides[field],
-          }
+      let enrichedSchema = {}
+      Object.keys($schema).forEach(field => {
+        // Apply whitelist if provided
+        if ($columnWhitelist?.length && !$columnWhitelist.includes(field)) {
+          return
+        }
+        enrichedSchema[field] = {
+          ...$schema[field],
+          ...$schemaOverrides?.[field],
+          ...$schemaMutations[field],
         }
       })
-
-      // Apply whitelist if specified
-      if ($columnWhitelist?.length) {
-        const sortedColumns = {}
-
-        $columnWhitelist.forEach((columnKey, idx) => {
-          const enrichedColumn = enrichedSchema[columnKey]
-          if (enrichedColumn) {
-            sortedColumns[columnKey] = {
-              ...enrichedColumn,
-              order: idx,
-              visible: true,
-            }
-          }
-        })
-
-        return sortedColumns
-      }
-
       return enrichedSchema
     }
   )
@@ -100,6 +92,8 @@ export const createActions = context => {
     table,
     viewV2,
     nonPlus,
+    schemaMutations,
+    schema,
   } = context
 
   // Gets the appropriate API for the configured datasource type
@@ -136,11 +130,81 @@ export const createActions = context => {
     // Update server
     if (get(config).canSaveSchema) {
       await getAPI()?.actions.saveDefinition(newDefinition)
-    }
 
-    // Broadcast change to external state can be updated, as this change
-    // will not be received by the builder websocket because we caused it ourselves
-    dispatch("updatedatasource", newDefinition)
+      // Broadcast change so external state can be updated, as this change
+      // will not be received by the builder websocket because we caused it
+      // ourselves
+      dispatch("updatedatasource", newDefinition)
+    }
+  }
+
+  // Updates the datasources primary display column
+  const changePrimaryDisplay = async column => {
+    return await saveDefinition({
+      ...get(definition),
+      primaryDisplay: column,
+    })
+  }
+
+  // Adds a schema mutation for a single field
+  const addSchemaMutation = (field, mutation) => {
+    if (!field || !mutation) {
+      return
+    }
+    schemaMutations.update($schemaMutations => {
+      return {
+        ...$schemaMutations,
+        [field]: {
+          ...$schemaMutations[field],
+          ...mutation,
+        },
+      }
+    })
+  }
+
+  // Adds schema mutations for multiple fields at once
+  const addSchemaMutations = mutations => {
+    const fields = Object.keys(mutations || {})
+    if (!fields.length) {
+      return
+    }
+    schemaMutations.update($schemaMutations => {
+      let newSchemaMutations = { ...$schemaMutations }
+      fields.forEach(field => {
+        newSchemaMutations[field] = {
+          ...newSchemaMutations[field],
+          ...mutations[field],
+        }
+      })
+      return newSchemaMutations
+    })
+  }
+
+  // Saves schema changes to the server, if possible
+  const saveSchemaMutations = async () => {
+    // If we can't save schema changes then we just want to keep this in memory
+    if (!get(config).canSaveSchema) {
+      return
+    }
+    const $definition = get(definition)
+    const $schemaMutations = get(schemaMutations)
+    const $schema = get(schema)
+    let newSchema = {}
+
+    // Build new updated datasource schema
+    Object.keys($schema).forEach(column => {
+      newSchema[column] = {
+        ...$schema[column],
+        ...$schemaMutations[column],
+      }
+    })
+
+    // Save the changes, then reset our local mutations
+    await saveDefinition({
+      ...$definition,
+      schema: newSchema,
+    })
+    schemaMutations.set({})
   }
 
   // Adds a row to the datasource
@@ -185,6 +249,10 @@ export const createActions = context => {
         getRow,
         isDatasourceValid,
         canUseColumn,
+        changePrimaryDisplay,
+        addSchemaMutation,
+        addSchemaMutations,
+        saveSchemaMutations,
       },
     },
   }
diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.js
index b3abbbabf3..8557be0bb6 100644
--- a/packages/frontend-core/src/components/grid/stores/reorder.js
+++ b/packages/frontend-core/src/components/grid/stores/reorder.js
@@ -34,6 +34,7 @@ export const createActions = context => {
     stickyColumn,
     maxScrollLeft,
     width,
+    datasource,
   } = context
 
   let autoScrollInterval
@@ -173,20 +174,17 @@ export const createActions = context => {
     document.removeEventListener("touchend", stopReordering)
     document.removeEventListener("touchcancel", stopReordering)
 
-    // Ensure there's actually a change
-    let { sourceColumn, targetColumn } = get(reorder)
-    if (sourceColumn !== targetColumn) {
-      moveColumn(sourceColumn, targetColumn)
-      await columns.actions.saveChanges()
-    }
-
-    // Reset state
+    // Ensure there's actually a change before saving
+    const { sourceColumn, targetColumn } = get(reorder)
     reorder.set(reorderInitialState)
+    if (sourceColumn !== targetColumn) {
+      await moveColumn(sourceColumn, targetColumn)
+    }
   }
 
   // Moves a column after another columns.
   // An undefined target column will move the source to index 0.
-  const moveColumn = (sourceColumn, targetColumn) => {
+  const moveColumn = async (sourceColumn, targetColumn) => {
     let $columns = get(columns)
     let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
     let targetIdx = $columns.findIndex(x => x.name === targetColumn)
@@ -198,14 +196,21 @@ export const createActions = context => {
       }
       return state.toSpliced(targetIdx, 0, removed[0])
     })
+
+    // Extract new orders as schema mutations
+    let mutations = {}
+    get(columns).forEach((column, idx) => {
+      mutations[column.name] = { order: idx }
+    })
+    datasource.actions.addSchemaMutations(mutations)
+    await datasource.actions.saveSchemaMutations()
   }
 
   // Moves a column one place left (as appears visually)
   const moveColumnLeft = async column => {
     const $visibleColumns = get(visibleColumns)
     const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
-    moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
-    await columns.actions.saveChanges()
+    await moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
   }
 
   // Moves a column one place right (as appears visually)
@@ -215,8 +220,7 @@ export const createActions = context => {
     if (sourceIdx === $visibleColumns.length - 1) {
       return
     }
-    moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
-    await columns.actions.saveChanges()
+    await moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
   }
 
   return {
diff --git a/packages/frontend-core/src/components/grid/stores/resize.js b/packages/frontend-core/src/components/grid/stores/resize.js
index 157465e838..21d1f66001 100644
--- a/packages/frontend-core/src/components/grid/stores/resize.js
+++ b/packages/frontend-core/src/components/grid/stores/resize.js
@@ -6,7 +6,6 @@ const initialState = {
   initialMouseX: null,
   initialWidth: null,
   column: null,
-  columnIdx: null,
   width: 0,
   left: 0,
 }
@@ -21,7 +20,7 @@ export const createStores = () => {
 }
 
 export const createActions = context => {
-  const { resize, columns, stickyColumn, ui } = context
+  const { resize, ui, datasource } = context
 
   // Starts resizing a certain column
   const startResizing = (column, e) => {
@@ -32,12 +31,6 @@ export const createActions = context => {
     e.preventDefault()
     ui.actions.blur()
 
-    // Find and cache index
-    let columnIdx = get(columns).findIndex(col => col.name === column.name)
-    if (columnIdx === -1) {
-      columnIdx = "sticky"
-    }
-
     // Set initial store state
     resize.set({
       width: column.width,
@@ -45,7 +38,6 @@ export const createActions = context => {
       initialWidth: column.width,
       initialMouseX: x,
       column: column.name,
-      columnIdx,
     })
 
     // Add mouse event listeners to handle resizing
@@ -58,7 +50,7 @@ export const createActions = context => {
 
   // Handler for moving the mouse to resize columns
   const onResizeMouseMove = e => {
-    const { initialMouseX, initialWidth, width, columnIdx } = get(resize)
+    const { initialMouseX, initialWidth, width, column } = get(resize)
     const { x } = parseEventLocation(e)
     const dx = x - initialMouseX
     const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
@@ -69,17 +61,7 @@ export const createActions = context => {
     }
 
     // Update column state
-    if (columnIdx === "sticky") {
-      stickyColumn.update(state => ({
-        ...state,
-        width: newWidth,
-      }))
-    } else {
-      columns.update(state => {
-        state[columnIdx].width = newWidth
-        return [...state]
-      })
-    }
+    datasource.actions.addSchemaMutation(column, { width })
 
     // Update state
     resize.update(state => ({
@@ -101,26 +83,16 @@ export const createActions = context => {
 
     // Persist width if it changed
     if ($resize.width !== $resize.initialWidth) {
-      await columns.actions.saveChanges()
+      await datasource.actions.saveSchemaMutations()
     }
   }
 
   // Resets a column size back to default
   const resetSize = async column => {
-    const $stickyColumn = get(stickyColumn)
-    if (column.name === $stickyColumn?.name) {
-      stickyColumn.update(state => ({
-        ...state,
-        width: DefaultColumnWidth,
-      }))
-    } else {
-      columns.update(state => {
-        const columnIdx = state.findIndex(x => x.name === column.name)
-        state[columnIdx].width = DefaultColumnWidth
-        return [...state]
-      })
-    }
-    await columns.actions.saveChanges()
+    datasource.actions.addSchemaMutation(column.name, {
+      width: DefaultColumnWidth,
+    })
+    await datasource.actions.saveSchemaMutations()
   }
 
   return {
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index 96a5a954ee..a5079d3c11 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -1,9 +1,5 @@
 import { derived } from "svelte/store"
-import {
-  MaxCellRenderOverflow,
-  MinColumnWidth,
-  ScrollBarSize,
-} from "../lib/constants"
+import { MinColumnWidth } from "../lib/constants"
 
 export const deriveStores = context => {
   const {
@@ -85,51 +81,10 @@ export const deriveStores = context => {
     }
   )
 
-  // Determine the row index at which we should start vertically inverting cell
-  // dropdowns
-  const rowVerticalInversionIndex = derived(
-    [height, rowHeight, scrollTop],
-    ([$height, $rowHeight, $scrollTop]) => {
-      const offset = $scrollTop % $rowHeight
-
-      // Compute the last row index with space to render popovers below it
-      const minBottom =
-        $height - ScrollBarSize * 3 - MaxCellRenderOverflow + offset
-      const lastIdx = Math.floor(minBottom / $rowHeight)
-
-      // Compute the first row index with space to render popovers above it
-      const minTop = MaxCellRenderOverflow + offset
-      const firstIdx = Math.ceil(minTop / $rowHeight)
-
-      // Use the greater of the two indices so that we prefer content below,
-      // unless there is room to render the entire popover above
-      return Math.max(lastIdx, firstIdx)
-    }
-  )
-
-  // Determine the column index at which we should start horizontally inverting
-  // cell dropdowns
-  const columnHorizontalInversionIndex = derived(
-    [visibleColumns, scrollLeft, width],
-    ([$visibleColumns, $scrollLeft, $width]) => {
-      const cutoff = $width + $scrollLeft - ScrollBarSize * 3
-      let inversionIdx = $visibleColumns.length
-      for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
-        const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
-        if (rightEdge + MaxCellRenderOverflow <= cutoff) {
-          break
-        }
-      }
-      return inversionIdx
-    }
-  )
-
   return {
     scrolledRowCount,
     visualRowCapacity,
     renderedRows,
     columnRenderMap,
-    rowVerticalInversionIndex,
-    columnHorizontalInversionIndex,
   }
 }
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 0d4ff8ea35..06e1348988 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -1,5 +1,6 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
+export { default as SignatureModal } from "./SignatureModal.svelte"
 export { default as Testimonial } from "./Testimonial.svelte"
 export { default as UserAvatar } from "./UserAvatar.svelte"
 export { default as UserAvatars } from "./UserAvatars.svelte"
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index bd05fafd33..9178628360 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -121,6 +121,7 @@ export const TypeIconMap = {
   [FieldType.OPTIONS]: "Dropdown",
   [FieldType.DATETIME]: "Calendar",
   [FieldType.BARCODEQR]: "Camera",
+  [FieldType.SIGNATURE_SINGLE]: "AnnotatePen",
   [FieldType.LONGFORM]: "TextAlignLeft",
   [FieldType.ARRAY]: "Duplicate",
   [FieldType.NUMBER]: "123",
diff --git a/packages/server/src/api/controllers/automation.ts b/packages/server/src/api/controllers/automation.ts
index 5b199341b1..a49fe834d3 100644
--- a/packages/server/src/api/controllers/automation.ts
+++ b/packages/server/src/api/controllers/automation.ts
@@ -274,20 +274,28 @@ export async function trigger(ctx: UserCtx) {
 
   let hasCollectStep = sdk.automations.utils.checkForCollectStep(automation)
   if (hasCollectStep && (await features.isSyncAutomationsEnabled())) {
-    const response: AutomationResults = await triggers.externalTrigger(
-      automation,
-      {
-        fields: ctx.request.body.fields,
-        timeout:
-          ctx.request.body.timeout * 1000 || env.AUTOMATION_THREAD_TIMEOUT,
-      },
-      { getResponses: true }
-    )
+    try {
+      const response: AutomationResults = await triggers.externalTrigger(
+        automation,
+        {
+          fields: ctx.request.body.fields,
+          timeout:
+            ctx.request.body.timeout * 1000 || env.AUTOMATION_THREAD_TIMEOUT,
+        },
+        { getResponses: true }
+      )
 
-    let collectedValue = response.steps.find(
-      step => step.stepId === AutomationActionStepId.COLLECT
-    )
-    ctx.body = collectedValue?.outputs
+      let collectedValue = response.steps.find(
+        step => step.stepId === AutomationActionStepId.COLLECT
+      )
+      ctx.body = collectedValue?.outputs
+    } catch (err: any) {
+      if (err.message) {
+        ctx.throw(400, err.message)
+      } else {
+        throw err
+      }
+    }
   } else {
     if (ctx.appId && !dbCore.isProdAppID(ctx.appId)) {
       ctx.throw(400, "Only apps in production support this endpoint")
diff --git a/packages/server/src/api/controllers/component.ts b/packages/server/src/api/controllers/component.ts
index 12051be770..6d4d3e2d21 100644
--- a/packages/server/src/api/controllers/component.ts
+++ b/packages/server/src/api/controllers/component.ts
@@ -20,7 +20,8 @@ export async function fetchAppComponentDefinitions(ctx: UserCtx) {
     const definitions: { [key: string]: any } = {}
     for (let { manifest, library } of componentManifests) {
       for (let key of Object.keys(manifest)) {
-        if (key === "features") {
+        // These keys are not components, and should not be preprended with the `@budibase/` prefix
+        if (key === "features" || key === "typeSupportPresets") {
           definitions[key] = manifest[key]
         } else {
           const fullComponentName = `${library}/${key}`.toLowerCase()
diff --git a/packages/server/src/api/routes/tests/automation.spec.ts b/packages/server/src/api/routes/tests/automation.spec.ts
index 7885e97fbf..711cfb8d4f 100644
--- a/packages/server/src/api/routes/tests/automation.spec.ts
+++ b/packages/server/src/api/routes/tests/automation.spec.ts
@@ -206,6 +206,23 @@ describe("/automations", () => {
       expect(res.body.value).toEqual([1, 2, 3])
     })
 
+    it("should throw an error when attempting to trigger a disabled automation", async () => {
+      mocks.licenses.useSyncAutomations()
+      let automation = collectAutomation()
+      automation = await config.createAutomation({
+        ...automation,
+        disabled: true,
+      })
+
+      const res = await request
+        .post(`/api/automations/${automation._id}/trigger`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(400)
+
+      expect(res.body.message).toEqual("Automation is disabled")
+    })
+
     it("triggers an asynchronous automation", async () => {
       let automation = newAutomation()
       automation = await config.createAutomation(automation)
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index 83041cbef6..934a838e6a 100644
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@@ -309,6 +309,11 @@ describe.each([
           name: "attachments",
           constraints: { type: "array", presence: false },
         }
+        const signature: FieldSchema = {
+          type: FieldType.SIGNATURE_SINGLE,
+          name: "signature",
+          constraints: { presence: false },
+        }
         const bool: FieldSchema = {
           type: FieldType.BOOLEAN,
           name: "boolean",
@@ -375,6 +380,8 @@ describe.each([
               attachmentListUndefined: attachmentList,
               attachmentListEmpty: attachmentList,
               attachmentListEmptyArrayStr: attachmentList,
+              signatureNull: signature,
+              signatureUndefined: signature,
               arrayFieldEmptyArrayStr: arrayField,
               arrayFieldArrayStrKnown: arrayField,
               arrayFieldNull: arrayField,
@@ -416,6 +423,8 @@ describe.each([
           attachmentListUndefined: undefined,
           attachmentListEmpty: "",
           attachmentListEmptyArrayStr: "[]",
+          signatureNull: null,
+          signatureUndefined: undefined,
           arrayFieldEmptyArrayStr: "[]",
           arrayFieldUndefined: undefined,
           arrayFieldNull: null,
@@ -450,6 +459,8 @@ describe.each([
         expect(row.attachmentListUndefined).toBe(undefined)
         expect(row.attachmentListEmpty).toEqual([])
         expect(row.attachmentListEmptyArrayStr).toEqual([])
+        expect(row.signatureNull).toEqual(null)
+        expect(row.signatureUndefined).toBe(undefined)
         expect(row.arrayFieldEmptyArrayStr).toEqual([])
         expect(row.arrayFieldNull).toEqual([])
         expect(row.arrayFieldUndefined).toEqual(undefined)
@@ -894,70 +905,91 @@ describe.each([
   })
 
   isInternal &&
-    describe("attachments", () => {
-      it("should allow enriching single attachment rows", async () => {
-        const table = await config.api.table.save(
+    describe("attachments and signatures", () => {
+      const coreAttachmentEnrichment = async (
+        schema: any,
+        field: string,
+        attachmentCfg: string | string[]
+      ) => {
+        const testTable = await config.api.table.save(
           defaultTable({
-            schema: {
-              attachment: {
-                type: FieldType.ATTACHMENT_SINGLE,
-                name: "attachment",
-                constraints: { presence: false },
-              },
-            },
+            schema,
           })
         )
-        const attachmentId = `${uuid.v4()}.csv`
-        const row = await config.api.row.save(table._id!, {
+        const attachmentToStoreKey = (attachmentId: string) => {
+          return {
+            key: `${config.getAppId()}/attachments/${attachmentId}`,
+          }
+        }
+        const draftRow = {
           name: "test",
           description: "test",
-          attachment: {
-            key: `${config.getAppId()}/attachments/${attachmentId}`,
-          },
+          [field]:
+            typeof attachmentCfg === "string"
+              ? attachmentToStoreKey(attachmentCfg)
+              : attachmentCfg.map(attachmentToStoreKey),
+          tableId: testTable._id,
+        }
+        const row = await config.api.row.save(testTable._id!, draftRow)
 
-          tableId: table._id,
-        })
         await config.withEnv({ SELF_HOSTED: "true" }, async () => {
           return context.doInAppContext(config.getAppId(), async () => {
-            const enriched = await outputProcessing(table, [row])
-            expect((enriched as Row[])[0].attachment.url.split("?")[0]).toBe(
-              `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
-            )
+            const enriched: Row[] = await outputProcessing(table, [row])
+            const [targetRow] = enriched
+            const attachmentEntries = Array.isArray(targetRow[field])
+              ? targetRow[field]
+              : [targetRow[field]]
+
+            for (const entry of attachmentEntries) {
+              const attachmentId = entry.key.split("/").pop()
+              expect(entry.url.split("?")[0]).toBe(
+                `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
+              )
+            }
           })
         })
+      }
+
+      it("should allow enriching single attachment rows", async () => {
+        await coreAttachmentEnrichment(
+          {
+            attachment: {
+              type: FieldType.ATTACHMENT_SINGLE,
+              name: "attachment",
+              constraints: { presence: false },
+            },
+          },
+          "attachment",
+          `${uuid.v4()}.csv`
+        )
       })
 
       it("should allow enriching attachment list rows", async () => {
-        const table = await config.api.table.save(
-          defaultTable({
-            schema: {
-              attachment: {
-                type: FieldType.ATTACHMENTS,
-                name: "attachment",
-                constraints: { type: "array", presence: false },
-              },
+        await coreAttachmentEnrichment(
+          {
+            attachments: {
+              type: FieldType.ATTACHMENTS,
+              name: "attachments",
+              constraints: { type: "array", presence: false },
             },
-          })
+          },
+          "attachments",
+          [`${uuid.v4()}.csv`]
         )
-        const attachmentId = `${uuid.v4()}.csv`
-        const row = await config.api.row.save(table._id!, {
-          name: "test",
-          description: "test",
-          attachment: [
-            {
-              key: `${config.getAppId()}/attachments/${attachmentId}`,
+      })
+
+      it("should allow enriching signature rows", async () => {
+        await coreAttachmentEnrichment(
+          {
+            signature: {
+              type: FieldType.SIGNATURE_SINGLE,
+              name: "signature",
+              constraints: { presence: false },
             },
-          ],
-          tableId: table._id,
-        })
-        await config.withEnv({ SELF_HOSTED: "true" }, async () => {
-          return context.doInAppContext(config.getAppId(), async () => {
-            const enriched = await outputProcessing(table, [row])
-            expect((enriched as Row[])[0].attachment[0].url.split("?")[0]).toBe(
-              `/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
-            )
-          })
-        })
+          },
+          "signature",
+          `${uuid.v4()}.png`
+        )
       })
     })
 
diff --git a/packages/server/src/api/routes/tests/search.spec.ts b/packages/server/src/api/routes/tests/search.spec.ts
index 87d0aa72c7..0dc244cfee 100644
--- a/packages/server/src/api/routes/tests/search.spec.ts
+++ b/packages/server/src/api/routes/tests/search.spec.ts
@@ -21,9 +21,6 @@ import _ from "lodash"
 import tk from "timekeeper"
 import { encodeJSBinding } from "@budibase/string-templates"
 
-const serverTime = new Date("2024-05-06T00:00:00.000Z")
-tk.freeze(serverTime)
-
 describe.each([
   ["lucene", undefined],
   ["sqs", undefined],
@@ -251,8 +248,14 @@ describe.each([
   describe("bindings", () => {
     let globalUsers: any = []
 
-    const future = new Date(serverTime.getTime())
-    future.setDate(future.getDate() + 30)
+    const serverTime = new Date()
+
+    // In MariaDB and MySQL we only store dates to second precision, so we need
+    // to remove milliseconds from the server time to ensure searches work as
+    // expected.
+    serverTime.setMilliseconds(0)
+
+    const future = new Date(serverTime.getTime() + 1000 * 60 * 60 * 24 * 30)
 
     const rows = (currentUser: User) => {
       return [
@@ -358,20 +361,22 @@ describe.each([
     })
 
     it("should parse the date binding and return all rows after the resolved value", async () => {
-      await expectQuery({
-        range: {
-          appointment: {
-            low: "{{ [now] }}",
-            high: "9999-00-00T00:00:00.000Z",
+      await tk.withFreeze(serverTime, async () => {
+        await expectQuery({
+          range: {
+            appointment: {
+              low: "{{ [now] }}",
+              high: "9999-00-00T00:00:00.000Z",
+            },
           },
-        },
-      }).toContainExactly([
-        {
-          name: config.getUser().firstName,
-          appointment: future.toISOString(),
-        },
-        { name: "serverDate", appointment: serverTime.toISOString() },
-      ])
+        }).toContainExactly([
+          {
+            name: config.getUser().firstName,
+            appointment: future.toISOString(),
+          },
+          { name: "serverDate", appointment: serverTime.toISOString() },
+        ])
+      })
     })
 
     it("should parse the date binding and return all rows before the resolved value", async () => {
@@ -407,8 +412,7 @@ describe.each([
     })
 
     it("should parse the encoded js binding. Return rows with appointments 2 weeks in the past", async () => {
-      const jsBinding =
-        "const currentTime = new Date()\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();"
+      const jsBinding = `const currentTime = new Date(${Date.now()})\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();`
       const encodedBinding = encodeJSBinding(jsBinding)
 
       await expectQuery({
diff --git a/packages/server/src/automations/automationUtils.ts b/packages/server/src/automations/automationUtils.ts
index cb09f860da..de6e1b3d88 100644
--- a/packages/server/src/automations/automationUtils.ts
+++ b/packages/server/src/automations/automationUtils.ts
@@ -113,7 +113,8 @@ export async function sendAutomationAttachmentsToStorage(
     const schema = table.schema[prop]
     if (
       schema?.type === FieldType.ATTACHMENTS ||
-      schema?.type === FieldType.ATTACHMENT_SINGLE
+      schema?.type === FieldType.ATTACHMENT_SINGLE ||
+      schema?.type === FieldType.SIGNATURE_SINGLE
     ) {
       attachmentRows[prop] = value
     }
diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index 08e3199a11..223b8d2eb6 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -36,10 +36,10 @@ async function queueRelevantRowAutomations(
   await context.doInAppContext(event.appId, async () => {
     let automations = await getAllAutomations()
 
-    // filter down to the correct event type
+    // filter down to the correct event type and enabled automations
     automations = automations.filter(automation => {
       const trigger = automation.definition.trigger
-      return trigger && trigger.event === eventType
+      return trigger && trigger.event === eventType && !automation.disabled
     })
 
     for (let automation of automations) {
@@ -94,6 +94,9 @@ export async function externalTrigger(
   params: { fields: Record<string, any>; timeout?: number },
   { getResponses }: { getResponses?: boolean } = {}
 ): Promise<any> {
+  if (automation.disabled) {
+    throw new Error("Automation is disabled")
+  }
   if (
     automation.definition != null &&
     automation.definition.trigger != null &&
diff --git a/packages/server/src/automations/utils.ts b/packages/server/src/automations/utils.ts
index 360802df6a..4d7e169f52 100644
--- a/packages/server/src/automations/utils.ts
+++ b/packages/server/src/automations/utils.ts
@@ -196,6 +196,7 @@ export async function enableCronTrigger(appId: any, automation: Automation) {
   if (
     isCronTrigger(automation) &&
     !isRebootTrigger(automation) &&
+    !automation.disabled &&
     trigger?.inputs.cron
   ) {
     const cronExp = trigger.inputs.cron
diff --git a/packages/server/src/integrations/base/sqlTable.ts b/packages/server/src/integrations/base/sqlTable.ts
index a82a9fcea8..5e6ce75bbe 100644
--- a/packages/server/src/integrations/base/sqlTable.ts
+++ b/packages/server/src/integrations/base/sqlTable.ts
@@ -125,6 +125,7 @@ function generateSchema(
         break
       case FieldType.ATTACHMENTS:
       case FieldType.ATTACHMENT_SINGLE:
+      case FieldType.SIGNATURE_SINGLE:
       case FieldType.AUTO:
       case FieldType.JSON:
       case FieldType.INTERNAL:
diff --git a/packages/server/src/integrations/googlesheets.ts b/packages/server/src/integrations/googlesheets.ts
index d8a0dc9e65..2da0c2c201 100644
--- a/packages/server/src/integrations/googlesheets.ts
+++ b/packages/server/src/integrations/googlesheets.ts
@@ -72,6 +72,7 @@ const isTypeAllowed: Record<FieldType, boolean> = {
   [FieldType.JSON]: false,
   [FieldType.INTERNAL]: false,
   [FieldType.BIGINT]: false,
+  [FieldType.SIGNATURE_SINGLE]: false,
 }
 
 const ALLOWED_TYPES = Object.entries(isTypeAllowed)
diff --git a/packages/server/src/integrations/utils/utils.ts b/packages/server/src/integrations/utils/utils.ts
index 892d8ae034..a15cb246ef 100644
--- a/packages/server/src/integrations/utils/utils.ts
+++ b/packages/server/src/integrations/utils/utils.ts
@@ -381,6 +381,7 @@ function copyExistingPropsOver(
         case FieldType.ARRAY:
         case FieldType.ATTACHMENTS:
         case FieldType.ATTACHMENT_SINGLE:
+        case FieldType.SIGNATURE_SINGLE:
         case FieldType.JSON:
         case FieldType.BB_REFERENCE:
         case FieldType.BB_REFERENCE_SINGLE:
diff --git a/packages/server/src/sdk/app/backups/imports.ts b/packages/server/src/sdk/app/backups/imports.ts
index 1c08c8c3bf..a16bfb418d 100644
--- a/packages/server/src/sdk/app/backups/imports.ts
+++ b/packages/server/src/sdk/app/backups/imports.ts
@@ -68,7 +68,8 @@ export async function updateAttachmentColumns(prodAppId: string, db: Database) {
               rewriteAttachmentUrl(prodAppId, attachment)
             )
           } else if (
-            columnType === FieldType.ATTACHMENT_SINGLE &&
+            (columnType === FieldType.ATTACHMENT_SINGLE ||
+              columnType === FieldType.SIGNATURE_SINGLE) &&
             row[column]
           ) {
             row[column] = rewriteAttachmentUrl(prodAppId, row[column])
diff --git a/packages/server/src/sdk/app/rows/attachments.ts b/packages/server/src/sdk/app/rows/attachments.ts
index ee816ea1fc..0bcfcbe4b4 100644
--- a/packages/server/src/sdk/app/rows/attachments.ts
+++ b/packages/server/src/sdk/app/rows/attachments.ts
@@ -32,7 +32,8 @@ export async function getRowsWithAttachments(appId: string, table: Table) {
   for (let [key, column] of Object.entries(table.schema)) {
     if (
       column.type === FieldType.ATTACHMENTS ||
-      column.type === FieldType.ATTACHMENT_SINGLE
+      column.type === FieldType.ATTACHMENT_SINGLE ||
+      column.type === FieldType.SIGNATURE_SINGLE
     ) {
       attachmentCols.push(key)
     }
diff --git a/packages/server/src/sdk/app/rows/utils.ts b/packages/server/src/sdk/app/rows/utils.ts
index a9df4f89cd..777ebff655 100644
--- a/packages/server/src/sdk/app/rows/utils.ts
+++ b/packages/server/src/sdk/app/rows/utils.ts
@@ -14,7 +14,7 @@ import { makeExternalQuery } from "../../../integrations/base/query"
 import { Format } from "../../../api/controllers/view/exporters"
 import sdk from "../.."
 import { isRelationshipColumn } from "../../../db/utils"
-import { SqlClient, isSQL } from "../../../integrations/utils"
+import { isSQL, SqlClient } from "../../../integrations/utils"
 
 const SQL_CLIENT_SOURCE_MAP: Record<SourceName, SqlClient | undefined> = {
   [SourceName.POSTGRES]: SqlClient.POSTGRES,
@@ -144,6 +144,10 @@ export async function validate({
     throw new Error("Unable to fetch table for validation")
   }
   const errors: Record<string, any> = {}
+  const disallowArrayTypes = [
+    FieldType.ATTACHMENT_SINGLE,
+    FieldType.BB_REFERENCE_SINGLE,
+  ]
   for (let fieldName of Object.keys(fetchedTable.schema)) {
     const column = fetchedTable.schema[fieldName]
     const constraints = cloneDeep(column.constraints)
@@ -160,6 +164,10 @@ export async function validate({
     if (type === FieldType.OPTIONS && constraints?.inclusion) {
       constraints.inclusion.push(null as any, "")
     }
+
+    if (disallowArrayTypes.includes(type) && Array.isArray(row[fieldName])) {
+      errors[fieldName] = `Cannot accept arrays`
+    }
     let res
 
     // Validate.js doesn't seem to handle array
diff --git a/packages/server/src/sdk/app/tables/internal/sqs.ts b/packages/server/src/sdk/app/tables/internal/sqs.ts
index 5ecfd9692e..2b91c5cfa7 100644
--- a/packages/server/src/sdk/app/tables/internal/sqs.ts
+++ b/packages/server/src/sdk/app/tables/internal/sqs.ts
@@ -42,6 +42,7 @@ const FieldTypeMap: Record<FieldType, SQLiteType> = {
   [FieldType.BARCODEQR]: SQLiteType.BLOB,
   [FieldType.ATTACHMENTS]: SQLiteType.BLOB,
   [FieldType.ATTACHMENT_SINGLE]: SQLiteType.BLOB,
+  [FieldType.SIGNATURE_SINGLE]: SQLiteType.BLOB,
   [FieldType.ARRAY]: SQLiteType.BLOB,
   [FieldType.LINK]: SQLiteType.BLOB,
   [FieldType.BIGINT]: SQLiteType.TEXT,
diff --git a/packages/server/src/sdk/tests/attachments.spec.ts b/packages/server/src/sdk/tests/attachments.spec.ts
index 46165f68fc..12c808d3a5 100644
--- a/packages/server/src/sdk/tests/attachments.spec.ts
+++ b/packages/server/src/sdk/tests/attachments.spec.ts
@@ -23,13 +23,35 @@ describe("should be able to re-write attachment URLs", () => {
     await config.init()
   })
 
-  it("should update URLs on a number of rows over the limit", async () => {
+  const coreBehaviour = async (tblSchema: any, row: any) => {
     const table = await config.api.table.save({
       name: "photos",
       type: "table",
       sourceId: INTERNAL_TABLE_SOURCE_ID,
       sourceType: TableSourceType.INTERNAL,
-      schema: {
+      schema: tblSchema,
+    })
+
+    for (let i = 0; i < FIND_LIMIT * 4; i++) {
+      await config.api.row.save(table._id!, {
+        ...row,
+      })
+    }
+
+    const db = dbCore.getDB(config.getAppId())
+    await sdk.backups.updateAttachmentColumns(db.name, db)
+
+    return {
+      db,
+      rows: (await sdk.rows.getAllInternalRows(db.name)).filter(
+        row => row.tableId === table._id
+      ),
+    }
+  }
+
+  it("Attachment field, should update URLs on a number of rows over the limit", async () => {
+    const { rows, db } = await coreBehaviour(
+      {
         photo: {
           type: FieldType.ATTACHMENT_SINGLE,
           name: "photo",
@@ -43,21 +65,11 @@ describe("should be able to re-write attachment URLs", () => {
           name: "otherCol",
         },
       },
-    })
-
-    for (let i = 0; i < FIND_LIMIT * 4; i++) {
-      await config.api.row.save(table._id!, {
+      {
         photo: { ...attachment },
         gallery: [{ ...attachment }, { ...attachment }],
         otherCol: "string",
-      })
-    }
-
-    const db = dbCore.getDB(config.getAppId())
-    await sdk.backups.updateAttachmentColumns(db.name, db)
-
-    const rows = (await sdk.rows.getAllInternalRows(db.name)).filter(
-      row => row.tableId === table._id
+      }
     )
     for (const row of rows) {
       expect(row.otherCol).toBe("string")
@@ -69,4 +81,27 @@ describe("should be able to re-write attachment URLs", () => {
       expect(row.gallery[1].key).toBe(`${db.name}/attachments/a.png`)
     }
   })
+  it("Signature field, should update URLs on a number of rows over the limit", async () => {
+    const { rows, db } = await coreBehaviour(
+      {
+        signature: {
+          type: FieldType.SIGNATURE_SINGLE,
+          name: "signature",
+        },
+        otherCol: {
+          type: FieldType.STRING,
+          name: "otherCol",
+        },
+      },
+      {
+        signature: { ...attachment },
+        otherCol: "string",
+      }
+    )
+    for (const row of rows) {
+      expect(row.otherCol).toBe("string")
+      expect(row.signature.url).toBe("")
+      expect(row.signature.key).toBe(`${db.name}/attachments/a.png`)
+    }
+  })
 })
diff --git a/packages/server/src/utilities/rowProcessor/attachments.ts b/packages/server/src/utilities/rowProcessor/attachments.ts
index bfa216c25b..4b0cc38cb1 100644
--- a/packages/server/src/utilities/rowProcessor/attachments.ts
+++ b/packages/server/src/utilities/rowProcessor/attachments.ts
@@ -31,7 +31,8 @@ export class AttachmentCleanup {
   ): string[] {
     if (
       type !== FieldType.ATTACHMENTS &&
-      type !== FieldType.ATTACHMENT_SINGLE
+      type !== FieldType.ATTACHMENT_SINGLE &&
+      type !== FieldType.SIGNATURE_SINGLE
     ) {
       return []
     }
@@ -62,7 +63,8 @@ export class AttachmentCleanup {
       for (let [key, schema] of Object.entries(tableSchema)) {
         if (
           schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE
+          schema.type !== FieldType.ATTACHMENT_SINGLE &&
+          schema.type !== FieldType.SIGNATURE_SINGLE
         ) {
           continue
         }
@@ -100,10 +102,12 @@ export class AttachmentCleanup {
       for (let [key, schema] of Object.entries(table.schema)) {
         if (
           schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE
+          schema.type !== FieldType.ATTACHMENT_SINGLE &&
+          schema.type !== FieldType.SIGNATURE_SINGLE
         ) {
           continue
         }
+
         rows.forEach(row => {
           files = files.concat(
             AttachmentCleanup.extractAttachmentKeys(schema.type, row[key])
@@ -120,7 +124,8 @@ export class AttachmentCleanup {
       for (let [key, schema] of Object.entries(table.schema)) {
         if (
           schema.type !== FieldType.ATTACHMENTS &&
-          schema.type !== FieldType.ATTACHMENT_SINGLE
+          schema.type !== FieldType.ATTACHMENT_SINGLE &&
+          schema.type !== FieldType.SIGNATURE_SINGLE
         ) {
           continue
         }
diff --git a/packages/server/src/utilities/rowProcessor/index.ts b/packages/server/src/utilities/rowProcessor/index.ts
index 7bbf57964e..73176af6d8 100644
--- a/packages/server/src/utilities/rowProcessor/index.ts
+++ b/packages/server/src/utilities/rowProcessor/index.ts
@@ -158,7 +158,10 @@ export async function inputProcessing(
           delete attachment.url
         })
       }
-    } else if (field.type === FieldType.ATTACHMENT_SINGLE) {
+    } else if (
+      field.type === FieldType.ATTACHMENT_SINGLE ||
+      field.type === FieldType.SIGNATURE_SINGLE
+    ) {
       const attachment = clonedRow[key]
       if (attachment?.url) {
         delete clonedRow[key].url
@@ -230,7 +233,8 @@ export async function outputProcessing<T extends Row[] | Row>(
   for (let [property, column] of Object.entries(table.schema)) {
     if (
       column.type === FieldType.ATTACHMENTS ||
-      column.type === FieldType.ATTACHMENT_SINGLE
+      column.type === FieldType.ATTACHMENT_SINGLE ||
+      column.type === FieldType.SIGNATURE_SINGLE
     ) {
       for (let row of enriched) {
         if (row[property] == null) {
diff --git a/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts b/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
index 3ef8c71afc..a39fc23152 100644
--- a/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
+++ b/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
@@ -1,22 +1,30 @@
 import { AttachmentCleanup } from "../attachments"
 import { FieldType, Table, Row, TableSourceType } from "@budibase/types"
 import { DEFAULT_BB_DATASOURCE_ID } from "../../../constants"
-import { objectStore } from "@budibase/backend-core"
+import { objectStore, db, context } from "@budibase/backend-core"
+import * as uuid from "uuid"
 
 const BUCKET = "prod-budi-app-assets"
 const FILE_NAME = "file/thing.jpg"
+const DEV_APPID = "abc_dev_123"
+const PROD_APPID = "abc_123"
 
 jest.mock("@budibase/backend-core", () => {
   const actual = jest.requireActual("@budibase/backend-core")
   return {
     ...actual,
+    context: {
+      ...actual.context,
+      getAppId: jest.fn(),
+    },
     objectStore: {
       deleteFiles: jest.fn(),
       ObjectStoreBuckets: actual.objectStore.ObjectStoreBuckets,
     },
     db: {
-      isProdAppID: () => jest.fn(() => false),
-      dbExists: () => jest.fn(() => false),
+      isProdAppID: jest.fn(),
+      getProdAppID: jest.fn(),
+      dbExists: jest.fn(),
     },
   }
 })
@@ -27,12 +35,18 @@ const mockedDeleteFiles = objectStore.deleteFiles as jest.MockedFunction<
 
 const rowGenerators: [
   string,
-  FieldType.ATTACHMENT_SINGLE | FieldType.ATTACHMENTS,
+  (
+    | FieldType.ATTACHMENT_SINGLE
+    | FieldType.ATTACHMENTS
+    | FieldType.SIGNATURE_SINGLE
+  ),
+  string,
   (fileKey?: string) => Row
 ][] = [
   [
     "row with a attachment list column",
     FieldType.ATTACHMENTS,
+    "attach",
     function rowWithAttachments(fileKey: string = FILE_NAME): Row {
       return {
         attach: [
@@ -48,6 +62,7 @@ const rowGenerators: [
   [
     "row with a single attachment column",
     FieldType.ATTACHMENT_SINGLE,
+    "attach",
     function rowWithAttachments(fileKey: string = FILE_NAME): Row {
       return {
         attach: {
@@ -58,11 +73,25 @@ const rowGenerators: [
       }
     },
   ],
+  [
+    "row with a single signature column",
+    FieldType.SIGNATURE_SINGLE,
+    "signature",
+    function rowWithSignature(): Row {
+      return {
+        signature: {
+          size: 1,
+          extension: "png",
+          key: `${uuid.v4()}.png`,
+        },
+      }
+    },
+  ],
 ]
 
 describe.each(rowGenerators)(
   "attachment cleanup",
-  (_, attachmentFieldType, rowGenerator) => {
+  (_, attachmentFieldType, colKey, rowGenerator) => {
     function tableGenerator(): Table {
       return {
         name: "table",
@@ -75,97 +104,158 @@ describe.each(rowGenerators)(
             type: attachmentFieldType,
             constraints: {},
           },
+          signature: {
+            name: "signature",
+            type: FieldType.SIGNATURE_SINGLE,
+            constraints: {},
+          },
         },
       }
     }
 
+    const getRowKeys = (row: any, col: string) => {
+      return Array.isArray(row[col])
+        ? row[col].map((entry: any) => entry.key)
+        : [row[col]?.key]
+    }
+
     beforeEach(() => {
       mockedDeleteFiles.mockClear()
+      jest.resetAllMocks()
+
+      jest.spyOn(context, "getAppId").mockReturnValue(DEV_APPID)
+      jest.spyOn(db, "isProdAppID").mockReturnValue(false)
+      jest.spyOn(db, "getProdAppID").mockReturnValue(PROD_APPID)
+      jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(false))
     })
 
-    it("should be able to cleanup a table update", async () => {
+    // Ignore calls to prune attachments when app is in production.
+    it(`${attachmentFieldType} - should not attempt to delete attachments/signatures if a published app exists`, async () => {
+      jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(true))
       const originalTable = tableGenerator()
-      delete originalTable.schema["attach"]
+      delete originalTable.schema[colKey]
       await AttachmentCleanup.tableUpdate(originalTable, [rowGenerator()], {
         oldTable: tableGenerator(),
       })
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
-    })
-
-    it("should be able to cleanup a table deletion", async () => {
-      await AttachmentCleanup.tableDelete(tableGenerator(), [rowGenerator()])
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
-    })
-
-    it("should handle table column renaming", async () => {
-      const updatedTable = tableGenerator()
-      updatedTable.schema.attach2 = updatedTable.schema.attach
-      delete updatedTable.schema.attach
-      await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
-        oldTable: tableGenerator(),
-        rename: { old: "attach", updated: "attach2" },
-      })
       expect(mockedDeleteFiles).not.toHaveBeenCalled()
     })
 
-    it("shouldn't cleanup if no table changes", async () => {
+    it(`${attachmentFieldType} - should be able to cleanup a table update`, async () => {
+      const originalTable = tableGenerator()
+      delete originalTable.schema[colKey]
+      const targetRow = rowGenerator()
+
+      await AttachmentCleanup.tableUpdate(originalTable, [targetRow], {
+        oldTable: tableGenerator(),
+      })
+
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
+    })
+
+    it(`${attachmentFieldType} - should be able to cleanup a table deletion`, async () => {
+      const targetRow = rowGenerator()
+      await AttachmentCleanup.tableDelete(tableGenerator(), [targetRow])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
+    })
+
+    it(`${attachmentFieldType} - should handle table column renaming`, async () => {
+      const updatedTable = tableGenerator()
+      updatedTable.schema.col2 = updatedTable.schema[colKey]
+      delete updatedTable.schema.attach
+      await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
+        oldTable: tableGenerator(),
+        rename: { old: colKey, updated: "col2" },
+      })
+      expect(mockedDeleteFiles).not.toHaveBeenCalled()
+    })
+
+    it(`${attachmentFieldType} - shouldn't cleanup if no table changes`, async () => {
       await AttachmentCleanup.tableUpdate(tableGenerator(), [rowGenerator()], {
         oldTable: tableGenerator(),
       })
       expect(mockedDeleteFiles).not.toHaveBeenCalled()
     })
 
-    it("should handle row updates", async () => {
+    it(`${attachmentFieldType} - should handle row updates`, async () => {
       const updatedRow = rowGenerator()
-      delete updatedRow.attach
+      delete updatedRow[colKey]
+
+      const targetRow = rowGenerator()
       await AttachmentCleanup.rowUpdate(tableGenerator(), {
         row: updatedRow,
-        oldRow: rowGenerator(),
+        oldRow: targetRow,
       })
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
+
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
     })
 
-    it("should handle row deletion", async () => {
-      await AttachmentCleanup.rowDelete(tableGenerator(), [rowGenerator()])
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
+    it(`${attachmentFieldType} - should handle row deletion`, async () => {
+      const targetRow = rowGenerator()
+      await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
     })
 
-    it("should handle row deletion and not throw when attachments are undefined", async () => {
+    it(`${attachmentFieldType} - should handle row deletion, prune signature`, async () => {
+      const targetRow = rowGenerator()
+      await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(
+        BUCKET,
+        getRowKeys(targetRow, colKey)
+      )
+    })
+
+    it(`${attachmentFieldType} - should handle row deletion and not throw when attachments are undefined`, async () => {
       await AttachmentCleanup.rowDelete(tableGenerator(), [
         {
-          multipleAttachments: undefined,
+          [colKey]: undefined,
         },
       ])
     })
 
-    it("shouldn't cleanup attachments if row not updated", async () => {
+    it(`${attachmentFieldType} - shouldn't cleanup attachments if row not updated`, async () => {
+      const targetRow = rowGenerator()
       await AttachmentCleanup.rowUpdate(tableGenerator(), {
-        row: rowGenerator(),
-        oldRow: rowGenerator(),
+        row: targetRow,
+        oldRow: targetRow,
       })
       expect(mockedDeleteFiles).not.toHaveBeenCalled()
     })
 
-    it("should be able to cleanup a column and not throw when attachments are undefined", async () => {
+    it(`${attachmentFieldType} - should be able to cleanup a column and not throw when attachments are undefined`, async () => {
       const originalTable = tableGenerator()
-      delete originalTable.schema["attach"]
+      delete originalTable.schema[colKey]
+      const row1 = rowGenerator("file 1")
+      const row2 = rowGenerator("file 2")
       await AttachmentCleanup.tableUpdate(
         originalTable,
-        [rowGenerator("file 1"), { attach: undefined }, rowGenerator("file 2")],
+        [row1, { [colKey]: undefined }, row2],
         {
           oldTable: tableGenerator(),
         }
       )
+      const expectedKeys = [row1, row2].reduce((acc: string[], row) => {
+        acc = [...acc, ...getRowKeys(row, colKey)]
+        return acc
+      }, [])
       expect(mockedDeleteFiles).toHaveBeenCalledTimes(1)
-      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [
-        "file 1",
-        "file 2",
-      ])
+      expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, expectedKeys)
     })
 
-    it("should be able to cleanup a column and not throw when ALL attachments are undefined", async () => {
+    it(`${attachmentFieldType} - should be able to cleanup a column and not throw when ALL attachments are undefined`, async () => {
       const originalTable = tableGenerator()
-      delete originalTable.schema["attach"]
+      delete originalTable.schema[colKey]
       await AttachmentCleanup.tableUpdate(
         originalTable,
         [{}, { attach: undefined }],
diff --git a/packages/server/src/utilities/schema.ts b/packages/server/src/utilities/schema.ts
index 4f0feb3c93..c3230d238c 100644
--- a/packages/server/src/utilities/schema.ts
+++ b/packages/server/src/utilities/schema.ts
@@ -151,7 +151,8 @@ export function parse(rows: Rows, schema: TableSchema): Rows {
         parsedRow[columnName] = parsedValue?._id
       } else if (
         (columnType === FieldType.ATTACHMENTS ||
-          columnType === FieldType.ATTACHMENT_SINGLE) &&
+          columnType === FieldType.ATTACHMENT_SINGLE ||
+          columnType === FieldType.SIGNATURE_SINGLE) &&
         typeof columnData === "string"
       ) {
         parsedRow[columnName] = parseCsvExport(columnData)
diff --git a/packages/shared-core/src/table.ts b/packages/shared-core/src/table.ts
index 2b3586932a..7706b78037 100644
--- a/packages/shared-core/src/table.ts
+++ b/packages/shared-core/src/table.ts
@@ -15,6 +15,7 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
   [FieldType.ARRAY]: false,
   [FieldType.ATTACHMENTS]: false,
   [FieldType.ATTACHMENT_SINGLE]: false,
+  [FieldType.SIGNATURE_SINGLE]: false,
   [FieldType.LINK]: false,
   [FieldType.JSON]: false,
   [FieldType.BB_REFERENCE]: false,
@@ -33,10 +34,10 @@ const allowSortColumnByType: Record<FieldType, boolean> = {
   [FieldType.BIGINT]: true,
   [FieldType.BOOLEAN]: true,
   [FieldType.JSON]: true,
-
   [FieldType.FORMULA]: false,
   [FieldType.ATTACHMENTS]: false,
   [FieldType.ATTACHMENT_SINGLE]: false,
+  [FieldType.SIGNATURE_SINGLE]: false,
   [FieldType.ARRAY]: false,
   [FieldType.LINK]: false,
   [FieldType.BB_REFERENCE]: false,
diff --git a/packages/types/src/documents/app/automation.ts b/packages/types/src/documents/app/automation.ts
index 481a051e1c..6d1753dc28 100644
--- a/packages/types/src/documents/app/automation.ts
+++ b/packages/types/src/documents/app/automation.ts
@@ -125,6 +125,7 @@ export interface Automation extends Document {
   name: string
   internal?: boolean
   type?: string
+  disabled?: boolean
 }
 
 interface BaseIOStructure {
diff --git a/packages/types/src/documents/app/row.ts b/packages/types/src/documents/app/row.ts
index 45436cc9c1..27d7df09fd 100644
--- a/packages/types/src/documents/app/row.ts
+++ b/packages/types/src/documents/app/row.ts
@@ -93,6 +93,11 @@ export enum FieldType {
    * type is found. The column will contain the contents of any barcode scanned.
    */
   BARCODEQR = "barcodeqr",
+  /**
+   * a JSON type, called Signature within Budibase. This type functions much the same as ATTACHMENTS but restricted
+   * only to signatures.
+   */
+  SIGNATURE_SINGLE = "signature_single",
   /**
    * a string type, this allows representing very large integers, but they are held/managed within Budibase as
    * strings. When stored in external databases Budibase will attempt to use a real big integer type and depend
diff --git a/yarn.lock b/yarn.lock
index 36ce2ce75e..f26b25c6aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6291,6 +6291,11 @@
     js-yaml "^3.10.0"
     tslib "^2.4.0"
 
+"@yr/monotone-cubic-spline@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz#7272d89f8e4f6fb7a1600c28c378cc18d3b577b9"
+  integrity sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==
+
 "@zerodevx/svelte-json-view@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@zerodevx/svelte-json-view/-/svelte-json-view-1.0.7.tgz#abf3efa71dedcb3e9d16bc9cc61d5ea98c8d00b1"
@@ -6589,11 +6594,12 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@^3.19.2, apexcharts@^3.22.1:
-  version "3.37.1"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.37.1.tgz#50443d302fc7fc72aace9c6c4074baae017c6950"
-  integrity sha512-fmQ5Updeb/LASl+S1+mIxXUFxzY0Fa7gexfCs4o+OPP9f2NEBNjvybOtPrah44N4roK7U5o5Jis906QeEQu0cA==
+apexcharts@^3.48.0:
+  version "3.49.1"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.49.1.tgz#837d1d4fd80f2c092f0587e8fb6bbc31ad57a0f3"
+  integrity sha512-MqGtlq/KQuO8j0BBsUJYlRG8VBctKwYdwuBtajHgHTmSgUU3Oai+8oYN/rKCXwXzrUlYA+GiMgotAIbXY2BCGw==
   dependencies:
+    "@yr/monotone-cubic-spline" "^1.0.3"
     svg.draggable.js "^2.2.2"
     svg.easing.js "^2.0.0"
     svg.filter.js "^2.0.2"
@@ -20039,13 +20045,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svelte-apexcharts@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/svelte-apexcharts/-/svelte-apexcharts-1.0.2.tgz#4e000f8b8f7c901c05658c845457dfc8314d54c1"
-  integrity sha512-6qlx4rE+XsonZ0FZudfwqOQ34Pq+3wpxgAD75zgEmGoYhYBJcwmikTuTf3o8ZBsZue9U/pAwhNy3ed1Bkq1gmA==
-  dependencies:
-    apexcharts "^3.19.2"
-
 svelte-dnd-action@^0.9.8:
   version "0.9.22"
   resolved "https://registry.yarnpkg.com/svelte-dnd-action/-/svelte-dnd-action-0.9.22.tgz#003eee9dddb31d8c782f6832aec8b1507fff194d"