diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index c8c0c7211a..68e20e56b3 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -56,4 +56,4 @@ export const walkProps = (props, action, cancelToken = null) => {
       walkProps(child, action, cancelToken)
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte
index f072c48976..1ec4139eae 100644
--- a/packages/builder/src/components/common/Icons/More.svelte
+++ b/packages/builder/src/components/common/Icons/More.svelte
@@ -1,8 +1,12 @@
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  viewBox="0 0 24 24" 
-  width="24" 
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
   height="24">
-  <path fill="none" d="M0 0h24v24H0z"/>
-  <path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/>
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
+    12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
+    12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
 </svg>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index ae78405ccb..46f8bd9189 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -13,16 +13,20 @@
 
   const FIELD_TYPES = ["string", "number", "boolean"]
 
-  export let field = { type: "string", constraints: { type: "string", presence: false } }
+  export let field = {
+    type: "string",
+    constraints: { type: "string", presence: false },
+  }
   export let schema
   export let goBack
 
   let errors = []
   let draftField = cloneDeep(field)
-  
+
   let type = field.type
   let constraints = field.constraints
-  let required = field.constraints.presence && !field.constraints.presence.allowEmpty
+  let required =
+    field.constraints.presence && !field.constraints.presence.allowEmpty
 
   const save = () => {
     constraints.presence = required ? { allowEmpty: false } : false
@@ -31,15 +35,19 @@
     schema[field.name] = draftField
     goBack()
   }
-  
-  $: constraints = 
-      type === "string" ? { type: "string", length: {}, presence: false }
-      : type === "number" ? { type: "number", presence: false, numericality: {} }
-      : type === "boolean" ? { type: "boolean", presence: false }
-      : type === "datetime" ? { type: "date", datetime: {}, presence: false }
-      : type.startsWith('array') ? { type: "array", presence: false }
+
+  $: constraints =
+    type === "string"
+      ? { type: "string", length: {}, presence: false }
+      : type === "number"
+      ? { type: "number", presence: false, numericality: {} }
+      : type === "boolean"
+      ? { type: "boolean", presence: false }
+      : type === "datetime"
+      ? { type: "date", datetime: {}, presence: false }
+      : type.startsWith("array")
+      ? { type: "array", presence: false }
       : { type: "string", presence: false }
-      
 </script>
 
 <div class="root">
@@ -48,24 +56,26 @@
 
   <form on:submit|preventDefault class="uk-form-stacked">
     <Textbox label="Name" bind:text={field.name} />
-    <Dropdown
-      label="Type"
-      bind:selected={type}
-      options={FIELD_TYPES} />
-    
+    <Dropdown label="Type" bind:selected={type} options={FIELD_TYPES} />
+
     <Checkbox label="Required" bind:checked={required} />
-    
 
     {#if type === 'string'}
       <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
       <ValuesList label="Categories" bind:values={constraints.inclusion} />
     {:else if type === 'datetime'}
       <!-- TODO: revisit and fix with JSON schema -->
-      <DatePicker label="Min Value" bind:value={constraints.datetime.earliest} />
+      <DatePicker
+        label="Min Value"
+        bind:value={constraints.datetime.earliest} />
       <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
     {:else if type === 'number'}
-      <NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} />
-      <NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} />
+      <NumberBox
+        label="Min Value"
+        bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox
+        label="Max Value"
+        bind:value={constraints.numericality.lessThanOrEqualTo} />
     {/if}
   </form>
 </div>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index d5320eca0d..62688d58e3 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -23,22 +23,22 @@
   function closed() {
     onClosed()
   }
-  
+
   const isSelect = meta =>
-    meta.type === "string" 
-    && meta.constraints 
-    && meta.constraints.inclusion 
-    && meta.constraints.inclusion.length > 0
-    
+    meta.type === "string" &&
+    meta.constraints &&
+    meta.constraints.inclusion &&
+    meta.constraints.inclusion.length > 0
+
   function determineInputType(meta) {
     if (meta.type === "datetime") return "date"
     if (meta.type === "number") return "number"
     if (meta.type === "boolean") return "checkbox"
     if (isSelect(meta)) return "select"
-        
+
     return "text"
   }
-  
+
   function determineOptions(meta) {
     return isSelect(meta) ? meta.constraints.inclusion : []
   }
@@ -54,8 +54,8 @@
     )
     if (recordResponse.errors) {
       errors = Object.keys(recordResponse.errors)
-                .map(k => ({dataPath: k,  message: recordResponse.errors[k]}))
-                .flat()
+        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
+        .flat()
       return
     }
 
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index b0571a2353..5c308a7abb 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -4,15 +4,15 @@
   export let label
   export let errors = []
   export let options = []
-  
+
   let checked = type === "checkbox" ? value : false
-  
+
   const determineClassName = type => {
     if (type === "checkbox") return "uk-checkbox"
     if (type === "select") return "uk-select"
     return "uk-input"
   }
