diff --git a/lib/SuperTableCell/SuperCell.svelte b/lib/SuperTableCell/SuperCell.svelte
index 0f72b32..440738a 100644
--- a/lib/SuperTableCell/SuperCell.svelte
+++ b/lib/SuperTableCell/SuperCell.svelte
@@ -14,8 +14,7 @@
    * @property {boolean} hovered - To enter hovered state
    */
 
-  import { getContext } from "svelte";
-  const { processStringSync } = getContext("sdk");
+  import { getContext , createEventDispatcher } from "svelte";
   import fsm from "svelte-fsm"
 
   import CellString from "./cells/CellString.svelte";
@@ -27,51 +26,43 @@
   import CellNumber from "./cells/CellNumber.svelte";
   import CellJson from "./cells/CellJSON.svelte";
 
+  const { processStringSync } = getContext("sdk");
+  const dispatch = createEventDispatcher();
+
   export let value 
   export let valueTemplate
   export let fieldSchema
   export let editable
   export let initialState = "View"
-  export let lockState
+  export let lockState = false
   export let unstyled
   export let isHovered
+  export let placeholder
 
   /** @type {cellOptions} */
   export let cellOptions
 
-  let innerCellState
-
-  export const isActive = ( ) => { return (!innerCellState || $innerCellState == "Closed" ) }
-
   export let cellState = fsm( initialState , {
     "*": {
       goTo( state ) { return state }
     },
     View: { 
-      focus () { return "Focused" }, },
+      focus () { 
+        return editable ? "Editing" : "Focused" 
+      }
+    },
     Hovered: { cancel: () => { return "View" }},
     Focused: { 
-      _enter() { if (editable) this.enterEditing.debounce(50) },
-      unfocus() { return "View" },
-      lostFocus() { this.unfocus.debounce(50) },
-      enterEditing: "Editing",
+      unfocus() { return lockState ? initialState : "View" },
     },
     Error: { check : "View" },
     Editing: { 
-      openEditor() { return "EditingWithEditor" },
-      focus() {},
-      unfocus( fn ) { 
-        if (innerCellState == undefined || $innerCellState == "Closed" ) {
-          fn?.();
-        } 
-        if (!lockState) return "View";
-      },
-      lostFocus( fn ) { this.unfocus.debounce(50, fn) },
+      unfocus() { return lockState ? initialState : "View" },
+      lostFocus() { 
+        dispatch("blur", {} );
+        return lockState ? initialState : "View" },
       submit() { if ( value != originalValue ) acceptChange() ; return "View" }, 
       cancel() { value = Array.isArray(originalValue) ? [ ... originalValue ] : originalValue ; return "View" },
-    },
-    EditingWithEditor: { 
-      closeEditor() { return "Editing" }
     }
   })
 
@@ -88,15 +79,16 @@
     {cellOptions}
     {cellState}
     {fieldSchema}
+    {placeholder}
     {value}
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
+    on:focus
     on:blur
   />
 {:else if fieldSchema.type === "array" || fieldSchema.type === "options"  }
   <CellOptions
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
@@ -105,11 +97,9 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "number" || fieldSchema.type == "bigint" }
   <CellNumber
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
@@ -117,11 +107,9 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "datetime"}
   <CellDatetime
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
@@ -129,11 +117,9 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "link"  }
   <CellLink
-    bind:editorState={innerCellState}
     {cellState}
     {cellOptions}
     {value}
@@ -141,11 +127,9 @@
     {unstyled}
     {isHovered}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "attachment"  }
   <CellAttachment
-    bind:editorState={innerCellState}
     {cellOptions}
     {cellState}
     {value}
@@ -153,11 +137,9 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "boolean"  }
   <CellBoolean
-    bind:editorState={innerCellState}
     {cellOptions}
     {cellState}
     {value}
@@ -165,11 +147,9 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {:else if fieldSchema.type === "json"  }
   <CellJson
-    bind:editorState={innerCellState}
     {cellOptions}
     {cellState}
     {value}
