diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index ce8f28b50f..6de45c1aee 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -25,13 +25,13 @@
     name: "Screen Placeholder",
     route: "*",
     props: {
-      "_id": "screenslot-placeholder",
-      "_component": "@budibase/standard-components/container",
-      "_styles": {
-        "normal": {},
-        "hover": {},
-        "active": {},
-        "selected": {}
+      _id: "screenslot-placeholder",
+      _component: "@budibase/standard-components/container",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
       },
       _code: "",
       className: "",
@@ -39,87 +39,89 @@
       type: "div",
       _children: [
         {
-        "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
-        "_component": "@budibase/standard-components/container",
-        "_styles": {
-          "normal": {
-            "display": "flex",
-            "flex-direction": "column",
-            "align-items": "center"
+          _id: "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
+          _component: "@budibase/standard-components/container",
+          _styles: {
+            normal: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+            },
+            hover: {},
+            active: {},
+            selected: {},
           },
-          "hover": {},
-          "active": {},
-          "selected": {}
+          _code: "",
+          className: "",
+          onLoad: [],
+          type: "div",
+          _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+          _instanceName: "Container",
+          _children: [
+            {
+              _id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
+              _component: "@budibase/standard-components/heading",
+              _styles: {
+                normal: {
+                  width: "500px",
+                  padding: "8px",
+                },
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _code: "",
+              className: "",
+              text: "Screenslot",
+              type: "h1",
+              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+              _instanceName: "Heading",
+              _children: [],
+            },
+            {
+              _id: "71a3da65-72c6-4c43-8c6a-49871c07b77d",
+              _component: "@budibase/standard-components/text",
+              _styles: {
+                normal: {
+                  "max-width": "",
+                  "text-align": "left",
+                  width: "500px",
+                  padding: "8px",
+                },
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _code: "",
+              text:
+                "The screens that you create will be displayed inside this box.",
+              type: "none",
+              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+              _instanceName: "Text",
+            },
+            {
+              _id: "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
+              _component: "@budibase/standard-components/text",
+              _styles: {
+                normal: {
+                  "max-width": "",
+                  "text-align": "left",
+                  width: "500px",
+                  padding: "8px",
+                },
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _code: "",
+              text:
+                "This box is just a placeholder, to show you the position of screens.",
+              type: "none",
+              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+              _instanceName: "Text",
+            },
+          ],
         },
-        "_code": "",
-        "className": "",
-        "onLoad": [],
-        "type": "div",
-        "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-        "_instanceName": "Container",
-        "_children": [
-          {
-            "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
-            "_component": "@budibase/standard-components/heading",
-            "_styles": {
-              "normal": {
-                "width": "500px",
-                "padding": "8px"
-              },
-              "hover": {},
-              "active": {},
-              "selected": {}
-            },
-            "_code": "",
-            "className": "",
-            "text": "Screenslot",
-            "type": "h1",
-            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-            "_instanceName": "Heading",
-            "_children": []
-          },
-          {
-            "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
-            "_component": "@budibase/standard-components/text",
-            "_styles": {
-              "normal": {
-                "max-width": "",
-                "text-align": "left",
-                "width": "500px",
-                "padding": "8px"
-              },
-              "hover": {},
-              "active": {},
-              "selected": {}
-            },
-            "_code": "",
-            "text": "The screens that you create will be displayed inside this box.",
-            "type": "none",
-            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-            "_instanceName": "Text"
-          },
-          {
-            "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
-            "_component": "@budibase/standard-components/text",
-            "_styles": {
-              "normal": {
-                "max-width": "",
-                "text-align": "left",
-                "width": "500px",
-                "padding": "8px"
-              },
-              "hover": {},
-              "active": {},
-              "selected": {}
-            },
-            "_code": "",
-            "text": "This box is just a placeholder, to show you the position of screens.",
-            "type": "none",
-            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
-            "_instanceName": "Text"
-          }
-        ]
-      }
       ],
       _instanceName: "Content Placeholder",
     },
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
index 7fa536a474..1a1196dd14 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
@@ -1,184 +1,267 @@
 <script>
-  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 { 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 {
     getColorFormat,
     convertToHSVA,
-    convertHsvaToFormat
-  } from "../utils.js";
-  import Slider from "./Slider.svelte";
-  import Palette from "./Palette.svelte";
-  import ButtonGroup from "./ButtonGroup.svelte";
-  import Input from "./Input.svelte";
-  import Portal from "./Portal.svelte";
-  import { keyevents } from "../actions";
+    convertHsvaToFormat,
+  } from "../utils.js"
+  import Slider from "./Slider.svelte"
+  import Palette from "./Palette.svelte"
+  import ButtonGroup from "./ButtonGroup.svelte"
+  import Input from "./Input.svelte"
+  import Portal from "./Portal.svelte"
+  import { keyevents } from "../actions"
 
-  export let value = "#3ec1d3ff";
-  export let open = false;
-  export let swatches = [];
+  export let value = "#3ec1d3ff"
+  export let open = false
+  export let swatches = []
 
-  export let disableSwatches = false;
-  export let format = "hexa";
-  export let style = "";
-  export let pickerHeight = 0;
-  export let pickerWidth = 0;
+  export let disableSwatches = false
+  export let format = "hexa"
+  export let style = ""
+  export let pickerHeight = 0
+  export let pickerWidth = 0
 
-  let colorPicker = null;
-  let adder = null;
-  let swatchesSetFromLocalStore = false;
+  let colorPicker = null
+  let adder = null
+  let swatchesSetFromLocalStore = false
 
-  let h = 0;
-  let s = 0;
-  let v = 0;
-  let a = 0;
+  let h = 0
+  let s = 0
+  let v = 0
+  let a = 0
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 
   onMount(() => {
     if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
-      swatchesSetFromLocalStore = true;
-      swatches = getRecentColors() || [];
+      swatchesSetFromLocalStore = true
+      swatches = getRecentColors() || []
     }
 
     if (swatches.length > 12) {
       console.warn(
         `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
-      );
+      )
     }
 
     if (colorPicker) {
-      colorPicker.focus();
+      colorPicker.focus()
     }
 
     if (format) {
-      convertAndSetHSVA();
+      convertAndSetHSVA()
     }
-  });
+  })
 
   function getRecentColors() {
-    let colorStore = localStorage.getItem("cp:recent-colors");
+    let colorStore = localStorage.getItem("cp:recent-colors")
     if (colorStore) {
-      return JSON.parse(colorStore);
+      return JSON.parse(colorStore)
     }
   }
 
   function handleEscape() {
     if (open) {
-      open = false;
+      open = false
     }
   }
 
   function setRecentColors(color) {
     const s = swatchesSetFromLocalStore
       ? swatches
-      : [...getRecentColors(), color];
-    localStorage.setItem("cp:recent-colors", JSON.stringify(s));
+      : [...getRecentColors(), color]
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
   }
 
   function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format);
-    setHSVA(hsva);
+    let hsva = convertToHSVA(value, format)
+    setHSVA(hsva)
   }
 
   function setHSVA([hue, sat, val, alpha]) {
-    h = hue;
-    s = sat;
-    v = val;
-    a = alpha;
+    h = hue
+    s = sat
+    v = val
+    a = alpha
   }
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s;
-    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format);
-    dispatchValue();
+    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);
+    h = color
+    value = convertHsvaToFormat([h, s, v, a], format)
     if (!isDrag) {
-      dispatchValue();
+      dispatchValue()
     }
   }
 
   function setAlpha({ color, isDrag }) {
-    a = color === "1.00" ? "1" : color;
-    value = convertHsvaToFormat([h, s, v, a], format);
+    a = color === "1.00" ? "1" : color
+    value = convertHsvaToFormat([h, s, v, a], format)
     if (!isDrag) {
-      dispatchValue();
+      dispatchValue()
     }
   }
 
   function dispatchValue() {
-    dispatch("change", value);
+    dispatch("change", value)
   }
 
   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);
+    let format = getColorFormat(text)
     if (format) {
-      value = text;
-      convertAndSetHSVA();
+      value = text
+      convertAndSetHSVA()
     }
   }
 
   function dispatchInputChange() {
     if (format) {
-      dispatchValue();
+      dispatchValue()
     }
   }
 
   function addSwatch() {
     if (format) {
       if (swatches.length === 12) {
-        swatches.splice(0, 1);
+        swatches.splice(0, 1)
       }
 
       if (!swatches.includes(value)) {
-        swatches = [...swatches, value];
-        setRecentColors(value);
+        swatches = [...swatches, value]
+        setRecentColors(value)
       }
 
-      dispatch("addswatch", value);
+      dispatch("addswatch", value)
     }
   }
 
   function removeSwatch(idx) {
-    let [removedSwatch] = swatches.splice(idx, 1);
-    swatches = swatches;
-    dispatch("removeswatch", removedSwatch);
+    let [removedSwatch] = swatches.splice(idx, 1)
+    swatches = swatches
+    dispatch("removeswatch", removedSwatch)
     if (swatchesSetFromLocalStore) {
       //as could be a swatch not present in local storage
-      setRecentColors();
+      setRecentColors()
     }
   }
 
   function applySwatch(color) {
     if (value !== color) {
-      format = getColorFormat(color);
+      format = getColorFormat(color)
       if (format) {
-        value = color;
-        convertAndSetHSVA();
-        dispatchValue();
+        value = color
+        convertAndSetHSVA()
+        dispatchValue()
       }
     }
   }
 
-  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
-  $: selectedColorStyle = buildStyle({ background: value, border });
-  $: hasSwatches = swatches.length > 0;
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
+  $: selectedColorStyle = buildStyle({ background: value, border })
+  $: hasSwatches = swatches.length > 0
 </script>
 
+<Portal>
+  <div
+    class="colorpicker-container"
+    use:keyevents={{ Escape: handleEscape }}
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    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"
+              title={value}
+              style={selectedColorStyle} />
+          </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 hasSwatches}
+            {#each swatches as color, idx}
+              {#if idx < 12}
+                <Swatch
+                  {color}
+                  on:click={() => applySwatch(color)}
+                  on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
+            {/each}
+          {/if}
+          {#if swatches.length < 12}
+            <div
+              tabindex="0"
+              title="Add Swatch"
+              use:keyevents={{ Enter: addSwatch }}
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              class:shrink={hasSwatches}
+              on:click={addSwatch}>
+              <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>
+</Portal>
+
 <style>
   .colorpicker-container {
     position: absolute;
@@ -264,86 +347,3 @@
     padding-top: 3px;
   }
 </style>
-
-<Portal>
-  <div
-    class="colorpicker-container"
-    use:keyevents={{ Escape: handleEscape }}
-    transition:fade
-    bind:this={colorPicker}
-    {style}
-    tabindex="0"
-    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"
-              title={value}
-              style={selectedColorStyle} />
-          </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 hasSwatches}
-            {#each swatches as color, idx}
-              {#if idx < 12}
-                <Swatch
-                  {color}
-                  on:click={() => applySwatch(color)}
-                  on:removeswatch={() => removeSwatch(idx)} />
-              {/if}
-            {/each}
-          {/if}
-          {#if swatches.length < 12}
-            <div
-              tabindex="0"
-              title="Add Swatch"
-              use:keyevents={{ Enter: addSwatch }}
-              bind:this={adder}
-              transition:fade
-              class="adder"
-              class:shrink={hasSwatches}
-              on:click={addSwatch}>
-              <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>
-</Portal>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index 2d9426fbae..474b287934 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
@@ -1,53 +1,53 @@
 <script>
-  import Colorpicker from "./Colorpicker.svelte";
-  import CheckedBackground from "./CheckedBackground.svelte";
-  import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
+  import Colorpicker from "./Colorpicker.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
 
-  import { buildStyle, debounce } from "../helpers.js";
-  import { fade } from "svelte/transition";
-  import { getColorFormat } from "../utils.js";
+  import { buildStyle, debounce } 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, bottom: 0, right: 0, left: 0 };
-  let positionY = "top";
-  let positionX = "left";
-  let colorPreview = null;
+  let format = "hexa"
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
+  let positionY = "top"
+  let positionX = "left"
+  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 errorMsg = null;
+  let errorMsg = null
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 
   beforeUpdate(() => {
-    format = getColorFormat(value);
+    format = getColorFormat(value)
     if (!format) {
-      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
-      console.error(errorMsg);
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+      console.error(errorMsg)
     } else {
-      errorMsg = null;
+      errorMsg = null
     }
-  });
+  })
 
   function openColorpicker(event) {
     if (colorPreview) {
-      open = true;
+      open = true
     }
   }
 
   function onColorChange(color) {
-    value = color.detail;
-    dispatch("change", color.detail);
+    value = color.detail
+    dispatch("change", color.detail)
   }
 
   function calculateDimensions() {
@@ -57,83 +57,52 @@
         width,
         bottom,
         right,
-        left
-      } = colorPreview.getBoundingClientRect();
+        left,
+      } = colorPreview.getBoundingClientRect()
 
-      const spaceBelow = window.innerHeight - bottom;
-      const previewCenter = previewWidth / 2;
+      const spaceBelow = window.innerHeight - bottom
+      const previewCenter = previewWidth / 2
 
-      let y, x;
+      let y, x
 
       if (spaceAbove > spaceBelow) {
-        positionY = "bottom";
-        y = window.innerHeight - spaceAbove;
+        positionY = "bottom"
+        y = window.innerHeight - spaceAbove
       } else {
-        positionY = "top";
-        y = bottom;
+        positionY = "top"
+        y = bottom
       }
 
       // Centre picker by default
-      x = left + previewCenter - 220 / 2;
+      x = left + previewCenter - 220 / 2
 
-      const spaceRight = window.innerWidth - right;
+      const spaceRight = window.innerWidth - right
 
       //Position picker left or right if space not available for centering
       if (left < 110 && spaceRight > 220) {
-        positionX = "left";
-        x = right;
+        positionX = "left"
+        x = right
       } else if (spaceRight < 100 && left > 220) {
-        positionX = "right";
-        x = document.body.clientWidth - left;
+        positionX = "right"
+        x = document.body.clientWidth - left
       }
 
-      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
+      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) }
     }
   }
 
   $: if (open && colorPreview) {
-    calculateDimensions();
+    calculateDimensions()
   }
 
-  $: previewStyle = buildStyle({ width, height, background: value });
-  $: errorPreviewStyle = buildStyle({ width, height });
+  $: previewStyle = buildStyle({ width, height, background: value })
+  $: errorPreviewStyle = buildStyle({ width, height })
   $: pickerStyle = buildStyle({
     [positionY]: `${dimensions[positionY]}px`,
-    [positionX]: `${dimensions[positionX]}px`
-  });
+    [positionX]: `${dimensions[positionX]}px`,
+  })
 </script>
 
-<style>
-  .color-preview-container {
-    display: flex;
-    flex-flow: row nowrap;
-    height: fit-content;
-  }
-
-  .color-preview {
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #dedada;
-  }
-
-  .preview-error {
-    background: #cccccc;
-    color: #808080;
-    text-align: center;
-    font-size: 18px;
-    cursor: not-allowed;
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
-</style>
-
 <svelte:window on:resize={debounce(calculateDimensions, 200)} />
 
 <div class="color-preview-container">
@@ -173,3 +142,34 @@
     </div>
   {/if}
 </div>
+
+<style>
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
+
+  .color-preview {
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #dedada;
+  }
+
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
index e56e6d0b6f..fe71e949cd 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
@@ -1,15 +1,34 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import { fade } from "svelte/transition";
-  import CheckedBackground from "./CheckedBackground.svelte";
-  import { keyevents } from "../actions";
+  import { createEventDispatcher } from "svelte"
+  import { fade } from "svelte/transition"
+  import CheckedBackground from "./CheckedBackground.svelte"
+  import { keyevents } from "../actions"
 
-  export let hovered = false;
-  export let color = "#fff";
+  export let hovered = false
+  export let color = "#fff"
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher()
 </script>
 
+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      tabindex="0"
+      use:keyevents={{ Enter: () => dispatch('click') }}
+      in:fade
+      title={color}
+      class="swatch"
+      style={`background: ${color};`}
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}
+      on:click|self>
+      {#if hovered}
+        <span in:fade on:click={() => dispatch('removeswatch')} />
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>
+
 <style>
   .swatch {
     position: relative;
@@ -47,22 +66,3 @@
     bottom: 3px;
   }
 </style>
-
-<div class="space">
-  <CheckedBackground borderRadius="6px">
-    <div
-      tabindex="0"
-      use:keyevents={{ Enter: () => dispatch('click') }}
-      in:fade
-      title={color}
-      class="swatch"
-      style={`background: ${color};`}
-      on:mouseover={() => (hovered = true)}
-      on:mouseleave={() => (hovered = false)}
-      on:click|self>
-      {#if hovered}
-        <span in:fade on:click={() => dispatch('removeswatch')} />
-      {/if}
-    </div>
-  </CheckedBackground>
-</div>
diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte
index 1d82b56110..5c1b491935 100644
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@@ -52,6 +52,11 @@
 </section>
 
 <style>
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
   h4 {
     color: var(--white);
     font-size: 18px;
diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
index 5752f0e152..097ca48073 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -51,8 +51,7 @@
     })
 
     // Select Component!
-    if (componentToSelect)
-      store.selectComponent(componentToSelect)
+    if (componentToSelect) store.selectComponent(componentToSelect)
   }
 </script>
 
diff --git a/packages/server/.env.template b/packages/server/.env.template
index 0e21c0a48a..23eb0b5e37 100644
--- a/packages/server/.env.template
+++ b/packages/server/.env.template
@@ -14,4 +14,5 @@ PORT=4001
 # error level for koa-pino
 LOG_LEVEL=error
 
-DEPLOYMENT_CREDENTIALS_URL="https://dt4mpwwap8.execute-api.eu-west-1.amazonaws.com/prod/"
\ No newline at end of file
+DEPLOYMENT_CREDENTIALS_URL="https://dt4mpwwap8.execute-api.eu-west-1.amazonaws.com/prod/"
+DEPLOYMENT_DB_URL="https://couchdb.budi.live"
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index d32899f03c..5355eeefd8 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -20,7 +20,7 @@ async function invalidateCDN(cfDistribution, appId) {
     .promise()
 }
 
-async function fetchTemporaryCredentials() {
+exports.fetchTemporaryCredentials = async function() {
   const response = await fetch(process.env.DEPLOYMENT_CREDENTIALS_URL, {
     method: "POST",
     body: JSON.stringify({
@@ -63,14 +63,13 @@ function walkDir(dirPath, callback) {
   }
 }
 
-exports.uploadAppAssets = async function({ appId }) {
-  const {
-    credentials,
-    accountId,
-    bucket,
-    cfDistribution,
-  } = await fetchTemporaryCredentials()
-
+exports.uploadAppAssets = async function({
+  appId,
+  credentials,
+  bucket,
+  cfDistribution,
+  accountId,
+}) {
   AWS.config.update({
     accessKeyId: credentials.AccessKeyId,
     secretAccessKey: credentials.SecretAccessKey,
diff --git a/packages/server/src/api/controllers/deploy/index.js b/packages/server/src/api/controllers/deploy/index.js
index ca0ee64228..8e35d45ef2 100644
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@@ -1,6 +1,6 @@
 const CouchDB = require("pouchdb")
 const PouchDB = require("../../../db")
-const { uploadAppAssets } = require("./aws")
+const { uploadAppAssets, fetchTemporaryCredentials } = require("./aws")
 
 function replicate(local, remote) {
   return new Promise((resolve, reject) => {
@@ -11,13 +11,18 @@ function replicate(local, remote) {
   })
 }
 
-async function replicateCouch(instanceId, clientId) {
+async function replicateCouch({ instanceId, clientId, credentials }) {
   const databases = [`client_${clientId}`, "client_app_lookup", instanceId]
 
-  const replications = databases.map(local => {
-    const localDb = new PouchDB(local)
+  const replications = databases.map(localDbName => {
+    const localDb = new PouchDB(localDbName)
     const remoteDb = new CouchDB(
-      `${process.env.DEPLOYMENT_COUCH_DB_URL}/${local}`
+      `${process.env.DEPLOYMENT_DB_URL}/${localDbName}`,
+      {
+        auth: {
+          ...credentials,
+        },
+      }
     )
 
     return replicate(localDb, remoteDb)
@@ -32,14 +37,21 @@ exports.deployApp = async function(ctx) {
     const { clientId } = await clientAppLookupDB.get(ctx.user.appId)
 
     ctx.log.info(`Uploading assets for appID ${ctx.user.appId} assets to s3..`)
+    const credentials = await fetchTemporaryCredentials()
+
     await uploadAppAssets({
       clientId,
       appId: ctx.user.appId,
+      ...credentials,
     })
 
     // replicate the DB to the couchDB cluster in prod
     ctx.log.info("Replicating local PouchDB to remote..")
-    await replicateCouch(ctx.user.instanceId, clientId)
+    await replicateCouch({
+      instanceId: ctx.user.instanceId,
+      clientId,
+      credentials: credentials.couchDbCreds,
+    })
 
     ctx.body = {
       status: "SUCCESS",
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 2718ba4f82..25f80a4862 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -49,9 +49,10 @@ exports.serveApp = async function(ctx) {
     })
   }
 
-  if (process.env.CLOUD) {
+  if (!process.env.CLOUD) {
     const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/${mainOrAuth}/${ctx.file ||
       "index.production.html"}`
+
     const response = await fetch(S3_URL)
     const body = await response.text()
     ctx.body = body
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 54c85a16a6..ff88a372e8 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -194,6 +194,20 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.0.32":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
+  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@budibase/core@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@@ -849,6 +863,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -921,6 +940,13 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.706.0:
   version "2.706.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@@ -1667,6 +1693,26 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2042,6 +2088,36 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3039,11 +3115,21 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3051,6 +3137,11 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3061,6 +3152,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3087,7 +3183,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3162,11 +3258,21 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3203,11 +3309,28 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
+  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -3224,11 +3347,31 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3254,6 +3397,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -4671,6 +4819,14 @@ object-inspect@^1.7.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5402,6 +5558,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -5735,6 +5904,14 @@ shortid@^2.2.8:
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5987,7 +6164,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
@@ -6013,7 +6190,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
@@ -6143,6 +6320,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte@^3.9.2:
+  version "3.24.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
+  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
+
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6641,11 +6823,44 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 74f3a0db1d..d2a7d93bec 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -53,9 +53,9 @@
         state[model] = state[model] ? [...state[model], json] : [json]
         return state
       })
-      
+
       // wipe form, if new record, otherwise update
-      // model to get new _rev 
+      // model to get new _rev
       if (isNew) {
         resetForm()
       } else {
@@ -82,7 +82,7 @@
       }
     }
     record = {
-      modelId: model
+      modelId: model,
     }
   }
 
@@ -118,21 +118,23 @@
 
   onMount(() => {
     const routeParams = _bb.routeParams()
-    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    recordId =
+      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
     isNew = !recordId || recordId === "new"
 
     if (isNew) {
       record = { modelId: model }
     } else {
       const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-      _bb.api.get(GET_RECORD_URL)
+      _bb.api
+        .get(GET_RECORD_URL)
         .then(response => response.json())
         .then(rec => {
           record = rec
           setForm(rec)
         })
-    }    
-	});
+    }
+  })
 </script>
 
 <form class="form" on:submit|preventDefault>
