diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte
index 8bb64ca2e8..4323ba6164 100644
--- a/packages/builder/src/components/common/LinkedRecordSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRecordSelector.svelte
@@ -12,7 +12,13 @@
   let linkedRecords = new Set(linked)
 
   $: linked = [...linkedRecords]
-  $: FIELDS_TO_HIDE = ["modelId", "type", "_id", "_rev", $backendUiStore.selectedModel.name]
+  $: FIELDS_TO_HIDE = [
+    "modelId",
+    "type",
+    "_id",
+    "_rev",
+    $backendUiStore.selectedModel.name,
+  ]
 
   async function fetchRecords() {
     const FETCH_RECORDS_URL = `/api/${modelId}/records`
@@ -26,7 +32,7 @@
 
   function linkRecord(id) {
     if (linkedRecords.has(id)) {
-      linkedRecords.delete(id);
+      linkedRecords.delete(id)
     } else {
       linkedRecords.add(id)
     }
diff --git a/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte b/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte
index 1d22751033..9402c26003 100644
--- a/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/LinkedRecord.svelte
@@ -4,18 +4,23 @@
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
 
-
   export let ids = []
   export let header
 
   let records = []
   let open = false
 
-  $: FIELDS_TO_HIDE = ["modelId", "type", "_id", "_rev", $backendUiStore.selectedModel.name]
+  $: FIELDS_TO_HIDE = [
+    "modelId",
+    "type",
+    "_id",
+    "_rev",
+    $backendUiStore.selectedModel.name,
+  ]
 
   async function fetchRecords() {
-    const response = await api.post("/api/records/search", { 
-      keys: ids
+    const response = await api.post("/api/records/search", {
+      keys: ids,
     })
     records = await response.json()
   }
@@ -35,10 +40,10 @@
   <a on:click={toggleOpen}>{records.length}</a>
   {#if open}
     <div class="popover" transition:fade>
-    <header>
-      <h3>{header}</h3>
-      <i class="ri-close-circle-fill" on:click={toggleOpen} />
-    </header>
+      <header>
+        <h3>{header}</h3>
+        <i class="ri-close-circle-fill" on:click={toggleOpen} />
+      </header>
       {#each records as record}
         <div class="linked-record">
           <div class="fields">
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index 14d050be36..8424c12048 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -4,7 +4,7 @@
   import { Button } from "@budibase/bbui"
   import Select from "components/common/Select.svelte"
   import ActionButton from "components/common/ActionButton.svelte"
-  import LinkedRecord from "./LinkedRecord.svelte";
+  import LinkedRecord from "./LinkedRecord.svelte"
   import TablePagination from "./TablePagination.svelte"
   import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
   import * as api from "./api"
@@ -46,14 +46,12 @@
 
   $: {
     if ($backendUiStore.selectedView) {
-      api
-        .fetchDataForView($backendUiStore.selectedView)
-        .then(records => {
-          data = records || []
-          headers = Object.keys($backendUiStore.selectedModel.schema).filter(
-            key => !INTERNAL_HEADERS.includes(key)
-          )
-        })
+      api.fetchDataForView($backendUiStore.selectedView).then(records => {
+        data = records || []
+        headers = Object.keys($backendUiStore.selectedModel.schema).filter(
+          key => !INTERNAL_HEADERS.includes(key)
+        )
+      })
     }
   }
 
@@ -91,10 +89,6 @@
       </span>
     </Button>
   </div>
-  <div class="search">
-    <i class="ri-search-line"></i>
-    <input placeholder="Search" class="budibase__input" bind:value={search} />
-  </div>
   <table class="uk-table">
     <thead>
       <tr>
@@ -135,11 +129,9 @@
           </td>
           {#each headers as header}
             <td>
-            {#if Array.isArray(row[header])}
-              <LinkedRecord {header} ids={row[header]} />
-            {:else}
-              {row[header] || 0}
-            {/if}
+              {#if Array.isArray(row[header])}
+                <LinkedRecord {header} ids={row[header]} />
+              {:else}{row[header] || 0}{/if}
             </td>
           {/each}
         </tr>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
index 323a7eac00..cf44389fd3 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
@@ -6,7 +6,6 @@
 
   export let record
   export let onClosed
-
 </script>
 
 <section>
@@ -26,7 +25,7 @@
       alert
       on:click={async () => {
         await api.deleteRecord(record)
-        notifier.danger("Record deleted")
+        notifier.danger('Record deleted')
         backendUiStore.actions.records.delete(record)
         onClosed()
       }}>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index 0d82ecddde..a77e2146fa 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -63,4 +63,4 @@
   input {
     color: var(--dark-grey);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
index 3be5ebc715..61476849df 100644
--- a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
@@ -1,6 +1,6 @@
 <script>
   import * as blockDefinitions from "constants/backend"
-  import { backendUiStore } from "builderStore";
+  import { backendUiStore } from "builderStore"
   import Block from "components/common/Block.svelte"
 
   const HEADINGS = [
@@ -11,7 +11,7 @@
     {
       title: "Blocks",
       key: "BLOCKS",
-    }
+    },
   ]
 
   let selectedTab = "FIELDS"
diff --git a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
index 59e1073ca4..db424f8ef7 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
@@ -11,13 +11,12 @@
   function createModel(model) {
     const { schema, ...rest } = $backendUiStore.selectedModel
 
-    backendUiStore.actions.models.save({ 
+    backendUiStore.actions.models.save({
       model: {
         ...model,
-        ...rest
+        ...rest,
       },
-      instanceId: $backendUiStore.selectedDatabase._id
-    });
+    })
   }
 </script>
 
@@ -60,7 +59,11 @@
     <p>Blocks are pre-made fields and help you build your model quicker.</p>
     <div class="blocks">
       {#each Object.values(MODELS) as model}
-        <Block tertiary title={model.name} icon={model.icon} on:click={() => createModel(model)}/>
+        <Block
+          tertiary
+          title={model.name}
+          icon={model.icon}
+          on:click={() => createModel(model)} />
       {/each}
     </div>
   </div>
diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
index 40b12d527e..6097210d51 100644
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@@ -30,12 +30,11 @@
 
   async function deleteModel() {
     const model = $backendUiStore.selectedModel
-    const instanceId = $backendUiStore.selectedDatabase._id
     const field = $backendUiStore.selectedField
 
     if (field) {
       delete model.schema[field]
-      backendUiStore.actions.models.save({ model, instanceId })
+      backendUiStore.actions.models.save({ model })
       notifier.danger(`Field ${field} deleted.`)
       return
     }
@@ -52,7 +51,6 @@
 
   async function saveModel() {
     await backendUiStore.actions.models.save({
-      instanceId: $backendUiStore.selectedDatabase._id,
       model: $backendUiStore.draftModel,
     })
     notifier.success(
diff --git a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
index 19d54523b2..e612fb5393 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte
@@ -1,17 +1,20 @@
 <script>
-    import {buildStyle} from "./helpers.js"
-    import {fade} from "svelte/transition"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"
 
-    export let backgroundSize = "10px"
-    export let borderRadius = ""
-    export let height = ""
-    export let width = ""
-    export let margin = ""
-
-    $: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
+  export let backgroundSize = "10px"
+  export let borderRadius = ""
+  export let height = ""
+  export let width = ""
+  export let margin = ""
 
+  $: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })
 </script>
 
+<div in:fade {style}>
+  <slot />
+</div>
+
 <style>
   div {
     background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
@@ -19,7 +22,3 @@
     width: fit-content;
   }
 </style>
-
-<div in:fade {style}>
-    <slot />
-</div>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 1bc7970124..aff8e22c91 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import { fade } from 'svelte/transition';
-  import Swatch from "./Swatch.svelte";
+  import { onMount, createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import Swatch from "./Swatch.svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
-  import {buildStyle} from "./helpers.js"
+  import { buildStyle } from "./helpers.js"
   import {
     getColorFormat,
     convertToHSVA,
@@ -14,16 +14,16 @@
   import ButtonGroup from "./ButtonGroup.svelte"
   import Input from "./Input.svelte"
 
-  export let value = "#3ec1d3ff";
+  export let value = "#3ec1d3ff"
   export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
   export let disableSwatches = false
-  export let format = "hexa";
-  export let open = false;
-  
-  export let pickerHeight = 0;
-  export let pickerWidth = 0;
+  export let format = "hexa"
+  export let open = false
 
-  let adder = null;
+  export let pickerHeight = 0
+  export let pickerWidth = 0
+
+  let adder = null
 
   let h = null
   let s = null
@@ -33,7 +33,7 @@
   const dispatch = createEventDispatcher()
 
   onMount(() => {
-    if(!swatches.length > 0) {
+    if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
       getRecentColors()
     }
@@ -46,7 +46,7 @@
   function getRecentColors() {
     let colorStore = localStorage.getItem("cp:recent-colors")
     if (colorStore) {
-      swatches = JSON.parse(colorStore)      
+      swatches = JSON.parse(colorStore)
     }
   }
 
@@ -74,26 +74,26 @@
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s;
-    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    s = detail.s
+    v = detail.v
+    value = convertHsvaToFormat([h, s, v, a], format)
     dispatchValue()
   }
 
-  function setHue({color, isDrag}) {
-    h = color;
-    value = convertHsvaToFormat([h, s, v, a], format);   
-    if(!isDrag) {
+  function setHue({ color, isDrag }) {
+    h = color
+    value = convertHsvaToFormat([h, s, v, a], format)
+    if (!isDrag) {
       dispatchValue()
-    } 
+    }
   }
 
-  function setAlpha({color, isDrag}) {
-    a = color === "1.00" ? "1" : color;
-    value = convertHsvaToFormat([h, s, v, a], format);    
-    if(!isDrag) {
-        dispatchValue()
-      } 
+  function setAlpha({ color, isDrag }) {
+    a = color === "1.00" ? "1" : color
+    value = convertHsvaToFormat([h, s, v, a], format)
+    if (!isDrag) {
+      dispatchValue()
+    }
   }
 
   function dispatchValue() {
@@ -101,43 +101,42 @@
   }
 
   function changeFormatAndConvert(f) {
-    format = f;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    format = f
+    value = convertHsvaToFormat([h, s, v, a], format)
   }
 
   function handleColorInput(text) {
     let format = getColorFormat(text)
-    if(format) {
+    if (format) {
       value = text
       convertAndSetHSVA()
     }
   }
 
   function dispatchInputChange() {
-    if(format) {
+    if (format) {
       dispatchValue()
     }
   }
 
   function addSwatch() {
-    if(format) {
+    if (format) {
       dispatch("addswatch", value)
       setRecentColor(value)
     }
   }
 
   function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1);
+    let removedSwatch = swatches.splice(idx, 1)
     swatches = swatches
     dispatch("removeswatch", removedSwatch)
     localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
   }
-  
 
   function applySwatch(color) {
-    if(value !== color) {
+    if (value !== color) {
       format = getColorFormat(color)
-      if(format) {
+      if (format) {
         value = color
         convertAndSetHSVA()
         dispatchValue()
@@ -145,9 +144,9 @@
     }
   }
 
-    $: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
-    $: style = buildStyle({background: value, border})
-    $: shrink = swatches.length > 0
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
+  $: style = buildStyle({ background: value, border })
+  $: shrink = swatches.length > 0
 </script>
 
 <div class="colorpicker-container">
@@ -174,6 +173,73 @@
     </div>
   </div>
 
+</div>
+<div
+  class="colorpicker-container"
+  bind:clientHeight={pickerHeight}
+  bind:clientWidth={pickerWidth}>
+
+  <div class="palette-panel">
+    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+  </div>
+
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <CheckedBackground borderRadius="50%" backgroundSize="8px">
+          <div class="selected-color" {style} />
+        </CheckedBackground>
+      </div>
+      <div>
+        <Slider
+          type="hue"
+          value={h}
+          on:change={hue => setHue(hue.detail)}
+          on:dragend={dispatchValue} />
+
+        <CheckedBackground borderRadius="10px" backgroundSize="7px">
+          <Slider
+            type="alpha"
+            value={a}
+            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+            on:dragend={dispatchValue} />
+        </CheckedBackground>
+
+      </div>
+    </div>
+
+    {#if !disableSwatches}
+      <div transition:fade class="swatch-panel">
+        {#if swatches.length > 0}
+          {#each swatches as color, idx}
+            <Swatch
+              {color}
+              on:click={() => applySwatch(color)}
+              on:removeswatch={() => removeSwatch(idx)} />
+          {/each}
+        {/if}
+        {#if swatches.length !== 12}
+          <div
+            bind:this={adder}
+            transition:fade
+            class="adder"
+            on:click={addSwatch}
+            class:shrink>
+            <span>&plus;</span>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input
+        {value}
+        on:input={event => handleColorInput(event.target.value)}
+        on:change={dispatchInputChange} />
+    </div>
+  </div>
+
 </div>
 
 <style>
@@ -219,7 +285,7 @@
     border-radius: 50%;
   }
 
-   .swatch-panel {
+  .swatch-panel {
     flex: 0 0 15px;
     display: flex;
     flex-flow: row wrap;
@@ -230,7 +296,7 @@
 
   .adder {
     flex: 1;
-    height: 20px;		
+    height: 20px;
     display: flex;
     transition: flex 0.5s;
     justify-content: center;
@@ -244,7 +310,7 @@
     font-weight: 500;
   }
 
-  .shrink { 
+  .shrink {
     flex: 0 0 20px;
   }
 
@@ -255,54 +321,3 @@
     padding-top: 3px;
   }
 </style>
-
-<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
-
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
-
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider type="hue" value={h} on:change={(hue) => setHue(hue.detail)} on:dragend={dispatchValue} />
-
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          <Slider
-            type="alpha"
-            value={a}
-            on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)} 
-            on:dragend={dispatchValue}
-            />
-        </CheckedBackground>
-        
-      </div>
-    </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if swatches.length > 0}
-            {#each swatches as color, idx}
-              <Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
-            {/each}
-          {/if}
-          {#if swatches.length !== 12}
-            <div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
-    </div>
-  </div>
-
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 4e61b65902..72da43181e 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,151 +1,184 @@
 <script>
-    import Colorpicker from "./Colorpicker.svelte"
-    import CheckedBackground from "./CheckedBackground.svelte"
-    import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
+  import Colorpicker from "./Colorpicker.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
 
-    import {buildStyle} from "./helpers.js"
-    import { fade } from 'svelte/transition';
-    import {getColorFormat} from "./utils.js"
+  import { buildStyle } from "./helpers.js"
+  import { fade } from "svelte/transition"
+  import { getColorFormat } from "./utils.js"
 
-    export let value = "#3ec1d3ff"
-    export let swatches = []
-    export let disableSwatches = false
-    export let open = false;
-    export let width = "25px"
-    export let height = "25px"
+  export let value = "#3ec1d3ff"
+  export let swatches = []
+  export let disableSwatches = false
+  export let open = false
+  export let width = "25px"
+  export let height = "25px"
 
-    let format = "hexa";
-    let dimensions = {top: 0, left: 0}
-    let colorPreview = null
+  let format = "hexa"
+  let dimensions = { top: 0, left: 0 }
+  let colorPreview = null
 
-    let previewHeight = null    
-    let previewWidth = null
-    let pickerWidth = 0
-    let pickerHeight = 0
+  let previewHeight = null
+  let previewWidth = null
+  let pickerWidth = 0
+  let pickerHeight = 0
 
-    let anchorEl = null
-    let parentNodes = [];
-    let errorMsg = null
+  let anchorEl = null
+  let parentNodes = []
+  let errorMsg = null
 
-    $: previewStyle = buildStyle({width, height, background: value})
-    $: errorPreviewStyle = buildStyle({width, height})
-    $: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})    
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
+  $: pickerStyle = buildStyle({
+    top: `${dimensions.top}px`,
+    left: `${dimensions.left}px`,
+  })
 
-    const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher()
 
-    beforeUpdate(() => {
-       format = getColorFormat(value)
-       if(!format) {
-           errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
-           console.error(errorMsg)
-       }else{
-           errorMsg = null
-       }
-    })
+  beforeUpdate(() => {
+    format = getColorFormat(value)
+    if (!format) {
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+      console.error(errorMsg)
+    } else {
+      errorMsg = null
+    }
+  })
 
-    afterUpdate(() => {
-        if(colorPreview && colorPreview.offsetParent && !anchorEl) {
-            //Anchor relative to closest positioned ancestor element. If none, then anchor to body
-            anchorEl = colorPreview.offsetParent 
-                let curEl = colorPreview
-                let els = []
-                //Travel up dom tree from preview element to find parent elements that scroll
-                while(!anchorEl.isSameNode(curEl)) {
-                    curEl = curEl.parentNode
-                    let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")                    
-                    if(/scroll|auto/.test(elOverflow)) {
-                        els.push(curEl)
-                    }
-                } 
-                parentNodes = els
-        }
-    })
-
-
-    function openColorpicker(event) {
-        if(colorPreview) {
-            open = true;        
+  afterUpdate(() => {
+    if (colorPreview && colorPreview.offsetParent && !anchorEl) {
+      //Anchor relative to closest positioned ancestor element. If none, then anchor to body
+      anchorEl = colorPreview.offsetParent
+      let curEl = colorPreview
+      let els = []
+      //Travel up dom tree from preview element to find parent elements that scroll
+      while (!anchorEl.isSameNode(curEl)) {
+        curEl = curEl.parentNode
+        let elOverflow = window
+          .getComputedStyle(curEl)
+          .getPropertyValue("overflow")
+        if (/scroll|auto/.test(elOverflow)) {
+          els.push(curEl)
         }
+      }
+      parentNodes = els
     }
+  })
 
-    $: if(open && colorPreview) {
-        const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
-        const {innerHeight, innerWidth} = window
-
-        const {offsetLeft, offsetTop} = colorPreview
-        //get the scrollTop value for all scrollable parent elements 
-        let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
-
-        const spaceBelow = (innerHeight - spaceAbove) - previewHeight
-        const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
-        
-        //TOO: Testing and Scroll Awareness for x Scroll
-        const spaceRight = (innerWidth - spaceLeft) + previewWidth
-        const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
-
-        dimensions = {top, left}
+  function openColorpicker(event) {
+    if (colorPreview) {
+      open = true
     }
+  }
 
-    function onColorChange(color) {
-        value = color.detail;
-        dispatch("change", color.detail)
-    }
+  $: if (open && colorPreview) {
+    const {
+      top: spaceAbove,
+      width,
+      bottom,
+      right,
+      left: spaceLeft,
+    } = colorPreview.getBoundingClientRect()
+    const { innerHeight, innerWidth } = window
 
+    const { offsetLeft, offsetTop } = colorPreview
+    //get the scrollTop value for all scrollable parent elements
+    let scrollTop = parentNodes.reduce(
+      (scrollAcc, el) => (scrollAcc += el.scrollTop),
+      0
+    )
+
+    const spaceBelow = innerHeight - spaceAbove - previewHeight
+    const top =
+      spaceAbove > spaceBelow
+        ? offsetTop - pickerHeight - scrollTop
+        : offsetTop + previewHeight - scrollTop
+
+    //TOO: Testing and Scroll Awareness for x Scroll
+    const spaceRight = innerWidth - spaceLeft + previewWidth
+    const left =
+      spaceRight > spaceLeft
+        ? offsetLeft + previewWidth
+        : offsetLeft - pickerWidth
+
+    dimensions = { top, left }
+  }
+
+  function onColorChange(color) {
+    value = color.detail
+    dispatch("change", color.detail)
+  }
 </script>
 
 <div class="color-preview-container">
-    {#if !errorMsg}
-        <CheckedBackground borderRadius="3px" backgroundSize="8px">
-            <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />        
-        </CheckedBackground>
+  {#if !errorMsg}
+    <CheckedBackground borderRadius="3px" backgroundSize="8px">
+      <div
+        bind:this={colorPreview}
+        bind:clientHeight={previewHeight}
+        bind:clientWidth={previewWidth}
+        class="color-preview"
+        style={previewStyle}
+        on:click={openColorpicker} />
+    </CheckedBackground>
 
-        {#if open}
-        <div transition:fade class="picker-container" style={pickerStyle}>
-            <Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
-        </div>
-        <div on:click|self={() => open = false} class="overlay"></div>
-        {/if}
-    {:else}
-        <div class="color-preview preview-error" style={errorPreviewStyle}>
-            <span>&times;</span>
-        </div>
+    {#if open}
+      <div transition:fade class="picker-container" style={pickerStyle}>
+        <Colorpicker
+          on:change={onColorChange}
+          on:addswatch
+          on:removeswatch
+          bind:format
+          bind:value
+          bind:pickerHeight
+          bind:pickerWidth
+          {swatches}
+          {disableSwatches}
+          {open} />
+      </div>
+      <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
+  {:else}
+    <div class="color-preview preview-error" style={errorPreviewStyle}>
+      <span>&times;</span>
+    </div>
+  {/if}
 </div>
 
-
 <style>
-    .color-preview-container{
-        display: flex;
-        flex-flow: row nowrap;
-        height: fit-content;
-    }
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
 
-    .color-preview {
-        border-radius: 3px;
-        border: 1px solid #dedada;        
-    }
+  .color-preview {
+    border-radius: 3px;
+    border: 1px solid #dedada;
+  }
 
-    .preview-error {
-        background: #cccccc;
-        color: #808080;
-        text-align: center;
-        font-size: 18px;
-        cursor: not-allowed;
-    }
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
 
-    .picker-container {
-        position: absolute;
-        z-index: 3;
-        width: fit-content;
-        height: fit-content;
-    }
+  .picker-container {
+    position: absolute;
+    z-index: 3;
+    width: fit-content;
+    height: fit-content;
+  }
 
-    .overlay{
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 2;        
-    }
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
index 5e0c3a2b3f..c148d6bf30 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -5,6 +5,9 @@
 <div>
   <input on:input type="text" {value} maxlength="25" />
 </div>
+<div>
+  <input on:input on:change type="text" {value} maxlength="25" />
+</div>
 
 <style>
   div {
@@ -26,7 +29,3 @@
     font-weight: 550;
   }
 </style>
-
-<div>
-  <input on:input on:change type="text" {value} maxlength="25" />
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 4077086f87..78e9a24751 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte"
   import CheckedBackground from "./CheckedBackground.svelte"
 
   const dispatch = createEventDispatcher()
@@ -21,7 +21,8 @@
     if (
       clickX > 0 &&
       clickY > 0 &&
-      clickX < paletteWidth && clickY < paletteHeight
+      clickX < paletteWidth &&
+      clickY < paletteHeight
     ) {
       let s = (clickX / paletteWidth) * 100
       let v = 100 - (clickY / paletteHeight) * 100
@@ -49,6 +50,17 @@
   {style}>
   <div class="picker" style={pickerStyle} />
 </div>
+<CheckedBackground width="100%">
+  <div
+    bind:this={palette}
+    bind:clientHeight={paletteHeight}
+    bind:clientWidth={paletteWidth}
+    on:click={handleClick}
+    class="palette"
+    {style}>
+    <div class="picker" style={pickerStyle} />
+  </div>
+</CheckedBackground>
 
 <style>
   .palette {
@@ -68,9 +80,3 @@
     border-radius: 50%;
   }
 </style>
-
-  <CheckedBackground width="100%">
-    <div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
-      <div class="picker" style={pickerStyle} />
-    </div>
-  </CheckedBackground>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index dee685bb6a..906f5f0d6a 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -11,18 +11,15 @@
   let sliderWidth = 0
 
   function onSliderChange(mouseX, isDrag = false) {
-    const { left, width } = slider.getBoundingClientRect();
-    let clickPosition = mouseX - left;
+    const { left, width } = slider.getBoundingClientRect()
+    let clickPosition = mouseX - left
 
     let percentageClick = (clickPosition / sliderWidth).toFixed(2)
 
     if (percentageClick >= 0 && percentageClick <= 1) {
-      let value =
-        type === "hue"
-          ? 360 * percentageClick
-          : percentageClick;
-      
-      dispatch("change", {color: value, isDrag});
+      let value = type === "hue" ? 360 * percentageClick : percentageClick
+
+      dispatch("change", { color: value, isDrag })
     }
   }
 
@@ -45,6 +42,20 @@
     class="slider-thumb"
     {style} />
 </div>
+<div
+  bind:this={slider}
+  bind:clientWidth={sliderWidth}
+  on:click={event => onSliderChange(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => onSliderChange(e.detail, true)}
+    on:dragend
+    class="slider-thumb"
+    {style} />
+</div>
 
 <style>
   .color-format-slider {
@@ -86,18 +97,3 @@
     cursor: grab;
   }
 </style>
-
-<div
-  bind:this={slider}
-  bind:clientWidth={sliderWidth}
-  on:click={event => onSliderChange(event.clientX)}
-  class="color-format-slider"
-  class:hue={type === 'hue'}
-  class:alpha={type === 'alpha'}>
-  <div
-    use:dragable
-    on:drag={e => onSliderChange(e.detail, true)}
-    on:dragend
-    class="slider-thumb"
-    {style} />
-</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
index e602b72d33..2424df2003 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte
@@ -1,27 +1,47 @@
 <script>
-    import {createEventDispatcher} from "svelte"
-    import { fade } from 'svelte/transition';
-    import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import CheckedBackground from "./CheckedBackground.svelte"
 
-    export let hovered = false
-    export let color = "#fff"
-
-    const dispatch = createEventDispatcher()
+  export let hovered = false
+  export let color = "#fff"
 
+  const dispatch = createEventDispatcher()
 </script>
 
+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      in:fade
+      class="swatch"
+      style={`background: ${color};`}
+      on:click|self
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}>
+      {#if hovered}
+        <div
+          in:fade
+          class="remove-icon"
+          on:click|self={() => dispatch('removeswatch')}>
+          <span on:click|self={() => dispatch('removeswatch')}>&times;</span>
+        </div>
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>
+
 <style>
   .swatch {
     position: relative;
     cursor: pointer;
     border-radius: 6px;
-    border: 1px solid #dedada;  
-    height: 20px; 
+    border: 1px solid #dedada;
+    height: 20px;
     width: 20px;
   }
 
   .space {
-      padding: 3px 5px;
+    padding: 3px 5px;
   }
 
   .remove-icon {
@@ -29,7 +49,7 @@
     right: 0;
     top: -5px;
     right: -4px;
-    width:10px;
+    width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #800000;
@@ -39,15 +59,3 @@
     align-items: center;
   }
 </style>
-
-<div class="space">
-  <CheckedBackground borderRadius="6px"> 
-    <div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
-        {#if hovered}
-        <div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
-            <span on:click|self={()=> dispatch("removeswatch")}>&times;</span>
-        </div>
-        {/if}
-    </div>            
-</CheckedBackground>
-</div>
\ No newline at end of file
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 620cd4ad48..89861b8ac7 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -162,7 +162,7 @@ export const MODELS = {
       Name: BLOCKS.NAME,
       Cuisine: {
         ...FIELDS.PLAIN_TEXT,
-        name: "Cuisine"
+        name: "Cuisine",
       },
     },
   },
@@ -173,8 +173,8 @@ export const MODELS = {
       Name: BLOCKS.NAME,
       Championships: {
         ...FIELDS.NUMBER,
-        name: "Championships"
-      }
+        name: "Championships",
+      },
     },
   },
 }
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 4d6b353329..273175c2b1 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -1,7 +1,6 @@
 const CouchDB = require("../../db")
 const validateJs = require("validate.js")
 const newid = require("../../db/newid")
-const { link } = require("pouchdb-adapter-memory")
 
 exports.save = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
@@ -46,7 +45,6 @@ exports.save = async function(ctx) {
 
   // create links in other tables
   for (let key in record) {
-    // link
     if (Array.isArray(record[key])) {
       const linked = await db.allDocs({
         include_docs: true,
@@ -58,7 +56,9 @@ exports.save = async function(ctx) {
         const doc = row.doc
         return {
           ...doc,
-          [model.name]: doc[model.name] ? [...doc[model.name], record._id] : [record._id]
+          [model.name]: doc[model.name]
+            ? [...doc[model.name], record._id]
+            : [record._id],
         }
       })
 
@@ -105,7 +105,7 @@ exports.find = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const record = await db.get(ctx.params.recordId)
   if (record.modelId !== ctx.params.modelId) {
-    ctx.throw(400, "Supplied modelId doe not match the record's modelId")
+    ctx.throw(400, "Supplied modelId does not match the records modelId")
     return
   }
   ctx.body = record
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 0675c65f46..d09cd0ff2b 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -23,7 +23,10 @@
 
   const login = async () => {
     loading = true
-    const response = await _bb.api.post("/api/authenticate", { username, password })
+    const response = await _bb.api.post("/api/authenticate", {
+      username,
+      password,
+    })
     if (response.status === 200) {
       const json = await response.json()
       localStorage.setItem("budibase:token", json.token)