@@ -177,13 +157,12 @@
     formattedValue = { getCellValue(value, valueTemplate) }
     {unstyled}
     on:change
-    on:blur
   />
 {/if}
 
 <style>
   :global(.superCell) {
-    flex: auto;
+    width: 80px;
     display: flex;
     cursor: pointer;
     min-width: 0;
@@ -212,7 +191,7 @@
   }
   :global(.overflow) {
     position: absolute;
-    right: 0;
+    right: var(--super-table-cell-padding);
     top: 20%;
     height: 60%;
     display: flex;
diff --git a/lib/SuperTableCell/SuperTableCell.svelte b/lib/SuperTableCell/SuperTableCell.svelte
index 98f242b..e86a2d8 100644
--- a/lib/SuperTableCell/SuperTableCell.svelte
+++ b/lib/SuperTableCell/SuperTableCell.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { getContext , beforeUpdate, createEventDispatcher } from "svelte";
-
-  import { clickOutsideAction } from "svelte-legos";
+  import { getContext , createEventDispatcher, onMount } from "svelte";
   import SuperCell from "./SuperCell.svelte";
 
   const tableDataChangesStore = getContext("tableDataChangesStore");
@@ -19,14 +17,7 @@
   let originalValue = Array.isArray(value) ? [ ... value ] : value
 
   let cellState
-  let width
-
-  const getCellColor = (value, template) => {
-    if (!template) {
-      return null
-    }
-    return processStringSync(template,  { Value: value }  )
-  }
+  let wrapperAnchor
 
   /** @type {import('./SuperCell.Svelte').cellOptions} */
   $: cellOptions = {
@@ -34,7 +25,7 @@
     color: columnOptions.color,
     background: columnOptions.background ?? "transparent",
     fontWeight: columnOptions.fontWeight,
-    padding: columnOptions.padding
+    padding: columnOptions.padding,
   }
 
   function acceptChange ( ) { 
@@ -65,15 +56,11 @@
       e.preventDefault();
       cellState.unfocus();
     }
-  }
 
-  let wrapperAnchor
-  let focusedOrHasFocused
-
-  // We need to know if our child Super Cell has the focus
-  beforeUpdate( () => {
-    focusedOrHasFocused = wrapperAnchor?.matches(":focus-within") ?? false
-  })
+    if (e.key == "Enter") {
+      cellState.lostFocus();
+    } 
+  }
 
 </script>
 
@@ -82,18 +69,11 @@
 <div 
   bind:this={wrapperAnchor}
   class="superTableCellWrapper"
-  style:--lock-width={width}
-  class:inEdit={$cellState == "Editing" }
-  class:focused={focusedOrHasFocused}
+  class:inEdit={ $cellState == "Editing" }
   tabindex="0"
-  use:clickOutsideAction
   on:keydown={handleKeyboard}
-  on:clickoutside={() => { 
-    if ( cellState && $cellState != "View") {
-      cellState.lostFocus()
-  }}}
-  on:click={() => { width = wrapperAnchor.clietWidth ; cellState.focus() }}
-  on:focus={() => cellState.focus() }
+  on:click={ () => { cellState.focus() } }
+  on:focus={ () => { cellState.focus() } }
 >
   <SuperCell
     bind:cellState 
@@ -103,27 +83,30 @@
     {fieldSchema}
     {editable}
     {isHovered}
+    lockState={false}
     unstyled
     on:change={handleChange}
+    on:keydown
   />
 </div>
 
 <style>
 .superTableCellWrapper {
-  flex: auto;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   overflow: hidden;
   border: 1px solid transparent;
-  min-width: 0;
+  transition: all 30ms ease-out;
 }
 
+.superTableCellWrapper:focus {
+  outline: none;
+}
 .superTableCellWrapper.inEdit {
-  width: var(--lock-width);
-  max-width: var(--lock-width);
-  color: var(--spectrum-global-color-gray-900);
-  border-color: var(--spectrum-global-color-gray-600);
+  border-color: var(--spectrum-global-color-blue-600);
 }
 .superTableCellWrapper.inEdit::before {
   content: "";
@@ -135,10 +118,5 @@
   filter: brightness(80%);
   background-color: var(--spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50));
 }