-    
+
   const handleInput = event => {
     if (event.target.type === "checkbox") {
       value = event.target.checked
@@ -30,22 +30,22 @@
 
 <label>{label}</label>
 
-{#if type === "select"}
-<select 
-  class={determineClassName(type)}
-  bind:value={value}
-  class:uk-form-danger={errors.length > 0} >
-  {#each options as opt}
-    <option value={opt}>{ opt }</option>
-  {/each}
-</select>
+{#if type === 'select'}
+  <select
+    class={determineClassName(type)}
+    bind:value
+    class:uk-form-danger={errors.length > 0}>
+    {#each options as opt}
+      <option value={opt}>{opt}</option>
+    {/each}
+  </select>
 {:else}
-<input
-  class={determineClassName(type)}
-  class:uk-form-danger={errors.length > 0}
-  {checked}
-  {type}
-  {value}
-  on:input={handleInput}
-  on:change={handleInput} />
+  <input
+    class={determineClassName(type)}
+    class:uk-form-danger={errors.length > 0}
+    {checked}
+    {type}
+    {value}
+    on:input={handleInput}
+    on:change={handleInput} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 21ef4b2ab3..712031aa3d 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,149 +1,160 @@
 <script>
-import { MoreIcon } from "components/common/Icons"
-import { store } from "builderStore"
-import { getComponentDefinition } from "builderStore/store"
-import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-import { last, cloneDeep } from "lodash/fp"
-import UIkit from "uikit"
-import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils"
-import { uuid } from "builderStore/uuid"
+  import { MoreIcon } from "components/common/Icons"
+  import { store } from "builderStore"
+  import { getComponentDefinition } from "builderStore/store"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { last, cloneDeep } from "lodash/fp"
+  import UIkit from "uikit"
+  import {
+    selectComponent,
+    getParent,
+    walkProps,
+    saveCurrentPreviewItem,
+  } from "builderStore/storeUtils"
+  import { uuid } from "builderStore/uuid"
 
-export let component
+  export let component
 
-let confirmDeleteDialog
-let dropdownEl
+  let confirmDeleteDialog
+  let dropdownEl
 
-$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false });
-$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false)
-$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
-$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
-
-const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
-
-const hideDropdown = () => {
-  dropdown.hide()
-}
-
-const moveUpComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === 0) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex - 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    saveCurrentPreviewItem(s)
-
-    return s
+  $: dropdown = UIkit.dropdown(dropdownEl, {
+    mode: "click",
+    offset: 0,
+    pos: "bottom-right",
+    "delay-hide": 0,
+    animation: false,
   })
-}
+  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  $: noChildrenAllowed =
+    !component ||
+    getComponentDefinition($store, component._component).children === false
+  $: noPaste =
+    !$store.componentToPaste || $store.componentToPaste._id === component._id
 
-const moveDownComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
+  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
 
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === parent._children.length - 1) return s
+  const hideDropdown = () => {
+    dropdown.hide()
+  }
 
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex + 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    saveCurrentPreviewItem(s)
+  const moveUpComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
 
-    return s
-  })
-}
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === 0) return s
 
-const copyComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-    const copiedComponent = cloneDeep(component)
-    walkProps(copiedComponent, p => {
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex - 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const moveDownComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === parent._children.length - 1) return s
+
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex + 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const copyComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+      const copiedComponent = cloneDeep(component)
+      walkProps(copiedComponent, p => {
+        p._id = uuid()
+      })
+      parent._children = [...parent._children, copiedComponent]
+      saveCurrentPreviewItem(s)
+      s.currentComponentInfo = copiedComponent
+      return s
+    })
+  }
+
+  const deleteComponent = () => {
+    store.update(state => {
+      const parent = getParent(state.currentPreviewItem.props, component)
+
+      if (parent) {
+        parent._children = parent._children.filter(c => c !== component)
+      }
+
+      saveCurrentPreviewItem(state)
+
+      return state
+    })
+  }
+
+  const generateNewIdsForComponent = c =>
+    walkProps(c, p => {
       p._id = uuid()
     })
-    parent._children = [...parent._children, copiedComponent]
-    saveCurrentPreviewItem(s)
-    s.currentComponentInfo = copiedComponent
-    return s
-  })
-}
 