@@ -164,14 +166,14 @@
       <button on:click={save} class:saved>
         {#if saved}
           <div in:fade>
-            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+            <span class:saved style="margin-right: 5px">🎉</span>
+            Success
+            <span class:saved style="margin-left: 5px">🎉</span>
           </div>
         {:else}
-          <div>
-            {buttonText || "Submit Form"}
-          </div>
+          <div>{buttonText || 'Submit Form'}</div>
         {/if}
-      </button>    
+      </button>
     </div>
   </div>
 </form>
@@ -243,7 +245,7 @@
 
   button.saved {
     background-color: green;
-  } 
+  }
 
   button:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 02969a071d..ab7f15eade 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -53,9 +53,9 @@
         state[model] = state[model] ? [...state[model], json] : [json]
         return state
       })
-      
+
       // wipe form, if new record, otherwise update
-      // model to get new _rev 
+      // model to get new _rev
       if (isNew) {
         resetForm()
       } else {
@@ -82,7 +82,7 @@
       }
     }
     record = {
-      modelId: model
+      modelId: model,
     }
   }
 
@@ -118,21 +118,23 @@
 
   onMount(() => {
     const routeParams = _bb.routeParams()
-    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    recordId =
+      Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
     isNew = !recordId || recordId === "new"
 
     if (isNew) {
       record = { modelId: model }
     } else {
       const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-      _bb.api.get(GET_RECORD_URL)
+      _bb.api
+        .get(GET_RECORD_URL)
         .then(response => response.json())
         .then(rec => {
           record = rec
           setForm(rec)
         })
-    }    
-	});
+    }
+  })
 </script>
 
 <form class="form" on:submit|preventDefault>
@@ -164,14 +166,14 @@
       <button on:click={save} class:saved>
         {#if saved}
           <div in:fade>
-            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+            <span class:saved style="margin-right: 5px">🎉</span>
+            Success
+            <span class:saved style="margin-left: 5px">🎉</span>
           </div>
         {:else}
-          <div>
-            {buttonText || "Submit Form"}
-          </div>
+          <div>{buttonText || 'Submit Form'}</div>
         {/if}
-      </button>    
+      </button>
     </div>
   </div>
 </form>
@@ -234,7 +236,7 @@
 
   button.saved {
     background-color: green;
-  } 
+  }
 
   button:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 2b94d9e425..b7435def58 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -71,7 +71,7 @@
 
     <div class="login-button-container">
       <button disabled={loading} on:click={login} class={_buttonClass}>
-        {buttonText || "Login"}
+        {buttonText || 'Login'}
       </button>
     </div>