-.superTableCellWrapper.inEdit.focused {
-    border-color: var(--spectrum-global-color-gray-500);
-  }
-.superTableCellWrapper.inEdit:focus-within {
-    border-color: var(--spectrum-global-color-blue-500);
-  }
+
 </style>
\ No newline at end of file
diff --git a/lib/SuperTableCell/cells/CellBoolean.svelte b/lib/SuperTableCell/cells/CellBoolean.svelte
index 55eca46..c337b96 100644
--- a/lib/SuperTableCell/cells/CellBoolean.svelte
+++ b/lib/SuperTableCell/cells/CellBoolean.svelte
@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher } from 'svelte'
-  import Switch from "../../../node_modules/@budibase/bbui/src/Form/Core/Switch.svelte"
   import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte"
 
   export let value
@@ -20,28 +19,43 @@
     }
   }
 
+  let anchor
+
+  $: inEdit = $cellState == "Editing"
+  $: if ( inEdit && anchor ) anchor?.focus() 
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div 
   class="superCell" 
   class:inEdit={ $cellState == "Editing" }
   class:unstyled
-  tabindex="-1"
+  tabindex="0"
   style:padding-left={cellOptions?.padding}
   style:padding-right={cellOptions?.padding}
   on:keydown={handleKeyboard}
   >