-const deleteComponent = () => {
-  store.update(state => {
-    const parent = getParent(state.currentPreviewItem.props, component)
+  const storeComponentForCopy = (cut = false) => {
+    store.update(s => {
+      const copiedComponent = cloneDeep(component)
+      s.componentToPaste = copiedComponent
+      if (cut) {
+        const parent = getParent(s.currentPreviewItem.props, component._id)
+        parent._children = parent._children.filter(c => c._id !== component._id)
+        selectComponent(s, parent)
+      }
 
-    if (parent) {
-      parent._children = parent._children.filter(
-        c => c !== component
-      )
-    }
-
-    saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
-const generateNewIdsForComponent = c =>
-  walkProps(c, p => {
-    p._id = uuid()
-  })
-
-const storeComponentForCopy = (cut = false) => {
-  store.update(s => {
-    const copiedComponent = cloneDeep(component)
-    s.componentToPaste = copiedComponent
-    if (cut) {
-      const parent = getParent(s.currentPreviewItem.props, component._id)
-      parent._children = parent._children.filter(c => c._id !== component._id)
-      selectComponent(s, parent)
-    }
-
-    return s
-  })
-}
-
-const pasteComponent = mode => {
-  store.update(s => {
-    if (!s.componentToPaste) return s
-
-    const componentToPaste = cloneDeep(s.componentToPaste)
-    generateNewIdsForComponent(componentToPaste)
-    delete componentToPaste._cutId
-
-    if (mode === "inside") {
-      component._children.push(componentToPaste)
       return s
-    }
+    })
+  }
 
-    const parent = getParent(s.currentPreviewItem.props, component)
+  const pasteComponent = mode => {
+    store.update(s => {
+      if (!s.componentToPaste) return s
 
-    const targetIndex = parent._children.indexOf(component)
-    const index = mode === "above" ? targetIndex : targetIndex + 1
-    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+      const componentToPaste = cloneDeep(s.componentToPaste)
+      generateNewIdsForComponent(componentToPaste)
+      delete componentToPaste._cutId
 
-    saveCurrentPreviewItem(s)
-    selectComponent(s, componentToPaste)
+      if (mode === "inside") {
+        component._children.push(componentToPaste)
+        return s
+      }
 
-    return s
-  })
-}
+      const parent = getParent(s.currentPreviewItem.props, component)
 
+      const targetIndex = parent._children.indexOf(component)
+      const index = mode === "above" ? targetIndex : targetIndex + 1
+      parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+      saveCurrentPreviewItem(s)
+      selectComponent(s, componentToPaste)
+
+      return s
+    })
+  }
 </script>
 
-<div class="root" on:click|stopPropagation={()  => {}}>
+<div class="root" on:click|stopPropagation={() => {}}>
   <button>
     <MoreIcon />
   </button>
-  <ul class="menu"  bind:this={dropdownEl} on:click={hideDropdown}>
+  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
     <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
     <li on:click={moveUpComponent}>Move up</li>
     <li on:click={moveDownComponent}>Move down</li>
@@ -151,14 +162,20 @@ const pasteComponent = mode => {
     <li on:click={() => storeComponentForCopy(true)}>Cut</li>
     <li on:click={() => storeComponentForCopy(false)}>Copy</li>
     <hr />
-    <li class:disabled={noPaste} on:click={() => pasteComponent("above")}>Paste above</li>
-    <li class:disabled={noPaste} on:click={() => pasteComponent("below")}>Paste below</li>
-    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent("inside")}>Paste inside</li>    
+    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
+      Paste above
+    </li>
+    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
+      Paste below
+    </li>
+    <li
+      class:disabled={noPaste || noChildrenAllowed}
+      on:click={() => pasteComponent('inside')}>
+      Paste inside
+    </li>
   </ul>
 </div>
 
-
-
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
@@ -167,52 +184,49 @@ const pasteComponent = mode => {
   onOk={deleteComponent} />
 
 <style>
+  .root {
+    overflow: hidden;
+    z-index: 9;
+  }
 
-.root {
-  overflow: hidden;
-  z-index:9;
-}
+  .root button {
+    border-style: none;
+    border-radius: 2px;
+    padding: 5px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--button-text);
+    outline: none;
+  }
 
-.root button {
-  border-style: none;
-  border-radius: 2px;
-  padding: 5px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--button-text);
-  outline: none;
-}
+  .menu {
+    z-index: 100000;
+    overflow: visible;
+    padding: 10px 0;
+  }
 
-.menu {
-  z-index: 100000;
-  overflow: visible;
-  padding: 10px 0
-}
+  .menu li {
+    border-style: none;
+    background-color: transparent;
+    list-style-type: none;
+    padding: 4px 5px 4px 15px;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
 
-.menu li {
-  border-style: none;
-  background-color: transparent;
-  list-style-type: none;
-  padding: 4px 5px 4px 15px;
-  margin: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
+  .menu li:not(.disabled) {
+    cursor: pointer;
+    color: var(--ink);
+  }
 
+  .menu li:not(.disabled):hover {
+    color: var(--button-text);
+    background-color: var(--grey-light);
+  }
 
-.menu li:not(.disabled) {
-  cursor: pointer;
-  color: var(--ink);
-}
-
-.menu li:not(.disabled):hover {
-  color: var(--button-text);
-  background-color: var(--grey-light); 
-}
-
-.disabled {
-  color: var(--grey-dark);
-  cursor: default;
-}
-
-</style>
\ No newline at end of file
+  .disabled {
+    color: var(--grey-dark);
+    cursor: default;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 16aab64576..344e02d127 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -16,7 +16,6 @@
   export let onSelect = () => {}
   export let level = 0
 
-
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
@@ -43,7 +42,7 @@
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
         <div class="actions">
-          <ComponentDropdownMenu component={component}/>
+          <ComponentDropdownMenu {component} />
         </div>
       </div>
 
@@ -96,5 +95,4 @@
   .item:hover .actions {
     display: block;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index cee63c4cbb..86804885ff 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -45,5 +45,4 @@
   .newscreen:hover {
     background: var(--grey-light);
   }
-
 </style>