-    {#if $cellState == "Editing" }
+    {#if inEdit }
       <div class="inline-value" > 
-        <Switch {value} on:change={(e) => dispatch("change", { value: e.detail } )}/>
+        <div class="spectrum-Switch spectrum-Switch--emphasized">
+          <input
+            bind:this={anchor}
+            checked={value}
+            on:change={(e) => dispatch("change", { value: e.detail } )}
+            type="checkbox"
+            class="spectrum-Switch-input"
+            on:blur={cellState.lostFocus}
+          />
+          <span class="spectrum-Switch-switch" />
+        </div>
       </div>
     {:else}
-    <div class="inline-value" > 
-      {#if value}
-        <Icon size="XS" name="Checkmark" color={"lime"}/>
-      {/if}
-    </div>
+      <div class="inline-value" > 
+        {#if value}
+          <Icon size="S" name="Checkmark" color={"lime"}/>
+        {/if}
+      </div>
     {/if}
 </div>
 
diff --git a/lib/SuperTableCell/cells/CellDatetime.svelte b/lib/SuperTableCell/cells/CellDatetime.svelte
index 29a8809..a5c4664 100644
--- a/lib/SuperTableCell/cells/CellDatetime.svelte
+++ b/lib/SuperTableCell/cells/CellDatetime.svelte
@@ -6,29 +6,34 @@
   export let cellState
   export let formattedValue
   export let unstyled
-  export let width
   export let cellOptions
 
   const dispatch = createEventDispatcher()
 
-  $: inEdit = $cellState == "Editing" || $cellState == "EditingWithEditor"
+  let anchor 
+  let pickerStatus = "Closed"
 
+  $: inEdit = $cellState == "Editing"
+  $: if ( inEdit && anchor ) anchor.focus();
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div 
+  bind:this={anchor}
   class="superCell"
   class:unstyled 
   class:inEdit
+  tabindex="0"
   style:padding-left={cellOptions?.padding}
   style:padding-right={cellOptions?.padding}
-  style:max-width={width} 
+  on:blur={ () => pickerStatus == "Closed" ? cellState.lostFocus() : null }
 >
   {#if inEdit}
     <div class="pickerWrapper">
       <DatePicker 
         {value} 
-        on:open={cellState.openEditor}
-        on:close={cellState.closeEditor}
+        on:open={ (e) => pickerStatus = "Open" }
+        on:close={ (e) => { pickerStatus = "Closed"; } }
         on:change={(e) => dispatch("change", e.detail ) } />
     </div>
   {:else}
diff --git a/lib/SuperTableCell/cells/CellJSON.svelte b/lib/SuperTableCell/cells/CellJSON.svelte
index 5e39d3f..c48a22f 100644
--- a/lib/SuperTableCell/cells/CellJSON.svelte
+++ b/lib/SuperTableCell/cells/CellJSON.svelte
@@ -39,7 +39,6 @@
   class="superCell"
   class:unstyled 
   class:inEdit={ $cellState == "Editing" }
-  style:max-width={width} 
 >
   {#if $cellState == "Editing" }
     <input class="inline-edit" {value} {placeholder} on:input={debounce} use:focus on:blur={cellState.unfocus} />
diff --git a/lib/SuperTableCell/cells/CellLink.svelte b/lib/SuperTableCell/cells/CellLink.svelte
index 010d390..45815d2 100644
--- a/lib/SuperTableCell/cells/CellLink.svelte
+++ b/lib/SuperTableCell/cells/CellLink.svelte
@@ -25,6 +25,7 @@
   let overflow
 
   $: inEdit = $cellState == "Editing"
+  $: if ( inEdit ) anchor.focus()
   $: if ( value == "" || value == undefined ) value = []
 
   const unselectRow = ( val ) => {
@@ -40,7 +41,7 @@
   }
 
   const handleKeyboard = ( e ) => {
-    if ( e.keyCode == 32 ) {
+    if ( e.keyCode == 32 && $cellState == "Editing") {
       e.preventDefault();
       e.stopPropagation();
       editorState.toggle();
@@ -67,7 +68,9 @@
   class:focused={$cellState == "Focused"}
   style:padding-left={cellOptions?.padding}
   style:padding-right={cellOptions?.padding}
-  tabindex="0" 
+  style:width={$cellState == "Editing" ? cellOptions.width : null } 
+  tabindex="0"
+  on:blur={() => { if (! anchor.matches(":focus-within")) cellState.lostFocus ()  } } 
   on:keydown={handleKeyboard} 
 >
   <div bind:this={valueAnchor} class="inline-value">
diff --git a/lib/SuperTableCell/cells/CellLinkPicker.svelte b/lib/SuperTableCell/cells/CellLinkPicker.svelte
index 975bd48..c4cc7c2 100644
--- a/lib/SuperTableCell/cells/CellLinkPicker.svelte
+++ b/lib/SuperTableCell/cells/CellLinkPicker.svelte
@@ -87,9 +87,6 @@
 <div class="control" style:min-width={schema.relationshipType == "one-to-many" ? " 160px" : "320px"}> 
 
   <div class="searchControl">
-    <div class="columnSelect">
-      {primaryDisplay} - {schema.relationshipType}
-    </div>
     <input class="input" on:input={debounce} type="text" placeholder="Search..."/>
     <div class="pageSize">
       <div class="pageSizeItem" class:selected={limit == 10} on:click={(e) => setLimit(e, 10)}> 10 </div>
@@ -111,7 +108,7 @@
                 {#if results.rows.length > 0 }
                   {#each results.rows as row, idx }
                     {#if !(rowSelected(row)) }
-                      <div class="option" on:click={selectRow(row)} >
+                      <div class="option" on:mousedown|stopPropagation|preventDefault={selectRow(row)} >
                         <div class="option text">
                           {row[primaryDisplay]}
                         </div>
@@ -130,7 +127,7 @@
         <div class="options"> 
           {#each value as val, idx }
             {#if (rowSelected(val)) }
-              <div transition:fly={{ x: -20, duration: 130}} class="option" on:click={unselectRow(val)} >
+              <div transition:fly={{ x: -20, duration: 130}} class="option" on:mousedown|stopPropagation|preventDefault={unselectRow(val)} >
                 <div class="option text">
                   {val.primaryDisplay}
                 </div>
@@ -154,7 +151,7 @@
                 {#key value}
                   {#each results.rows as row, idx }
                     {#if !(rowSelected(row)) }
-                      <div class="option" on:click={selectRow(row)} >
+                      <div class="option" on:mousedown|stopPropagation|preventDefault={selectRow(row)} >
                         <div class="option text">
                           {row[primaryDisplay]}
                         </div>
@@ -183,7 +180,7 @@
     align-items: stretch;
     justify-content: space-around;
     gap: 0.85rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   }
 
   .searchControl {
diff --git a/lib/SuperTableCell/cells/CellNumber.svelte b/lib/SuperTableCell/cells/CellNumber.svelte
index dcf27f2..760c91f 100644
--- a/lib/SuperTableCell/cells/CellNumber.svelte
+++ b/lib/SuperTableCell/cells/CellNumber.svelte
@@ -38,6 +38,7 @@
   class:unstyled
   style:padding-left={cellOptions?.padding}
   style:padding-right={cellOptions?.padding}
+  style:width={$cellState == "Editing" || $cellState == "EditingWithEditor" ? cellOptions.width : null } 
 >
   {#if inEdit}
     <input 
@@ -46,7 +47,7 @@
       {value} 
       {placeholder} 
       on:input={debounce}
-      on:blur
+      on:blur={cellState.lostFocus}
       use:focus
     />
   {:else}
diff --git a/lib/SuperTableCell/cells/CellOptions.svelte b/lib/SuperTableCell/cells/CellOptions.svelte
index fddc1a8..89e3704 100644
--- a/lib/SuperTableCell/cells/CellOptions.svelte
+++ b/lib/SuperTableCell/cells/CellOptions.svelte
@@ -2,7 +2,7 @@
   import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte";
   import Popover from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte";
   import fsm from "svelte-fsm";
-  import { onMount, createEventDispatcher ,beforeUpdate } from "svelte"
+  import { createEventDispatcher ,beforeUpdate } from "svelte"
   import { flip } from 'svelte/animate';
 
   export let cellState
@@ -24,17 +24,13 @@
   let valueAnchor
   let overflow = true
   let focusedOptionIdx = undefined;
-  let lockWidth
 
   export let editorState = fsm( "Closed", {
     "*": {
       handleKeyboard( e ) { }
     },
     Open: {  
-      _enter() { cellState.openEditor() },
-      _exit() { cellState.closeEditor() },
-      close() { return "Closed" },
-      toggle() { return "Closed" },
+      toggle() { cellState.closeEditor(); anchor.focus(); return "Closed" },
       toggleOption ( idx ) { 
         toggleOption(options[idx]); 
         dispatch("change", value )
@@ -58,8 +54,7 @@
       },
     },
     Closed: {
-      toggle() { return "Open" },
-      open() { return "Open" },
+      toggle() { cellState.openEditor(); return "Open" },
       highlightNext () { return "Open" },
     }
   });
@@ -69,8 +64,9 @@
   $: optionColors = fieldSchema?.optionColors || {};
   $: allowNull = !fieldSchema?.constraints?.presence ?? false;
   $: if (allowNull && options.length > 1) options = [ "Clear Selection", ...options ]
-  $: inEdit = $cellState == "Editing" || $cellState == "EditingWithEditor"
+  $: inEdit = $cellState == "Editing"
   $: multi = fieldSchema?.type == "array" ?? false
+  $: if ( inEdit && anchor && editorState == "Closed" ) anchor?.focus() 
 
   const getOptionColor = (value) => {
     return defaultOptionColor;
@@ -101,6 +97,7 @@
 
     if (!multi) {
       value = [option];
+      editorState.toggle();
     } else {
       if (value.includes(option)) {
         value.splice(value.indexOf(option), 1);
@@ -114,11 +111,6 @@
   beforeUpdate ( () => { 
     overflow = valueAnchor ? valueAnchor.clientWidth != valueAnchor.scrollWidth : undefined
   } )
-  onMount( () => { 
-    lockWidth = anchor.clientWidth 
-    if ( $cellState != "View" )
-      anchor.focus();
-  } )
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -131,8 +123,10 @@
   class:focused={$cellState == "Focused"}
   style:padding-left={cellOptions?.padding}
   style:padding-right={cellOptions?.padding}
-  tabindex="-1" 
+  tabindex="0" 
   on:keydown={handleKeyboard} 
+  on:click={ () => { if ( $cellState == "Editing" ) editorState.toggle() } }
+  on:blur={() => { cellState.lostFocus() } }
 >
   <div bind:this={valueAnchor} class="inline-value" >
     {#if value.length < 1 && inEdit}
@@ -149,10 +143,10 @@
 
   {#if overflow && inEdit}
     <div class="overflow" class:inEdit style:background-color={ fadeToColor } >
-      <Icon name="ChevronDown" hoverable on:click={editorState.open} />
+      <Icon name="ChevronDown" hoverable />
     </div>
   {:else if inEdit}
-    <Icon name="ChevronDown" hoverable on:click={editorState.open} />
+    <Icon name="ChevronDown" hoverable />
   {:else if overflow}
     <div class="overflow" style:background-color={fadeToColor} ></div>
   {/if}
@@ -162,8 +156,8 @@
     useAnchorWidth={!multi}
     dismissible
     align={"left"} 
-    open={ $editorState == "Open" } 
-    on:close={ editorState.close }
+    open={ $editorState == "Open" && inEdit }
+    on:close={ () => { editorState.toggle() } }
   >
     <div class="options" on:wheel={(e) => e.stopPropagation()}>
       {#if options.length < 1}
@@ -188,7 +182,7 @@
             <div
               class="option"
               class:focused={focusedOptionIdx === idx}
-              on:click|preventDefault|stopPropagation={(e) => editorState.toggleOption(idx)}
+              on:mousedown|preventDefault|stopPropagation={(e) => editorState.toggleOption(idx)}
               on:mouseenter={() => (focusedOptionIdx = idx)}
             >
               <div class="option text">
diff --git a/lib/SuperTableCell/cells/CellString.svelte b/lib/SuperTableCell/cells/CellString.svelte
index 44d4dd2..ed188f1 100644
--- a/lib/SuperTableCell/cells/CellString.svelte
+++ b/lib/SuperTableCell/cells/CellString.svelte
@@ -4,7 +4,6 @@
   export let value = ""
   export let cellState
   export let formattedValue
-  export let width 
   export let placeholder = "Enter ... "
   export let debounced
   export let unstyled = false
@@ -19,7 +18,6 @@
   let timer;
 	const debounce = e => {
     value = e.target.value
-
     if (debounced) {    
       clearTimeout(timer);
       timer = setTimeout(() => {
@@ -41,8 +39,6 @@
   style:padding={cellOptions?.padding}
   class:inEdit={ $cellState == "Editing" }
   style:font-weight={ cellOptions?.fontWeight ? cellOptions?.fontWeight : "500"}
-  style:max-width={width} 
-
 >
   {#if $cellState == "Editing" }
     <input 
@@ -50,7 +46,7 @@
       {value} 
       {placeholder} 
       on:input={debounce}
-      on:blur
+      on:blur={cellState.lostFocus}
       use:focus
     />
   {:else}
diff --git a/package.json b/package.json
index 29a2a2e..b418b15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTableCell",
-  "version": "2.0.1-alpha",
+  "version": "2.0.2-alpha",
   "description": "To be used with the Super Table and Super Columns Components",
   "license": "MIT",
   "author": "Michael Poirazi",
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@crownframework/svelte-error-boundary": "^1.0.3",
-    "svelte": "^3.49.0",
-    "svelte-legos": "^0.2.1",
-    "svelte-fsm": "^1.2.0"
+    "svelte": "^3.59.0",
+    "svelte-fsm": "^1.2.0",
+    "svelte-legos": "^0.2.1"
   },
   "devDependencies": {
     "@budibase/backend-core": "^2.9.19",
diff --git a/yarn.lock b/yarn.lock
index 53fc03f..00cd5fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -163,7 +163,7 @@
   dependencies:
     "@budibase/types" "2.12.11"
 
-"@budibase/string-templates@2.12.11", "@budibase/string-templates@^2.10.2":
+"@budibase/string-templates@2.12.11":
   version "2.12.11"
   resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-2.12.11.tgz#474519ba53ffd6b35d729f264f08112c19f13564"
   integrity sha512-N2veTVX2o8BLFEEWdVP5L9jkLAyx2+wBztmX24RdOhW1tXWb4V+8kxGvyfENRKXmX+doTSiQWEJVzauyEDzAtw==
@@ -615,16 +615,16 @@
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
 "@types/codemirror@^5.60.4":
-  version "5.60.12"
-  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.12.tgz#09daf6f2af381d1613a50b2b53ff2abf0232045b"
-  integrity sha512-SFSj5Tb/mtQoVgaltsipdRGG1PkcFu/L0OXPNBGCXYUQtwsNoAGRNNHOTl1jYcQUcEI77EiUfk94bgETTbSo/A==
+  version "5.60.13"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.13.tgz#faffaf7f6b866239f5dc0f6b55fc4d04ce884790"
+  integrity sha512-qLWcKUwYDYB7mZpE++0Jn3i1TJ2GW8nlhALRAfjaKgb1HRnk2qcNqWxZ+BpPY1h4n4IQT0foThaOxWHxEL8MnQ==
   dependencies:
     "@types/tern" "*"
 
 "@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.4.tgz#d9748f5742171b26218516cf1828b8eafaf8a9fa"
-  integrity sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -637,9 +637,9 @@
   integrity sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==
 
 "@types/node@*", "@types/node@^20.4.5":
-  version "20.8.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.10.tgz#a5448b895c753ae929c26ce85cab557c6d4a365e"
-  integrity sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==
+  version "20.9.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.0.tgz#bfcdc230583aeb891cf51e73cfdaacdd8deae298"
+  integrity sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==
   dependencies:
     undici-types "~5.26.4"
 
@@ -651,16 +651,16 @@
     "@types/node" "*"
 
 "@types/tern@*":
-  version "0.23.6"
-  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.6.tgz#8927626347db76a998d27889c5c2dbf18cb42115"
-  integrity sha512-ntalN+F2msUwz7/OCCADN4FwxtIGqF4Hqwxd15yAn0VOUozj1VaIrH4Prh95N8y69K3bQpHFVGwTJDZC4oRtvA==
+  version "0.23.7"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.7.tgz#f3c27fb7d6db5e86d7f069e7d5124bfa677a5b2d"
+  integrity sha512-0YS9XCZ0LAhlP11HV9SqncUYyz9Ggsgc7Om/AmchKvoeFyj0qPaJmX6rJ93mJVExizWDzUMb49gAtVpI1uHd8Q==
   dependencies:
     "@types/estree" "*"
 
 "@types/tough-cookie@^4.0.2":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.4.tgz#cf2f0c7c51b985b6afecea73eb2cd65421ecb717"
-  integrity sha512-95Sfz4nvMAb0Nl9DTxN3j64adfwfbBPEYq14VN7zT5J5O2M9V6iZMIIQU1U+pJyl9agHYHNCqhCXgyEtIRRa5A==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
+  integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
 
 abbrev@1:
   version "1.1.1"
@@ -878,9 +878,9 @@ aws4@^1.8.0:
   integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
 axios-retry@^3.1.9:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.8.1.tgz#4bb53f87ea537bce904c477e5c2808571066acbb"
-  integrity sha512-4XseuArB4CEbfLRtMpUods2q8MLBvD4r8ifKgK4SP2FRgzQIPUDpzZ+cjQ/19eu3w2UpKgkJA+myEh2BYDSjqQ==
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.9.0.tgz#be5a52f4b04e72a514bf49e4d315b51bd2b65bc9"
+  integrity sha512-uK9K/GnlExfShu9dB4GuK0j+iGkIR+LRus3ILhE0zSVXY2q6Dxpemr50NPMs5kP7eOKv9Pz4VvUO40ps1F67dA==
   dependencies:
     "@babel/runtime" "^7.15.4"
     is-retry-allowed "^2.2.0"
@@ -893,9 +893,9 @@ axios@0.24.0:
     follow-redirects "^1.14.4"
 
 axios@^1.1.3:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102"
-  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.1.tgz#76550d644bf0a2d469a01f9244db6753208397d7"
+  integrity sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -1097,9 +1097,14 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001541:
-  version "1.0.30001561"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz#752f21f56f96f1b1a52e97aae98c57c562d5d9da"
-  integrity sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==
+  version "1.0.30001562"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001562.tgz#9d16c5fd7e9c592c4cd5e304bc0f75b0008b2759"
+  integrity sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==
+
+canvas-confetti@^1.6.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.9.0.tgz#03a9fa528b47bd37a127af216828e67894a60b0a"
+  integrity sha512-0UGU/T5Un/Cd4Aj4fu/p/oVQm8Il+brK5xcmY+y77u7PXuyNJD4ODUWe01A5o3GUI9Bb8lOBlQ10VdaDsY1FBA==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1594,9 +1599,9 @@ ecdsa-sig-formatter@1.0.11:
     safe-buffer "^5.0.1"
 
 electron-to-chromium@^1.4.535:
-  version "1.4.576"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz#0c6940fdc0d60f7e34bd742b29d8fa847c9294d1"
-  integrity sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==
+  version "1.4.582"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.582.tgz#4908215182266793499ac57d80e2680d7dd9b3db"
+  integrity sha512-89o0MGoocwYbzqUUjc+VNpeOFSOK9nIdC5wY4N+PVUarUK0MtjyTjks75AZS2bW4Kl8MdewdFsWaH0jLy+JNoA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -2924,9 +2929,9 @@ ltgt@2.2.1, ltgt@^2.1.2:
   integrity sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==
 
 luxon@^3.2.1:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.3.tgz#8ddf0358a9492267ffec6a13675fbaab5551315d"
-  integrity sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
+  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
 
 magic-string@^0.25.7:
   version "0.25.9"
@@ -3096,9 +3101,9 @@ msgpackr@^1.5.2:
     msgpackr-extract "^3.0.2"
 
 nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -4016,6 +4021,16 @@ pouchdb@7.3.0:
     uuid "8.3.2"
     vuvuzela "1.0.3"
 
+prism-svelte@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/prism-svelte/-/prism-svelte-0.5.0.tgz#c4aeffeaddb179cfef213aab91ee785b66d22992"
+  integrity sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==
+
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -4897,12 +4912,21 @@ svelte-fsm@^1.2.0:
   resolved "https://registry.yarnpkg.com/svelte-fsm/-/svelte-fsm-1.2.0.tgz#0e575e6d96f3cf9c55fd9ec454f0462a8c55d26b"
   integrity sha512-JScbFpGqEgIOIYcMRonR4lO6ExEI+L1+Zqq7zW7kuuMSkfkcQooPVbO/+k7VdCwF0/37anYmV6ooAOR5m9hz7g==
 
+svelte-legos@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/svelte-legos/-/svelte-legos-0.2.2.tgz#de5141e56efb8a9ebbf92aaf9269ea70fb7f8f0c"
+  integrity sha512-HTVkCIqhrxdy+OpXjxGr/4xIJEGv4d2cRQwTjm0SYfLw/YF1I1l/TQR59nb2WvjccnO8TNFNTvAWP5pgXQnU+w==
+  dependencies:
+    canvas-confetti "^1.6.0"
+    prism-svelte "^0.5.0"
+    prismjs "^1.29.0"
+
 svelte-portal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte@^3.49.0:
+svelte@^3.59.0:
   version "3.59.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.59.2.tgz#a137b28e025a181292b2ae2e3dca90bf8ec73aec"
   integrity sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==