diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index eb878d2b54..2cfe328312 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -4,8 +4,6 @@ on:
  # Trigger the workflow on push with tags,
  # but only for the master branch
  push:
-  branches:
-    - master
   tags:
     - 'v*'
 
diff --git a/lerna.json b/lerna.json
index 5d5fb16e81..be61b1ef96 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.19",
+  "version": "0.1.21",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/package.json b/package.json
index 69f7b0f21d..10cebbd720 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,15 @@
     "publishdev": "lerna run publishdev",
     "publishnpm": "yarn build && lerna publish --force-publish",
     "clean": "lerna clean",
-    "dev": "node ./scripts/symlinkDev.js && lerna run --parallel --stream dev:builder",
+    "dev": "node ./scripts/symlinkDev.js && lerna run --parallel dev:builder",
     "test": "lerna run test",
     "lint": "eslint packages",
     "lint:fix": "eslint --fix packages",
     "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"",
     "test:e2e": "lerna run cy:test",
     "test:e2e:ci": "lerna run cy:ci"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8"
   }
 }
diff --git a/packages/builder/.gitignore b/packages/builder/.gitignore
index 69f2f5a00e..50269a9125 100644
--- a/packages/builder/.gitignore
+++ b/packages/builder/.gitignore
@@ -5,4 +5,5 @@ package-lock.json
 release/
 dist/
 cypress/screenshots
+cypress/videos
 routify
diff --git a/packages/builder/cypress/integration/createWorkflow.spec.js b/packages/builder/cypress/integration/createWorkflow.spec.js
index e7fe34b630..833777f106 100644
--- a/packages/builder/cypress/integration/createWorkflow.spec.js
+++ b/packages/builder/cypress/integration/createWorkflow.spec.js
@@ -1,46 +1,52 @@
-context('Create a workflow', () => {
+context("Create a workflow", () => {
+  before(() => {
+    cy.server()
+    cy.visit("localhost:4001/_builder")
 
-    before(() => {
-        cy.server()
-        cy.visit('localhost:4001/_builder')
+    cy.createApp(
+      "Workflow Test App",
+      "This app is used to test that workflows do in fact work!"
+    )
+  })
 
-        cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')
-    })
+  // https://on.cypress.io/interacting-with-elements
+  it("should create a workflow", () => {
+    cy.createTestTableWithData()
 
-    // https://on.cypress.io/interacting-with-elements
-    it('should create a workflow', () => {
-        cy.createTestTableWithData()
+    cy.contains("workflow").click()
+    cy.contains("Create New Workflow").click()
+    cy.get("input").type("Add Record")
+    cy.contains("Save").click()
 
-        cy.contains('workflow').click()
-        cy.contains('Create New Workflow').click()
-        cy.get('input').type('Add Record')
-        cy.contains('Save').click()
+    // Add trigger
+    cy.get("[data-cy=add-workflow-component]").click()
+    cy.get("[data-cy=RECORD_SAVED]").click()
+    cy.get(".budibase__input").select("dog")
 
-        // Add trigger
-        cy.get('[data-cy=add-workflow-component]').click()
-        cy.get('[data-cy=RECORD_SAVED]').click()
-        cy.get('.budibase__input').select('dog')
+    // Create action
+    cy.get("[data-cy=SAVE_RECORD]").click()
+    cy.get(".budibase__input").select("dog")
+    cy.get(".container input")
+      .first()
+      .type("goodboy")
+    cy.get(".container input")
+      .eq(1)
+      .type("11")
 
-        // Create action
-        cy.get('[data-cy=SAVE_RECORD]').click()
-        cy.get('.container input').first().type('goodboy')
-        cy.get('.container input').eq(1).type('11')
+    // Save
+    cy.contains("Save Workflow").click()
 
-        // Save
-        cy.contains('Save Workflow').click()
+    // Activate Workflow
+    cy.get("[data-cy=activate-workflow]").click()
+    cy.contains("Add Record").should("be.visible")
+    cy.get(".stop-button.highlighted").should("be.visible")
+  })
 
-        // Activate Workflow
-        cy.get('[data-cy=activate-workflow]').click()
-        cy.contains("Add Record").should("be.visible")
-        cy.get(".stop-button.highlighted").should("be.visible")
-    })
+  it("should add record when a new record is added", () => {
+    cy.contains("backend").click()
 
-    it('should add record when a new record is added', () => {
-        cy.contains('backend').click()
-
-        cy.addRecord(["Rover", 15])
-        cy.reload()
-        cy.contains('goodboy').should('have.text', 'goodboy')
-
-    })
-})
\ No newline at end of file
+    cy.addRecord(["Rover", 15])
+    cy.reload()
+    cy.contains("goodboy").should("have.text", "goodboy")
+  })
+})
diff --git a/packages/builder/cypress/videos/createWorkflow.spec.js.mp4 b/packages/builder/cypress/videos/createWorkflow.spec.js.mp4
index 52116ef9e9..22fd8541c7 100644
Binary files a/packages/builder/cypress/videos/createWorkflow.spec.js.mp4 and b/packages/builder/cypress/videos/createWorkflow.spec.js.mp4 differ
diff --git a/packages/builder/package.json b/packages/builder/package.json
index ea555007a9..524025ba5b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -63,16 +63,16 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.32.0",
-    "@budibase/client": "^0.1.19",
+    "@budibase/bbui": "^1.33.0",
+    "@budibase/client": "^0.1.21",
     "@budibase/colorpicker": "^1.0.1",
+    "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.0",
     "d3-selection": "^1.4.1",
     "deepmerge": "^4.2.2",
     "fast-sort": "^2.2.0",
-    "feather-icons": "^4.21.0",
     "lodash": "^4.17.13",
     "mustache": "^4.0.1",
     "posthog-js": "1.3.1",
diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index 3d73d968f3..ffeacf9e52 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -234,7 +234,7 @@ export default {
 
     // Watch the `dist` directory and refresh the
     // browser on changes when not in production
-    !production && livereload(outputpath),
+    !production && livereload({ watch: outputpath, delay: 500 }),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
diff --git a/packages/builder/scripts/jestSetup.js b/packages/builder/scripts/jestSetup.js
index 52053d4092..ed2b7da3fd 100644
--- a/packages/builder/scripts/jestSetup.js
+++ b/packages/builder/scripts/jestSetup.js
@@ -1,3 +1,4 @@
+// Array.flat needs polyfilled in < Node 11
 if (!Array.prototype.flat) {
   Object.defineProperty(Array.prototype, "flat", {
     configurable: true,
diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index f36484fbdf..65cc861c50 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -37,7 +37,9 @@ export default function({ componentInstanceId, screen, components, models }) {
       .filter(isInstanceInSharedContext(walkResult))
       .map(componentInstanceToBindable(walkResult)),
 
-    ...walkResult.target._contexts.map(contextToBindables(walkResult)).flat(),
+    ...walkResult.target._contexts
+      .map(contextToBindables(models, walkResult))
+      .flat(),
   ]
 }
 
@@ -69,17 +71,31 @@ const componentInstanceToBindable = walkResult => i => {
   }
 }
 
-const contextToBindables = walkResult => context => {
+const contextToBindables = (models, walkResult) => context => {
   const contextParentPath = getParentPath(walkResult, context)
 
-  return Object.keys(context.model.schema).map(k => ({
+  const newBindable = key => ({
     type: "context",
     instance: context.instance,
     // how the binding expression persists, and is used in the app at runtime
-    runtimeBinding: `${contextParentPath}data.${k}`,
+    runtimeBinding: `${contextParentPath}data.${key}`,
     // how the binding exressions looks to the user of the builder
-    readableBinding: `${context.instance._instanceName}.${context.model.name}.${k}`,
-  }))
+    readableBinding: `${context.instance._instanceName}.${context.model.label}.${key}`,
+  })
+
+  // see ModelViewSelect.svelte for the format of context.model
+  // ... this allows us to bind to Model scheams, or View schemas
+  const model = models.find(m => m._id === context.model.modelId)
+  const schema = context.model.isModel
+    ? model.schema
+    : model.views[context.model.name].schema
+
+  return (
+    Object.keys(schema)
+      .map(newBindable)
+      // add _id and _rev fields - not part of schema, but always valid
+      .concat([newBindable("_id"), newBindable("_rev")])
+  )
 }
 
 const getParentPath = (walkResult, context) => {
@@ -135,7 +151,7 @@ const walk = ({ instance, targetId, components, models, result }) => {
   if (contextualInstance) {
     // add to currentContexts (ancestory of context)
     // before walking children
-    const model = models.find(m => m._id === instance[component.context])
+    const model = instance[component.context]
     result.currentContexts.push({ instance, model })
   }
 
diff --git a/packages/builder/src/builderStore/replaceBindings.js b/packages/builder/src/builderStore/replaceBindings.js
new file mode 100644
index 0000000000..aa57301261
--- /dev/null
+++ b/packages/builder/src/builderStore/replaceBindings.js
@@ -0,0 +1,42 @@
+export const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
+
+export function readableToRuntimeBinding(bindableProperties, textWithBindings) {
+  // Find all instances of mustasche
+  const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_MUSTACHE)
+
+  let result = textWithBindings
+  // Replace readableBindings with runtimeBindings
+  boundValues &&
+    boundValues.forEach(boundValue => {
+      const binding = bindableProperties.find(({ readableBinding }) => {
+        return boundValue === `{{ ${readableBinding} }}`
+      })
+      if (binding) {
+        result = textWithBindings.replace(
+          boundValue,
+          `{{ ${binding.runtimeBinding} }}`
+        )
+      }
+    })
+  return result
+}
+
+export function runtimeToReadableBinding(bindableProperties, textWithBindings) {
+  let temp = textWithBindings
+  const boundValues =
+    (typeof textWithBindings === "string" &&
+      textWithBindings.match(CAPTURE_VAR_INSIDE_MUSTACHE)) ||
+    []
+
+  // Replace runtimeBindings with readableBindings:
+  boundValues.forEach(v => {
+    const binding = bindableProperties.find(({ runtimeBinding }) => {
+      return v === `{{ ${runtimeBinding} }}`
+    })
+    if (binding) {
+      temp = temp.replace(v, `{{ ${binding.readableBinding} }}`)
+    }
+  })
+
+  return temp
+}
diff --git a/packages/builder/src/builderStore/store/workflow/Workflow.js b/packages/builder/src/builderStore/store/workflow/Workflow.js
index d9c1ee249f..8ac6664e91 100644
--- a/packages/builder/src/builderStore/store/workflow/Workflow.js
+++ b/packages/builder/src/builderStore/store/workflow/Workflow.js
@@ -1,5 +1,3 @@
-import mustache from "mustache"
-import blockDefinitions from "components/workflow/WorkflowPanel/blockDefinitions"
 import { generate } from "shortid"
 
 /**
@@ -18,27 +16,31 @@ export default class Workflow {
   addBlock(block) {
     // Make sure to add trigger if doesn't exist
     if (!this.hasTrigger() && block.type === "TRIGGER") {
-      this.workflow.definition.trigger = { id: generate(), ...block }
-      return
+      const trigger = { id: generate(), ...block }
+      this.workflow.definition.trigger = trigger
+      return trigger
     }
 
-    this.workflow.definition.steps.push({
-      id: generate(),
-      ...block,
-    })
+    const newBlock = { id: generate(), ...block }
+    this.workflow.definition.steps = [
+      ...this.workflow.definition.steps,
+      newBlock,
+    ]
+    return newBlock
   }
 
   updateBlock(updatedBlock, id) {
     const { steps, trigger } = this.workflow.definition
 
     if (trigger && trigger.id === id) {
-      this.workflow.definition.trigger = null
+      this.workflow.definition.trigger = updatedBlock
       return
     }
 
     const stepIdx = steps.findIndex(step => step.id === id)
     if (stepIdx < 0) throw new Error("Block not found.")
     steps.splice(stepIdx, 1, updatedBlock)
+    this.workflow.definition.steps = steps
   }
 
   deleteBlock(id) {
@@ -52,44 +54,6 @@ export default class Workflow {
     const stepIdx = steps.findIndex(step => step.id === id)
     if (stepIdx < 0) throw new Error("Block not found.")
     steps.splice(stepIdx, 1)
-  }
-
-  createUiTree() {
-    if (!this.workflow.definition) return []
-    return Workflow.buildUiTree(this.workflow.definition)
-  }
-
-  static buildUiTree(definition) {
-    const steps = []
-    if (definition.trigger) steps.push(definition.trigger)
-
-    return [...steps, ...definition.steps].map(step => {
-      // The client side display definition for the block
-      const definition = blockDefinitions[step.type][step.actionId]
-      if (!definition) {
-        throw new Error(
-          `No block definition exists for the chosen block. Check there's an entry in the block definitions for ${step.actionId}`
-        )
-      }
-
-      if (!definition.params) {
-        throw new Error(
-          `Blocks should always have parameters. Ensure that the block definition is correct for ${step.actionId}`
-        )
-      }
-
-      const tagline = definition.tagline || ""
-      const args = step.args || {}
-
-      return {
-        id: step.id,
-        type: step.type,
-        params: step.params,
-        args,
-        heading: step.actionId,
-        body: mustache.render(tagline, args),
-        name: definition.name,
-      }
-    })
+    this.workflow.definition.steps = steps
   }
 }
diff --git a/packages/builder/src/builderStore/store/workflow/index.js b/packages/builder/src/builderStore/store/workflow/index.js
index 9d50f85661..6a4db7afaf 100644
--- a/packages/builder/src/builderStore/store/workflow/index.js
+++ b/packages/builder/src/builderStore/store/workflow/index.js
@@ -1,14 +1,22 @@
 import { writable } from "svelte/store"
 import api from "../../api"
 import Workflow from "./Workflow"
+import { cloneDeep } from "lodash/fp"
 
 const workflowActions = store => ({
   fetch: async () => {
-    const WORKFLOWS_URL = `/api/workflows`
-    const workflowResponse = await api.get(WORKFLOWS_URL)
-    const json = await workflowResponse.json()
+    const responses = await Promise.all([
+      api.get(`/api/workflows`),
+      api.get(`/api/workflows/definitions/list`),
+    ])
+    const jsonResponses = await Promise.all(responses.map(x => x.json()))
     store.update(state => {
-      state.workflows = json
+      state.workflows = jsonResponses[0]
+      state.blockDefinitions = {
+        TRIGGER: jsonResponses[1].trigger,
+        ACTION: jsonResponses[1].action,
+        LOGIC: jsonResponses[1].logic,
+      }
       return state
     })
   },
@@ -23,8 +31,8 @@ const workflowActions = store => ({
     const response = await api.post(CREATE_WORKFLOW_URL, workflow)
     const json = await response.json()
     store.update(state => {
-      state.workflows = state.workflows.concat(json.workflow)
-      state.currentWorkflow = new Workflow(json.workflow)
+      state.workflows = [...state.workflows, json.workflow]
+      store.actions.select(json.workflow)
       return state
     })
   },
@@ -38,20 +46,7 @@ const workflowActions = store => ({
       )
       state.workflows.splice(existingIdx, 1, json.workflow)
       state.workflows = state.workflows
-      state.currentWorkflow = new Workflow(json.workflow)
-      return state
-    })
-  },
-  update: async ({ workflow }) => {
-    const UPDATE_WORKFLOW_URL = `/api/workflows`
-    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
-    const json = await response.json()
-    store.update(state => {
-      const existingIdx = state.workflows.findIndex(
-        existing => existing._id === workflow._id
-      )
-      state.workflows.splice(existingIdx, 1, json.workflow)
-      state.workflows = state.workflows
+      store.actions.select(json.workflow)
       return state
     })
   },
@@ -66,28 +61,49 @@ const workflowActions = store => ({
       )
       state.workflows.splice(existingIdx, 1)
       state.workflows = state.workflows
-      state.currentWorkflow = null
+      state.selectedWorkflow = null
+      state.selectedBlock = null
       return state
     })
   },
+  trigger: async ({ workflow }) => {
+    const { _id } = workflow
+    const TRIGGER_WORKFLOW_URL = `/api/workflows/${_id}/trigger`
+    return await api.post(TRIGGER_WORKFLOW_URL)
+  },
   select: workflow => {
     store.update(state => {
-      state.currentWorkflow = new Workflow(workflow)
-      state.selectedWorkflowBlock = null
+      state.selectedWorkflow = new Workflow(cloneDeep(workflow))
+      state.selectedBlock = null
       return state
     })
   },
   addBlockToWorkflow: block => {
     store.update(state => {
-      state.currentWorkflow.addBlock(block)
-      state.selectedWorkflowBlock = block
+      const newBlock = state.selectedWorkflow.addBlock(cloneDeep(block))
+      state.selectedBlock = newBlock
       return state
     })
   },
   deleteWorkflowBlock: block => {
     store.update(state => {
-      state.currentWorkflow.deleteBlock(block.id)
-      state.selectedWorkflowBlock = null
+      const idx = state.selectedWorkflow.workflow.definition.steps.findIndex(
+        x => x.id === block.id
+      )
+      state.selectedWorkflow.deleteBlock(block.id)
+
+      // Select next closest step
+      const steps = state.selectedWorkflow.workflow.definition.steps
+      let nextSelectedBlock
+      if (steps[idx] != null) {
+        nextSelectedBlock = steps[idx]
+      } else if (steps[idx - 1] != null) {
+        nextSelectedBlock = steps[idx - 1]
+      } else {
+        nextSelectedBlock =
+          state.selectedWorkflow.workflow.definition.trigger || null
+      }
+      state.selectedBlock = nextSelectedBlock
       return state
     })
   },
@@ -96,11 +112,14 @@ const workflowActions = store => ({
 export const getWorkflowStore = () => {
   const INITIAL_WORKFLOW_STATE = {
     workflows: [],
+    blockDefinitions: {
+      TRIGGER: [],
+      ACTION: [],
+      LOGIC: [],
+    },
+    selectedWorkflow: null,
   }
-
   const store = writable(INITIAL_WORKFLOW_STATE)
-
   store.actions = workflowActions(store)
-
   return store
 }
diff --git a/packages/builder/src/builderStore/store/workflow/tests/Workflow.spec.js b/packages/builder/src/builderStore/store/workflow/tests/Workflow.spec.js
index fd14404a5f..4d270ea611 100644
--- a/packages/builder/src/builderStore/store/workflow/tests/Workflow.spec.js
+++ b/packages/builder/src/builderStore/store/workflow/tests/Workflow.spec.js
@@ -1,57 +1,48 @@
-import Workflow from "../Workflow";
-import TEST_WORKFLOW from "./testWorkflow";
+import Workflow from "../Workflow"
+import TEST_WORKFLOW from "./testWorkflow"
 
 const TEST_BLOCK = {
-  id: "VFWeZcIPx",
-  name: "Update UI State",
-  tagline: "Update <b>{{path}}</b> to <b>{{value}}</b>",
-  icon: "ri-refresh-line",
-  description: "Update your User Interface with some data.",
-  environment: "CLIENT",
-  params: {
-    path: "string",
-    value: "longText",
-  },
-  args: {
-    path: "foo",
-    value: "started...",
-  },
-  actionId: "SET_STATE",
-  type: "ACTION",
+  id: "AUXJQGZY7",
+  name: "Delay",
+  icon: "ri-time-fill",
+  tagline: "Delay for <b>{{time}}</b> milliseconds",
+  description: "Delay the workflow until an amount of time has passed.",
+  params: { time: "number" },
+  type: "LOGIC",
+  args: { time: "5000" },
+  stepId: "DELAY",
 }
 
 describe("Workflow Data Object", () => {
   let workflow
 
   beforeEach(() => {
-    workflow = new Workflow({ ...TEST_WORKFLOW });
-  });
+    workflow = new Workflow({ ...TEST_WORKFLOW })
+  })
 
   it("adds a workflow block to the workflow", () => {
-    workflow.addBlock(TEST_BLOCK);
+    workflow.addBlock(TEST_BLOCK)
     expect(workflow.workflow.definition)
   })
 
   it("updates a workflow block with new attributes", () => {
-    const firstBlock = workflow.workflow.definition.steps[0];
+    const firstBlock = workflow.workflow.definition.steps[0]
     const updatedBlock = {
       ...firstBlock,
-      name: "UPDATED"
-    };
-    workflow.updateBlock(updatedBlock, firstBlock.id);
+      name: "UPDATED",
+    }
+    workflow.updateBlock(updatedBlock, firstBlock.id)
     expect(workflow.workflow.definition.steps[0]).toEqual(updatedBlock)
   })
 
   it("deletes a workflow block successfully", () => {
     const { steps } = workflow.workflow.definition
-    const originalLength = steps.length 
+    const originalLength = steps.length
 
-    const lastBlock = steps[steps.length - 1];
-    workflow.deleteBlock(lastBlock.id);
-    expect(workflow.workflow.definition.steps.length).toBeLessThan(originalLength);
-  })
-
-  it("builds a tree that gets rendered in the flowchart builder", () => {
-    expect(Workflow.buildUiTree(TEST_WORKFLOW.definition)).toMatchSnapshot();
+    const lastBlock = steps[steps.length - 1]
+    workflow.deleteBlock(lastBlock.id)
+    expect(workflow.workflow.definition.steps.length).toBeLessThan(
+      originalLength
+    )
   })
 })
diff --git a/packages/builder/src/builderStore/store/workflow/tests/__snapshots__/Workflow.spec.js.snap b/packages/builder/src/builderStore/store/workflow/tests/__snapshots__/Workflow.spec.js.snap
deleted file mode 100644
index 732764a082..0000000000
--- a/packages/builder/src/builderStore/store/workflow/tests/__snapshots__/Workflow.spec.js.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Workflow Data Object builds a tree that gets rendered in the flowchart builder 1`] = `
-Array [
-  Object {
-    "args": Object {
-      "time": 3000,
-    },
-    "body": "Delay for <b>3000</b> milliseconds",
-    "heading": "DELAY",
-    "id": "zJQcZUgDS",
-    "name": "Delay",
-    "params": Object {
-      "time": "number",
-    },
-    "type": "LOGIC",
-  },
-  Object {
-    "args": Object {
-      "path": "foo",
-      "value": "finished",
-    },
-    "body": "Update <b>foo</b> to <b>finished</b>",
-    "heading": "SET_STATE",
-    "id": "3RSTO7BMB",
-    "name": "Update UI State",
-    "params": Object {
-      "path": "string",
-      "value": "longText",
-    },
-    "type": "ACTION",
-  },
-  Object {
-    "args": Object {
-      "path": "foo",
-      "value": "started...",
-    },
-    "body": "Update <b>foo</b> to <b>started...</b>",
-    "heading": "SET_STATE",
-    "id": "VFWeZcIPx",
-    "name": "Update UI State",
-    "params": Object {
-      "path": "string",
-      "value": "longText",
-    },
-    "type": "ACTION",
-  },
-]
-`;
diff --git a/packages/builder/src/builderStore/store/workflow/tests/testWorkflow.js b/packages/builder/src/builderStore/store/workflow/tests/testWorkflow.js
index 90c4b17924..96999277eb 100644
--- a/packages/builder/src/builderStore/store/workflow/tests/testWorkflow.js
+++ b/packages/builder/src/builderStore/store/workflow/tests/testWorkflow.js
@@ -1,63 +1,78 @@
 export default {
-  _id: "53b6148c65d1429c987e046852d11611",
-  _rev: "4-02c6659734934895812fa7be0215ee59",
-  name: "Test Workflow",
+  name: "Test workflow",
   definition: {
     steps: [
       {
-        id: "VFWeZcIPx",
-        name: "Update UI State",
-        tagline: "Update <b>{{path}}</b> to <b>{{value}}</b>",
-        icon: "ri-refresh-line",
-        description: "Update your User Interface with some data.",
-        environment: "CLIENT",
+        id: "ANBDINAPS",
+        description: "Send an email.",
+        tagline: "Send email to <b>{{to}}</b>",
+        icon: "ri-mail-open-fill",
+        name: "Send Email",
         params: {
-          path: "string",
-          value: "longText",
+          to: "string",
+          from: "string",
+          subject: "longText",
+          text: "longText",
         },
-        args: {
-          path: "foo",
-          value: "started...",
-        },
-        actionId: "SET_STATE",
         type: "ACTION",
-      },
-      {
-        id: "zJQcZUgDS",
-        name: "Delay",
-        icon: "ri-time-fill",
-        tagline: "Delay for <b>{{time}}</b> milliseconds",
-        description: "Delay the workflow until an amount of time has passed.",
-        environment: "CLIENT",
-        params: {
-          time: "number",
-        },
         args: {
-          time: 3000,
+          text: "A user was created!",
+          subject: "New Budibase User",
+          from: "budimaster@budibase.com",
+          to: "test@test.com",
         },
-        actionId: "DELAY",
-        type: "LOGIC",
-      },
-      {
-        id: "3RSTO7BMB",
-        name: "Update UI State",
-        tagline: "Update <b>{{path}}</b> to <b>{{value}}</b>",
-        icon: "ri-refresh-line",
-        description: "Update your User Interface with some data.",
-        environment: "CLIENT",
-        params: {
-          path: "string",
-          value: "longText",
-        },
-        args: {
-          path: "foo",
-          value: "finished",
-        },
-        actionId: "SET_STATE",
-        type: "ACTION",
+        stepId: "SEND_EMAIL",
       },
     ],
+    trigger: {
+      id: "iRzYMOqND",
+      name: "Record Saved",
+      event: "record:save",
+      icon: "ri-save-line",
+      tagline: "Record is added to <b>{{model.name}}</b>",
+      description: "Fired when a record is saved to your database.",
+      params: { model: "model" },
+      type: "TRIGGER",
+      args: {
+        model: {
+          type: "model",
+          views: {},
+          name: "users",
+          schema: {
+            name: {
+              type: "string",
+              constraints: {
+                type: "string",
+                length: { maximum: 123 },
+                presence: { allowEmpty: false },
+              },
+              name: "name",
+            },
+            age: {
+              type: "number",
+              constraints: {
+                type: "number",
+                presence: { allowEmpty: false },
+                numericality: {
+                  greaterThanOrEqualTo: "",
+                  lessThanOrEqualTo: "",
+                },
+              },
+              name: "age",
+            },
+          },
+          _id: "c6b4e610cd984b588837bca27188a451",
+          _rev: "7-b8aa1ce0b53e88928bb88fc11bdc0aff",
+        },
+      },
+      stepId: "RECORD_SAVED",
+    },
   },
   type: "workflow",
-  live: true,
+  ok: true,
+  id: "b384f861f4754e1693835324a7fcca62",
+  rev: "1-aa1c2cbd868ef02e26f8fad531dd7e37",
+  live: false,
+  _id: "b384f861f4754e1693835324a7fcca62",
+  _rev: "108-4116829ec375e0481d0ecab9e83a2caf",
 }
diff --git a/packages/builder/src/components/common/DatePicker.svelte b/packages/builder/src/components/common/DatePicker.svelte
index ded25b5d87..ec9d41a17b 100644
--- a/packages/builder/src/components/common/DatePicker.svelte
+++ b/packages/builder/src/components/common/DatePicker.svelte
@@ -12,6 +12,5 @@
 </script>
 
 <div class="bb-margin-m">
-  <Label small forAttr={'datepicker-label'}>{label}</Label>
   <DatePicker placeholder={label} on:change={onChange} {value} />
 </div>
diff --git a/packages/builder/src/components/common/Icons/CloseCircle.svelte b/packages/builder/src/components/common/Icons/CloseCircle.svelte
new file mode 100644
index 0000000000..cdad65f422
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/CloseCircle.svelte
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
+    10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12
+    13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
+</svg>
diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js
index 4e4b41082d..7082b1b5e0 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@@ -32,3 +32,4 @@ export { default as TwitterIcon } from "./Twitter.svelte"
 export { default as InfoIcon } from "./Info.svelte"
 export { default as CloseIcon } from "./Close.svelte"
 export { default as MoreIcon } from "./More.svelte"
+export { default as CloseCircleIcon } from "./CloseCircle.svelte"
diff --git a/packages/builder/src/components/common/icon.js b/packages/builder/src/components/common/icon.js
deleted file mode 100644
index 3ac2921e60..0000000000
--- a/packages/builder/src/components/common/icon.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import feather from "feather-icons"
-const getIcon = (icon, size) =>
-  feather.icons[icon].toSvg({ height: size || "16", width: size || "16" })
-export default getIcon
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
index 22883cc208..20f7a61c6b 100644
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
@@ -37,14 +37,14 @@
     }
   }
 
-  $: paginatedData = data
-    ? data.slice(
+  $: sort = $backendUiStore.sort
+  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
+  $: paginatedData = sorted
+    ? sorted.slice(
         currentPage * ITEMS_PER_PAGE,
         currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
       )
     : []
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
 
   $: headers = Object.keys($backendUiStore.selectedModel.schema)
     .sort()
@@ -79,10 +79,10 @@
       </tr>
     </thead>
     <tbody>
-      {#if sorted.length === 0}
+      {#if paginatedData.length === 0}
         <div class="no-data">No Data.</div>
       {/if}
-      {#each sorted as row}
+      {#each paginatedData as row}
         <tr>
           <td>
             <EditRowPopover {row} />
@@ -103,7 +103,7 @@
   <TablePagination
     {data}
     bind:currentPage
-    pageItemCount={data.length}
+    pageItemCount={paginatedData.length}
     {ITEMS_PER_PAGE} />
 </section>
 
diff --git a/packages/builder/src/components/database/DataTable/Table.svelte b/packages/builder/src/components/database/DataTable/Table.svelte
index 15f7d4f803..4d6563d8bd 100644
--- a/packages/builder/src/components/database/DataTable/Table.svelte
+++ b/packages/builder/src/components/database/DataTable/Table.svelte
@@ -26,15 +26,15 @@
 
   $: columns = schema ? Object.keys(schema) : []
 
+  $: sort = $backendUiStore.sort
+  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
   $: paginatedData =
-    data && data.length
-      ? data.slice(
+    sorted && sorted.length
+      ? sorted.slice(
           currentPage * ITEMS_PER_PAGE,
           currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
         )
       : []
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
 </script>
 
 <section>
@@ -72,7 +72,7 @@
   <TablePagination
     {data}
     bind:currentPage
-    pageItemCount={data.length}
+    pageItemCount={paginatedData.length}
     {ITEMS_PER_PAGE} />
 </section>
 
diff --git a/packages/builder/src/components/database/DataTable/popovers/Filter.svelte b/packages/builder/src/components/database/DataTable/popovers/Filter.svelte
index 1cf8e9acab..be40a66291 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Filter.svelte
+++ b/packages/builder/src/components/database/DataTable/popovers/Filter.svelte
@@ -71,7 +71,16 @@
   }
 
   function addFilter() {
-    view.filters = [...view.filters, {}]
+    view.filters.push({})
+    view.filters = view.filters
+  }
+
+  function isMultipleChoice(field) {
+    return (
+      viewModel.schema[field].constraints &&
+      viewModel.schema[field].constraints.inclusion &&
+      viewModel.schema[field].constraints.inclusion.length
+    )
   }
 </script>
 
@@ -108,10 +117,18 @@
           <option value={condition.key}>{condition.name}</option>
         {/each}
       </Select>
-      <Input
-        thin
-        placeholder={filter.key || fields[0]}
-        bind:value={filter.value} />
+      {#if filter.key && isMultipleChoice(filter.key)}
+        <Select secondary thin bind:value={filter.value}>
+          {#each viewModel.schema[filter.key].constraints.inclusion as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </Select>
+      {:else}
+        <Input
+          thin
+          placeholder={filter.key || fields[0]}
+          bind:value={filter.value} />
+      {/if}
       <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
     {/each}
   </div>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 1898fee29b..a6608307c3 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -9,7 +9,6 @@
     CircleIndicator,
     EventsIcon,
   } from "components/common/Icons/"
-  import EventsEditor from "./EventsEditor"
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -21,7 +20,6 @@
   let categories = [
     { value: "settings", name: "Settings" },
     { value: "design", name: "Design" },
-    { value: "events", name: "Events" },
   ]
   let selectedCategory = categories[0]
 
@@ -37,8 +35,6 @@
       c => c._component === componentInstance._component
     ) || {}
 
-  let panelDefinition = {}
-
   $: panelDefinition =
     componentPropDefinition.properties &&
     componentPropDefinition.properties[selectedCategory.value]
@@ -109,8 +105,6 @@
         displayNameField={displayName}
         onChange={onPropChanged}
         screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {:else if selectedCategory.value === 'events'}
-      <EventsEditor component={componentInstance} />
     {/if}
 
   </div>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 38338dabbf..1aecd84314 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,168 +1,220 @@
 <script>
   import { store } from "builderStore"
-  import { Button, Select } from "@budibase/bbui"
-  import HandlerSelector from "./HandlerSelector.svelte"
-  import ActionButton from "../../common/ActionButton.svelte"
-  import getIcon from "../../common/icon"
-  import { CloseIcon } from "components/common/Icons/"
-
+  import { TextButton, Button, Heading, DropdownMenu } from "@budibase/bbui"
+  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
+  import actionTypes from "./actions"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
 
   export let event
-  export let eventOptions = []
-  export let onClose
 
-  let eventType = ""
+  let addActionButton
+  let addActionDropdown
+  let selectedAction
+
   let draftEventHandler = { parameters: [] }
 
-  $: eventData = event || { handlers: [] }
-  $: if (!eventOptions.includes(eventType) && eventOptions.length > 0)
-    eventType = eventOptions[0].name
+  $: actions = event || []
+  $: selectedActionComponent =
+    selectedAction &&
+    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_MEMBER_NAME])
+      .component
 
   const closeModal = () => {
-    onClose()
+    dispatch("close")
     draftEventHandler = { parameters: [] }
-    eventData = { handlers: [] }
+    actions = []
   }
 
   const updateEventHandler = (updatedHandler, index) => {
-    eventData.handlers[index] = updatedHandler
+    actions[index] = updatedHandler
   }
 
-  const updateDraftEventHandler = updatedHandler => {
-    draftEventHandler = updatedHandler
+  const deleteAction = index => {
+    actions.splice(index, 1)
+    actions = actions
   }
 
-  const deleteEventHandler = index => {
-    eventData.handlers.splice(index, 1)
-    eventData = eventData
-  }
-
-  const createNewEventHandler = handler => {
-    const newHandler = handler || {
+  const addAction = actionType => () => {
+    const newAction = {
       parameters: {},
-      [EVENT_TYPE_MEMBER_NAME]: "",
+      [EVENT_TYPE_MEMBER_NAME]: actionType.name,
     }
-    eventData.handlers.push(newHandler)
-    eventData = eventData
+    actions.push(newAction)
+    selectedAction = newAction
+    actions = actions
+    addActionDropdown.hide()
   }
 
-  const deleteEvent = () => {
-    store.setComponentProp(eventType, [])
-    closeModal()
+  const selectAction = action => () => {
+    selectedAction = action
   }
 
   const saveEventData = () => {
-    store.setComponentProp(eventType, eventData.handlers)
+    dispatch("change", actions)
     closeModal()
   }
 </script>
 
-<div class="container">
-  <div class="body">
-    <div class="heading">
-      <h3>
-        {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
-      </h3>
-    </div>
-    <div class="event-options">
-      <div class="section">
-        <h4>Event Type</h4>
-        <Select bind:value={eventType}>
-          {#each eventOptions as option}
-            <option value={option.name}>{option.name}</option>
-          {/each}
-        </Select>
-      </div>
-    </div>
+<div class="root">
 
-    <div class="section">
-      <h4>Event Action(s)</h4>
-      <HandlerSelector
-        newHandler
-        onChanged={updateDraftEventHandler}
-        onCreate={() => {
-          createNewEventHandler(draftEventHandler)
-          draftEventHandler = { parameters: [] }
-        }}
-        handler={draftEventHandler} />
+  <div class="header">
+    <Heading small dark>Actions</Heading>
+    <div bind:this={addActionButton}>
+      <TextButton text small blue on:click={addActionDropdown.show}>
+        Add Action
+        <div style="height: 20px; width: 20px;">
+          <AddIcon />
+        </div>
+      </TextButton>
     </div>
-    {#if eventData}
-      {#each eventData.handlers as handler, index}
-        <HandlerSelector
-          {index}
-          onChanged={updateEventHandler}
-          onRemoved={() => deleteEventHandler(index)}
-          {handler} />
+    <DropdownMenu
+      bind:this={addActionDropdown}
+      anchor={addActionButton}
+      align="right">
+      <div class="available-actions-container">
+        {#each actionTypes as actionType}
+          <div class="available-action" on:click={addAction(actionType)}>
+            <span>{actionType.name}</span>
+          </div>
+        {/each}
+      </div>
+    </DropdownMenu>
+  </div>
+
+  <div class="actions-container">
+    {#if actions && actions.length > 0}
+      {#each actions as action, index}
+        <div class="action-container">
+          <div class="action-header" on:click={selectAction(action)}>
+            <p
+              class="bb-body bb-body--small bb-body--color-dark"
+              style="margin: var(--spacing-s) 0;">
+              {index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}
+            </p>
+            <div class="row-expander" class:rotate={action !== selectedAction}>
+              <ArrowDownIcon />
+            </div>
+          </div>
+          {#if action === selectedAction}
+            <div class="selected-action-container">
+              <svelte:component
+                this={selectedActionComponent}
+                parameters={selectedAction.parameters} />
+              <div class="delete-action-button">
+                <TextButton text medium on:click={() => deleteAction(index)}>
+                  Delete
+                </TextButton>
+              </div>
+            </div>
+          {/if}
+        </div>
       {/each}
     {/if}
+  </div>
 
-  </div>
   <div class="footer">
-    {#if eventData.name}
-      <Button
-        outline
-        on:click={deleteEvent}
-        disabled={eventData.handlers.length === 0}>
-        Delete
-      </Button>
-    {/if}
-    <div class="save">
-      <Button
-        primary
-        on:click={saveEventData}
-        disabled={eventData.handlers.length === 0}>
-        Save
-      </Button>
-    </div>
-  </div>
-  <div class="close-button" on:click={closeModal}>
-    <CloseIcon />
+    <a href="https://docs.budibase.com">Learn more about Actions</a>
+    <Button secondary on:click={closeModal}>Cancel</Button>
+    <Button primary on:click={saveEventData}>Save</Button>
   </div>
 </div>
 
 <style>
-  .container {
-    position: relative;
-  }
-  .heading {
-    margin-bottom: 20px;
+  .root {
+    max-height: 50vh;
+    width: 700px;
+    display: flex;
+    flex-direction: column;
   }
 
-  .close-button {
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-xl);
+    padding-bottom: 0;
+  }
+
+  .action-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .action-header > p {
+    flex: 1;
+  }
+
+  .row-expander {
+    height: 30px;
+    width: 30px;
+  }
+
+  .available-action {
+    padding: var(--spacing-s);
+    font-size: var(--font-size-m);
     cursor: pointer;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-  }
-  .close-button :global(svg) {
-    width: 24px;
-    height: 24px;
   }
 
-  h4 {
-    margin-bottom: 10px;
+  .available-action:hover {
+    background: var(--grey-2);
   }
 
-  h3 {
-    margin: 0;
-    font-size: 24px;
-    font-weight: bold;
+  .actions-container {
+    flex: 1;
+    min-height: 0px;
+    padding-bottom: var(--spacing-s);
+    padding-top: 0;
+    border: var(--border-light);
+    border-width: 0 0 1px 0;
+    overflow-y: auto;
   }
-  .body {
-    padding: 40px;
-    display: grid;
-    grid-gap: 20px;
+
+  .action-container {
+    border: var(--border-light);
+    border-width: 1px 0 0 0;
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    padding-top: 0;
+    padding-bottom: 0;
   }
-  .footer {
+
+  .selected-action-container {
+    padding-bottom: var(--spacing-s);
+    padding-top: var(--spacing-s);
+  }
+
+  .delete-action-button {
+    padding-top: var(--spacing-l);
     display: flex;
     justify-content: flex-end;
-    padding: 30px 40px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 50px;
-    background-color: var(--grey-1);
+    flex-direction: row;
   }
-  .save {
-    margin-left: 20px;
+
+  .footer {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-s);
+    padding: var(--spacing-xl);
+    padding-top: var(--spacing-m);
+  }
+
+  .footer > a {
+    flex: 1;
+    color: var(--grey-5);
+    font-size: var(--font-size-s);
+    text-decoration: none;
+  }
+
+  .footer > a:hover {
+    color: var(--blue);
+  }
+
+  .rotate :global(svg) {
+    transform: rotate(90deg);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index c1395ad31b..52986b0efd 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -1,25 +1,24 @@
 <script>
-  import { Button, DropdownMenu } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import EventEditorModal from "./EventEditorModal.svelte"
-  import { getContext } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
+  const dispatch = createEventDispatcher()
 
   export let value
   export let name
 
-  let button
-  let dropdown
+  let eventsModal
 </script>
 
-<div bind:this={button}>
-  <Button secondary small on:click={dropdown.show}>Define Actions</Button>
-</div>
-<DropdownMenu bind:this={dropdown} align="right" anchor={button}>
+<Button secondary small on:click={eventsModal.show}>Define Actions</Button>
+
+<Modal bind:this={eventsModal} maxWidth="100vw" hideCloseButton padding="0">
   <EventEditorModal
     event={value}
     eventType={name}
     on:change
-    on:close={dropdown.hide} />
-</DropdownMenu>
+    on:close={eventsModal.hide} />
+</Modal>
 
 <style>
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index 7aff1e366e..8638a21d79 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, DataList, Select } from "@budibase/bbui"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@@ -29,12 +29,12 @@
       {/each}
     </Select>
   {:else if parameter.name === 'url'}
-    <Select editable on:change bind:value={parameter.value}>
+    <DataList on:change bind:value={parameter.value}>
       <option value="" />
       {#each $store.allScreens as screen}
         <option value={screen.route}>{screen.props._instanceName}</option>
       {/each}
-    </Select>
+    </DataList>
   {:else}
     <Input
       name={parameter.name}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte
new file mode 100644
index 0000000000..b84dcd58a4
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRecord.svelte
@@ -0,0 +1,75 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import SaveFields from "./SaveFields.svelte"
+
+  export let parameters
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    models: $backendUiStore.models,
+  })
+
+  // just wraps binding in {{ ... }}
+  const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
+
+  const modelFields = modelId => {
+    const model = $backendUiStore.models.find(m => m._id === modelId)
+
+    return Object.keys(model.schema).map(k => ({
+      name: k,
+      type: model.schema[k].type,
+    }))
+  }
+
+  $: schemaFields =
+    parameters && parameters.modelId ? modelFields(parameters.modelId) : []
+
+  const onFieldsChanged = e => {
+    parameters.fields = e.detail
+  }
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Table</Label>
+  <Select secondary bind:value={parameters.modelId}>
+    <option value="" />
+    {#each $backendUiStore.models as model}
+      <option value={model._id}>{model.name}</option>
+    {/each}
+  </Select>
+
+  {#if parameters.modelId}
+    <SaveFields
+      parameterFields={parameters.fields}
+      {schemaFields}
+      on:fieldschanged={onFieldsChanged} />
+  {/if}
+
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(.relative:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
new file mode 100644
index 0000000000..659fb954eb
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { DataList, Label } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  export let parameters
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Screen</Label>
+  <DataList secondary bind:value={parameters.url}>
+    <option value="" />
+    {#each $store.screens as screen}
+      <option value={screen.route}>{screen.props._instanceName}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  .root :global(.relative) {
+    flex: 1;
+    margin-left: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
new file mode 100644
index 0000000000..5011f8f173
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
@@ -0,0 +1,115 @@
+<script>
+  // accepts an array of field names, and outputs an object of { FieldName: value }
+  import { DataList, Label, TextButton, Spacer, Select } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import { CloseCircleIcon, AddIcon } from "components/common/Icons"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/replaceBindings"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let parameterFields
+  export let schemaFields
+
+  const emptyField = () => ({ name: "", value: "" })
+
+  // this statement initialises fields from parameters.fields
+  $: fields =
+    fields ||
+    Object.keys(parameterFields || { "": "" }).map(name => ({
+      name,
+      value:
+        (parameterFields &&
+          runtimeToReadableBinding(
+            bindableProperties,
+            parameterFields[name].value
+          )) ||
+        "",
+    }))
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    models: $backendUiStore.models,
+  })
+
+  const addField = () => {
+    const newFields = fields.filter(f => f.name)
+    newFields.push(emptyField())
+    fields = newFields
+    rebuildParameters()
+  }
+
+  const removeField = field => () => {
+    fields = fields.filter(f => f !== field)
+    rebuildParameters()
+  }
+
+  const rebuildParameters = () => {
+    // rebuilds paramters.fields every time a field name or value is added
+    // as UI below is bound to "fields" array, but we need to output a { key: value }
+    const newParameterFields = {}
+    for (let field of fields) {
+      if (field.name) {
+        // value and type is needed by the client, so it can parse
+        // a string into a correct type
+        newParameterFields[field.name] = {
+          type: schemaFields.find(f => f.name === field.name).type,
+          value: readableToRuntimeBinding(bindableProperties, field.value),
+        }
+      }
+    }
+    dispatch("fieldschanged", newParameterFields)
+  }
+
+  // just wraps binding in {{ ... }}
+  const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
+</script>
+
+{#if fields}
+  {#each fields as field}
+    <Label size="m" color="dark">Field</Label>
+    <Select secondary bind:value={field.name} on:blur={rebuildParameters}>
+      <option value="" />
+      {#each schemaFields as schemaField}
+        <option value={schemaField.name}>{schemaField.name}</option>
+      {/each}
+    </Select>
+    <Label size="m" color="dark">Value</Label>
+    <DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
+      <option value="" />
+      {#each bindableProperties as bindableProp}
+        <option value={toBindingExpression(bindableProp.readableBinding)}>
+          {bindableProp.readableBinding}
+        </option>
+      {/each}
+    </DataList>
+    <div class="remove-field-container">
+      <TextButton text small on:click={removeField(field)}>
+        <CloseCircleIcon />
+      </TextButton>
+    </div>
+  {/each}
+
+  <div>
+    <Spacer small />
+
+    <TextButton text small blue on:click={addField}>
+      Add Field
+      <div style="height: 20px; width: 20px;">
+        <AddIcon />
+      </div>
+    </TextButton>
+  </div>
+{/if}
+
+<style>
+  .remove-field-container :global(button) {
+    vertical-align: bottom;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
new file mode 100644
index 0000000000..6ee3a2aed4
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
@@ -0,0 +1,134 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import SaveFields from "./SaveFields.svelte"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/replaceBindings"
+
+  export let parameters
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    models: $backendUiStore.models,
+  })
+
+  let idFields
+  let recordId
+  $: {
+    idFields = bindableProperties.filter(
+      bindable =>
+        bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
+    )
+    // ensure recordId is always defaulted - there is usually only one option
+    if (idFields.length > 0 && !parameters._id) {
+      recordId = idFields[0].runtimeBinding
+      parameters = parameters
+    } else if (!recordId && parameters._id) {
+      recordId = parameters._id
+        .replace("{{", "")
+        .replace("}}", "")
+        .trim()
+    }
+  }
+
+  $: parameters._id = `{{ ${recordId} }}`
+
+  // just wraps binding in {{ ... }}
+  const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
+
+  // finds the selected idBinding, then reads the table/view
+  // from the component instance that it belongs to.
+  // then returns the field names for that schema
+  const schemaFromIdBinding = recordId => {
+    if (!recordId) return []
+
+    const idBinding = bindableProperties.find(
+      prop => prop.runtimeBinding === recordId
+    )
+    if (!idBinding) return []
+
+    const { instance } = idBinding
+
+    const component = $store.components[instance._component]
+
+    // component.context is the name of the prop that holds the modelId
+    const modelInfo = instance[component.context]
+
+    if (!modelInfo) return []
+
+    const model = $backendUiStore.models.find(m => m._id === modelInfo.modelId)
+    parameters.modelId = modelInfo.modelId
+    return Object.keys(model.schema).map(k => ({
+      name: k,
+      type: model.schema[k].type,
+    }))
+  }
+
+  let schemaFields
+  $: {
+    if (parameters && recordId) {
+      schemaFields = schemaFromIdBinding(recordId)
+    } else {
+      schemaFields = []
+    }
+  }
+
+  const onFieldsChanged = e => {
+    parameters.fields = e.detail
+  }
+</script>
+
+<div class="root">
+  {#if idFields.length === 0}
+    <div class="cannot-use">
+      Update record can only be used within a component that provides data, such
+      as a List
+    </div>
+  {:else}
+    <Label size="m" color="dark">Record Id</Label>
+    <Select secondary bind:value={recordId}>
+      <option value="" />
+      {#each idFields as idField}
+        <option value={idField.runtimeBinding}>
+          {idField.readableBinding}
+        </option>
+      {/each}
+    </Select>
+  {/if}
+
+  {#if recordId}
+    <SaveFields
+      parameterFields={parameters.fields}
+      {schemaFields}
+      on:fieldschanged={onFieldsChanged} />
+  {/if}
+
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(.relative:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
new file mode 100644
index 0000000000..e1a85e307e
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
@@ -0,0 +1,23 @@
+import NavigateTo from "./NavigateTo.svelte"
+import UpdateRecord from "./UpdateRecord.svelte"
+import CreateRecord from "./CreateRecord.svelte"
+
+// defines what actions are available, when adding a new one
+// the component is the setup panel for the action
+// NOTE that the "name" is used by the client library,
+// so if you want to change it, you must change it client lib too
+
+export default [
+  {
+    name: "Create Record",
+    component: CreateRecord,
+  },
+  {
+    name: "Navigate To",
+    component: NavigateTo,
+  },
+  {
+    name: "Update Record",
+    component: UpdateRecord,
+  },
+]
diff --git a/packages/builder/src/components/userInterface/EventsEditor/index.js b/packages/builder/src/components/userInterface/EventsEditor/index.js
deleted file mode 100644
index 8b6ba2444c..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./EventsEditor.svelte"
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
new file mode 100644
index 0000000000..9ad50b8c9a
--- /dev/null
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@@ -0,0 +1,293 @@
+<script>
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { createEventDispatcher, tick } from "svelte"
+
+  import icons from "./icons.js"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let maxIconsPerPage = 30
+
+  let searchTerm = ""
+  let selectedLetter = "A"
+
+  let currentPage = 1
+  let filteredIcons = findIconByTerm(selectedLetter)
+
+  $: dispatch("change", value)
+
+  const alphabet = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ]
+  let buttonAnchor, dropdown
+  let loading = false
+
+  function findIconByTerm(term) {
+    const r = new RegExp(`\^${term}`, "i")
+    return icons.filter(i => r.test(i.label))
+  }
+
+  async function switchLetter(letter) {
+    currentPage = 1
+    searchTerm = ""
+    loading = true
+    selectedLetter = letter
+    filteredIcons = findIconByTerm(letter)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function findIconOnPage() {
+    loading = true
+    const iconIdx = filteredIcons.findIndex(i => i.value === value)
+    if (iconIdx !== -1) {
+      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function setSelectedUI() {
+    if (value) {
+      const letter = displayValue.substring(0, 1)
+      await switchLetter(letter)
+      await findIconOnPage()
+    }
+  }
+
+  async function pageClick(next) {
+    loading = true
+    if (next && currentPage < totalPages) {
+      currentPage++
+    } else if (!next && currentPage > 1) {
+      currentPage--
+    }
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  async function searchForIcon(e) {
+    currentPage = 1
+    loading = true
+    filteredIcons = findIconByTerm(searchTerm)
+    await tick() //svg icons do not update without tick
+    loading = false
+  }
+
+  $: displayValue = value ? value.substring(7) : "Pick Icon"
+
+  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
+  $: pageEndIdx = maxIconsPerPage * currentPage
+  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
+
+  $: pagerText = `Page ${currentPage} of ${totalPages}`
+</script>
+
+<div bind:this={buttonAnchor}>
+  <Button secondary on:click={dropdown.show}>{displayValue}</Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}>
+  <div class="container">
+    <div class="search-area">
+      <div class="alphabet-area">
+        {#each alphabet as letter, idx}
+          <span
+            class="letter"
+            class:letter-selected={letter === selectedLetter}
+            on:click={() => switchLetter(letter)}>
+            {letter}
+          </span>
+          {#if idx !== alphabet.length - 1}
+            <span>-</span>
+          {/if}
+        {/each}
+      </div>
+      <div class="search-input">
+        <div class="input-wrapper">
+          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
+        </div>
+        <Button secondary on:click={searchForIcon}>Search</Button>
+      </div>
+      <div class="page-area">
+        <div class="pager">
+          <span on:click={() => pageClick(false)}>
+            <i class="page-btn fas fa-chevron-left" />
+          </span>
+          <span>{pagerText}</span>
+          <span on:click={() => pageClick(true)}>
+            <i class="page-btn fas fa-chevron-right" />
+          </span>
+        </div>
+      </div>
+    </div>
+    {#if pagedIcons.length > 0}
+      <div class="icon-area">
+        {#if !loading}
+          {#each pagedIcons as icon}
+            <div
+              class="icon-container"
+              class:selected={value === icon.value}
+              on:click={() => (value = icon.value)}>
+              <div class="icon-preview">
+                <i class={`${icon.value} fa-3x`} />
+              </div>
+              <div class="icon-label">{icon.label}</div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <div class="no-icons">
+        <h5>
+          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+        </h5>
+      </div>
+    {/if}
+  </div>
+</DropdownMenu>
+
+<style>
+  .container {
+    width: 610px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0px 10px 15px;
+    overflow-x: hidden;
+  }
+
+  .search-area {
+    flex: 0 0 80px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .icon-area {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 5px;
+    justify-content: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px;
+  }
+
+  .no-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .alphabet-area {
+    display: flex;
+    flex-flow: row wrap;
+    padding-bottom: 10px;
+    padding-right: 15px;
+    justify-content: space-around;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-input {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    padding-right: 15px;
+  }
+
+  .input-wrapper {
+    width: 510px;
+    margin-right: 5px;
+  }
+
+  .page-area {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .letter {
+    color: var(--blue);
+  }
+
+  .letter:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .letter-selected {
+    text-decoration: underline;
+  }
+
+  .icon-container {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: var(--border-dark);
+  }
+
+  .icon-container:hover {
+    cursor: pointer;
+    background: var(--grey-2);
+  }
+
+  .selected {
+    background: var(--grey-3);
+  }
+
+  .icon-preview {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-label {
+    flex: 0 0 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .page-btn {
+    color: var(--blue);
+  }
+
+  .page-btn:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/IconSelect/icons.js b/packages/builder/src/components/userInterface/IconSelect/icons.js
new file mode 100644
index 0000000000..a491396e52
--- /dev/null
+++ b/packages/builder/src/components/userInterface/IconSelect/icons.js
@@ -0,0 +1,6450 @@
+export default [
+  {
+    value: "fab fa-500px",
+    label: "500px",
+  },
+  {
+    value: "fab fa-accessible-icon",
+    label: "accessible-icon",
+  },
+  {
+    value: "fab fa-accusoft",
+    label: "accusoft",
+  },
+  {
+    value: "fab fa-acquisitions-incorporated",
+    label: "acquisitions-incorporated",
+  },
+  {
+    value: "fas fa-ad",
+    label: "ad",
+  },
+  {
+    value: "fas fa-address-book",
+    label: "address-book",
+  },
+  {
+    value: "far fa-address-book",
+    label: "address-book",
+  },
+  {
+    value: "fas fa-address-card",
+    label: "address-card",
+  },
+  {
+    value: "far fa-address-card",
+    label: "address-card",
+  },
+  {
+    value: "fas fa-adjust",
+    label: "adjust",
+  },
+  {
+    value: "fab fa-adn",
+    label: "adn",
+  },
+  {
+    value: "fab fa-adobe",
+    label: "adobe",
+  },
+  {
+    value: "fab fa-adversal",
+    label: "adversal",
+  },
+  {
+    value: "fab fa-affiliatetheme",
+    label: "affiliatetheme",
+  },
+  {
+    value: "fas fa-air-freshener",
+    label: "air-freshener",
+  },
+  {
+    value: "fab fa-airbnb",
+    label: "airbnb",
+  },
+  {
+    value: "fab fa-algolia",
+    label: "algolia",
+  },
+  {
+    value: "fas fa-align-center",
+    label: "align-center",
+  },
+  {
+    value: "fas fa-align-justify",
+    label: "align-justify",
+  },
+  {
+    value: "fas fa-align-left",
+    label: "align-left",
+  },
+  {
+    value: "fas fa-align-right",
+    label: "align-right",
+  },
+  {
+    value: "fab fa-alipay",
+    label: "alipay",
+  },
+  {
+    value: "fas fa-allergies",
+    label: "allergies",
+  },
+  {
+    value: "fab fa-amazon",
+    label: "amazon",
+  },
+  {
+    value: "fab fa-amazon-pay",
+    label: "amazon-pay",
+  },
+  {
+    value: "fas fa-ambulance",
+    label: "ambulance",
+  },
+  {
+    value: "fas fa-american-sign-language-interpreting",
+    label: "american-sign-language-interpreting",
+  },
+  {
+    value: "fab fa-amilia",
+    label: "amilia",
+  },
+  {
+    value: "fas fa-anchor",
+    label: "anchor",
+  },
+  {
+    value: "fab fa-android",
+    label: "android",
+  },
+  {
+    value: "fab fa-angellist",
+    label: "angellist",
+  },
+  {
+    value: "fas fa-angle-double-down",
+    label: "angle-double-down",
+  },
+  {
+    value: "fas fa-angle-double-left",
+    label: "angle-double-left",
+  },
+  {
+    value: "fas fa-angle-double-right",
+    label: "angle-double-right",
+  },
+  {
+    value: "fas fa-angle-double-up",
+    label: "angle-double-up",
+  },
+  {
+    value: "fas fa-angle-down",
+    label: "angle-down",
+  },
+  {
+    value: "fas fa-angle-left",
+    label: "angle-left",
+  },
+  {
+    value: "fas fa-angle-right",
+    label: "angle-right",
+  },
+  {
+    value: "fas fa-angle-up",
+    label: "angle-up",
+  },
+  {
+    value: "fas fa-angry",
+    label: "angry",
+  },
+  {
+    value: "far fa-angry",
+    label: "angry",
+  },
+  {
+    value: "fab fa-angrycreative",
+    label: "angrycreative",
+  },
+  {
+    value: "fab fa-angular",
+    label: "angular",
+  },
+  {
+    value: "fas fa-ankh",
+    label: "ankh",
+  },
+  {
+    value: "fab fa-app-store",
+    label: "app-store",
+  },
+  {
+    value: "fab fa-app-store-ios",
+    label: "app-store-ios",
+  },
+  {
+    value: "fab fa-apper",
+    label: "apper",
+  },
+  {
+    value: "fab fa-apple",
+    label: "apple",
+  },
+  {
+    value: "fas fa-apple-alt",
+    label: "apple-alt",
+  },
+  {
+    value: "fab fa-apple-pay",
+    label: "apple-pay",
+  },
+  {
+    value: "fas fa-archive",
+    label: "archive",
+  },
+  {
+    value: "fas fa-archway",
+    label: "archway",
+  },
+  {
+    value: "fas fa-arrow-alt-circle-down",
+    label: "arrow-alt-circle-down",
+  },
+  {
+    value: "far fa-arrow-alt-circle-down",
+    label: "arrow-alt-circle-down",
+  },
+  {
+    value: "fas fa-arrow-alt-circle-left",
+    label: "arrow-alt-circle-left",
+  },
+  {
+    value: "far fa-arrow-alt-circle-left",
+    label: "arrow-alt-circle-left",
+  },
+  {
+    value: "fas fa-arrow-alt-circle-right",
+    label: "arrow-alt-circle-right",
+  },
+  {
+    value: "far fa-arrow-alt-circle-right",
+    label: "arrow-alt-circle-right",
+  },
+  {
+    value: "fas fa-arrow-alt-circle-up",
+    label: "arrow-alt-circle-up",
+  },
+  {
+    value: "far fa-arrow-alt-circle-up",
+    label: "arrow-alt-circle-up",
+  },
+  {
+    value: "fas fa-arrow-circle-down",
+    label: "arrow-circle-down",
+  },
+  {
+    value: "fas fa-arrow-circle-left",
+    label: "arrow-circle-left",
+  },
+  {
+    value: "fas fa-arrow-circle-right",
+    label: "arrow-circle-right",
+  },
+  {
+    value: "fas fa-arrow-circle-up",
+    label: "arrow-circle-up",
+  },
+  {
+    value: "fas fa-arrow-down",
+    label: "arrow-down",
+  },
+  {
+    value: "fas fa-arrow-left",
+    label: "arrow-left",
+  },
+  {
+    value: "fas fa-arrow-right",
+    label: "arrow-right",
+  },
+  {
+    value: "fas fa-arrow-up",
+    label: "arrow-up",
+  },
+  {
+    value: "fas fa-arrows-alt",
+    label: "arrows-alt",
+  },
+  {
+    value: "fas fa-arrows-alt-h",
+    label: "arrows-alt-h",
+  },
+  {
+    value: "fas fa-arrows-alt-v",
+    label: "arrows-alt-v",
+  },
+  {
+    value: "fab fa-artstation",
+    label: "artstation",
+  },
+  {
+    value: "fas fa-assistive-listening-systems",
+    label: "assistive-listening-systems",
+  },
+  {
+    value: "fas fa-asterisk",
+    label: "asterisk",
+  },
+  {
+    value: "fab fa-asymmetrik",
+    label: "asymmetrik",
+  },
+  {
+    value: "fas fa-at",
+    label: "at",
+  },
+  {
+    value: "fas fa-atlas",
+    label: "atlas",
+  },
+  {
+    value: "fab fa-atlassian",
+    label: "atlassian",
+  },
+  {
+    value: "fas fa-atom",
+    label: "atom",
+  },
+  {
+    value: "fab fa-audible",
+    label: "audible",
+  },
+  {
+    value: "fas fa-audio-description",
+    label: "audio-description",
+  },
+  {
+    value: "fab fa-autoprefixer",
+    label: "autoprefixer",
+  },
+  {
+    value: "fab fa-avianex",
+    label: "avianex",
+  },
+  {
+    value: "fab fa-aviato",
+    label: "aviato",
+  },
+  {
+    value: "fas fa-award",
+    label: "award",
+  },
+  {
+    value: "fab fa-aws",
+    label: "aws",
+  },
+  {
+    value: "fas fa-baby",
+    label: "baby",
+  },
+  {
+    value: "fas fa-baby-carriage",
+    label: "baby-carriage",
+  },
+  {
+    value: "fas fa-backspace",
+    label: "backspace",
+  },
+  {
+    value: "fas fa-backward",
+    label: "backward",
+  },
+  {
+    value: "fas fa-bacon",
+    label: "bacon",
+  },
+  {
+    value: "fas fa-bacteria",
+    label: "bacteria",
+  },
+  {
+    value: "fas fa-bacterium",
+    label: "bacterium",
+  },
+  {
+    value: "fas fa-bahai",
+    label: "bahai",
+  },
+  {
+    value: "fas fa-balance-scale",
+    label: "balance-scale",
+  },
+  {
+    value: "fas fa-balance-scale-left",
+    label: "balance-scale-left",
+  },
+  {
+    value: "fas fa-balance-scale-right",
+    label: "balance-scale-right",
+  },
+  {
+    value: "fas fa-ban",
+    label: "ban",
+  },
+  {
+    value: "fas fa-band-aid",
+    label: "band-aid",
+  },
+  {
+    value: "fab fa-bandcamp",
+    label: "bandcamp",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-barcode",
+    label: "barcode",
+  },
+  {
+    value: "fas fa-bars",
+    label: "bars",
+  },
+  {
+    value: "fas fa-baseball-ball",
+    label: "baseball-ball",
+  },
+  {
+    value: "fas fa-basketball-ball",
+    label: "basketball-ball",
+  },
+  {
+    value: "fas fa-bath",
+    label: "bath",
+  },
+  {
+    value: "fas fa-battery-empty",
+    label: "battery-empty",
+  },
+  {
+    value: "fas fa-battery-full",
+    label: "battery-full",
+  },
+  {
+    value: "fas fa-battery-half",
+    label: "battery-half",
+  },
+  {
+    value: "fas fa-battery-quarter",
+    label: "battery-quarter",
+  },
+  {
+    value: "fas fa-battery-three-quarters",
+    label: "battery-three-quarters",
+  },
+  {
+    value: "fab fa-battle-net",
+    label: "battle-net",
+  },
+  {
+    value: "fas fa-bed",
+    label: "bed",
+  },
+  {
+    value: "fas fa-beer",
+    label: "beer",
+  },
+  {
+    value: "fab fa-behance",
+    label: "behance",
+  },
+  {
+    value: "fab fa-behance-square",
+    label: "behance-square",
+  },
+  {
+    value: "fas fa-bell",
+    label: "bell",
+  },
+  {
+    value: "far fa-bell",
+    label: "bell",
+  },
+  {
+    value: "fas fa-bell-slash",
+    label: "bell-slash",
+  },
+  {
+    value: "far fa-bell-slash",
+    label: "bell-slash",
+  },
+  {
+    value: "fas fa-bezier-curve",
+    label: "bezier-curve",
+  },
+  {
+    value: "fas fa-bible",
+    label: "bible",
+  },
+  {
+    value: "fas fa-bicycle",
+    label: "bicycle",
+  },
+  {
+    value: "fas fa-biking",
+    label: "biking",
+  },
+  {
+    value: "fab fa-bimobject",
+    label: "bimobject",
+  },
+  {
+    value: "fas fa-binoculars",
+    label: "binoculars",
+  },
+  {
+    value: "fas fa-biohazard",
+    label: "biohazard",
+  },
+  {
+    value: "fas fa-birthday-cake",
+    label: "birthday-cake",
+  },
+  {
+    value: "fab fa-bitbucket",
+    label: "bitbucket",
+  },
+  {
+    value: "fab fa-bitcoin",
+    label: "bitcoin",
+  },
+  {
+    value: "fab fa-bity",
+    label: "bity",
+  },
+  {
+    value: "fab fa-black-tie",
+    label: "black-tie",
+  },
+  {
+    value: "fab fa-blackberry",
+    label: "blackberry",
+  },
+  {
+    value: "fas fa-blender",
+    label: "blender",
+  },
+  {
+    value: "fas fa-blender-phone",
+    label: "blender-phone",
+  },
+  {
+    value: "fas fa-blind",
+    label: "blind",
+  },
+  {
+    value: "fas fa-blog",
+    label: "blog",
+  },
+  {
+    value: "fab fa-blogger",
+    label: "blogger",
+  },
+  {
+    value: "fab fa-blogger-b",
+    label: "blogger-b",
+  },
+  {
+    value: "fab fa-bluetooth",
+    label: "bluetooth",
+  },
+  {
+    value: "fab fa-bluetooth-b",
+    label: "bluetooth-b",
+  },
+  {
+    value: "fas fa-bold",
+    label: "bold",
+  },
+  {
+    value: "fas fa-bolt",
+    label: "bolt",
+  },
+  {
+    value: "fas fa-bomb",
+    label: "bomb",
+  },
+  {
+    value: "fas fa-bone",
+    label: "bone",
+  },
+  {
+    value: "fas fa-bong",
+    label: "bong",
+  },
+  {
+    value: "fas fa-book",
+    label: "book",
+  },
+  {
+    value: "fas fa-book-dead",
+    label: "book-dead",
+  },
+  {
+    value: "fas fa-book-medical",
+    label: "book-medical",
+  },
+  {
+    value: "fas fa-book-open",
+    label: "book-open",
+  },
+  {
+    value: "fas fa-book-reader",
+    label: "book-reader",
+  },
+  {
+    value: "fas fa-bookmark",
+    label: "bookmark",
+  },
+  {
+    value: "far fa-bookmark",
+    label: "bookmark",
+  },
+  {
+    value: "fab fa-bootstrap",
+    label: "bootstrap",
+  },
+  {
+    value: "fas fa-border-all",
+    label: "border-all",
+  },
+  {
+    value: "fas fa-border-none",
+    label: "border-none",
+  },
+  {
+    value: "fas fa-border-style",
+    label: "border-style",
+  },
+  {
+    value: "fas fa-bowling-ball",
+    label: "bowling-ball",
+  },
+  {
+    value: "fas fa-box",
+    label: "box",
+  },
+  {
+    value: "fas fa-box-open",
+    label: "box-open",
+  },
+  {
+    value: "fas fa-box-tissue",
+    label: "box-tissue",
+  },
+  {
+    value: "fas fa-boxes",
+    label: "boxes",
+  },
+  {
+    value: "fas fa-braille",
+    label: "braille",
+  },
+  {
+    value: "fas fa-brain",
+    label: "brain",
+  },
+  {
+    value: "fas fa-bread-slice",
+    label: "bread-slice",
+  },
+  {
+    value: "fas fa-briefcase",
+    label: "briefcase",
+  },
+  {
+    value: "fas fa-briefcase-medical",
+    label: "briefcase-medical",
+  },
+  {
+    value: "fas fa-broadcast-tower",
+    label: "broadcast-tower",
+  },
+  {
+    value: "fas fa-broom",
+    label: "broom",
+  },
+  {
+    value: "fas fa-brush",
+    label: "brush",
+  },
+  {
+    value: "fab fa-btc",
+    label: "btc",
+  },
+  {
+    value: "fab fa-buffer",
+    label: "buffer",
+  },
+  {
+    value: "fas fa-bug",
+    label: "bug",
+  },
+  {
+    value: "fas fa-building",
+    label: "building",
+  },
+  {
+    value: "far fa-building",
+    label: "building",
+  },
+  {
+    value: "fas fa-bullhorn",
+    label: "bullhorn",
+  },
+  {
+    value: "fas fa-bullseye",
+    label: "bullseye",
+  },
+  {
+    value: "fas fa-burn",
+    label: "burn",
+  },
+  {
+    value: "fab fa-buromobelexperte",
+    label: "buromobelexperte",
+  },
+  {
+    value: "fas fa-bus",
+    label: "bus",
+  },
+  {
+    value: "fas fa-bus-alt",
+    label: "bus-alt",
+  },
+  {
+    value: "fas fa-business-time",
+    label: "business-time",
+  },
+  {
+    value: "fab fa-buy-n-large",
+    label: "buy-n-large",
+  },
+  {
+    value: "fab fa-buysellads",
+    label: "buysellads",
+  },
+  {
+    value: "fas fa-calculator",
+    label: "calculator",
+  },
+  {
+    value: "fas fa-calendar",
+    label: "calendar",
+  },
+  {
+    value: "far fa-calendar",
+    label: "calendar",
+  },
+  {
+    value: "fas fa-calendar-alt",
+    label: "calendar-alt",
+  },
+  {
+    value: "far fa-calendar-alt",
+    label: "calendar-alt",
+  },
+  {
+    value: "fas fa-calendar-check",
+    label: "calendar-check",
+  },
+  {
+    value: "far fa-calendar-check",
+    label: "calendar-check",
+  },
+  {
+    value: "fas fa-calendar-day",
+    label: "calendar-day",
+  },
+  {
+    value: "fas fa-calendar-minus",
+    label: "calendar-minus",
+  },
+  {
+    value: "far fa-calendar-minus",
+    label: "calendar-minus",
+  },
+  {
+    value: "fas fa-calendar-plus",
+    label: "calendar-plus",
+  },
+  {
+    value: "far fa-calendar-plus",
+    label: "calendar-plus",
+  },
+  {
+    value: "fas fa-calendar-times",
+    label: "calendar-times",
+  },
+  {
+    value: "far fa-calendar-times",
+    label: "calendar-times",
+  },
+  {
+    value: "fas fa-calendar-week",
+    label: "calendar-week",
+  },
+  {
+    value: "fas fa-camera",
+    label: "camera",
+  },
+  {
+    value: "fas fa-camera-retro",
+    label: "camera-retro",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-campground",
+    label: "campground",
+  },
+  {
+    value: "fab fa-canadian-maple-leaf",
+    label: "canadian-maple-leaf",
+  },
+  {
+    value: "fas fa-candy-cane",
+    label: "candy-cane",
+  },
+  {
+    value: "fas fa-cannabis",
+    label: "cannabis",
+  },
+  {
+    value: "fas fa-capsules",
+    label: "capsules",
+  },
+  {
+    value: "fas fa-car",
+    label: "car",
+  },
+  {
+    value: "fas fa-car-alt",
+    label: "car-alt",
+  },
+  {
+    value: "fas fa-car-battery",
+    label: "car-battery",
+  },
+  {
+    value: "fas fa-car-crash",
+    label: "car-crash",
+  },
+  {
+    value: "fas fa-car-side",
+    label: "car-side",
+  },
+  {
+    value: "fas fa-caravan",
+    label: "caravan",
+  },
+  {
+    value: "fas fa-caret-down",
+    label: "caret-down",
+  },
+  {
+    value: "fas fa-caret-left",
+    label: "caret-left",
+  },
+  {
+    value: "fas fa-caret-right",
+    label: "caret-right",
+  },
+  {
+    value: "fas fa-caret-square-down",
+    label: "caret-square-down",
+  },
+  {
+    value: "far fa-caret-square-down",
+    label: "caret-square-down",
+  },
+  {
+    value: "fas fa-caret-square-left",
+    label: "caret-square-left",
+  },
+  {
+    value: "far fa-caret-square-left",
+    label: "caret-square-left",
+  },
+  {
+    value: "fas fa-caret-square-right",
+    label: "caret-square-right",
+  },
+  {
+    value: "far fa-caret-square-right",
+    label: "caret-square-right",
+  },
+  {
+    value: "fas fa-caret-square-up",
+    label: "caret-square-up",
+  },
+  {
+    value: "far fa-caret-square-up",
+    label: "caret-square-up",
+  },
+  {
+    value: "fas fa-caret-up",
+    label: "caret-up",
+  },
+  {
+    value: "fas fa-carrot",
+    label: "carrot",
+  },
+  {
+    value: "fas fa-cart-arrow-down",
+    label: "cart-arrow-down",
+  },
+  {
+    value: "fas fa-cart-plus",
+    label: "cart-plus",
+  },
+  {
+    value: "fas fa-cash-register",
+    label: "cash-register",
+  },
+  {
+    value: "fas fa-cat",
+    label: "cat",
+  },
+  {
+    value: "fab fa-cc-amazon-pay",
+    label: "cc-amazon-pay",
+  },
+  {
+    value: "fab fa-cc-amex",
+    label: "cc-amex",
+  },
+  {
+    value: "fab fa-cc-apple-pay",
+    label: "cc-apple-pay",
+  },
+  {
+    value: "fab fa-cc-diners-club",
+    label: "cc-diners-club",
+  },
+  {
+    value: "fab fa-cc-discover",
+    label: "cc-discover",
+  },
+  {
+    value: "fab fa-cc-jcb",
+    label: "cc-jcb",
+  },
+  {
+    value: "fab fa-cc-mastercard",
+    label: "cc-mastercard",
+  },
+  {
+    value: "fab fa-cc-paypal",
+    label: "cc-paypal",
+  },
+  {
+    value: "fab fa-cc-stripe",
+    label: "cc-stripe",
+  },
+  {
+    value: "fab fa-cc-visa",
+    label: "cc-visa",
+  },
+  {
+    value: "fab fa-centercode",
+    label: "centercode",
+  },
+  {
+    value: "fab fa-centos",
+    label: "centos",
+  },
+  {
+    value: "fas fa-certificate",
+    label: "certificate",
+  },
+  {
+    value: "fas fa-chair",
+    label: "chair",
+  },
+  {
+    value: "fas fa-chalkboard",
+    label: "chalkboard",
+  },
+  {
+    value: "fas fa-chalkboard-teacher",
+    label: "chalkboard-teacher",
+  },
+  {
+    value: "fas fa-charging-station",
+    label: "charging-station",
+  },
+  {
+    value: "fas fa-chart-area",
+    label: "chart-area",
+  },
+  {
+    value: "fas fa-chart-bar",
+    label: "chart-bar",
+  },
+  {
+    value: "far fa-chart-bar",
+    label: "chart-bar",
+  },
+  {
+    value: "fas fa-chart-line",
+    label: "chart-line",
+  },
+  {
+    value: "fas fa-chart-pie",
+    label: "chart-pie",
+  },
+  {
+    value: "fas fa-check",
+    label: "check",
+  },
+  {
+    value: "fas fa-check-circle",
+    label: "check-circle",
+  },
+  {
+    value: "far fa-check-circle",
+    label: "check-circle",
+  },
+  {
+    value: "fas fa-check-double",
+    label: "check-double",
+  },
+  {
+    value: "fas fa-check-square",
+    label: "check-square",
+  },
+  {
+    value: "far fa-check-square",
+    label: "check-square",
+  },
+  {
+    value: "fas fa-cheese",
+    label: "cheese",
+  },
+  {
+    value: "fas fa-chess",
+    label: "chess",
+  },
+  {
+    value: "fas fa-chess-bishop",
+    label: "chess-bishop",
+  },
+  {
+    value: "fas fa-chess-board",
+    label: "chess-board",
+  },
+  {
+    value: "fas fa-chess-king",
+    label: "chess-king",
+  },
+  {
+    value: "fas fa-chess-knight",
+    label: "chess-knight",
+  },
+  {
+    value: "fas fa-chess-pawn",
+    label: "chess-pawn",
+  },
+  {
+    value: "fas fa-chess-queen",
+    label: "chess-queen",
+  },
+  {
+    value: "fas fa-chess-rook",
+    label: "chess-rook",
+  },
+  {
+    value: "fas fa-chevron-circle-down",
+    label: "chevron-circle-down",
+  },
+  {
+    value: "fas fa-chevron-circle-left",
+    label: "chevron-circle-left",
+  },
+  {
+    value: "fas fa-chevron-circle-right",
+    label: "chevron-circle-right",
+  },
+  {
+    value: "fas fa-chevron-circle-up",
+    label: "chevron-circle-up",
+  },
+  {
+    value: "fas fa-chevron-down",
+    label: "chevron-down",
+  },
+  {
+    value: "fas fa-chevron-left",
+    label: "chevron-left",
+  },
+  {
+    value: "fas fa-chevron-right",
+    label: "chevron-right",
+  },
+  {
+    value: "fas fa-chevron-up",
+    label: "chevron-up",
+  },
+  {
+    value: "fas fa-child",
+    label: "child",
+  },
+  {
+    value: "fab fa-chrome",
+    label: "chrome",
+  },
+  {
+    value: "fab fa-chromecast",
+    label: "chromecast",
+  },
+  {
+    value: "fas fa-church",
+    label: "church",
+  },
+  {
+    value: "fas fa-circle",
+    label: "circle",
+  },
+  {
+    value: "far fa-circle",
+    label: "circle",
+  },
+  {
+    value: "fas fa-circle-notch",
+    label: "circle-notch",
+  },
+  {
+    value: "fas fa-city",
+    label: "city",
+  },
+  {
+    value: "fas fa-clinic-medical",
+    label: "clinic-medical",
+  },
+  {
+    value: "fas fa-clipboard",
+    label: "clipboard",
+  },
+  {
+    value: "far fa-clipboard",
+    label: "clipboard",
+  },
+  {
+    value: "fas fa-clipboard-check",
+    label: "clipboard-check",
+  },
+  {
+    value: "fas fa-clipboard-list",
+    label: "clipboard-list",
+  },
+  {
+    value: "fas fa-clock",
+    label: "clock",
+  },
+  {
+    value: "far fa-clock",
+    label: "clock",
+  },
+  {
+    value: "fas fa-clone",
+    label: "clone",
+  },
+  {
+    value: "far fa-clone",
+    label: "clone",
+  },
+  {
+    value: "fas fa-closed-captioning",
+    label: "closed-captioning",
+  },
+  {
+    value: "far fa-closed-captioning",
+    label: "closed-captioning",
+  },
+  {
+    value: "fas fa-cloud",
+    label: "cloud",
+  },
+  {
+    value: "fas fa-cloud-download-alt",
+    label: "cloud-download-alt",
+  },
+  {
+    value: "fas fa-cloud-meatball",
+    label: "cloud-meatball",
+  },
+  {
+    value: "fas fa-cloud-moon",
+    label: "cloud-moon",
+  },
+  {
+    value: "fas fa-cloud-moon-rain",
+    label: "cloud-moon-rain",
+  },
+  {
+    value: "fas fa-cloud-rain",
+    label: "cloud-rain",
+  },
+  {
+    value: "fas fa-cloud-showers-heavy",
+    label: "cloud-showers-heavy",
+  },
+  {
+    value: "fas fa-cloud-sun",
+    label: "cloud-sun",
+  },
+  {
+    value: "fas fa-cloud-sun-rain",
+    label: "cloud-sun-rain",
+  },
+  {
+    value: "fas fa-cloud-upload-alt",
+    label: "cloud-upload-alt",
+  },
+  {
+    value: "fab fa-cloudscale",
+    label: "cloudscale",
+  },
+  {
+    value: "fab fa-cloudsmith",
+    label: "cloudsmith",
+  },
+  {
+    value: "fab fa-cloudversify",
+    label: "cloudversify",
+  },
+  {
+    value: "fas fa-cocktail",
+    label: "cocktail",
+  },
+  {
+    value: "fas fa-code",
+    label: "code",
+  },
+  {
+    value: "fas fa-code-branch",
+    label: "code-branch",
+  },
+  {
+    value: "fab fa-codepen",
+    label: "codepen",
+  },
+  {
+    value: "fab fa-codiepie",
+    label: "codiepie",
+  },
+  {
+    value: "fas fa-coffee",
+    label: "coffee",
+  },
+  {
+    value: "fas fa-cog",
+    label: "cog",
+  },
+  {
+    value: "fas fa-cogs",
+    label: "cogs",
+  },
+  {
+    value: "fas fa-coins",
+    label: "coins",
+  },
+  {
+    value: "fas fa-columns",
+    label: "columns",
+  },
+  {
+    value: "fas fa-comment",
+    label: "comment",
+  },
+  {
+    value: "far fa-comment",
+    label: "comment",
+  },
+  {
+    value: "fas fa-comment-alt",
+    label: "comment-alt",
+  },
+  {
+    value: "far fa-comment-alt",
+    label: "comment-alt",
+  },
+  {
+    value: "fas fa-comment-dollar",
+    label: "comment-dollar",
+  },
+  {
+    value: "fas fa-comment-dots",
+    label: "comment-dots",
+  },
+  {
+    value: "far fa-comment-dots",
+    label: "comment-dots",
+  },
+  {
+    value: "fas fa-comment-medical",
+    label: "comment-medical",
+  },
+  {
+    value: "fas fa-comment-slash",
+    label: "comment-slash",
+  },
+  {
+    value: "fas fa-comments",
+    label: "comments",
+  },
+  {
+    value: "far fa-comments",
+    label: "comments",
+  },
+  {
+    value: "fas fa-comments-dollar",
+    label: "comments-dollar",
+  },
+  {
+    value: "fas fa-compact-disc",
+    label: "compact-disc",
+  },
+  {
+    value: "fas fa-compass",
+    label: "compass",
+  },
+  {
+    value: "far fa-compass",
+    label: "compass",
+  },
+  {
+    value: "fas fa-compress",
+    label: "compress",
+  },
+  {
+    value: "fas fa-compress-alt",
+    label: "compress-alt",
+  },
+  {
+    value: "fas fa-compress-arrows-alt",
+    label: "compress-arrows-alt",
+  },
+  {
+    value: "fas fa-concierge-bell",
+    label: "concierge-bell",
+  },
+  {
+    value: "fab fa-confluence",
+    label: "confluence",
+  },
+  {
+    value: "fab fa-connectdevelop",
+    label: "connectdevelop",
+  },
+  {
+    value: "fab fa-contao",
+    label: "contao",
+  },
+  {
+    value: "fas fa-cookie",
+    label: "cookie",
+  },
+  {
+    value: "fas fa-cookie-bite",
+    label: "cookie-bite",
+  },
+  {
+    value: "fas fa-copy",
+    label: "copy",
+  },
+  {
+    value: "far fa-copy",
+    label: "copy",
+  },
+  {
+    value: "fas fa-copyright",
+    label: "copyright",
+  },
+  {
+    value: "far fa-copyright",
+    label: "copyright",
+  },
+  {
+    value: "fab fa-cotton-bureau",
+    label: "cotton-bureau",
+  },
+  {
+    value: "fas fa-couch",
+    label: "couch",
+  },
+  {
+    value: "fab fa-cpanel",
+    label: "cpanel",
+  },
+  {
+    value: "fab fa-creative-commons",
+    label: "creative-commons",
+  },
+  {
+    value: "fab fa-creative-commons-by",
+    label: "creative-commons-by",
+  },
+  {
+    value: "fab fa-creative-commons-nc",
+    label: "creative-commons-nc",
+  },
+  {
+    value: "fab fa-creative-commons-nc-eu",
+    label: "creative-commons-nc-eu",
+  },
+  {
+    value: "fab fa-creative-commons-nc-jp",
+    label: "creative-commons-nc-jp",
+  },
+  {
+    value: "fab fa-creative-commons-nd",
+    label: "creative-commons-nd",
+  },
+  {
+    value: "fab fa-creative-commons-pd",
+    label: "creative-commons-pd",
+  },
+  {
+    value: "fab fa-creative-commons-pd-alt",
+    label: "creative-commons-pd-alt",
+  },
+  {
+    value: "fab fa-creative-commons-remix",
+    label: "creative-commons-remix",
+  },
+  {
+    value: "fab fa-creative-commons-sa",
+    label: "creative-commons-sa",
+  },
+  {
+    value: "fab fa-creative-commons-sampling",
+    label: "creative-commons-sampling",
+  },
+  {
+    value: "fab fa-creative-commons-sampling-plus",
+    label: "creative-commons-sampling-plus",
+  },
+  {
+    value: "fab fa-creative-commons-share",
+    label: "creative-commons-share",
+  },
+  {
+    value: "fab fa-creative-commons-zero",
+    label: "creative-commons-zero",
+  },
+  {
+    value: "fas fa-credit-card",
+    label: "credit-card",
+  },
+  {
+    value: "far fa-credit-card",
+    label: "credit-card",
+  },
+  {
+    value: "fab fa-critical-role",
+    label: "critical-role",
+  },
+  {
+    value: "fas fa-crop",
+    label: "crop",
+  },
+  {
+    value: "fas fa-crop-alt",
+    label: "crop-alt",
+  },
+  {
+    value: "fas fa-cross",
+    label: "cross",
+  },
+  {
+    value: "fas fa-crosshairs",
+    label: "crosshairs",
+  },
+  {
+    value: "fas fa-crow",
+    label: "crow",
+  },
+  {
+    value: "fas fa-crown",
+    label: "crown",
+  },
+  {
+    value: "fas fa-crutch",
+    label: "crutch",
+  },
+  {
+    value: "fab fa-css3",
+    label: "css3",
+  },
+  {
+    value: "fab fa-css3-alt",
+    label: "css3-alt",
+  },
+  {
+    value: "fas fa-cube",
+    label: "cube",
+  },
+  {
+    value: "fas fa-cubes",
+    label: "cubes",
+  },
+  {
+    value: "fas fa-cut",
+    label: "cut",
+  },
+  {
+    value: "fab fa-cuttlefish",
+    label: "cuttlefish",
+  },
+  {
+    value: "fab fa-d-and-d",
+    label: "d-and-d",
+  },
+  {
+    value: "fab fa-d-and-d-beyond",
+    label: "d-and-d-beyond",
+  },
+  {
+    value: "fab fa-dailymotion",
+    label: "dailymotion",
+  },
+  {
+    value: "fab fa-dashcube",
+    label: "dashcube",
+  },
+  {
+    value: "fas fa-database",
+    label: "database",
+  },
+  {
+    value: "fas fa-deaf",
+    label: "deaf",
+  },
+  {
+    value: "fab fa-deezer",
+    label: "deezer",
+  },
+  {
+    value: "fab fa-delicious",
+    label: "delicious",
+  },
+  {
+    value: "fas fa-democrat",
+    label: "democrat",
+  },
+  {
+    value: "fab fa-deploydog",
+    label: "deploydog",
+  },
+  {
+    value: "fab fa-deskpro",
+    label: "deskpro",
+  },
+  {
+    value: "fas fa-desktop",
+    label: "desktop",
+  },
+  {
+    value: "fab fa-dev",
+    label: "dev",
+  },
+  {
+    value: "fab fa-deviantart",
+    label: "deviantart",
+  },
+  {
+    value: "fas fa-dharmachakra",
+    label: "dharmachakra",
+  },
+  {
+    value: "fab fa-dhl",
+    label: "dhl",
+  },
+  {
+    value: "fas fa-diagnoses",
+    label: "diagnoses",
+  },
+  {
+    value: "fab fa-diaspora",
+    label: "diaspora",
+  },
+  {
+    value: "fas fa-dice",
+    label: "dice",
+  },
+  {
+    value: "fas fa-dice-d20",
+    label: "dice-d20",
+  },
+  {
+    value: "fas fa-dice-d6",
+    label: "dice-d6",
+  },
+  {
+    value: "fas fa-dice-five",
+    label: "dice-five",
+  },
+  {
+    value: "fas fa-dice-four",
+    label: "dice-four",
+  },
+  {
+    value: "fas fa-dice-one",
+    label: "dice-one",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-dice-six",
+    label: "dice-six",
+  },
+  {
+    value: "fas fa-dice-three",
+    label: "dice-three",
+  },
+  {
+    value: "fas fa-dice-two",
+    label: "dice-two",
+  },
+  {
+    value: "fab fa-digg",
+    label: "digg",
+  },
+  {
+    value: "fab fa-digital-ocean",
+    label: "digital-ocean",
+  },
+  {
+    value: "fas fa-digital-tachograph",
+    label: "digital-tachograph",
+  },
+  {
+    value: "fas fa-directions",
+    label: "directions",
+  },
+  {
+    value: "fab fa-discord",
+    label: "discord",
+  },
+  {
+    value: "fab fa-discourse",
+    label: "discourse",
+  },
+  {
+    value: "fas fa-disease",
+    label: "disease",
+  },
+  {
+    value: "fas fa-divide",
+    label: "divide",
+  },
+  {
+    value: "fas fa-dizzy",
+    label: "dizzy",
+  },
+  {
+    value: "far fa-dizzy",
+    label: "dizzy",
+  },
+  {
+    value: "fas fa-dna",
+    label: "dna",
+  },
+  {
+    value: "fab fa-dochub",
+    label: "dochub",
+  },
+  {
+    value: "fab fa-docker",
+    label: "docker",
+  },
+  {
+    value: "fas fa-dog",
+    label: "dog",
+  },
+  {
+    value: "fas fa-dollar-sign",
+    label: "dollar-sign",
+  },
+  {
+    value: "fas fa-dolly",
+    label: "dolly",
+  },
+  {
+    value: "fas fa-dolly-flatbed",
+    label: "dolly-flatbed",
+  },
+  {
+    value: "fas fa-donate",
+    label: "donate",
+  },
+  {
+    value: "fas fa-door-closed",
+    label: "door-closed",
+  },
+  {
+    value: "fas fa-door-open",
+    label: "door-open",
+  },
+  {
+    value: "fas fa-dot-circle",
+    label: "dot-circle",
+  },
+  {
+    value: "far fa-dot-circle",
+    label: "dot-circle",
+  },
+  {
+    value: "fas fa-dove",
+    label: "dove",
+  },
+  {
+    value: "fas fa-download",
+    label: "download",
+  },
+  {
+    value: "fab fa-draft2digital",
+    label: "draft2digital",
+  },
+  {
+    value: "fas fa-drafting-compass",
+    label: "drafting-compass",
+  },
+  {
+    value: "fas fa-dragon",
+    label: "dragon",
+  },
+  {
+    value: "fas fa-draw-polygon",
+    label: "draw-polygon",
+  },
+  {
+    value: "fab fa-dribbble",
+    label: "dribbble",
+  },
+  {
+    value: "fab fa-dribbble-square",
+    label: "dribbble-square",
+  },
+  {
+    value: "fab fa-dropbox",
+    label: "dropbox",
+  },
+  {
+    value: "fas fa-drum",
+    label: "drum",
+  },
+  {
+    value: "fas fa-drum-steelpan",
+    label: "drum-steelpan",
+  },
+  {
+    value: "fas fa-drumstick-bite",
+    label: "drumstick-bite",
+  },
+  {
+    value: "fab fa-drupal",
+    label: "drupal",
+  },
+  {
+    value: "fas fa-dumbbell",
+    label: "dumbbell",
+  },
+  {
+    value: "fas fa-dumpster",
+    label: "dumpster",
+  },
+  {
+    value: "fas fa-dumpster-fire",
+    label: "dumpster-fire",
+  },
+  {
+    value: "fas fa-dungeon",
+    label: "dungeon",
+  },
+  {
+    value: "fab fa-dyalog",
+    label: "dyalog",
+  },
+  {
+    value: "fab fa-earlybirds",
+    label: "earlybirds",
+  },
+  {
+    value: "fab fa-ebay",
+    label: "ebay",
+  },
+  {
+    value: "fab fa-edge",
+    label: "edge",
+  },
+  {
+    value: "fab fa-edge-legacy",
+    label: "edge-legacy",
+  },
+  {
+    value: "fas fa-edit",
+    label: "edit",
+  },
+  {
+    value: "far fa-edit",
+    label: "edit",
+  },
+  {
+    value: "fas fa-egg",
+    label: "egg",
+  },
+  {
+    value: "fas fa-eject",
+    label: "eject",
+  },
+  {
+    value: "fab fa-elementor",
+    label: "elementor",
+  },
+  {
+    value: "fas fa-ellipsis-h",
+    label: "ellipsis-h",
+  },
+  {
+    value: "fas fa-ellipsis-v",
+    label: "ellipsis-v",
+  },
+  {
+    value: "fab fa-ello",
+    label: "ello",
+  },
+  {
+    value: "fab fa-ember",
+    label: "ember",
+  },
+  {
+    value: "fab fa-empire",
+    label: "empire",
+  },
+  {
+    value: "fas fa-envelope",
+    label: "envelope",
+  },
+  {
+    value: "far fa-envelope",
+    label: "envelope",
+  },
+  {
+    value: "fas fa-envelope-open",
+    label: "envelope-open",
+  },
+  {
+    value: "far fa-envelope-open",
+    label: "envelope-open",
+  },
+  {
+    value: "fas fa-envelope-open-text",
+    label: "envelope-open-text",
+  },
+  {
+    value: "fas fa-envelope-square",
+    label: "envelope-square",
+  },
+  {
+    value: "fab fa-envira",
+    label: "envira",
+  },
+  {
+    value: "fas fa-equals",
+    label: "equals",
+  },
+  {
+    value: "fas fa-eraser",
+    label: "eraser",
+  },
+  {
+    value: "fab fa-erlang",
+    label: "erlang",
+  },
+  {
+    value: "fab fa-ethereum",
+    label: "ethereum",
+  },
+  {
+    value: "fas fa-ethernet",
+    label: "ethernet",
+  },
+  {
+    value: "fab fa-etsy",
+    label: "etsy",
+  },
+  {
+    value: "fas fa-euro-sign",
+    label: "euro-sign",
+  },
+  {
+    value: "fab fa-evernote",
+    label: "evernote",
+  },
+  {
+    value: "fas fa-exchange-alt",
+    label: "exchange-alt",
+  },
+  {
+    value: "fas fa-exclamation",
+    label: "exclamation",
+  },
+  {
+    value: "fas fa-exclamation-circle",
+    label: "exclamation-circle",
+  },
+  {
+    value: "fas fa-exclamation-triangle",
+    label: "exclamation-triangle",
+  },
+  {
+    value: "fas fa-expand",
+    label: "expand",
+  },
+  {
+    value: "fas fa-expand-alt",
+    label: "expand-alt",
+  },
+  {
+    value: "fas fa-expand-arrows-alt",
+    label: "expand-arrows-alt",
+  },
+  {
+    value: "fab fa-expeditedssl",
+    label: "expeditedssl",
+  },
+  {
+    value: "fas fa-external-link-alt",
+    label: "external-link-alt",
+  },
+  {
+    value: "fas fa-external-link-square-alt",
+    label: "external-link-square-alt",
+  },
+  {
+    value: "fas fa-eye",
+    label: "eye",
+  },
+  {
+    value: "far fa-eye",
+    label: "eye",
+  },
+  {
+    value: "fas fa-eye-dropper",
+    label: "eye-dropper",
+  },
+  {
+    value: "fas fa-eye-slash",
+    label: "eye-slash",
+  },
+  {
+    value: "far fa-eye-slash",
+    label: "eye-slash",
+  },
+  {
+    value: "fab fa-facebook",
+    label: "facebook",
+  },
+  {
+    value: "fab fa-facebook-f",
+    label: "facebook-f",
+  },
+  {
+    value: "fab fa-facebook-messenger",
+    label: "facebook-messenger",
+  },
+  {
+    value: "fab fa-facebook-square",
+    label: "facebook-square",
+  },
+  {
+    value: "fas fa-fan",
+    label: "fan",
+  },
+  {
+    value: "fab fa-fantasy-flight-games",
+    label: "fantasy-flight-games",
+  },
+  {
+    value: "fas fa-fast-backward",
+    label: "fast-backward",
+  },
+  {
+    value: "fas fa-fast-forward",
+    label: "fast-forward",
+  },
+  {
+    value: "fas fa-faucet",
+    label: "faucet",
+  },
+  {
+    value: "fas fa-fax",
+    label: "fax",
+  },
+  {
+    value: "fas fa-feather",
+    label: "feather",
+  },
+  {
+    value: "fas fa-feather-alt",
+    label: "feather-alt",
+  },
+  {
+    value: "fab fa-fedex",
+    label: "fedex",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fab fa-fedora",
+    label: "fedora",
+  },
+  {
+    value: "fas fa-female",
+    label: "female",
+  },
+  {
+    value: "fas fa-fighter-jet",
+    label: "fighter-jet",
+  },
+  {
+    value: "fab fa-figma",
+    label: "figma",
+  },
+  {
+    value: "fas fa-file",
+    label: "file",
+  },
+  {
+    value: "far fa-file",
+    label: "file",
+  },
+  {
+    value: "fas fa-file-alt",
+    label: "file-alt",
+  },
+  {
+    value: "far fa-file-alt",
+    label: "file-alt",
+  },
+  {
+    value: "fas fa-file-archive",
+    label: "file-archive",
+  },
+  {
+    value: "far fa-file-archive",
+    label: "file-archive",
+  },
+  {
+    value: "fas fa-file-audio",
+    label: "file-audio",
+  },
+  {
+    value: "far fa-file-audio",
+    label: "file-audio",
+  },
+  {
+    value: "fas fa-file-code",
+    label: "file-code",
+  },
+  {
+    value: "far fa-file-code",
+    label: "file-code",
+  },
+  {
+    value: "fas fa-file-contract",
+    label: "file-contract",
+  },
+  {
+    value: "fas fa-file-csv",
+    label: "file-csv",
+  },
+  {
+    value: "fas fa-file-download",
+    label: "file-download",
+  },
+  {
+    value: "fas fa-file-excel",
+    label: "file-excel",
+  },
+  {
+    value: "far fa-file-excel",
+    label: "file-excel",
+  },
+  {
+    value: "fas fa-file-export",
+    label: "file-export",
+  },
+  {
+    value: "fas fa-file-image",
+    label: "file-image",
+  },
+  {
+    value: "far fa-file-image",
+    label: "file-image",
+  },
+  {
+    value: "fas fa-file-import",
+    label: "file-import",
+  },
+  {
+    value: "fas fa-file-invoice",
+    label: "file-invoice",
+  },
+  {
+    value: "fas fa-file-invoice-dollar",
+    label: "file-invoice-dollar",
+  },
+  {
+    value: "fas fa-file-medical",
+    label: "file-medical",
+  },
+  {
+    value: "fas fa-file-medical-alt",
+    label: "file-medical-alt",
+  },
+  {
+    value: "fas fa-file-pdf",
+    label: "file-pdf",
+  },
+  {
+    value: "far fa-file-pdf",
+    label: "file-pdf",
+  },
+  {
+    value: "fas fa-file-powerpoint",
+    label: "file-powerpoint",
+  },
+  {
+    value: "far fa-file-powerpoint",
+    label: "file-powerpoint",
+  },
+  {
+    value: "fas fa-file-prescription",
+    label: "file-prescription",
+  },
+  {
+    value: "fas fa-file-signature",
+    label: "file-signature",
+  },
+  {
+    value: "fas fa-file-upload",
+    label: "file-upload",
+  },
+  {
+    value: "fas fa-file-video",
+    label: "file-video",
+  },
+  {
+    value: "far fa-file-video",
+    label: "file-video",
+  },
+  {
+    value: "fas fa-file-word",
+    label: "file-word",
+  },
+  {
+    value: "far fa-file-word",
+    label: "file-word",
+  },
+  {
+    value: "fas fa-fill",
+    label: "fill",
+  },
+  {
+    value: "fas fa-fill-drip",
+    label: "fill-drip",
+  },
+  {
+    value: "fas fa-film",
+    label: "film",
+  },
+  {
+    value: "fas fa-filter",
+    label: "filter",
+  },
+  {
+    value: "fas fa-fingerprint",
+    label: "fingerprint",
+  },
+  {
+    value: "fas fa-fire",
+    label: "fire",
+  },
+  {
+    value: "fas fa-fire-alt",
+    label: "fire-alt",
+  },
+  {
+    value: "fas fa-fire-extinguisher",
+    label: "fire-extinguisher",
+  },
+  {
+    value: "fab fa-firefox",
+    label: "firefox",
+  },
+  {
+    value: "fab fa-firefox-browser",
+    label: "firefox-browser",
+  },
+  {
+    value: "fas fa-first-aid",
+    label: "first-aid",
+  },
+  {
+    value: "fab fa-first-order",
+    label: "first-order",
+  },
+  {
+    value: "fab fa-first-order-alt",
+    label: "first-order-alt",
+  },
+  {
+    value: "fab fa-firstdraft",
+    label: "firstdraft",
+  },
+  {
+    value: "fas fa-fish",
+    label: "fish",
+  },
+  {
+    value: "fas fa-fist-raised",
+    label: "fist-raised",
+  },
+  {
+    value: "fas fa-flag",
+    label: "flag",
+  },
+  {
+    value: "far fa-flag",
+    label: "flag",
+  },
+  {
+    value: "fas fa-flag-checkered",
+    label: "flag-checkered",
+  },
+  {
+    value: "fas fa-flag-usa",
+    label: "flag-usa",
+  },
+  {
+    value: "fas fa-flask",
+    label: "flask",
+  },
+  {
+    value: "fab fa-flickr",
+    label: "flickr",
+  },
+  {
+    value: "fab fa-flipboard",
+    label: "flipboard",
+  },
+  {
+    value: "fas fa-flushed",
+    label: "flushed",
+  },
+  {
+    value: "far fa-flushed",
+    label: "flushed",
+  },
+  {
+    value: "fab fa-fly",
+    label: "fly",
+  },
+  {
+    value: "fas fa-folder",
+    label: "folder",
+  },
+  {
+    value: "far fa-folder",
+    label: "folder",
+  },
+  {
+    value: "fas fa-folder-minus",
+    label: "folder-minus",
+  },
+  {
+    value: "fas fa-folder-open",
+    label: "folder-open",
+  },
+  {
+    value: "far fa-folder-open",
+    label: "folder-open",
+  },
+  {
+    value: "fas fa-folder-plus",
+    label: "folder-plus",
+  },
+  {
+    value: "fas fa-font",
+    label: "font",
+  },
+  {
+    value: "fab fa-font-awesome",
+    label: "font-awesome",
+  },
+  {
+    value: "fab fa-font-awesome-alt",
+    label: "font-awesome-alt",
+  },
+  {
+    value: "fab fa-font-awesome-flag",
+    label: "font-awesome-flag",
+  },
+  {
+    value: "fab fa-fonticons",
+    label: "fonticons",
+  },
+  {
+    value: "fab fa-fonticons-fi",
+    label: "fonticons-fi",
+  },
+  {
+    value: "fas fa-football-ball",
+    label: "football-ball",
+  },
+  {
+    value: "fab fa-fort-awesome",
+    label: "fort-awesome",
+  },
+  {
+    value: "fab fa-fort-awesome-alt",
+    label: "fort-awesome-alt",
+  },
+  {
+    value: "fab fa-forumbee",
+    label: "forumbee",
+  },
+  {
+    value: "fas fa-forward",
+    label: "forward",
+  },
+  {
+    value: "fab fa-foursquare",
+    label: "foursquare",
+  },
+  {
+    value: "fab fa-free-code-camp",
+    label: "free-code-camp",
+  },
+  {
+    value: "fab fa-freebsd",
+    label: "freebsd",
+  },
+  {
+    value: "fas fa-frog",
+    label: "frog",
+  },
+  {
+    value: "fas fa-frown",
+    label: "frown",
+  },
+  {
+    value: "far fa-frown",
+    label: "frown",
+  },
+  {
+    value: "fas fa-frown-open",
+    label: "frown-open",
+  },
+  {
+    value: "far fa-frown-open",
+    label: "frown-open",
+  },
+  {
+    value: "fab fa-fulcrum",
+    label: "fulcrum",
+  },
+  {
+    value: "fas fa-funnel-dollar",
+    label: "funnel-dollar",
+  },
+  {
+    value: "fas fa-futbol",
+    label: "futbol",
+  },
+  {
+    value: "far fa-futbol",
+    label: "futbol",
+  },
+  {
+    value: "fab fa-galactic-republic",
+    label: "galactic-republic",
+  },
+  {
+    value: "fab fa-galactic-senate",
+    label: "galactic-senate",
+  },
+  {
+    value: "fas fa-gamepad",
+    label: "gamepad",
+  },
+  {
+    value: "fas fa-gas-pump",
+    label: "gas-pump",
+  },
+  {
+    value: "fas fa-gavel",
+    label: "gavel",
+  },
+  {
+    value: "fas fa-gem",
+    label: "gem",
+  },
+  {
+    value: "far fa-gem",
+    label: "gem",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-genderless",
+    label: "genderless",
+  },
+  {
+    value: "fab fa-get-pocket",
+    label: "get-pocket",
+  },
+  {
+    value: "fab fa-gg",
+    label: "gg",
+  },
+  {
+    value: "fab fa-gg-circle",
+    label: "gg-circle",
+  },
+  {
+    value: "fas fa-ghost",
+    label: "ghost",
+  },
+  {
+    value: "fas fa-gift",
+    label: "gift",
+  },
+  {
+    value: "fas fa-gifts",
+    label: "gifts",
+  },
+  {
+    value: "fab fa-git",
+    label: "git",
+  },
+  {
+    value: "fab fa-git-alt",
+    label: "git-alt",
+  },
+  {
+    value: "fab fa-git-square",
+    label: "git-square",
+  },
+  {
+    value: "fab fa-github",
+    label: "github",
+  },
+  {
+    value: "fab fa-github-alt",
+    label: "github-alt",
+  },
+  {
+    value: "fab fa-github-square",
+    label: "github-square",
+  },
+  {
+    value: "fab fa-gitkraken",
+    label: "gitkraken",
+  },
+  {
+    value: "fab fa-gitlab",
+    label: "gitlab",
+  },
+  {
+    value: "fab fa-gitter",
+    label: "gitter",
+  },
+  {
+    value: "fas fa-glass-cheers",
+    label: "glass-cheers",
+  },
+  {
+    value: "fas fa-glass-martini",
+    label: "glass-martini",
+  },
+  {
+    value: "fas fa-glass-martini-alt",
+    label: "glass-martini-alt",
+  },
+  {
+    value: "fas fa-glass-whiskey",
+    label: "glass-whiskey",
+  },
+  {
+    value: "fas fa-glasses",
+    label: "glasses",
+  },
+  {
+    value: "fab fa-glide",
+    label: "glide",
+  },
+  {
+    value: "fab fa-glide-g",
+    label: "glide-g",
+  },
+  {
+    value: "fas fa-globe",
+    label: "globe",
+  },
+  {
+    value: "fas fa-globe-africa",
+    label: "globe-africa",
+  },
+  {
+    value: "fas fa-globe-americas",
+    label: "globe-americas",
+  },
+  {
+    value: "fas fa-globe-asia",
+    label: "globe-asia",
+  },
+  {
+    value: "fas fa-globe-europe",
+    label: "globe-europe",
+  },
+  {
+    value: "fab fa-gofore",
+    label: "gofore",
+  },
+  {
+    value: "fas fa-golf-ball",
+    label: "golf-ball",
+  },
+  {
+    value: "fab fa-goodreads",
+    label: "goodreads",
+  },
+  {
+    value: "fab fa-goodreads-g",
+    label: "goodreads-g",
+  },
+  {
+    value: "fab fa-google",
+    label: "google",
+  },
+  {
+    value: "fab fa-google-drive",
+    label: "google-drive",
+  },
+  {
+    value: "fab fa-google-pay",
+    label: "google-pay",
+  },
+  {
+    value: "fab fa-google-play",
+    label: "google-play",
+  },
+  {
+    value: "fab fa-google-plus",
+    label: "google-plus",
+  },
+  {
+    value: "fab fa-google-plus-g",
+    label: "google-plus-g",
+  },
+  {
+    value: "fab fa-google-plus-square",
+    label: "google-plus-square",
+  },
+  {
+    value: "fab fa-google-wallet",
+    label: "google-wallet",
+  },
+  {
+    value: "fas fa-gopuram",
+    label: "gopuram",
+  },
+  {
+    value: "fas fa-graduation-cap",
+    label: "graduation-cap",
+  },
+  {
+    value: "fab fa-gratipay",
+    label: "gratipay",
+  },
+  {
+    value: "fab fa-grav",
+    label: "grav",
+  },
+  {
+    value: "fas fa-greater-than",
+    label: "greater-than",
+  },
+  {
+    value: "fas fa-greater-than-equal",
+    label: "greater-than-equal",
+  },
+  {
+    value: "fas fa-grimace",
+    label: "grimace",
+  },
+  {
+    value: "far fa-grimace",
+    label: "grimace",
+  },
+  {
+    value: "fas fa-grin",
+    label: "grin",
+  },
+  {
+    value: "far fa-grin",
+    label: "grin",
+  },
+  {
+    value: "fas fa-grin-alt",
+    label: "grin-alt",
+  },
+  {
+    value: "far fa-grin-alt",
+    label: "grin-alt",
+  },
+  {
+    value: "fas fa-grin-beam",
+    label: "grin-beam",
+  },
+  {
+    value: "far fa-grin-beam",
+    label: "grin-beam",
+  },
+  {
+    value: "fas fa-grin-beam-sweat",
+    label: "grin-beam-sweat",
+  },
+  {
+    value: "far fa-grin-beam-sweat",
+    label: "grin-beam-sweat",
+  },
+  {
+    value: "fas fa-grin-hearts",
+    label: "grin-hearts",
+  },
+  {
+    value: "far fa-grin-hearts",
+    label: "grin-hearts",
+  },
+  {
+    value: "fas fa-grin-squint",
+    label: "grin-squint",
+  },
+  {
+    value: "far fa-grin-squint",
+    label: "grin-squint",
+  },
+  {
+    value: "fas fa-grin-squint-tears",
+    label: "grin-squint-tears",
+  },
+  {
+    value: "far fa-grin-squint-tears",
+    label: "grin-squint-tears",
+  },
+  {
+    value: "fas fa-grin-stars",
+    label: "grin-stars",
+  },
+  {
+    value: "far fa-grin-stars",
+    label: "grin-stars",
+  },
+  {
+    value: "fas fa-grin-tears",
+    label: "grin-tears",
+  },
+  {
+    value: "far fa-grin-tears",
+    label: "grin-tears",
+  },
+  {
+    value: "fas fa-grin-tongue",
+    label: "grin-tongue",
+  },
+  {
+    value: "far fa-grin-tongue",
+    label: "grin-tongue",
+  },
+  {
+    value: "fas fa-grin-tongue-squint",
+    label: "grin-tongue-squint",
+  },
+  {
+    value: "far fa-grin-tongue-squint",
+    label: "grin-tongue-squint",
+  },
+  {
+    value: "fas fa-grin-tongue-wink",
+    label: "grin-tongue-wink",
+  },
+  {
+    value: "far fa-grin-tongue-wink",
+    label: "grin-tongue-wink",
+  },
+  {
+    value: "fas fa-grin-wink",
+    label: "grin-wink",
+  },
+  {
+    value: "far fa-grin-wink",
+    label: "grin-wink",
+  },
+  {
+    value: "fas fa-grip-horizontal",
+    label: "grip-horizontal",
+  },
+  {
+    value: "fas fa-grip-lines",
+    label: "grip-lines",
+  },
+  {
+    value: "fas fa-grip-lines-vertical",
+    label: "grip-lines-vertical",
+  },
+  {
+    value: "fas fa-grip-vertical",
+    label: "grip-vertical",
+  },
+  {
+    value: "fab fa-gripfire",
+    label: "gripfire",
+  },
+  {
+    value: "fab fa-grunt",
+    label: "grunt",
+  },
+  {
+    value: "fas fa-guitar",
+    label: "guitar",
+  },
+  {
+    value: "fab fa-gulp",
+    label: "gulp",
+  },
+  {
+    value: "fas fa-h-square",
+    label: "h-square",
+  },
+  {
+    value: "fab fa-hacker-news",
+    label: "hacker-news",
+  },
+  {
+    value: "fab fa-hacker-news-square",
+    label: "hacker-news-square",
+  },
+  {
+    value: "fab fa-hackerrank",
+    label: "hackerrank",
+  },
+  {
+    value: "fas fa-hamburger",
+    label: "hamburger",
+  },
+  {
+    value: "fas fa-hammer",
+    label: "hammer",
+  },
+  {
+    value: "fas fa-hamsa",
+    label: "hamsa",
+  },
+  {
+    value: "fas fa-hand-holding",
+    label: "hand-holding",
+  },
+  {
+    value: "fas fa-hand-holding-heart",
+    label: "hand-holding-heart",
+  },
+  {
+    value: "fas fa-hand-holding-medical",
+    label: "hand-holding-medical",
+  },
+  {
+    value: "fas fa-hand-holding-usd",
+    label: "hand-holding-usd",
+  },
+  {
+    value: "fas fa-hand-holding-water",
+    label: "hand-holding-water",
+  },
+  {
+    value: "fas fa-hand-lizard",
+    label: "hand-lizard",
+  },
+  {
+    value: "far fa-hand-lizard",
+    label: "hand-lizard",
+  },
+  {
+    value: "fas fa-hand-middle-finger",
+    label: "hand-middle-finger",
+  },
+  {
+    value: "fas fa-hand-paper",
+    label: "hand-paper",
+  },
+  {
+    value: "far fa-hand-paper",
+    label: "hand-paper",
+  },
+  {
+    value: "fas fa-hand-peace",
+    label: "hand-peace",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "far fa-hand-peace",
+    label: "hand-peace",
+  },
+  {
+    value: "fas fa-hand-point-down",
+    label: "hand-point-down",
+  },
+  {
+    value: "far fa-hand-point-down",
+    label: "hand-point-down",
+  },
+  {
+    value: "fas fa-hand-point-left",
+    label: "hand-point-left",
+  },
+  {
+    value: "far fa-hand-point-left",
+    label: "hand-point-left",
+  },
+  {
+    value: "fas fa-hand-point-right",
+    label: "hand-point-right",
+  },
+  {
+    value: "far fa-hand-point-right",
+    label: "hand-point-right",
+  },
+  {
+    value: "fas fa-hand-point-up",
+    label: "hand-point-up",
+  },
+  {
+    value: "far fa-hand-point-up",
+    label: "hand-point-up",
+  },
+  {
+    value: "fas fa-hand-pointer",
+    label: "hand-pointer",
+  },
+  {
+    value: "far fa-hand-pointer",
+    label: "hand-pointer",
+  },
+  {
+    value: "fas fa-hand-rock",
+    label: "hand-rock",
+  },
+  {
+    value: "far fa-hand-rock",
+    label: "hand-rock",
+  },
+  {
+    value: "fas fa-hand-scissors",
+    label: "hand-scissors",
+  },
+  {
+    value: "far fa-hand-scissors",
+    label: "hand-scissors",
+  },
+  {
+    value: "fas fa-hand-sparkles",
+    label: "hand-sparkles",
+  },
+  {
+    value: "fas fa-hand-spock",
+    label: "hand-spock",
+  },
+  {
+    value: "far fa-hand-spock",
+    label: "hand-spock",
+  },
+  {
+    value: "fas fa-hands",
+    label: "hands",
+  },
+  {
+    value: "fas fa-hands-helping",
+    label: "hands-helping",
+  },
+  {
+    value: "fas fa-hands-wash",
+    label: "hands-wash",
+  },
+  {
+    value: "fas fa-handshake",
+    label: "handshake",
+  },
+  {
+    value: "far fa-handshake",
+    label: "handshake",
+  },
+  {
+    value: "fas fa-handshake-alt-slash",
+    label: "handshake-alt-slash",
+  },
+  {
+    value: "fas fa-handshake-slash",
+    label: "handshake-slash",
+  },
+  {
+    value: "fas fa-hanukiah",
+    label: "hanukiah",
+  },
+  {
+    value: "fas fa-hard-hat",
+    label: "hard-hat",
+  },
+  {
+    value: "fas fa-hashtag",
+    label: "hashtag",
+  },
+  {
+    value: "fas fa-hat-cowboy",
+    label: "hat-cowboy",
+  },
+  {
+    value: "fas fa-hat-cowboy-side",
+    label: "hat-cowboy-side",
+  },
+  {
+    value: "fas fa-hat-wizard",
+    label: "hat-wizard",
+  },
+  {
+    value: "fas fa-hdd",
+    label: "hdd",
+  },
+  {
+    value: "far fa-hdd",
+    label: "hdd",
+  },
+  {
+    value: "fas fa-head-side-cough",
+    label: "head-side-cough",
+  },
+  {
+    value: "fas fa-head-side-cough-slash",
+    label: "head-side-cough-slash",
+  },
+  {
+    value: "fas fa-head-side-mask",
+    label: "head-side-mask",
+  },
+  {
+    value: "fas fa-head-side-virus",
+    label: "head-side-virus",
+  },
+  {
+    value: "fas fa-heading",
+    label: "heading",
+  },
+  {
+    value: "fas fa-headphones",
+    label: "headphones",
+  },
+  {
+    value: "fas fa-headphones-alt",
+    label: "headphones-alt",
+  },
+  {
+    value: "fas fa-headset",
+    label: "headset",
+  },
+  {
+    value: "fas fa-heart",
+    label: "heart",
+  },
+  {
+    value: "far fa-heart",
+    label: "heart",
+  },
+  {
+    value: "fas fa-heart-broken",
+    label: "heart-broken",
+  },
+  {
+    value: "fas fa-heartbeat",
+    label: "heartbeat",
+  },
+  {
+    value: "fas fa-helicopter",
+    label: "helicopter",
+  },
+  {
+    value: "fas fa-highlighter",
+    label: "highlighter",
+  },
+  {
+    value: "fas fa-hiking",
+    label: "hiking",
+  },
+  {
+    value: "fas fa-hippo",
+    label: "hippo",
+  },
+  {
+    value: "fab fa-hips",
+    label: "hips",
+  },
+  {
+    value: "fab fa-hire-a-helper",
+    label: "hire-a-helper",
+  },
+  {
+    value: "fas fa-history",
+    label: "history",
+  },
+  {
+    value: "fas fa-hockey-puck",
+    label: "hockey-puck",
+  },
+  {
+    value: "fas fa-holly-berry",
+    label: "holly-berry",
+  },
+  {
+    value: "fas fa-home",
+    label: "home",
+  },
+  {
+    value: "fab fa-hooli",
+    label: "hooli",
+  },
+  {
+    value: "fab fa-hornbill",
+    label: "hornbill",
+  },
+  {
+    value: "fas fa-horse",
+    label: "horse",
+  },
+  {
+    value: "fas fa-horse-head",
+    label: "horse-head",
+  },
+  {
+    value: "fas fa-hospital",
+    label: "hospital",
+  },
+  {
+    value: "far fa-hospital",
+    label: "hospital",
+  },
+  {
+    value: "fas fa-hospital-alt",
+    label: "hospital-alt",
+  },
+  {
+    value: "fas fa-hospital-symbol",
+    label: "hospital-symbol",
+  },
+  {
+    value: "fas fa-hospital-user",
+    label: "hospital-user",
+  },
+  {
+    value: "fas fa-hot-tub",
+    label: "hot-tub",
+  },
+  {
+    value: "fas fa-hotdog",
+    label: "hotdog",
+  },
+  {
+    value: "fas fa-hotel",
+    label: "hotel",
+  },
+  {
+    value: "fab fa-hotjar",
+    label: "hotjar",
+  },
+  {
+    value: "fas fa-hourglass",
+    label: "hourglass",
+  },
+  {
+    value: "far fa-hourglass",
+    label: "hourglass",
+  },
+  {
+    value: "fas fa-hourglass-end",
+    label: "hourglass-end",
+  },
+  {
+    value: "fas fa-hourglass-half",
+    label: "hourglass-half",
+  },
+  {
+    value: "fas fa-hourglass-start",
+    label: "hourglass-start",
+  },
+  {
+    value: "fas fa-house-damage",
+    label: "house-damage",
+  },
+  {
+    value: "fas fa-house-user",
+    label: "house-user",
+  },
+  {
+    value: "fab fa-houzz",
+    label: "houzz",
+  },
+  {
+    value: "fas fa-hryvnia",
+    label: "hryvnia",
+  },
+  {
+    value: "fab fa-html5",
+    label: "html5",
+  },
+  {
+    value: "fab fa-hubspot",
+    label: "hubspot",
+  },
+  {
+    value: "fas fa-i-cursor",
+    label: "i-cursor",
+  },
+  {
+    value: "fas fa-ice-cream",
+    label: "ice-cream",
+  },
+  {
+    value: "fas fa-icicles",
+    label: "icicles",
+  },
+  {
+    value: "fas fa-icons",
+    label: "icons",
+  },
+  {
+    value: "fas fa-id-badge",
+    label: "id-badge",
+  },
+  {
+    value: "far fa-id-badge",
+    label: "id-badge",
+  },
+  {
+    value: "fas fa-id-card",
+    label: "id-card",
+  },
+  {
+    value: "far fa-id-card",
+    label: "id-card",
+  },
+  {
+    value: "fas fa-id-card-alt",
+    label: "id-card-alt",
+  },
+  {
+    value: "fab fa-ideal",
+    label: "ideal",
+  },
+  {
+    value: "fas fa-igloo",
+    label: "igloo",
+  },
+  {
+    value: "fas fa-image",
+    label: "image",
+  },
+  {
+    value: "far fa-image",
+    label: "image",
+  },
+  {
+    value: "fas fa-images",
+    label: "images",
+  },
+  {
+    value: "far fa-images",
+    label: "images",
+  },
+  {
+    value: "fab fa-imdb",
+    label: "imdb",
+  },
+  {
+    value: "fas fa-inbox",
+    label: "inbox",
+  },
+  {
+    value: "fas fa-indent",
+    label: "indent",
+  },
+  {
+    value: "fas fa-industry",
+    label: "industry",
+  },
+  {
+    value: "fas fa-infinity",
+    label: "infinity",
+  },
+  {
+    value: "fas fa-info",
+    label: "info",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-info-circle",
+    label: "info-circle",
+  },
+  {
+    value: "fab fa-instagram",
+    label: "instagram",
+  },
+  {
+    value: "fab fa-instagram-square",
+    label: "instagram-square",
+  },
+  {
+    value: "fab fa-intercom",
+    label: "intercom",
+  },
+  {
+    value: "fab fa-internet-explorer",
+    label: "internet-explorer",
+  },
+  {
+    value: "fab fa-invision",
+    label: "invision",
+  },
+  {
+    value: "fab fa-ioxhost",
+    label: "ioxhost",
+  },
+  {
+    value: "fas fa-italic",
+    label: "italic",
+  },
+  {
+    value: "fab fa-itch-io",
+    label: "itch-io",
+  },
+  {
+    value: "fab fa-itunes",
+    label: "itunes",
+  },
+  {
+    value: "fab fa-itunes-note",
+    label: "itunes-note",
+  },
+  {
+    value: "fab fa-java",
+    label: "java",
+  },
+  {
+    value: "fas fa-jedi",
+    label: "jedi",
+  },
+  {
+    value: "fab fa-jedi-order",
+    label: "jedi-order",
+  },
+  {
+    value: "fab fa-jenkins",
+    label: "jenkins",
+  },
+  {
+    value: "fab fa-jira",
+    label: "jira",
+  },
+  {
+    value: "fab fa-joget",
+    label: "joget",
+  },
+  {
+    value: "fas fa-joint",
+    label: "joint",
+  },
+  {
+    value: "fab fa-joomla",
+    label: "joomla",
+  },
+  {
+    value: "fas fa-journal-whills",
+    label: "journal-whills",
+  },
+  {
+    value: "fab fa-js",
+    label: "js",
+  },
+  {
+    value: "fab fa-js-square",
+    label: "js-square",
+  },
+  {
+    value: "fab fa-jsfiddle",
+    label: "jsfiddle",
+  },
+  {
+    value: "fas fa-kaaba",
+    label: "kaaba",
+  },
+  {
+    value: "fab fa-kaggle",
+    label: "kaggle",
+  },
+  {
+    value: "fas fa-key",
+    label: "key",
+  },
+  {
+    value: "fab fa-keybase",
+    label: "keybase",
+  },
+  {
+    value: "fas fa-keyboard",
+    label: "keyboard",
+  },
+  {
+    value: "far fa-keyboard",
+    label: "keyboard",
+  },
+  {
+    value: "fab fa-keycdn",
+    label: "keycdn",
+  },
+  {
+    value: "fas fa-khanda",
+    label: "khanda",
+  },
+  {
+    value: "fab fa-kickstarter",
+    label: "kickstarter",
+  },
+  {
+    value: "fab fa-kickstarter-k",
+    label: "kickstarter-k",
+  },
+  {
+    value: "fas fa-kiss",
+    label: "kiss",
+  },
+  {
+    value: "far fa-kiss",
+    label: "kiss",
+  },
+  {
+    value: "fas fa-kiss-beam",
+    label: "kiss-beam",
+  },
+  {
+    value: "far fa-kiss-beam",
+    label: "kiss-beam",
+  },
+  {
+    value: "fas fa-kiss-wink-heart",
+    label: "kiss-wink-heart",
+  },
+  {
+    value: "far fa-kiss-wink-heart",
+    label: "kiss-wink-heart",
+  },
+  {
+    value: "fas fa-kiwi-bird",
+    label: "kiwi-bird",
+  },
+  {
+    value: "fab fa-korvue",
+    label: "korvue",
+  },
+  {
+    value: "fas fa-landmark",
+    label: "landmark",
+  },
+  {
+    value: "fas fa-language",
+    label: "language",
+  },
+  {
+    value: "fas fa-laptop",
+    label: "laptop",
+  },
+  {
+    value: "fas fa-laptop-code",
+    label: "laptop-code",
+  },
+  {
+    value: "fas fa-laptop-house",
+    label: "laptop-house",
+  },
+  {
+    value: "fas fa-laptop-medical",
+    label: "laptop-medical",
+  },
+  {
+    value: "fab fa-laravel",
+    label: "laravel",
+  },
+  {
+    value: "fab fa-lastfm",
+    label: "lastfm",
+  },
+  {
+    value: "fab fa-lastfm-square",
+    label: "lastfm-square",
+  },
+  {
+    value: "fas fa-laugh",
+    label: "laugh",
+  },
+  {
+    value: "far fa-laugh",
+    label: "laugh",
+  },
+  {
+    value: "fas fa-laugh-beam",
+    label: "laugh-beam",
+  },
+  {
+    value: "far fa-laugh-beam",
+    label: "laugh-beam",
+  },
+  {
+    value: "fas fa-laugh-squint",
+    label: "laugh-squint",
+  },
+  {
+    value: "far fa-laugh-squint",
+    label: "laugh-squint",
+  },
+  {
+    value: "fas fa-laugh-wink",
+    label: "laugh-wink",
+  },
+  {
+    value: "far fa-laugh-wink",
+    label: "laugh-wink",
+  },
+  {
+    value: "fas fa-layer-group",
+    label: "layer-group",
+  },
+  {
+    value: "fas fa-leaf",
+    label: "leaf",
+  },
+  {
+    value: "fab fa-leanpub",
+    label: "leanpub",
+  },
+  {
+    value: "fas fa-lemon",
+    label: "lemon",
+  },
+  {
+    value: "far fa-lemon",
+    label: "lemon",
+  },
+  {
+    value: "fab fa-less",
+    label: "less",
+  },
+  {
+    value: "fas fa-less-than",
+    label: "less-than",
+  },
+  {
+    value: "fas fa-less-than-equal",
+    label: "less-than-equal",
+  },
+  {
+    value: "fas fa-level-down-alt",
+    label: "level-down-alt",
+  },
+  {
+    value: "fas fa-level-up-alt",
+    label: "level-up-alt",
+  },
+  {
+    value: "fas fa-life-ring",
+    label: "life-ring",
+  },
+  {
+    value: "far fa-life-ring",
+    label: "life-ring",
+  },
+  {
+    value: "fas fa-lightbulb",
+    label: "lightbulb",
+  },
+  {
+    value: "far fa-lightbulb",
+    label: "lightbulb",
+  },
+  {
+    value: "fab fa-line",
+    label: "line",
+  },
+  {
+    value: "fas fa-link",
+    label: "link",
+  },
+  {
+    value: "fab fa-linkedin",
+    label: "linkedin",
+  },
+  {
+    value: "fab fa-linkedin-in",
+    label: "linkedin-in",
+  },
+  {
+    value: "fab fa-linode",
+    label: "linode",
+  },
+  {
+    value: "fab fa-linux",
+    label: "linux",
+  },
+  {
+    value: "fas fa-lira-sign",
+    label: "lira-sign",
+  },
+  {
+    value: "fas fa-list",
+    label: "list",
+  },
+  {
+    value: "fas fa-list-alt",
+    label: "list-alt",
+  },
+  {
+    value: "far fa-list-alt",
+    label: "list-alt",
+  },
+  {
+    value: "fas fa-list-ol",
+    label: "list-ol",
+  },
+  {
+    value: "fas fa-list-ul",
+    label: "list-ul",
+  },
+  {
+    value: "fas fa-location-arrow",
+    label: "location-arrow",
+  },
+  {
+    value: "fas fa-lock",
+    label: "lock",
+  },
+  {
+    value: "fas fa-lock-open",
+    label: "lock-open",
+  },
+  {
+    value: "fas fa-long-arrow-alt-down",
+    label: "long-arrow-alt-down",
+  },
+  {
+    value: "fas fa-long-arrow-alt-left",
+    label: "long-arrow-alt-left",
+  },
+  {
+    value: "fas fa-long-arrow-alt-right",
+    label: "long-arrow-alt-right",
+  },
+  {
+    value: "fas fa-long-arrow-alt-up",
+    label: "long-arrow-alt-up",
+  },
+  {
+    value: "fas fa-low-vision",
+    label: "low-vision",
+  },
+  {
+    value: "fas fa-luggage-cart",
+    label: "luggage-cart",
+  },
+  {
+    value: "fas fa-lungs",
+    label: "lungs",
+  },
+  {
+    value: "fas fa-lungs-virus",
+    label: "lungs-virus",
+  },
+  {
+    value: "fab fa-lyft",
+    label: "lyft",
+  },
+  {
+    value: "fab fa-magento",
+    label: "magento",
+  },
+  {
+    value: "fas fa-magic",
+    label: "magic",
+  },
+  {
+    value: "fas fa-magnet",
+    label: "magnet",
+  },
+  {
+    value: "fas fa-mail-bulk",
+    label: "mail-bulk",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fab fa-mailchimp",
+    label: "mailchimp",
+  },
+  {
+    value: "fas fa-male",
+    label: "male",
+  },
+  {
+    value: "fab fa-mandalorian",
+    label: "mandalorian",
+  },
+  {
+    value: "fas fa-map",
+    label: "map",
+  },
+  {
+    value: "far fa-map",
+    label: "map",
+  },
+  {
+    value: "fas fa-map-marked",
+    label: "map-marked",
+  },
+  {
+    value: "fas fa-map-marked-alt",
+    label: "map-marked-alt",
+  },
+  {
+    value: "fas fa-map-marker",
+    label: "map-marker",
+  },
+  {
+    value: "fas fa-map-marker-alt",
+    label: "map-marker-alt",
+  },
+  {
+    value: "fas fa-map-pin",
+    label: "map-pin",
+  },
+  {
+    value: "fas fa-map-signs",
+    label: "map-signs",
+  },
+  {
+    value: "fab fa-markdown",
+    label: "markdown",
+  },
+  {
+    value: "fas fa-marker",
+    label: "marker",
+  },
+  {
+    value: "fas fa-mars",
+    label: "mars",
+  },
+  {
+    value: "fas fa-mars-double",
+    label: "mars-double",
+  },
+  {
+    value: "fas fa-mars-stroke",
+    label: "mars-stroke",
+  },
+  {
+    value: "fas fa-mars-stroke-h",
+    label: "mars-stroke-h",
+  },
+  {
+    value: "fas fa-mars-stroke-v",
+    label: "mars-stroke-v",
+  },
+  {
+    value: "fas fa-mask",
+    label: "mask",
+  },
+  {
+    value: "fab fa-mastodon",
+    label: "mastodon",
+  },
+  {
+    value: "fab fa-maxcdn",
+    label: "maxcdn",
+  },
+  {
+    value: "fab fa-mdb",
+    label: "mdb",
+  },
+  {
+    value: "fas fa-medal",
+    label: "medal",
+  },
+  {
+    value: "fab fa-medapps",
+    label: "medapps",
+  },
+  {
+    value: "fab fa-medium",
+    label: "medium",
+  },
+  {
+    value: "fab fa-medium-m",
+    label: "medium-m",
+  },
+  {
+    value: "fas fa-medkit",
+    label: "medkit",
+  },
+  {
+    value: "fab fa-medrt",
+    label: "medrt",
+  },
+  {
+    value: "fab fa-meetup",
+    label: "meetup",
+  },
+  {
+    value: "fab fa-megaport",
+    label: "megaport",
+  },
+  {
+    value: "fas fa-meh",
+    label: "meh",
+  },
+  {
+    value: "far fa-meh",
+    label: "meh",
+  },
+  {
+    value: "fas fa-meh-blank",
+    label: "meh-blank",
+  },
+  {
+    value: "far fa-meh-blank",
+    label: "meh-blank",
+  },
+  {
+    value: "fas fa-meh-rolling-eyes",
+    label: "meh-rolling-eyes",
+  },
+  {
+    value: "far fa-meh-rolling-eyes",
+    label: "meh-rolling-eyes",
+  },
+  {
+    value: "fas fa-memory",
+    label: "memory",
+  },
+  {
+    value: "fab fa-mendeley",
+    label: "mendeley",
+  },
+  {
+    value: "fas fa-menorah",
+    label: "menorah",
+  },
+  {
+    value: "fas fa-mercury",
+    label: "mercury",
+  },
+  {
+    value: "fas fa-meteor",
+    label: "meteor",
+  },
+  {
+    value: "fab fa-microblog",
+    label: "microblog",
+  },
+  {
+    value: "fas fa-microchip",
+    label: "microchip",
+  },
+  {
+    value: "fas fa-microphone",
+    label: "microphone",
+  },
+  {
+    value: "fas fa-microphone-alt",
+    label: "microphone-alt",
+  },
+  {
+    value: "fas fa-microphone-alt-slash",
+    label: "microphone-alt-slash",
+  },
+  {
+    value: "fas fa-microphone-slash",
+    label: "microphone-slash",
+  },
+  {
+    value: "fas fa-microscope",
+    label: "microscope",
+  },
+  {
+    value: "fab fa-microsoft",
+    label: "microsoft",
+  },
+  {
+    value: "fas fa-minus",
+    label: "minus",
+  },
+  {
+    value: "fas fa-minus-circle",
+    label: "minus-circle",
+  },
+  {
+    value: "fas fa-minus-square",
+    label: "minus-square",
+  },
+  {
+    value: "far fa-minus-square",
+    label: "minus-square",
+  },
+  {
+    value: "fas fa-mitten",
+    label: "mitten",
+  },
+  {
+    value: "fab fa-mix",
+    label: "mix",
+  },
+  {
+    value: "fab fa-mixcloud",
+    label: "mixcloud",
+  },
+  {
+    value: "fab fa-mixer",
+    label: "mixer",
+  },
+  {
+    value: "fab fa-mizuni",
+    label: "mizuni",
+  },
+  {
+    value: "fas fa-mobile",
+    label: "mobile",
+  },
+  {
+    value: "fas fa-mobile-alt",
+    label: "mobile-alt",
+  },
+  {
+    value: "fab fa-modx",
+    label: "modx",
+  },
+  {
+    value: "fab fa-monero",
+    label: "monero",
+  },
+  {
+    value: "fas fa-money-bill",
+    label: "money-bill",
+  },
+  {
+    value: "fas fa-money-bill-alt",
+    label: "money-bill-alt",
+  },
+  {
+    value: "far fa-money-bill-alt",
+    label: "money-bill-alt",
+  },
+  {
+    value: "fas fa-money-bill-wave",
+    label: "money-bill-wave",
+  },
+  {
+    value: "fas fa-money-bill-wave-alt",
+    label: "money-bill-wave-alt",
+  },
+  {
+    value: "fas fa-money-check",
+    label: "money-check",
+  },
+  {
+    value: "fas fa-money-check-alt",
+    label: "money-check-alt",
+  },
+  {
+    value: "fas fa-monument",
+    label: "monument",
+  },
+  {
+    value: "fas fa-moon",
+    label: "moon",
+  },
+  {
+    value: "far fa-moon",
+    label: "moon",
+  },
+  {
+    value: "fas fa-mortar-pestle",
+    label: "mortar-pestle",
+  },
+  {
+    value: "fas fa-mosque",
+    label: "mosque",
+  },
+  {
+    value: "fas fa-motorcycle",
+    label: "motorcycle",
+  },
+  {
+    value: "fas fa-mountain",
+    label: "mountain",
+  },
+  {
+    value: "fas fa-mouse",
+    label: "mouse",
+  },
+  {
+    value: "fas fa-mouse-pointer",
+    label: "mouse-pointer",
+  },
+  {
+    value: "fas fa-mug-hot",
+    label: "mug-hot",
+  },
+  {
+    value: "fas fa-music",
+    label: "music",
+  },
+  {
+    value: "fab fa-napster",
+    label: "napster",
+  },
+  {
+    value: "fab fa-neos",
+    label: "neos",
+  },
+  {
+    value: "fas fa-network-wired",
+    label: "network-wired",
+  },
+  {
+    value: "fas fa-neuter",
+    label: "neuter",
+  },
+  {
+    value: "fas fa-newspaper",
+    label: "newspaper",
+  },
+  {
+    value: "far fa-newspaper",
+    label: "newspaper",
+  },
+  {
+    value: "fab fa-nimblr",
+    label: "nimblr",
+  },
+  {
+    value: "fab fa-node",
+    label: "node",
+  },
+  {
+    value: "fab fa-node-js",
+    label: "node-js",
+  },
+  {
+    value: "fas fa-not-equal",
+    label: "not-equal",
+  },
+  {
+    value: "fas fa-notes-medical",
+    label: "notes-medical",
+  },
+  {
+    value: "fab fa-npm",
+    label: "npm",
+  },
+  {
+    value: "fab fa-ns8",
+    label: "ns8",
+  },
+  {
+    value: "fab fa-nutritionix",
+    label: "nutritionix",
+  },
+  {
+    value: "fas fa-object-group",
+    label: "object-group",
+  },
+  {
+    value: "far fa-object-group",
+    label: "object-group",
+  },
+  {
+    value: "fas fa-object-ungroup",
+    label: "object-ungroup",
+  },
+  {
+    value: "far fa-object-ungroup",
+    label: "object-ungroup",
+  },
+  {
+    value: "fab fa-odnoklassniki",
+    label: "odnoklassniki",
+  },
+  {
+    value: "fab fa-odnoklassniki-square",
+    label: "odnoklassniki-square",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-oil-can",
+    label: "oil-can",
+  },
+  {
+    value: "fab fa-old-republic",
+    label: "old-republic",
+  },
+  {
+    value: "fas fa-om",
+    label: "om",
+  },
+  {
+    value: "fab fa-opencart",
+    label: "opencart",
+  },
+  {
+    value: "fab fa-openid",
+    label: "openid",
+  },
+  {
+    value: "fab fa-opera",
+    label: "opera",
+  },
+  {
+    value: "fab fa-optin-monster",
+    label: "optin-monster",
+  },
+  {
+    value: "fab fa-orcid",
+    label: "orcid",
+  },
+  {
+    value: "fab fa-osi",
+    label: "osi",
+  },
+  {
+    value: "fas fa-otter",
+    label: "otter",
+  },
+  {
+    value: "fas fa-outdent",
+    label: "outdent",
+  },
+  {
+    value: "fab fa-page4",
+    label: "page4",
+  },
+  {
+    value: "fab fa-pagelines",
+    label: "pagelines",
+  },
+  {
+    value: "fas fa-pager",
+    label: "pager",
+  },
+  {
+    value: "fas fa-paint-brush",
+    label: "paint-brush",
+  },
+  {
+    value: "fas fa-paint-roller",
+    label: "paint-roller",
+  },
+  {
+    value: "fas fa-palette",
+    label: "palette",
+  },
+  {
+    value: "fab fa-palfed",
+    label: "palfed",
+  },
+  {
+    value: "fas fa-pallet",
+    label: "pallet",
+  },
+  {
+    value: "fas fa-paper-plane",
+    label: "paper-plane",
+  },
+  {
+    value: "far fa-paper-plane",
+    label: "paper-plane",
+  },
+  {
+    value: "fas fa-paperclip",
+    label: "paperclip",
+  },
+  {
+    value: "fas fa-parachute-box",
+    label: "parachute-box",
+  },
+  {
+    value: "fas fa-paragraph",
+    label: "paragraph",
+  },
+  {
+    value: "fas fa-parking",
+    label: "parking",
+  },
+  {
+    value: "fas fa-passport",
+    label: "passport",
+  },
+  {
+    value: "fas fa-pastafarianism",
+    label: "pastafarianism",
+  },
+  {
+    value: "fas fa-paste",
+    label: "paste",
+  },
+  {
+    value: "fab fa-patreon",
+    label: "patreon",
+  },
+  {
+    value: "fas fa-pause",
+    label: "pause",
+  },
+  {
+    value: "fas fa-pause-circle",
+    label: "pause-circle",
+  },
+  {
+    value: "far fa-pause-circle",
+    label: "pause-circle",
+  },
+  {
+    value: "fas fa-paw",
+    label: "paw",
+  },
+  {
+    value: "fab fa-paypal",
+    label: "paypal",
+  },
+  {
+    value: "fas fa-peace",
+    label: "peace",
+  },
+  {
+    value: "fas fa-pen",
+    label: "pen",
+  },
+  {
+    value: "fas fa-pen-alt",
+    label: "pen-alt",
+  },
+  {
+    value: "fas fa-pen-fancy",
+    label: "pen-fancy",
+  },
+  {
+    value: "fas fa-pen-nib",
+    label: "pen-nib",
+  },
+  {
+    value: "fas fa-pen-square",
+    label: "pen-square",
+  },
+  {
+    value: "fas fa-pencil-alt",
+    label: "pencil-alt",
+  },
+  {
+    value: "fas fa-pencil-ruler",
+    label: "pencil-ruler",
+  },
+  {
+    value: "fab fa-penny-arcade",
+    label: "penny-arcade",
+  },
+  {
+    value: "fas fa-people-arrows",
+    label: "people-arrows",
+  },
+  {
+    value: "fas fa-people-carry",
+    label: "people-carry",
+  },
+  {
+    value: "fas fa-pepper-hot",
+    label: "pepper-hot",
+  },
+  {
+    value: "fas fa-percent",
+    label: "percent",
+  },
+  {
+    value: "fas fa-percentage",
+    label: "percentage",
+  },
+  {
+    value: "fab fa-periscope",
+    label: "periscope",
+  },
+  {
+    value: "fas fa-person-booth",
+    label: "person-booth",
+  },
+  {
+    value: "fab fa-phabricator",
+    label: "phabricator",
+  },
+  {
+    value: "fab fa-phoenix-framework",
+    label: "phoenix-framework",
+  },
+  {
+    value: "fab fa-phoenix-squadron",
+    label: "phoenix-squadron",
+  },
+  {
+    value: "fas fa-phone",
+    label: "phone",
+  },
+  {
+    value: "fas fa-phone-alt",
+    label: "phone-alt",
+  },
+  {
+    value: "fas fa-phone-slash",
+    label: "phone-slash",
+  },
+  {
+    value: "fas fa-phone-square",
+    label: "phone-square",
+  },
+  {
+    value: "fas fa-phone-square-alt",
+    label: "phone-square-alt",
+  },
+  {
+    value: "fas fa-phone-volume",
+    label: "phone-volume",
+  },
+  {
+    value: "fas fa-photo-video",
+    label: "photo-video",
+  },
+  {
+    value: "fab fa-php",
+    label: "php",
+  },
+  {
+    value: "fab fa-pied-piper",
+    label: "pied-piper",
+  },
+  {
+    value: "fab fa-pied-piper-alt",
+    label: "pied-piper-alt",
+  },
+  {
+    value: "fab fa-pied-piper-hat",
+    label: "pied-piper-hat",
+  },
+  {
+    value: "fab fa-pied-piper-pp",
+    label: "pied-piper-pp",
+  },
+  {
+    value: "fab fa-pied-piper-square",
+    label: "pied-piper-square",
+  },
+  {
+    value: "fas fa-piggy-bank",
+    label: "piggy-bank",
+  },
+  {
+    value: "fas fa-pills",
+    label: "pills",
+  },
+  {
+    value: "fab fa-pinterest",
+    label: "pinterest",
+  },
+  {
+    value: "fab fa-pinterest-p",
+    label: "pinterest-p",
+  },
+  {
+    value: "fab fa-pinterest-square",
+    label: "pinterest-square",
+  },
+  {
+    value: "fas fa-pizza-slice",
+    label: "pizza-slice",
+  },
+  {
+    value: "fas fa-place-of-worship",
+    label: "place-of-worship",
+  },
+  {
+    value: "fas fa-plane",
+    label: "plane",
+  },
+  {
+    value: "fas fa-plane-arrival",
+    label: "plane-arrival",
+  },
+  {
+    value: "fas fa-plane-departure",
+    label: "plane-departure",
+  },
+  {
+    value: "fas fa-plane-slash",
+    label: "plane-slash",
+  },
+  {
+    value: "fas fa-play",
+    label: "play",
+  },
+  {
+    value: "fas fa-play-circle",
+    label: "play-circle",
+  },
+  {
+    value: "far fa-play-circle",
+    label: "play-circle",
+  },
+  {
+    value: "fab fa-playstation",
+    label: "playstation",
+  },
+  {
+    value: "fas fa-plug",
+    label: "plug",
+  },
+  {
+    value: "fas fa-plus",
+    label: "plus",
+  },
+  {
+    value: "fas fa-plus-circle",
+    label: "plus-circle",
+  },
+  {
+    value: "fas fa-plus-square",
+    label: "plus-square",
+  },
+  {
+    value: "far fa-plus-square",
+    label: "plus-square",
+  },
+  {
+    value: "fas fa-podcast",
+    label: "podcast",
+  },
+  {
+    value: "fas fa-poll",
+    label: "poll",
+  },
+  {
+    value: "fas fa-poll-h",
+    label: "poll-h",
+  },
+  {
+    value: "fas fa-poo",
+    label: "poo",
+  },
+  {
+    value: "fas fa-poo-storm",
+    label: "poo-storm",
+  },
+  {
+    value: "fas fa-poop",
+    label: "poop",
+  },
+  {
+    value: "fas fa-portrait",
+    label: "portrait",
+  },
+  {
+    value: "fas fa-pound-sign",
+    label: "pound-sign",
+  },
+  {
+    value: "fas fa-power-off",
+    label: "power-off",
+  },
+  {
+    value: "fas fa-pray",
+    label: "pray",
+  },
+  {
+    value: "fas fa-praying-hands",
+    label: "praying-hands",
+  },
+  {
+    value: "fas fa-prescription",
+    label: "prescription",
+  },
+  {
+    value: "fas fa-prescription-bottle",
+    label: "prescription-bottle",
+  },
+  {
+    value: "fas fa-prescription-bottle-alt",
+    label: "prescription-bottle-alt",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-print",
+    label: "print",
+  },
+  {
+    value: "fas fa-procedures",
+    label: "procedures",
+  },
+  {
+    value: "fab fa-product-hunt",
+    label: "product-hunt",
+  },
+  {
+    value: "fas fa-project-diagram",
+    label: "project-diagram",
+  },
+  {
+    value: "fas fa-pump-medical",
+    label: "pump-medical",
+  },
+  {
+    value: "fas fa-pump-soap",
+    label: "pump-soap",
+  },
+  {
+    value: "fab fa-pushed",
+    label: "pushed",
+  },
+  {
+    value: "fas fa-puzzle-piece",
+    label: "puzzle-piece",
+  },
+  {
+    value: "fab fa-python",
+    label: "python",
+  },
+  {
+    value: "fab fa-qq",
+    label: "qq",
+  },
+  {
+    value: "fas fa-qrcode",
+    label: "qrcode",
+  },
+  {
+    value: "fas fa-question",
+    label: "question",
+  },
+  {
+    value: "fas fa-question-circle",
+    label: "question-circle",
+  },
+  {
+    value: "far fa-question-circle",
+    label: "question-circle",
+  },
+  {
+    value: "fas fa-quidditch",
+    label: "quidditch",
+  },
+  {
+    value: "fab fa-quinscape",
+    label: "quinscape",
+  },
+  {
+    value: "fab fa-quora",
+    label: "quora",
+  },
+  {
+    value: "fas fa-quote-left",
+    label: "quote-left",
+  },
+  {
+    value: "fas fa-quote-right",
+    label: "quote-right",
+  },
+  {
+    value: "fas fa-quran",
+    label: "quran",
+  },
+  {
+    value: "fab fa-r-project",
+    label: "r-project",
+  },
+  {
+    value: "fas fa-radiation",
+    label: "radiation",
+  },
+  {
+    value: "fas fa-radiation-alt",
+    label: "radiation-alt",
+  },
+  {
+    value: "fas fa-rainbow",
+    label: "rainbow",
+  },
+  {
+    value: "fas fa-random",
+    label: "random",
+  },
+  {
+    value: "fab fa-raspberry-pi",
+    label: "raspberry-pi",
+  },
+  {
+    value: "fab fa-ravelry",
+    label: "ravelry",
+  },
+  {
+    value: "fab fa-react",
+    label: "react",
+  },
+  {
+    value: "fab fa-reacteurope",
+    label: "reacteurope",
+  },
+  {
+    value: "fab fa-readme",
+    label: "readme",
+  },
+  {
+    value: "fab fa-rebel",
+    label: "rebel",
+  },
+  {
+    value: "fas fa-receipt",
+    label: "receipt",
+  },
+  {
+    value: "fas fa-record-vinyl",
+    label: "record-vinyl",
+  },
+  {
+    value: "fas fa-recycle",
+    label: "recycle",
+  },
+  {
+    value: "fab fa-red-river",
+    label: "red-river",
+  },
+  {
+    value: "fab fa-reddit",
+    label: "reddit",
+  },
+  {
+    value: "fab fa-reddit-alien",
+    label: "reddit-alien",
+  },
+  {
+    value: "fab fa-reddit-square",
+    label: "reddit-square",
+  },
+  {
+    value: "fab fa-redhat",
+    label: "redhat",
+  },
+  {
+    value: "fas fa-redo",
+    label: "redo",
+  },
+  {
+    value: "fas fa-redo-alt",
+    label: "redo-alt",
+  },
+  {
+    value: "fas fa-registered",
+    label: "registered",
+  },
+  {
+    value: "far fa-registered",
+    label: "registered",
+  },
+  {
+    value: "fas fa-remove-format",
+    label: "remove-format",
+  },
+  {
+    value: "fab fa-renren",
+    label: "renren",
+  },
+  {
+    value: "fas fa-reply",
+    label: "reply",
+  },
+  {
+    value: "fas fa-reply-all",
+    label: "reply-all",
+  },
+  {
+    value: "fab fa-replyd",
+    label: "replyd",
+  },
+  {
+    value: "fas fa-republican",
+    label: "republican",
+  },
+  {
+    value: "fab fa-researchgate",
+    label: "researchgate",
+  },
+  {
+    value: "fab fa-resolving",
+    label: "resolving",
+  },
+  {
+    value: "fas fa-restroom",
+    label: "restroom",
+  },
+  {
+    value: "fas fa-retweet",
+    label: "retweet",
+  },
+  {
+    value: "fab fa-rev",
+    label: "rev",
+  },
+  {
+    value: "fas fa-ribbon",
+    label: "ribbon",
+  },
+  {
+    value: "fas fa-ring",
+    label: "ring",
+  },
+  {
+    value: "fas fa-road",
+    label: "road",
+  },
+  {
+    value: "fas fa-robot",
+    label: "robot",
+  },
+  {
+    value: "fas fa-rocket",
+    label: "rocket",
+  },
+  {
+    value: "fab fa-rocketchat",
+    label: "rocketchat",
+  },
+  {
+    value: "fab fa-rockrms",
+    label: "rockrms",
+  },
+  {
+    value: "fas fa-route",
+    label: "route",
+  },
+  {
+    value: "fas fa-rss",
+    label: "rss",
+  },
+  {
+    value: "fas fa-rss-square",
+    label: "rss-square",
+  },
+  {
+    value: "fas fa-ruble-sign",
+    label: "ruble-sign",
+  },
+  {
+    value: "fas fa-ruler",
+    label: "ruler",
+  },
+  {
+    value: "fas fa-ruler-combined",
+    label: "ruler-combined",
+  },
+  {
+    value: "fas fa-ruler-horizontal",
+    label: "ruler-horizontal",
+  },
+  {
+    value: "fas fa-ruler-vertical",
+    label: "ruler-vertical",
+  },
+  {
+    value: "fas fa-running",
+    label: "running",
+  },
+  {
+    value: "fas fa-rupee-sign",
+    label: "rupee-sign",
+  },
+  {
+    value: "fab fa-rust",
+    label: "rust",
+  },
+  {
+    value: "fas fa-sad-cry",
+    label: "sad-cry",
+  },
+  {
+    value: "far fa-sad-cry",
+    label: "sad-cry",
+  },
+  {
+    value: "fas fa-sad-tear",
+    label: "sad-tear",
+  },
+  {
+    value: "far fa-sad-tear",
+    label: "sad-tear",
+  },
+  {
+    value: "fab fa-safari",
+    label: "safari",
+  },
+  {
+    value: "fab fa-salesforce",
+    label: "salesforce",
+  },
+  {
+    value: "fab fa-sass",
+    label: "sass",
+  },
+  {
+    value: "fas fa-satellite",
+    label: "satellite",
+  },
+  {
+    value: "fas fa-satellite-dish",
+    label: "satellite-dish",
+  },
+  {
+    value: "fas fa-save",
+    label: "save",
+  },
+  {
+    value: "far fa-save",
+    label: "save",
+  },
+  {
+    value: "fab fa-schlix",
+    label: "schlix",
+  },
+  {
+    value: "fas fa-school",
+    label: "school",
+  },
+  {
+    value: "fas fa-screwdriver",
+    label: "screwdriver",
+  },
+  {
+    value: "fab fa-scribd",
+    label: "scribd",
+  },
+  {
+    value: "fas fa-scroll",
+    label: "scroll",
+  },
+  {
+    value: "fas fa-sd-card",
+    label: "sd-card",
+  },
+  {
+    value: "fas fa-search",
+    label: "search",
+  },
+  {
+    value: "fas fa-search-dollar",
+    label: "search-dollar",
+  },
+  {
+    value: "fas fa-search-location",
+    label: "search-location",
+  },
+  {
+    value: "fas fa-search-minus",
+    label: "search-minus",
+  },
+  {
+    value: "fas fa-search-plus",
+    label: "search-plus",
+  },
+  {
+    value: "fab fa-searchengin",
+    label: "searchengin",
+  },
+  {
+    value: "fas fa-seedling",
+    label: "seedling",
+  },
+  {
+    value: "fab fa-sellcast",
+    label: "sellcast",
+  },
+  {
+    value: "fab fa-sellsy",
+    label: "sellsy",
+  },
+  {
+    value: "fas fa-server",
+    label: "server",
+  },
+  {
+    value: "fab fa-servicestack",
+    label: "servicestack",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-shapes",
+    label: "shapes",
+  },
+  {
+    value: "fas fa-share",
+    label: "share",
+  },
+  {
+    value: "fas fa-share-alt",
+    label: "share-alt",
+  },
+  {
+    value: "fas fa-share-alt-square",
+    label: "share-alt-square",
+  },
+  {
+    value: "fas fa-share-square",
+    label: "share-square",
+  },
+  {
+    value: "far fa-share-square",
+    label: "share-square",
+  },
+  {
+    value: "fas fa-shekel-sign",
+    label: "shekel-sign",
+  },
+  {
+    value: "fas fa-shield-alt",
+    label: "shield-alt",
+  },
+  {
+    value: "fas fa-shield-virus",
+    label: "shield-virus",
+  },
+  {
+    value: "fas fa-ship",
+    label: "ship",
+  },
+  {
+    value: "fas fa-shipping-fast",
+    label: "shipping-fast",
+  },
+  {
+    value: "fab fa-shirtsinbulk",
+    label: "shirtsinbulk",
+  },
+  {
+    value: "fas fa-shoe-prints",
+    label: "shoe-prints",
+  },
+  {
+    value: "fab fa-shopify",
+    label: "shopify",
+  },
+  {
+    value: "fas fa-shopping-bag",
+    label: "shopping-bag",
+  },
+  {
+    value: "fas fa-shopping-basket",
+    label: "shopping-basket",
+  },
+  {
+    value: "fas fa-shopping-cart",
+    label: "shopping-cart",
+  },
+  {
+    value: "fab fa-shopware",
+    label: "shopware",
+  },
+  {
+    value: "fas fa-shower",
+    label: "shower",
+  },
+  {
+    value: "fas fa-shuttle-van",
+    label: "shuttle-van",
+  },
+  {
+    value: "fas fa-sign",
+    label: "sign",
+  },
+  {
+    value: "fas fa-sign-in-alt",
+    label: "sign-in-alt",
+  },
+  {
+    value: "fas fa-sign-language",
+    label: "sign-language",
+  },
+  {
+    value: "fas fa-sign-out-alt",
+    label: "sign-out-alt",
+  },
+  {
+    value: "fas fa-signal",
+    label: "signal",
+  },
+  {
+    value: "fas fa-signature",
+    label: "signature",
+  },
+  {
+    value: "fas fa-sim-card",
+    label: "sim-card",
+  },
+  {
+    value: "fab fa-simplybuilt",
+    label: "simplybuilt",
+  },
+  {
+    value: "fas fa-sink",
+    label: "sink",
+  },
+  {
+    value: "fab fa-sistrix",
+    label: "sistrix",
+  },
+  {
+    value: "fas fa-sitemap",
+    label: "sitemap",
+  },
+  {
+    value: "fab fa-sith",
+    label: "sith",
+  },
+  {
+    value: "fas fa-skating",
+    label: "skating",
+  },
+  {
+    value: "fab fa-sketch",
+    label: "sketch",
+  },
+  {
+    value: "fas fa-skiing",
+    label: "skiing",
+  },
+  {
+    value: "fas fa-skiing-nordic",
+    label: "skiing-nordic",
+  },
+  {
+    value: "fas fa-skull",
+    label: "skull",
+  },
+  {
+    value: "fas fa-skull-crossbones",
+    label: "skull-crossbones",
+  },
+  {
+    value: "fab fa-skyatlas",
+    label: "skyatlas",
+  },
+  {
+    value: "fab fa-skype",
+    label: "skype",
+  },
+  {
+    value: "fab fa-slack",
+    label: "slack",
+  },
+  {
+    value: "fab fa-slack-hash",
+    label: "slack-hash",
+  },
+  {
+    value: "fas fa-slash",
+    label: "slash",
+  },
+  {
+    value: "fas fa-sleigh",
+    label: "sleigh",
+  },
+  {
+    value: "fas fa-sliders-h",
+    label: "sliders-h",
+  },
+  {
+    value: "fab fa-slideshare",
+    label: "slideshare",
+  },
+  {
+    value: "fas fa-smile",
+    label: "smile",
+  },
+  {
+    value: "far fa-smile",
+    label: "smile",
+  },
+  {
+    value: "fas fa-smile-beam",
+    label: "smile-beam",
+  },
+  {
+    value: "far fa-smile-beam",
+    label: "smile-beam",
+  },
+  {
+    value: "fas fa-smile-wink",
+    label: "smile-wink",
+  },
+  {
+    value: "far fa-smile-wink",
+    label: "smile-wink",
+  },
+  {
+    value: "fas fa-smog",
+    label: "smog",
+  },
+  {
+    value: "fas fa-smoking",
+    label: "smoking",
+  },
+  {
+    value: "fas fa-smoking-ban",
+    label: "smoking-ban",
+  },
+  {
+    value: "fas fa-sms",
+    label: "sms",
+  },
+  {
+    value: "fab fa-snapchat",
+    label: "snapchat",
+  },
+  {
+    value: "fab fa-snapchat-ghost",
+    label: "snapchat-ghost",
+  },
+  {
+    value: "fab fa-snapchat-square",
+    label: "snapchat-square",
+  },
+  {
+    value: "fas fa-snowboarding",
+    label: "snowboarding",
+  },
+  {
+    value: "fas fa-snowflake",
+    label: "snowflake",
+  },
+  {
+    value: "far fa-snowflake",
+    label: "snowflake",
+  },
+  {
+    value: "fas fa-snowman",
+    label: "snowman",
+  },
+  {
+    value: "fas fa-snowplow",
+    label: "snowplow",
+  },
+  {
+    value: "fas fa-soap",
+    label: "soap",
+  },
+  {
+    value: "fas fa-socks",
+    label: "socks",
+  },
+  {
+    value: "fas fa-solar-panel",
+    label: "solar-panel",
+  },
+  {
+    value: "fas fa-sort",
+    label: "sort",
+  },
+  {
+    value: "fas fa-sort-alpha-down",
+    label: "sort-alpha-down",
+  },
+  {
+    value: "fas fa-sort-alpha-down-alt",
+    label: "sort-alpha-down-alt",
+  },
+  {
+    value: "fas fa-sort-alpha-up",
+    label: "sort-alpha-up",
+  },
+  {
+    value: "fas fa-sort-alpha-up-alt",
+    label: "sort-alpha-up-alt",
+  },
+  {
+    value: "fas fa-sort-amount-down",
+    label: "sort-amount-down",
+  },
+  {
+    value: "fas fa-sort-amount-down-alt",
+    label: "sort-amount-down-alt",
+  },
+  {
+    value: "fas fa-sort-amount-up",
+    label: "sort-amount-up",
+  },
+  {
+    value: "fas fa-sort-amount-up-alt",
+    label: "sort-amount-up-alt",
+  },
+  {
+    value: "fas fa-sort-down",
+    label: "sort-down",
+  },
+  {
+    value: "fas fa-sort-numeric-down",
+    label: "sort-numeric-down",
+  },
+  {
+    value: "fas fa-sort-numeric-down-alt",
+    label: "sort-numeric-down-alt",
+  },
+  {
+    value: "fas fa-sort-numeric-up",
+    label: "sort-numeric-up",
+  },
+  {
+    value: "fas fa-sort-numeric-up-alt",
+    label: "sort-numeric-up-alt",
+  },
+  {
+    value: "fas fa-sort-up",
+    label: "sort-up",
+  },
+  {
+    value: "fab fa-soundcloud",
+    label: "soundcloud",
+  },
+  {
+    value: "fab fa-sourcetree",
+    label: "sourcetree",
+  },
+  {
+    value: "fas fa-spa",
+    label: "spa",
+  },
+  {
+    value: "fas fa-space-shuttle",
+    label: "space-shuttle",
+  },
+  {
+    value: "fab fa-speakap",
+    label: "speakap",
+  },
+  {
+    value: "fab fa-speaker-deck",
+    label: "speaker-deck",
+  },
+  {
+    value: "fas fa-spell-check",
+    label: "spell-check",
+  },
+  {
+    value: "fas fa-spider",
+    label: "spider",
+  },
+  {
+    value: "fas fa-spinner",
+    label: "spinner",
+  },
+  {
+    value: "fas fa-splotch",
+    label: "splotch",
+  },
+  {
+    value: "fab fa-spotify",
+    label: "spotify",
+  },
+  {
+    value: "fas fa-spray-can",
+    label: "spray-can",
+  },
+  {
+    value: "fas fa-square",
+    label: "square",
+  },
+  {
+    value: "far fa-square",
+    label: "square",
+  },
+  {
+    value: "fas fa-square-full",
+    label: "square-full",
+  },
+  {
+    value: "fas fa-square-root-alt",
+    label: "square-root-alt",
+  },
+  {
+    value: "fab fa-squarespace",
+    label: "squarespace",
+  },
+  {
+    value: "fab fa-stack-exchange",
+    label: "stack-exchange",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fab fa-stack-overflow",
+    label: "stack-overflow",
+  },
+  {
+    value: "fab fa-stackpath",
+    label: "stackpath",
+  },
+  {
+    value: "fas fa-stamp",
+    label: "stamp",
+  },
+  {
+    value: "fas fa-star",
+    label: "star",
+  },
+  {
+    value: "far fa-star",
+    label: "star",
+  },
+  {
+    value: "fas fa-star-and-crescent",
+    label: "star-and-crescent",
+  },
+  {
+    value: "fas fa-star-half",
+    label: "star-half",
+  },
+  {
+    value: "far fa-star-half",
+    label: "star-half",
+  },
+  {
+    value: "fas fa-star-half-alt",
+    label: "star-half-alt",
+  },
+  {
+    value: "fas fa-star-of-david",
+    label: "star-of-david",
+  },
+  {
+    value: "fas fa-star-of-life",
+    label: "star-of-life",
+  },
+  {
+    value: "fab fa-staylinked",
+    label: "staylinked",
+  },
+  {
+    value: "fab fa-steam",
+    label: "steam",
+  },
+  {
+    value: "fab fa-steam-square",
+    label: "steam-square",
+  },
+  {
+    value: "fab fa-steam-symbol",
+    label: "steam-symbol",
+  },
+  {
+    value: "fas fa-step-backward",
+    label: "step-backward",
+  },
+  {
+    value: "fas fa-step-forward",
+    label: "step-forward",
+  },
+  {
+    value: "fas fa-stethoscope",
+    label: "stethoscope",
+  },
+  {
+    value: "fab fa-sticker-mule",
+    label: "sticker-mule",
+  },
+  {
+    value: "fas fa-sticky-note",
+    label: "sticky-note",
+  },
+  {
+    value: "far fa-sticky-note",
+    label: "sticky-note",
+  },
+  {
+    value: "fas fa-stop",
+    label: "stop",
+  },
+  {
+    value: "fas fa-stop-circle",
+    label: "stop-circle",
+  },
+  {
+    value: "far fa-stop-circle",
+    label: "stop-circle",
+  },
+  {
+    value: "fas fa-stopwatch",
+    label: "stopwatch",
+  },
+  {
+    value: "fas fa-stopwatch-20",
+    label: "stopwatch-20",
+  },
+  {
+    value: "fas fa-store",
+    label: "store",
+  },
+  {
+    value: "fas fa-store-alt",
+    label: "store-alt",
+  },
+  {
+    value: "fas fa-store-alt-slash",
+    label: "store-alt-slash",
+  },
+  {
+    value: "fas fa-store-slash",
+    label: "store-slash",
+  },
+  {
+    value: "fab fa-strava",
+    label: "strava",
+  },
+  {
+    value: "fas fa-stream",
+    label: "stream",
+  },
+  {
+    value: "fas fa-street-view",
+    label: "street-view",
+  },
+  {
+    value: "fas fa-strikethrough",
+    label: "strikethrough",
+  },
+  {
+    value: "fab fa-stripe",
+    label: "stripe",
+  },
+  {
+    value: "fab fa-stripe-s",
+    label: "stripe-s",
+  },
+  {
+    value: "fas fa-stroopwafel",
+    label: "stroopwafel",
+  },
+  {
+    value: "fab fa-studiovinari",
+    label: "studiovinari",
+  },
+  {
+    value: "fab fa-stumbleupon",
+    label: "stumbleupon",
+  },
+  {
+    value: "fab fa-stumbleupon-circle",
+    label: "stumbleupon-circle",
+  },
+  {
+    value: "fas fa-subscript",
+    label: "subscript",
+  },
+  {
+    value: "fas fa-subway",
+    label: "subway",
+  },
+  {
+    value: "fas fa-suitcase",
+    label: "suitcase",
+  },
+  {
+    value: "fas fa-suitcase-rolling",
+    label: "suitcase-rolling",
+  },
+  {
+    value: "fas fa-sun",
+    label: "sun",
+  },
+  {
+    value: "far fa-sun",
+    label: "sun",
+  },
+  {
+    value: "fab fa-superpowers",
+    label: "superpowers",
+  },
+  {
+    value: "fas fa-superscript",
+    label: "superscript",
+  },
+  {
+    value: "fab fa-supple",
+    label: "supple",
+  },
+  {
+    value: "fas fa-surprise",
+    label: "surprise",
+  },
+  {
+    value: "far fa-surprise",
+    label: "surprise",
+  },
+  {
+    value: "fab fa-suse",
+    label: "suse",
+  },
+  {
+    value: "fas fa-swatchbook",
+    label: "swatchbook",
+  },
+  {
+    value: "fab fa-swift",
+    label: "swift",
+  },
+  {
+    value: "fas fa-swimmer",
+    label: "swimmer",
+  },
+  {
+    value: "fas fa-swimming-pool",
+    label: "swimming-pool",
+  },
+  {
+    value: "fab fa-symfony",
+    label: "symfony",
+  },
+  {
+    value: "fas fa-synagogue",
+    label: "synagogue",
+  },
+  {
+    value: "fas fa-sync",
+    label: "sync",
+  },
+  {
+    value: "fas fa-sync-alt",
+    label: "sync-alt",
+  },
+  {
+    value: "fas fa-syringe",
+    label: "syringe",
+  },
+  {
+    value: "fas fa-table",
+    label: "table",
+  },
+  {
+    value: "fas fa-table-tennis",
+    label: "table-tennis",
+  },
+  {
+    value: "fas fa-tablet",
+    label: "tablet",
+  },
+  {
+    value: "fas fa-tablet-alt",
+    label: "tablet-alt",
+  },
+  {
+    value: "fas fa-tablets",
+    label: "tablets",
+  },
+  {
+    value: "fas fa-tachometer-alt",
+    label: "tachometer-alt",
+  },
+  {
+    value: "fas fa-tag",
+    label: "tag",
+  },
+  {
+    value: "fas fa-tags",
+    label: "tags",
+  },
+  {
+    value: "fas fa-tape",
+    label: "tape",
+  },
+  {
+    value: "fas fa-tasks",
+    label: "tasks",
+  },
+  {
+    value: "fas fa-taxi",
+    label: "taxi",
+  },
+  {
+    value: "fab fa-teamspeak",
+    label: "teamspeak",
+  },
+  {
+    value: "fas fa-teeth",
+    label: "teeth",
+  },
+  {
+    value: "fas fa-teeth-open",
+    label: "teeth-open",
+  },
+  {
+    value: "fab fa-telegram",
+    label: "telegram",
+  },
+  {
+    value: "fab fa-telegram-plane",
+    label: "telegram-plane",
+  },
+  {
+    value: "fas fa-temperature-high",
+    label: "temperature-high",
+  },
+  {
+    value: "fas fa-temperature-low",
+    label: "temperature-low",
+  },
+  {
+    value: "fab fa-tencent-weibo",
+    label: "tencent-weibo",
+  },
+  {
+    value: "fas fa-tenge",
+    label: "tenge",
+  },
+  {
+    value: "fas fa-terminal",
+    label: "terminal",
+  },
+  {
+    value: "fas fa-text-height",
+    label: "text-height",
+  },
+  {
+    value: "fas fa-text-width",
+    label: "text-width",
+  },
+  {
+    value: "fas fa-th",
+    label: "th",
+  },
+  {
+    value: "fas fa-th-large",
+    label: "th-large",
+  },
+  {
+    value: "fas fa-th-list",
+    label: "th-list",
+  },
+  {
+    value: "fab fa-the-red-yeti",
+    label: "the-red-yeti",
+  },
+  {
+    value: "fas fa-theater-masks",
+    label: "theater-masks",
+  },
+  {
+    value: "fab fa-themeco",
+    label: "themeco",
+  },
+  {
+    value: "fab fa-themeisle",
+    label: "themeisle",
+  },
+  {
+    value: "fas fa-thermometer",
+    label: "thermometer",
+  },
+  {
+    value: "fas fa-thermometer-empty",
+    label: "thermometer-empty",
+  },
+  {
+    value: "fas fa-thermometer-full",
+    label: "thermometer-full",
+  },
+  {
+    value: "fas fa-thermometer-half",
+    label: "thermometer-half",
+  },
+  {
+    value: "fas fa-thermometer-quarter",
+    label: "thermometer-quarter",
+  },
+  {
+    value: "fas fa-thermometer-three-quarters",
+    label: "thermometer-three-quarters",
+  },
+  {
+    value: "fab fa-think-peaks",
+    label: "think-peaks",
+  },
+  {
+    value: "fas fa-thumbs-down",
+    label: "thumbs-down",
+  },
+  {
+    value: "far fa-thumbs-down",
+    label: "thumbs-down",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-thumbs-up",
+    label: "thumbs-up",
+  },
+  {
+    value: "far fa-thumbs-up",
+    label: "thumbs-up",
+  },
+  {
+    value: "fas fa-thumbtack",
+    label: "thumbtack",
+  },
+  {
+    value: "fas fa-ticket-alt",
+    label: "ticket-alt",
+  },
+  {
+    value: "fab fa-tiktok",
+    label: "tiktok",
+  },
+  {
+    value: "fas fa-times",
+    label: "times",
+  },
+  {
+    value: "fas fa-times-circle",
+    label: "times-circle",
+  },
+  {
+    value: "far fa-times-circle",
+    label: "times-circle",
+  },
+  {
+    value: "fas fa-tint",
+    label: "tint",
+  },
+  {
+    value: "fas fa-tint-slash",
+    label: "tint-slash",
+  },
+  {
+    value: "fas fa-tired",
+    label: "tired",
+  },
+  {
+    value: "far fa-tired",
+    label: "tired",
+  },
+  {
+    value: "fas fa-toggle-off",
+    label: "toggle-off",
+  },
+  {
+    value: "fas fa-toggle-on",
+    label: "toggle-on",
+  },
+  {
+    value: "fas fa-toilet",
+    label: "toilet",
+  },
+  {
+    value: "fas fa-toilet-paper",
+    label: "toilet-paper",
+  },
+  {
+    value: "fas fa-toilet-paper-slash",
+    label: "toilet-paper-slash",
+  },
+  {
+    value: "fas fa-toolbox",
+    label: "toolbox",
+  },
+  {
+    value: "fas fa-tools",
+    label: "tools",
+  },
+  {
+    value: "fas fa-tooth",
+    label: "tooth",
+  },
+  {
+    value: "fas fa-torah",
+    label: "torah",
+  },
+  {
+    value: "fas fa-torii-gate",
+    label: "torii-gate",
+  },
+  {
+    value: "fas fa-tractor",
+    label: "tractor",
+  },
+  {
+    value: "fab fa-trade-federation",
+    label: "trade-federation",
+  },
+  {
+    value: "fas fa-trademark",
+    label: "trademark",
+  },
+  {
+    value: "fas fa-traffic-light",
+    label: "traffic-light",
+  },
+  {
+    value: "fas fa-trailer",
+    label: "trailer",
+  },
+  {
+    value: "fas fa-train",
+    label: "train",
+  },
+  {
+    value: "fas fa-tram",
+    label: "tram",
+  },
+  {
+    value: "fas fa-transgender",
+    label: "transgender",
+  },
+  {
+    value: "fas fa-transgender-alt",
+    label: "transgender-alt",
+  },
+  {
+    value: "fas fa-trash",
+    label: "trash",
+  },
+  {
+    value: "fas fa-trash-alt",
+    label: "trash-alt",
+  },
+  {
+    value: "far fa-trash-alt",
+    label: "trash-alt",
+  },
+  {
+    value: "fas fa-trash-restore",
+    label: "trash-restore",
+  },
+  {
+    value: "fas fa-trash-restore-alt",
+    label: "trash-restore-alt",
+  },
+  {
+    value: "fas fa-tree",
+    label: "tree",
+  },
+  {
+    value: "fab fa-trello",
+    label: "trello",
+  },
+  {
+    value: "fab fa-tripadvisor",
+    label: "tripadvisor",
+  },
+  {
+    value: "fas fa-trophy",
+    label: "trophy",
+  },
+  {
+    value: "fas fa-truck",
+    label: "truck",
+  },
+  {
+    value: "fas fa-truck-loading",
+    label: "truck-loading",
+  },
+  {
+    value: "fas fa-truck-monster",
+    label: "truck-monster",
+  },
+  {
+    value: "fas fa-truck-moving",
+    label: "truck-moving",
+  },
+  {
+    value: "fas fa-truck-pickup",
+    label: "truck-pickup",
+  },
+  {
+    value: "fas fa-tshirt",
+    label: "tshirt",
+  },
+  {
+    value: "fas fa-tty",
+    label: "tty",
+  },
+  {
+    value: "fab fa-tumblr",
+    label: "tumblr",
+  },
+  {
+    value: "fab fa-tumblr-square",
+    label: "tumblr-square",
+  },
+  {
+    value: "fas fa-tv",
+    label: "tv",
+  },
+  {
+    value: "fab fa-twitch",
+    label: "twitch",
+  },
+  {
+    value: "fab fa-twitter",
+    label: "twitter",
+  },
+  {
+    value: "fab fa-twitter-square",
+    label: "twitter-square",
+  },
+  {
+    value: "fab fa-typo3",
+    label: "typo3",
+  },
+  {
+    value: "fab fa-uber",
+    label: "uber",
+  },
+  {
+    value: "fab fa-ubuntu",
+    label: "ubuntu",
+  },
+  {
+    value: "fab fa-uikit",
+    label: "uikit",
+  },
+  {
+    value: "fab fa-umbraco",
+    label: "umbraco",
+  },
+  {
+    value: "fas fa-umbrella",
+    label: "umbrella",
+  },
+  {
+    value: "fas fa-umbrella-beach",
+    label: "umbrella-beach",
+  },
+  {
+    value: "fas fa-underline",
+    label: "underline",
+  },
+  {
+    value: "fas fa-undo",
+    label: "undo",
+  },
+  {
+    value: "fas fa-undo-alt",
+    label: "undo-alt",
+  },
+  {
+    value: "fab fa-uniregistry",
+    label: "uniregistry",
+  },
+  {
+    value: "fab fa-unity",
+    label: "unity",
+  },
+  {
+    value: "fas fa-universal-access",
+    label: "universal-access",
+  },
+  {
+    value: "fas fa-university",
+    label: "university",
+  },
+  {
+    value: "fas fa-unlink",
+    label: "unlink",
+  },
+  {
+    value: "fas fa-unlock",
+    label: "unlock",
+  },
+  {
+    value: "fas fa-unlock-alt",
+    label: "unlock-alt",
+  },
+  {
+    value: "fab fa-unsplash",
+    label: "unsplash",
+  },
+  {
+    value: "fab fa-untappd",
+    label: "untappd",
+  },
+  {
+    value: "fas fa-upload",
+    label: "upload",
+  },
+  {
+    value: "fab fa-ups",
+    label: "ups",
+  },
+  {
+    value: "fab fa-usb",
+    label: "usb",
+  },
+  {
+    value: "fas fa-user",
+    label: "user",
+  },
+  {
+    value: "far fa-user",
+    label: "user",
+  },
+  {
+    value: "fas fa-user-alt",
+    label: "user-alt",
+  },
+  {
+    value: "fas fa-user-alt-slash",
+    label: "user-alt-slash",
+  },
+  {
+    value: "fas fa-user-astronaut",
+    label: "user-astronaut",
+  },
+  {
+    value: "fas fa-user-check",
+    label: "user-check",
+  },
+  {
+    value: "fas fa-user-circle",
+    label: "user-circle",
+  },
+  {
+    value: "far fa-user-circle",
+    label: "user-circle",
+  },
+  {
+    value: "fas fa-user-clock",
+    label: "user-clock",
+  },
+  {
+    value: "fas fa-user-cog",
+    label: "user-cog",
+  },
+  {
+    value: "fas fa-user-edit",
+    label: "user-edit",
+  },
+  {
+    value: "fas fa-user-friends",
+    label: "user-friends",
+  },
+  {
+    value: "fas fa-user-graduate",
+    label: "user-graduate",
+  },
+  {
+    value: "fas fa-user-injured",
+    label: "user-injured",
+  },
+  {
+    value: "fas fa-user-lock",
+    label: "user-lock",
+  },
+  {
+    value: "fas fa-user-md",
+    label: "user-md",
+  },
+  {
+    value: "fas fa-user-minus",
+    label: "user-minus",
+  },
+  {
+    value: "fas fa-user-ninja",
+    label: "user-ninja",
+  },
+  {
+    value: "fas fa-user-nurse",
+    label: "user-nurse",
+  },
+  {
+    value: "fas fa-user-plus",
+    label: "user-plus",
+  },
+  {
+    value: "fas fa-user-secret",
+    label: "user-secret",
+  },
+  {
+    value: "fas fa-user-shield",
+    label: "user-shield",
+  },
+  {
+    value: "fas fa-user-slash",
+    label: "user-slash",
+  },
+  {
+    value: "fas fa-user-tag",
+    label: "user-tag",
+  },
+  {
+    value: "fas fa-user-tie",
+    label: "user-tie",
+  },
+  {
+    value: "",
+    label: "",
+  },
+  {
+    value: "fas fa-user-times",
+    label: "user-times",
+  },
+  {
+    value: "fas fa-users",
+    label: "users",
+  },
+  {
+    value: "fas fa-users-cog",
+    label: "users-cog",
+  },
+  {
+    value: "fas fa-users-slash",
+    label: "users-slash",
+  },
+  {
+    value: "fab fa-usps",
+    label: "usps",
+  },
+  {
+    value: "fab fa-ussunnah",
+    label: "ussunnah",
+  },
+  {
+    value: "fas fa-utensil-spoon",
+    label: "utensil-spoon",
+  },
+  {
+    value: "fas fa-utensils",
+    label: "utensils",
+  },
+  {
+    value: "fab fa-vaadin",
+    label: "vaadin",
+  },
+  {
+    value: "fas fa-vector-square",
+    label: "vector-square",
+  },
+  {
+    value: "fas fa-venus",
+    label: "venus",
+  },
+  {
+    value: "fas fa-venus-double",
+    label: "venus-double",
+  },
+  {
+    value: "fas fa-venus-mars",
+    label: "venus-mars",
+  },
+  {
+    value: "fab fa-viacoin",
+    label: "viacoin",
+  },
+  {
+    value: "fab fa-viadeo",
+    label: "viadeo",
+  },
+  {
+    value: "fab fa-viadeo-square",
+    label: "viadeo-square",
+  },
+  {
+    value: "fas fa-vial",
+    label: "vial",
+  },
+  {
+    value: "fas fa-vials",
+    label: "vials",
+  },
+  {
+    value: "fab fa-viber",
+    label: "viber",
+  },
+  {
+    value: "fas fa-video",
+    label: "video",
+  },
+  {
+    value: "fas fa-video-slash",
+    label: "video-slash",
+  },
+  {
+    value: "fas fa-vihara",
+    label: "vihara",
+  },
+  {
+    value: "fab fa-vimeo",
+    label: "vimeo",
+  },
+  {
+    value: "fab fa-vimeo-square",
+    label: "vimeo-square",
+  },
+  {
+    value: "fab fa-vimeo-v",
+    label: "vimeo-v",
+  },
+  {
+    value: "fab fa-vine",
+    label: "vine",
+  },
+  {
+    value: "fas fa-virus",
+    label: "virus",
+  },
+  {
+    value: "fas fa-virus-slash",
+    label: "virus-slash",
+  },
+  {
+    value: "fas fa-viruses",
+    label: "viruses",
+  },
+  {
+    value: "fab fa-vk",
+    label: "vk",
+  },
+  {
+    value: "fab fa-vnv",
+    label: "vnv",
+  },
+  {
+    value: "fas fa-voicemail",
+    label: "voicemail",
+  },
+  {
+    value: "fas fa-volleyball-ball",
+    label: "volleyball-ball",
+  },
+  {
+    value: "fas fa-volume-down",
+    label: "volume-down",
+  },
+  {
+    value: "fas fa-volume-mute",
+    label: "volume-mute",
+  },
+  {
+    value: "fas fa-volume-off",
+    label: "volume-off",
+  },
+  {
+    value: "fas fa-volume-up",
+    label: "volume-up",
+  },
+  {
+    value: "fas fa-vote-yea",
+    label: "vote-yea",
+  },
+  {
+    value: "fas fa-vr-cardboard",
+    label: "vr-cardboard",
+  },
+  {
+    value: "fab fa-vuejs",
+    label: "vuejs",
+  },
+  {
+    value: "fas fa-walking",
+    label: "walking",
+  },
+  {
+    value: "fas fa-wallet",
+    label: "wallet",
+  },
+  {
+    value: "fas fa-warehouse",
+    label: "warehouse",
+  },
+  {
+    value: "fas fa-water",
+    label: "water",
+  },
+  {
+    value: "fas fa-wave-square",
+    label: "wave-square",
+  },
+  {
+    value: "fab fa-waze",
+    label: "waze",
+  },
+  {
+    value: "fab fa-weebly",
+    label: "weebly",
+  },
+  {
+    value: "fab fa-weibo",
+    label: "weibo",
+  },
+  {
+    value: "fas fa-weight",
+    label: "weight",
+  },
+  {
+    value: "fas fa-weight-hanging",
+    label: "weight-hanging",
+  },
+  {
+    value: "fab fa-weixin",
+    label: "weixin",
+  },
+  {
+    value: "fab fa-whatsapp",
+    label: "whatsapp",
+  },
+  {
+    value: "fab fa-whatsapp-square",
+    label: "whatsapp-square",
+  },
+  {
+    value: "fas fa-wheelchair",
+    label: "wheelchair",
+  },
+  {
+    value: "fab fa-whmcs",
+    label: "whmcs",
+  },
+  {
+    value: "fas fa-wifi",
+    label: "wifi",
+  },
+  {
+    value: "fab fa-wikipedia-w",
+    label: "wikipedia-w",
+  },
+  {
+    value: "fas fa-wind",
+    label: "wind",
+  },
+  {
+    value: "fas fa-window-close",
+    label: "window-close",
+  },
+  {
+    value: "far fa-window-close",
+    label: "window-close",
+  },
+  {
+    value: "fas fa-window-maximize",
+    label: "window-maximize",
+  },
+  {
+    value: "far fa-window-maximize",
+    label: "window-maximize",
+  },
+  {
+    value: "fas fa-window-minimize",
+    label: "window-minimize",
+  },
+  {
+    value: "far fa-window-minimize",
+    label: "window-minimize",
+  },
+  {
+    value: "fas fa-window-restore",
+    label: "window-restore",
+  },
+  {
+    value: "far fa-window-restore",
+    label: "window-restore",
+  },
+  {
+    value: "fab fa-windows",
+    label: "windows",
+  },
+  {
+    value: "fas fa-wine-bottle",
+    label: "wine-bottle",
+  },
+  {
+    value: "fas fa-wine-glass",
+    label: "wine-glass",
+  },
+  {
+    value: "fas fa-wine-glass-alt",
+    label: "wine-glass-alt",
+  },
+  {
+    value: "fab fa-wix",
+    label: "wix",
+  },
+  {
+    value: "fab fa-wizards-of-the-coast",
+    label: "wizards-of-the-coast",
+  },
+  {
+    value: "fab fa-wolf-pack-battalion",
+    label: "wolf-pack-battalion",
+  },
+  {
+    value: "fas fa-won-sign",
+    label: "won-sign",
+  },
+  {
+    value: "fab fa-wordpress",
+    label: "wordpress",
+  },
+  {
+    value: "fab fa-wordpress-simple",
+    label: "wordpress-simple",
+  },
+  {
+    value: "fab fa-wpbeginner",
+    label: "wpbeginner",
+  },
+  {
+    value: "fab fa-wpexplorer",
+    label: "wpexplorer",
+  },
+  {
+    value: "fab fa-wpforms",
+    label: "wpforms",
+  },
+  {
+    value: "fab fa-wpressr",
+    label: "wpressr",
+  },
+  {
+    value: "fas fa-wrench",
+    label: "wrench",
+  },
+  {
+    value: "fas fa-x-ray",
+    label: "x-ray",
+  },
+  {
+    value: "fab fa-xbox",
+    label: "xbox",
+  },
+  {
+    value: "fab fa-xing",
+    label: "xing",
+  },
+  {
+    value: "fab fa-xing-square",
+    label: "xing-square",
+  },
+  {
+    value: "fab fa-y-combinator",
+    label: "y-combinator",
+  },
+  {
+    value: "fab fa-yahoo",
+    label: "yahoo",
+  },
+  {
+    value: "fab fa-yammer",
+    label: "yammer",
+  },
+  {
+    value: "fab fa-yandex",
+    label: "yandex",
+  },
+  {
+    value: "fab fa-yandex-international",
+    label: "yandex-international",
+  },
+  {
+    value: "fab fa-yarn",
+    label: "yarn",
+  },
+  {
+    value: "fab fa-yelp",
+    label: "yelp",
+  },
+  {
+    value: "fas fa-yen-sign",
+    label: "yen-sign",
+  },
+  {
+    value: "fas fa-yin-yang",
+    label: "yin-yang",
+  },
+  {
+    value: "fab fa-yoast",
+    label: "yoast",
+  },
+  {
+    value: "fab fa-youtube",
+    label: "youtube",
+  },
+  {
+    value: "fab fa-youtube-square",
+    label: "youtube-square",
+  },
+  {
+    value: "fab fa-zhihu",
+    label: "zhihu",
+  },
+]
diff --git a/packages/builder/src/components/userInterface/IconSelect/index.js b/packages/builder/src/components/userInterface/IconSelect/index.js
new file mode 100644
index 0000000000..716915d99b
--- /dev/null
+++ b/packages/builder/src/components/userInterface/IconSelect/index.js
@@ -0,0 +1,3 @@
+import "@fortawesome/fontawesome-free/js/all.js"
+
+export { default as IconSelect } from "./IconSelect.svelte"
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 4fc0af9bb9..395c842122 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -3,6 +3,11 @@
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+    CAPTURE_VAR_INSIDE_MUSTACHE,
+  } from "builderStore/replaceBindings"
   import { DropdownMenu } from "@budibase/bbui"
   import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
   import { onMount, getContext } from "svelte"
@@ -36,25 +41,12 @@
     })
   }
 
-  const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
   function replaceBindings(textWithBindings) {
     getBindableProperties()
-    // Find all instances of mustasche
-    const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_MUSTACHE)
-
-    // Replace with names:
-    boundValues &&
-      boundValues.forEach(boundValue => {
-        const binding = bindableProperties.find(({ readableBinding }) => {
-          return boundValue === `{{ ${readableBinding} }}`
-        })
-        if (binding) {
-          textWithBindings = textWithBindings.replace(
-            boundValue,
-            `{{ ${binding.runtimeBinding} }}`
-          )
-        }
-      })
+    textWithBindings = readableToRuntimeBinding(
+      bindableProperties,
+      textWithBindings
+    )
     onChange(key, textWithBindings)
   }
 
@@ -76,22 +68,10 @@
 
   const safeValue = () => {
     getBindableProperties()
-    let temp = value
-    const boundValues =
-      (typeof value === "string" && value.match(CAPTURE_VAR_INSIDE_MUSTACHE)) ||
-      []
 
-    // Replace with names:
-    boundValues.forEach(v => {
-      const binding = bindableProperties.find(({ runtimeBinding }) => {
-        return v === `{{ ${runtimeBinding} }}`
-      })
-      if (binding) {
-        temp = temp.replace(v, `{{ ${binding.readableBinding} }}`)
-      }
-    })
-    // console.log(temp)
-    return value === undefined && props.defaultValue !== undefined
+    let temp = runtimeToReadableBinding(bindableProperties, value)
+
+    return !value && props.defaultValue !== undefined
       ? props.defaultValue
       : temp
   }
@@ -113,7 +93,7 @@
       {...props}
       name={key} />
   </div>
-  {#if control == Input}
+  {#if control === Input && !key.startsWith('_')}
     <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
       <Icon name="edit" />
     </button>
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index c291ee5aa7..412f0719fc 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store } from "builderStore"
 
@@ -10,9 +10,9 @@
   const handleBlur = () => dispatch("change", value)
 </script>
 
-<Select editable secondary on:blur={handleBlur} on:change bind:value>
+<DataList editable secondary on:blur={handleBlur} on:change bind:value>
   <option value="" />
   {#each $store.allScreens as screen}
     <option value={screen.route}>{screen.props._instanceName}</option>
   {/each}
-</Select>
+</DataList>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 326abc5683..159093fe8e 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -116,7 +116,7 @@
         control={definition.control}
         label={definition.label}
         key={definition.key}
-        value={componentInstance[definition.key]}
+        value={componentInstance[definition.key] || componentInstance[definition.key].defaultValue}
         {componentInstance}
         {onChange}
         props={{ ...excludeProps(definition, ['control', 'label']) }} />
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 8943ef8e09..296ae26606 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -6,6 +6,8 @@ import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
 import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import { IconSelect } from "components/userInterface/IconSelect"
+import Colorpicker from "@budibase/colorpicker"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -220,16 +222,41 @@ export default {
             settings: [{ label: "URL", key: "url", control: Input }],
           },
         },
-        // {
-        // _component: "@budibase/standard-components/icon",
-        // name: "Icon",
-        // description: "A basic component for displaying icons",
-        // icon: "ri-sun-fill",
-        // children: [],
-        // properties: {
-        // design: { ...all },
-        // },
-        // },
+        {
+          _component: "@budibase/standard-components/icon",
+          name: "Icon",
+          description: "A basic component for displaying icons",
+          icon: "ri-sun-fill",
+          children: [],
+          properties: {
+            design: {},
+            settings: [
+              { label: "Icon", key: "icon", control: IconSelect },
+              {
+                label: "Size",
+                key: "size",
+                control: OptionSelect,
+                defaultValue: "fa-lg",
+                options: [
+                  { value: "fa-xs", label: "xs" },
+                  { value: "fa-sm", label: "sm" },
+                  { value: "fa-lg", label: "lg" },
+                  { value: "fa-2x", label: "2x" },
+                  { value: "fa-3x", label: "3x" },
+                  { value: "fa-5x", label: "5x" },
+                  { value: "fa-7x", label: "7x" },
+                  { value: "fa-10x", label: "10x" },
+                ],
+              },
+              {
+                label: "Color",
+                key: "color",
+                control: Colorpicker,
+                defaultValue: "#000",
+              },
+            ],
+          },
+        },
         {
           _component: "@budibase/standard-components/link",
           name: "Link",
@@ -515,10 +542,30 @@ export default {
                 key: "datasource",
                 control: ModelViewSelect,
               },
-              { label: "Stripe Color", key: "stripeColor", control: Input },
-              { label: "Border Color", key: "borderColor", control: Input },
-              { label: "TH Color", key: "backgroundColor", control: Input },
-              { label: "TH Font Color", key: "color", control: Input },
+              {
+                label: "Stripe Color",
+                key: "stripeColor",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
+              {
+                label: "Border Color",
+                key: "borderColor",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
+              {
+                label: "TH Color",
+                key: "backgroundColor",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
+              {
+                label: "TH Font Color",
+                key: "color",
+                control: Colorpicker,
+                defaultValue: "#FFFFFF",
+              },
               { label: "Table", key: "model", control: ModelSelect },
             ],
           },
diff --git a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
index e2e8b9976b..b96e9f92b3 100644
--- a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
@@ -13,7 +13,7 @@
   async function deleteWorkflow() {
     await workflowStore.actions.delete({
       instanceId,
-      workflow: $workflowStore.currentWorkflow.workflow,
+      workflow: $workflowStore.selectedWorkflow.workflow,
     })
     onClosed()
     notifier.danger("Workflow deleted.")
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
deleted file mode 100644
index fee5811bd8..0000000000
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import deepmerge from "deepmerge"
-  import { Label } from "@budibase/bbui"
-
-  export let value
-
-  let pages = []
-  let components = []
-  let pageName
-
-  let selectedPage
-  let selectedScreen
-
-  $: pages = $store.pages
-  $: selectedPage = pages[pageName]
-  $: screens = selectedPage ? selectedPage._screens : []
-  $: if (selectedPage) {
-    let result = selectedPage
-    for (screen of screens) {
-      result = deepmerge(result, screen)
-    }
-    components = result.props._children
-  }
-</script>
-
-<div class="bb-margin-xl block-field">
-  <Label small forAttr={'page'}>Page</Label>
-  <select class="budibase__input" bind:value={pageName}>
-    {#each Object.keys(pages) as page}
-      <option value={page}>{page}</option>
-    {/each}
-  </select>
-  {#if components.length > 0}
-    <Label small forAttr={'component'}>Component</Label>
-    <select class="budibase__input" bind:value>
-      {#each components as component}
-        <option value={component._id}>{component._id}</option>
-      {/each}
-    </select>
-  {/if}
-</div>
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
index db10b8f3b0..2ea4807d3f 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
@@ -2,13 +2,22 @@
   import { backendUiStore } from "builderStore"
 
   export let value
+  $: modelId = value ? value._id : ""
+
+  function onChange(e) {
+    value = $backendUiStore.models.find(model => model._id === e.target.value)
+  }
 </script>
 
-<div class="bb-margin-xl block-field">
-  <select class="budibase__input" bind:value>
-    <option value="" />
+<div class="block-field">
+  <select
+    class="budibase__input"
+    value={modelId}
+    on:blur={onChange}
+    on:change={onChange}>
+    <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
-      <option value={model}>{model.name}</option>
+      <option value={model._id}>{model.name}</option>
     {/each}
   </select>
 </div>
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
index ffa2a9c1b6..64db828407 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -3,6 +3,14 @@
   import { Input, Label } from "@budibase/bbui"
 
   export let value
+  $: modelId = value && value.model ? value.model._id : ""
+  $: schemaFields = Object.keys(value && value.model ? value.model.schema : {})
+
+  function onChangeModel(e) {
+    value.model = $backendUiStore.models.find(
+      model => model._id === e.target.value
+    )
+  }
 
   function setParsedValue(evt, field) {
     const fieldSchema = value.model.schema[field]
@@ -10,23 +18,27 @@
       value[field] = parseInt(evt.target.value)
       return
     }
-
     value[field] = evt.target.value
   }
 </script>
 
-<div class="bb-margin-xl block-field">
-  <select class="budibase__input" bind:value={value.model}>
+<div class="block-field">
+  <select
+    class="budibase__input"
+    value={modelId}
+    on:blur={onChangeModel}
+    on:change={onChangeModel}>
+    <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
-      <option value={model}>{model.name}</option>
+      <option value={model._id}>{model.name}</option>
     {/each}
   </select>
 </div>
 
-{#if value.model}
+{#if schemaFields.length}
   <div class="bb-margin-xl block-field">
     <Label small forAttr={'fields'}>Fields</Label>
-    {#each Object.keys(value.model.schema) as field}
+    {#each schemaFields as field}
       <div class="bb-margin-xl">
         <Input
           thin
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index cda9dd5ff1..e7419a05df 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { fade } from "svelte/transition"
-  import { onMount, getContext } from "svelte"
+  import { getContext } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
@@ -9,49 +8,35 @@
 
   const { open, close } = getContext("simple-modal")
 
-  const ACCESS_LEVELS = [
-    {
-      name: "Admin",
-      key: "ADMIN",
-      canExecute: true,
-      editable: false,
-    },
-    {
-      name: "Power User",
-      key: "POWER_USER",
-      canExecute: true,
-      editable: false,
-    },
-  ]
-
   let selectedTab = "SETUP"
-  let testResult
 
   $: workflow =
-    $workflowStore.currentWorkflow && $workflowStore.currentWorkflow.workflow
-  $: workflowBlock = $workflowStore.selectedWorkflowBlock
+    $workflowStore.selectedWorkflow && $workflowStore.selectedWorkflow.workflow
 
   function deleteWorkflow() {
     open(
       DeleteWorkflowModal,
-      {
-        onClosed: close,
-      },
+      { onClosed: close },
       { styleContent: { padding: "0" } }
     )
   }
 
   function deleteWorkflowBlock() {
-    workflowStore.actions.deleteWorkflowBlock(workflowBlock)
-    notifier.info("Workflow block deleted.")
+    workflowStore.actions.deleteWorkflowBlock($workflowStore.selectedBlock)
   }
 
-  function testWorkflow() {
-    testResult = "PASSED"
+  async function testWorkflow() {
+    const result = await workflowStore.actions.trigger({
+      workflow: $workflowStore.selectedWorkflow.workflow,
+    })
+    if (result.status === 200) {
+      notifier.success(`Workflow ${workflow.name} triggered successfully.`)
+    } else {
+      notifier.danger(`Failed to trigger workflow ${workflow.name}.`)
+    }
   }
 
   async function saveWorkflow() {
-    const workflow = $workflowStore.currentWorkflow.workflow
     await workflowStore.actions.save({
       instanceId: $backendUiStore.selectedDatabase._id,
       workflow,
@@ -65,38 +50,27 @@
     <span
       class="hoverable"
       class:selected={selectedTab === 'SETUP'}
-      on:click={() => {
-        selectedTab = 'SETUP'
-        testResult = null
-      }}>
+      on:click={() => (selectedTab = 'SETUP')}>
       Setup
     </span>
-    {#if !workflowBlock}
-      <span
-        class="test-tab"
-        class:selected={selectedTab === 'TEST'}
-        on:click={() => (selectedTab = 'TEST')}>
-        Test
-      </span>
-    {/if}
   </header>
-  {#if selectedTab === 'TEST'}
-    <div class="bb-margin-m">
-      {#if testResult}
-        <button
-          transition:fade
-          class:passed={testResult === 'PASSED'}
-          class:failed={testResult === 'FAILED'}
-          class="test-result">
-          {testResult}
-        </button>
-      {/if}
-      <Button secondary wide on:click={testWorkflow}>Test Workflow</Button>
+  {#if $workflowStore.selectedBlock}
+    <WorkflowBlockSetup bind:block={$workflowStore.selectedBlock} />
+    <div class="buttons">
+      <Button green wide data-cy="save-workflow-setup" on:click={saveWorkflow}>
+        Save Workflow
+      </Button>
+      <Button red wide on:click={deleteWorkflowBlock}>Delete Block</Button>
     </div>
-  {/if}
-  {#if selectedTab === 'SETUP'}
-    {#if workflowBlock}
-      <WorkflowBlockSetup {workflowBlock} />
+  {:else if $workflowStore.selectedWorkflow}
+    <div class="panel">
+      <div class="panel-body">
+        <div class="block-label">
+          Workflow
+          <b>{workflow.name}</b>
+        </div>
+      </div>
+      <Button secondary wide on:click={testWorkflow}>Test Workflow</Button>
       <div class="buttons">
         <Button
           green
@@ -105,40 +79,9 @@
           on:click={saveWorkflow}>
           Save Workflow
         </Button>
-        <Button red wide on:click={deleteWorkflowBlock}>Delete Block</Button>
+        <Button red wide on:click={deleteWorkflow}>Delete Workflow</Button>
       </div>
-    {:else if $workflowStore.currentWorkflow}
-      <div class="panel">
-        <div class="panel-body">
-          <div class="block-label">Workflow: {workflow.name}</div>
-          <div class="config-item">
-            <Label small forAttr={'useraccess'}>User Access</Label>
-            <div class="access-levels">
-
-              {#each ACCESS_LEVELS as level}
-                <span class="access-level">
-                  <label>{level.name}</label>
-                  <input
-                    type="checkbox"
-                    disabled={!level.editable}
-                    bind:checked={level.canExecute} />
-                </span>
-              {/each}
-            </div>
-          </div>
-        </div>
-        <div class="buttons">
-          <Button
-            green
-            wide
-            data-cy="save-workflow-setup"
-            on:click={saveWorkflow}>
-            Save Workflow
-          </Button>
-          <Button red wide on:click={deleteWorkflow}>Delete Workflow</Button>
-        </div>
-      </div>
-    {/if}
+    </div>
   {/if}
 </section>
 
@@ -181,10 +124,6 @@
     margin-bottom: 20px;
   }
 
-  .config-item {
-    margin-bottom: 20px;
-  }
-
   header > span {
     color: var(--grey-5);
     margin-right: 20px;
@@ -205,35 +144,8 @@
     gap: 12px;
   }
 
-  .access-level {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 20px;
-  }
-
   .access-level label {
     font-weight: normal;
     color: var(--ink);
   }
-
-  .test-result {
-    border: none;
-    width: 100%;
-    border-radius: 3px;
-    height: 32px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--white);
-    text-align: center;
-    margin-bottom: 10px;
-  }
-
-  .passed {
-    background: var(--green);
-  }
-
-  .failed {
-    background: var(--red);
-  }
 </style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 35ab01b544..5e889a32d0 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -1,55 +1,45 @@
 <script>
-  import { backendUiStore, store } from "builderStore"
-  import ComponentSelector from "./ParamInputs/ComponentSelector.svelte"
   import ModelSelector from "./ParamInputs/ModelSelector.svelte"
   import RecordSelector from "./ParamInputs/RecordSelector.svelte"
   import { Input, TextArea, Select } from "@budibase/bbui"
 
-  export let workflowBlock
-
-  let params
-
-  $: workflowParams = workflowBlock.params
-    ? Object.entries(workflowBlock.params)
-    : []
+  export let block
+  $: params = block.params ? Object.entries(block.params) : []
 </script>
 
-<label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
-{#each workflowParams as [parameter, type]}
-  <div class="block-field">
-    <label class="label">{parameter}</label>
-    {#if Array.isArray(type)}
-      <Select bind:value={workflowBlock.args[parameter]} thin>
-        {#each type as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </Select>
-    {:else if type === 'component'}
-      <ComponentSelector bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'accessLevel'}
-      <Select bind:value={workflowBlock.args[parameter]} thin>
-        <option value="ADMIN">Admin</option>
-        <option value="POWER_USER">Power User</option>
-      </Select>
-    {:else if type === 'password'}
-      <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'number'}
-      <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'longText'}
-      <TextArea
-        type="text"
-        thin
-        bind:value={workflowBlock.args[parameter]}
-        label="" />
-    {:else if type === 'model'}
-      <ModelSelector bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'record'}
-      <RecordSelector value={workflowBlock.args[parameter]} />
-    {:else if type === 'string'}
-      <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
-    {/if}
-  </div>
-{/each}
+<div class="container">
+  <div class="selected-label">{block.name}</div>
+  {#each params as [parameter, type]}
+    <div class="block-field">
+      <label class="label">{parameter}</label>
+      {#if Array.isArray(type)}
+        <Select bind:value={block.args[parameter]} thin secondary>
+          <option value="">Choose an option</option>
+          {#each type as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </Select>
+      {:else if type === 'accessLevel'}
+        <Select bind:value={block.args[parameter]} thin secondary>
+          <option value="ADMIN">Admin</option>
+          <option value="POWER_USER">Power User</option>
+        </Select>
+      {:else if type === 'password'}
+        <Input type="password" thin bind:value={block.args[parameter]} />
+      {:else if type === 'number'}
+        <Input type="number" thin bind:value={block.args[parameter]} />
+      {:else if type === 'longText'}
+        <TextArea type="text" thin bind:value={block.args[parameter]} />
+      {:else if type === 'model'}
+        <ModelSelector bind:value={block.args[parameter]} />
+      {:else if type === 'record'}
+        <RecordSelector bind:value={block.args[parameter]} />
+      {:else if type === 'string'}
+        <Input type="text" thin bind:value={block.args[parameter]} />
+      {/if}
+    </div>
+  {/each}
+</div>
 
 <style>
   .block-field {
@@ -57,16 +47,19 @@
   }
 
   label {
-    text-transform: capitalize;
     font-size: 14px;
+    font-family: sans-serif;
     font-weight: 500;
+    color: var(--ink);
+    margin-bottom: 12px;
+    text-transform: capitalize;
     margin-top: 20px;
   }
 
   .selected-label {
-    text-transform: capitalize;
-    font-size: 14px;
     font-weight: 500;
+    font-size: 14px;
+    color: var(--grey-7);
   }
 
   textarea {
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
index 86f873b719..b6dabc55fd 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@@ -1,30 +1,22 @@
 <script>
-  import { onMount } from "svelte"
+  import { afterUpdate } from "svelte"
   import { workflowStore, backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import Flowchart from "./flowchart/FlowChart.svelte"
 
-  let selectedWorkflow
-  let uiTree
-  let instanceId = $backendUiStore.selectedDatabase._id
-
-  $: selectedWorkflow = $workflowStore.currentWorkflow
-
-  $: workflowLive = selectedWorkflow && selectedWorkflow.workflow.live
-
-  $: uiTree = selectedWorkflow ? selectedWorkflow.createUiTree() : []
-
+  $: workflow =
+    $workflowStore.selectedWorkflow && $workflowStore.selectedWorkflow.workflow
+  $: workflowLive = workflow && workflow.live
   $: instanceId = $backendUiStore.selectedDatabase._id
 
   function onSelect(block) {
     workflowStore.update(state => {
-      state.selectedWorkflowBlock = block
+      state.selectedBlock = block
       return state
     })
   }
 
   function setWorkflowLive(live) {
-    const { workflow } = selectedWorkflow
     workflow.live = live
     workflowStore.actions.save({ instanceId, workflow })
     if (live) {
@@ -36,32 +28,42 @@
 </script>
 
 <section>
-  <Flowchart blocks={uiTree} {onSelect} />
-  <footer>
-    {#if selectedWorkflow}
-      <button
-        class:highlighted={workflowLive}
-        class:hoverable={workflowLive}
-        class="stop-button hoverable">
-        <i class="ri-stop-fill" on:click={() => setWorkflowLive(false)} />
-      </button>
-      <button
-        class:highlighted={!workflowLive}
-        class:hoverable={!workflowLive}
-        class="play-button hoverable"
-        data-cy="activate-workflow"
-        on:click={() => setWorkflowLive(true)}>
-        <i class="ri-play-fill" />
-      </button>
-    {/if}
-  </footer>
+  <Flowchart {workflow} {onSelect} />
 </section>
+<footer>
+  {#if workflow}
+    <button
+      class:highlighted={workflowLive}
+      class:hoverable={workflowLive}
+      class="stop-button hoverable">
+      <i class="ri-stop-fill" on:click={() => setWorkflowLive(false)} />
+    </button>
+    <button
+      class:highlighted={!workflowLive}
+      class:hoverable={!workflowLive}
+      class="play-button hoverable"
+      data-cy="activate-workflow"
+      on:click={() => setWorkflowLive(true)}>
+      <i class="ri-play-fill" />
+    </button>
+  {/if}
+</footer>
 
 <style>
+  section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+  }
+
   footer {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    bottom: 20px;
+    right: 30px;
     display: flex;
     align-items: flex-end;
   }
@@ -77,7 +79,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 24px;
+  }
+  footer > button:first-child {
+    margin-right: 20px;
   }
 
   .play-button.highlighted {
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/Arrow.svelte
index f5b855c341..eaf84c3088 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/Arrow.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/Arrow.svelte
@@ -7,3 +7,9 @@
   <path d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z" fill="#ADAEC4" />
   <rect x="4" width="1" height="65" fill="#ADAEC4" />
 </svg>
+
+<style>
+  svg {
+    margin: 8px 0;
+  }
+</style>
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
index a1f488fecb..78071f9c84 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
@@ -1,24 +1,52 @@
 <script>
   import FlowItem from "./FlowItem.svelte"
   import Arrow from "./Arrow.svelte"
+  import { flip } from "svelte/animate"
+  import { fade, fly } from "svelte/transition"
 
-  export let blocks = []
+  export let workflow
   export let onSelect
+  let blocks
+
+  $: {
+    blocks = []
+    if (workflow) {
+      if (workflow.definition.trigger) {
+        blocks.push(workflow.definition.trigger)
+      }
+      blocks = blocks.concat(workflow.definition.steps || [])
+    }
+  }
 </script>
 
 <section class="canvas">
-  {#each blocks as block, idx}
-    <FlowItem {onSelect} {block} />
-    {#if idx !== blocks.length - 1}
-      <Arrow />
-    {/if}
+  {#each blocks as block, idx (block.id)}
+    <div
+      class="block"
+      animate:flip={{ duration: 600 }}
+      in:fade|local
+      out:fly|local={{ x: 100 }}>
+      <FlowItem {onSelect} {block} />
+      {#if idx !== blocks.length - 1}
+        <Arrow />
+      {/if}
+    </div>
   {/each}
 </section>
 
 <style>
-  .canvas {
+  section {
+    position: absolute;
+    padding: 20px 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
   }
+
+  .block {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index e680375833..2ee7b92539 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
@@ -1,15 +1,21 @@
 <script>
-  import { fade } from "svelte/transition"
+  import mustache from "mustache"
+  import { workflowStore } from "builderStore"
 
   export let onSelect
   export let block
+  let selected
+
+  $: selected =
+    $workflowStore.selectedBlock != null &&
+    $workflowStore.selectedBlock.id === block.id
 
   function selectBlock() {
     onSelect(block)
   }
 </script>
 
-<div transition:fade class={`${block.type} hoverable`} on:click={selectBlock}>
+<div class={`${block.type} hoverable`} class:selected on:click={selectBlock}>
   <header>
     {#if block.type === 'TRIGGER'}
       <i class="ri-lightbulb-fill" />
@@ -24,7 +30,7 @@
   </header>
   <hr />
   <p>
-    {@html block.body}
+    {@html mustache.render(block.tagline, block.args)}
   </p>
 </div>
 
@@ -32,8 +38,8 @@
   div {
     width: 320px;
     padding: 20px;
-    border-radius: 5px;
-    transition: 0.3s all;
+    border-radius: var(--border-radius-m);
+    transition: 0.3s all ease;
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
     background-color: var(--ink);
     font-size: 16px;
@@ -69,9 +75,12 @@
 
   p {
     color: inherit;
+    margin-bottom: 0;
   }
 
+  div.selected,
   div:hover {
-    transform: scale(1.05);
+    transform: scale(1.1);
+    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
index 3a071ad00f..6a5e8c4730 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@@ -1,82 +1,39 @@
 <script>
-  import { onMount } from "svelte"
-  import { backendUiStore, workflowStore } from "builderStore"
-  import { WorkflowList } from "../"
+  import { workflowStore } from "builderStore"
   import WorkflowBlock from "./WorkflowBlock.svelte"
-  import blockDefinitions from "../blockDefinitions"
+  import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
 
   let selectedTab = "TRIGGER"
-  let definitions = []
-
-  $: definitions = Object.entries(blockDefinitions[selectedTab])
+  let buttonProps = []
+  $: blocks = Object.entries($workflowStore.blockDefinitions[selectedTab])
 
   $: {
-    if (
-      $workflowStore.currentWorkflow.hasTrigger() &&
-      selectedTab === "TRIGGER"
-    ) {
-      selectedTab = "ACTION"
+    if ($workflowStore.selectedWorkflow.hasTrigger()) {
+      buttonProps = [
+        { value: "ACTION", text: "Action" },
+        { value: "LOGIC", text: "Logic" },
+      ]
+      if (selectedTab === "TRIGGER") {
+        selectedTab = "ACTION"
+      }
+    } else {
+      buttonProps = [{ value: "TRIGGER", text: "Trigger" }]
+      if (selectedTab !== "TRIGGER") {
+        selectedTab = "TRIGGER"
+      }
     }
   }
+
+  function onChangeTab(tab) {
+    selectedTab = tab
+  }
 </script>
 
 <section>
-  <div class="subtabs">
-    {#if !$workflowStore.currentWorkflow.hasTrigger()}
-      <span
-        class="hoverable"
-        class:selected={'TRIGGER' === selectedTab}
-        on:click={() => (selectedTab = 'TRIGGER')}>
-        Triggers
-      </span>
-    {/if}
-    <span
-      class="hoverable"
-      class:selected={'ACTION' === selectedTab}
-      on:click={() => (selectedTab = 'ACTION')}>
-      Actions
-    </span>
-    <span
-      class="hoverable"
-      class:selected={'LOGIC' === selectedTab}
-      on:click={() => (selectedTab = 'LOGIC')}>
-      Logic
-    </span>
-  </div>
+  <FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
   <div id="blocklist">
-    {#each definitions as [actionId, blockDefinition]}
-      <WorkflowBlock {blockDefinition} {actionId} blockType={selectedTab} />
+    {#each blocks as [stepId, blockDefinition]}
+      <WorkflowBlock {blockDefinition} {stepId} blockType={selectedTab} />
     {/each}
   </div>
 </section>
-
-<style>
-  .subtabs {
-    margin-top: 20px;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr 1fr 1fr;
-    margin-bottom: 12px;
-  }
-
-  .subtabs span {
-    transition: 0.3s all;
-    text-align: center;
-    color: var(--grey-7);
-    font-weight: 400;
-    padding: 8px 16px;
-    text-rendering: optimizeLegibility;
-    border: none !important;
-    outline: none;
-  }
-
-  .subtabs span.selected {
-    background: var(--grey-3);
-    color: var(--ink);
-    border-radius: 5px;
-  }
-
-  .subtabs span:not(.selected) {
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
index 1882f91b7a..85ebd28e5b 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@@ -1,15 +1,15 @@
 <script>
   import { workflowStore } from "builderStore"
 
-  export let blockType
   export let blockDefinition
-  export let actionId
+  export let stepId
+  export let blockType
 
   function addBlockToWorkflow() {
     workflowStore.actions.addBlockToWorkflow({
       ...blockDefinition,
       args: blockDefinition.args || {},
-      actionId,
+      stepId,
       type: blockType,
     })
   }
@@ -18,7 +18,7 @@
 <div
   class="workflow-block hoverable"
   on:click={addBlockToWorkflow}
-  data-cy={actionId}>
+  data-cy={stepId}>
   <div>
     <i class={blockDefinition.icon} />
   </div>
@@ -31,11 +31,11 @@
 <style>
   .workflow-block {
     display: grid;
-    grid-template-columns: 40px auto;
+    grid-template-columns: 20px auto;
     align-items: center;
     margin-top: 16px;
-    padding: 16px 0px;
-    border-radius: var(--border);
+    padding: 12px;
+    border-radius: var(--border-radius-m);
   }
 
   .workflow-block:hover {
@@ -43,7 +43,7 @@
   }
 
   .workflow-text {
-    margin-left: 12px;
+    margin-left: 16px;
   }
 
   .icon {
@@ -64,6 +64,7 @@
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 5px;
+    margin-top: 0;
   }
 
   p {
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index 5c62589393..c5276227bc 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -8,9 +8,9 @@
 
   const { open, close } = getContext("simple-modal")
 
-  $: currentWorkflowId =
-    $workflowStore.currentWorkflow &&
-    $workflowStore.currentWorkflow.workflow._id
+  $: selectedWorkflowId =
+    $workflowStore.selectedWorkflow &&
+    $workflowStore.selectedWorkflow.workflow._id
 
   function newWorkflow() {
     open(
@@ -33,7 +33,7 @@
     {#each $workflowStore.workflows as workflow}
       <li
         class="workflow-item"
-        class:selected={workflow._id === currentWorkflowId}
+        class:selected={workflow._id === selectedWorkflowId}
         on:click={() => workflowStore.actions.select(workflow)}>
         <i class="ri-stackshare-line" class:live={workflow.live} />
         {workflow.name}
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index f5cd0c440d..14e1e2772a 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -1,11 +1,9 @@
 <script>
-  import { onMount } from "svelte"
-  import { backendUiStore, workflowStore } from "builderStore"
-  import { WorkflowList, BlockList } from "./"
-  import blockDefinitions from "./blockDefinitions"
+  import { workflowStore } from "builderStore"
+  import WorkflowList from "./WorkflowList/WorkflowList.svelte"
+  import BlockList from "./BlockList/BlockList.svelte"
 
   let selectedTab = "WORKFLOWS"
-  let definitions = []
 </script>
 
 <header>
@@ -16,7 +14,7 @@
     on:click={() => (selectedTab = 'WORKFLOWS')}>
     Workflows
   </span>
-  {#if $workflowStore.currentWorkflow}
+  {#if $workflowStore.selectedWorkflow}
     <span
       data-cy="add-workflow-component"
       class="hoverable"
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index c56d6e4a1a..a011b5508c 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -12,11 +12,13 @@
   <div class="content">
     <slot />
   </div>
-  <div class="nav">
-    <div class="inner">
-      <SetupPanel />
+  {#if $workflowStore.selectedWorkflow}
+    <div class="nav">
+      <div class="inner">
+        <SetupPanel />
+      </div>
     </div>
-  </div>
+  {/if}
 </div>
 
 <style>
@@ -35,13 +37,11 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 20px 40px;
   }
 
   .nav {
     overflow: auto;
     width: 300px;
-    border-right: 1px solid var(--grey-2);
     background: var(--white);
   }
 
diff --git a/packages/builder/tests/fetchBindableProperties.spec.js b/packages/builder/tests/fetchBindableProperties.spec.js
index 052d98d8ea..76e8e33f05 100644
--- a/packages/builder/tests/fetchBindableProperties.spec.js
+++ b/packages/builder/tests/fetchBindableProperties.spec.js
@@ -28,7 +28,8 @@ describe("fetch bindable properties", () => {
       ...testData()
     })
     const contextBindings = result.filter(r => r.instance._id === "list-id" && r.type==="context")
-    expect(contextBindings.length).toBe(2)
+    // 2 fields + _id + _rev 
+    expect(contextBindings.length).toBe(4)
     
     const namebinding = contextBindings.find(b => b.runtimeBinding === "data.name")
     expect(namebinding).toBeDefined()
@@ -37,6 +38,10 @@ describe("fetch bindable properties", () => {
     const descriptionbinding = contextBindings.find(b => b.runtimeBinding === "data.description")
     expect(descriptionbinding).toBeDefined()
     expect(descriptionbinding.readableBinding).toBe("list-name.Test Model.description")
+    
+    const idbinding = contextBindings.find(b => b.runtimeBinding === "data._id")
+    expect(idbinding).toBeDefined()
+    expect(idbinding.readableBinding).toBe("list-name.Test Model._id")
   })
 
   it("should return model schema, for grantparent context", () => {
@@ -45,7 +50,8 @@ describe("fetch bindable properties", () => {
       ...testData()
     })
     const contextBindings = result.filter(r => r.type==="context")
-    expect(contextBindings.length).toBe(4)
+    // 2 fields + _id + _rev ... x 2 models
+    expect(contextBindings.length).toBe(8)
     
     const namebinding_parent = contextBindings.find(b => b.runtimeBinding === "parent.data.name")
     expect(namebinding_parent).toBeDefined()
@@ -120,7 +126,7 @@ const testData = () => {
           _id: "list-id",
           _component: "@budibase/standard-components/list",
           _instanceName: "list-name",
-          model: "test-model-id",
+          model: { isModel: true, modelId: "test-model-id", label: "Test Model", name: "all_test-model-id" },
           _children: [
             {
               _id: "list-item-heading-id",
@@ -138,7 +144,7 @@ const testData = () => {
               _id: "child-list-id",
               _component: "@budibase/standard-components/list",
               _instanceName: "child-list-name",
-              model: "test-model-id",
+              model: { isModel: true, modelId: "test-model-id", label: "Test Model", name: "all_test-model-id"},
               _children: [
                 {
                   _id: "child-list-item-heading-id",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index a1e5d288b0..e2ed2a824c 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -688,14 +688,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.32.0":
-  version "1.32.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.32.0.tgz#4b099e51cf8aebfc963a763bb9687994a2ee26a8"
+"@budibase/bbui@^1.33.0":
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.33.0.tgz#216b24dd815f45880e9795e66b04848329b0390f"
+  integrity sha512-Rrt5eLbea014TIfAbT40kP0D0AWNUi8Q0kDr3UZO6Aq4UXgjc0f53ZuJ7Kb66YRDWrqiucjf1FtvOUs3/YaD6g==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
 
-"@budibase/client@^0.1.19":
+"@budibase/client@^0.1.21":
   version "0.1.21"
   resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.21.tgz#db414445c132b373f6c25e39d62628eb60cd8ac3"
   integrity sha512-/ju0vYbWh9MUjmxkGNlOL4S/VQd4p5mbz5rHu0yt55ak9t/yyzI6PzBBxlucBeRbXYd9OFynFjy1pvYt1v+z9Q==
@@ -756,6 +757,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@fortawesome/fontawesome-free@^5.14.0":
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz#a371e91029ebf265015e64f81bfbf7d228c9681f"
+
 "@hapi/address@^2.1.2":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1382,7 +1387,6 @@ array-equal@^1.0.0:
 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-union@^2.1.0:
   version "2.1.0"
@@ -1441,7 +1445,6 @@ atob@^2.1.2:
 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"
 
@@ -1816,10 +1819,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-
 cli-cursor@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@@ -1967,10 +1966,6 @@ core-js-pure@^3.0.0:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
 
-core-js@^3.1.3:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2405,7 +2400,6 @@ decode-uri-component@^0.2.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"
@@ -2594,7 +2588,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
 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"
@@ -2611,7 +2604,6 @@ es-abstract@^1.17.4:
 es-abstract@^1.18.0-next.0:
   version "1.18.0-next.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
-  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
@@ -2629,7 +2621,6 @@ es-abstract@^1.18.0-next.0:
 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"
@@ -2889,13 +2880,6 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-feather-icons@^4.21.0:
-  version "4.28.0"
-  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
-  dependencies:
-    classnames "^2.2.5"
-    core-js "^3.1.3"
-
 figures@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -3329,7 +3313,6 @@ is-accessor-descriptor@^1.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"
@@ -3338,7 +3321,6 @@ is-arrayish@^0.2.1:
 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"
@@ -3349,7 +3331,6 @@ is-binary-path@~2.1.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"
@@ -3362,7 +3343,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
 is-callable@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
-  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
 
 is-ci@^2.0.0:
   version "2.0.0"
@@ -3450,7 +3430,6 @@ is-installed-globally@^0.3.2:
 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-module@^1.0.0:
   version "1.0.0"
@@ -3459,12 +3438,10 @@ is-module@^1.0.0:
 is-negative-zero@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
 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"
@@ -3525,14 +3502,12 @@ is-regex@^1.0.5:
 is-regex@^1.1.0, is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
   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"
@@ -3545,7 +3520,6 @@ is-stream@^2.0.0:
 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"
@@ -3556,7 +3530,6 @@ is-symbol@^1.0.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"
@@ -3570,12 +3543,10 @@ is-typedarray@~1.0.0:
 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"
@@ -3600,7 +3571,6 @@ isarray@1.0.0, isarray@~1.0.0:
 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==
 
 isbuffer@~0.0.0:
   version "0.0.0"
@@ -4715,12 +4685,10 @@ object-inspect@^1.7.0:
 object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
 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"
@@ -5238,7 +5206,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
 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"
@@ -5246,7 +5213,6 @@ regexp.prototype.flags@^1.3.0:
 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==
 
 regexpu-core@^4.7.0:
   version "4.7.0"
@@ -5655,7 +5621,6 @@ shortid@^2.2.15:
 side-channel@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
   dependencies:
     es-abstract "^1.18.0-next.0"
     object-inspect "^1.8.0"
@@ -5996,11 +5961,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte-filepond@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/svelte-filepond/-/svelte-filepond-0.0.1.tgz#7c20379213dac746192499d3d1de649d6db51c4b"
-  integrity sha512-R5z/Gj/2VSdV70GxvW226ww4zrVyV2EFTXrsWIdn7sEB7uYWIJvvciUNQVTfYZfcAgGsa4gprGsuqWNG3auSKw==
-
 svelte-flatpickr@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
@@ -6363,7 +6323,6 @@ whatwg-url@^8.0.0:
 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"
@@ -6374,7 +6333,6 @@ which-boxed-primitive@^1.0.1:
 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"
@@ -6388,7 +6346,6 @@ which-module@^2.0.0:
 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"
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 45aafc54a8..f00d7a1240 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "budibase",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Budibase CLI",
   "repository": "https://github.com/Budibase/Budibase",
   "homepage": "https://www.budibase.com",
@@ -17,7 +17,7 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/server": "^0.1.19",
+    "@budibase/server": "^0.1.21",
     "@inquirer/password": "^0.0.6-alpha.0",
     "chalk": "^2.4.2",
     "dotenv": "^8.2.0",
diff --git a/packages/client/package.json b/packages/client/package.json
index 26dd996e03..1f0ef26422 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",
diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js
index 1b829f16c6..34441d563b 100644
--- a/packages/client/src/api/index.js
+++ b/packages/client/src/api/index.js
@@ -1,5 +1,4 @@
 import { authenticate } from "./authenticate"
-import { triggerWorkflow } from "./workflow"
 import appStore from "../state/store"
 
 const apiCall = method => async ({ url, body }) => {
@@ -53,7 +52,49 @@ const apiOpts = {
   delete: del,
 }
 
+const createRecord = async params =>
+  await post({
+    url: `/api/${params.modelId}/records`,
+    body: makeRecordRequestBody(params),
+  })
+
+const updateRecord = async params => {
+  const record = makeRecordRequestBody(params)
+  record._id = params._id
+  await patch({
+    url: `/api/${params.modelId}/records/${params._id}`,
+    body: record,
+  })
+}
+
+const makeRecordRequestBody = parameters => {
+  const body = {}
+  for (let fieldName in parameters.fields) {
+    const field = parameters.fields[fieldName]
+
+    // ensure fields sent are of the correct type
+    if (field.type === "boolean") {
+      if (field.value === "true") body[fieldName] = true
+      if (field.value === "false") body[fieldName] = false
+    } else if (field.type === "number") {
+      const val = parseFloat(field.value)
+      if (!isNaN(val)) {
+        body[fieldName] = val
+      }
+    } else if (field.type === "datetime") {
+      const date = new Date(field.value)
+      if (!isNaN(date.getTime())) {
+        body[fieldName] = date.toISOString()
+      }
+    } else {
+      body[fieldName] = field.value
+    }
+  }
+  return body
+}
+
 export default {
   authenticate: authenticate(apiOpts),
-  triggerWorkflow: triggerWorkflow(apiOpts),
+  createRecord,
+  updateRecord,
 }
diff --git a/packages/client/src/api/workflow/actions.js b/packages/client/src/api/workflow/actions.js
deleted file mode 100644
index 09ba734231..0000000000
--- a/packages/client/src/api/workflow/actions.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
-
-export default {
-  NAVIGATE: () => {
-    // TODO client navigation
-  },
-  DELAY: async ({ args }) => await delay(args.time),
-  FILTER: ({ args }) => {
-    const { field, condition, value } = args
-    switch (condition) {
-      case "equals":
-        if (field !== value) return
-        break
-      default:
-        return
-    }
-  },
-}
diff --git a/packages/client/src/api/workflow/index.js b/packages/client/src/api/workflow/index.js
deleted file mode 100644
index 4a15d04772..0000000000
--- a/packages/client/src/api/workflow/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import renderTemplateString from "../../state/renderTemplateString"
-import appStore from "../../state/store"
-import Orchestrator from "./orchestrator"
-import clientActions from "./actions"
-
-// Execute a workflow from a running budibase app
-export const clientStrategy = ({ api }) => ({
-  context: {},
-  bindContextArgs: function(args) {
-    const mappedArgs = { ...args }
-
-    // bind the workflow action args to the workflow context, if required
-    for (let arg in args) {
-      const argValue = args[arg]
-
-      // We don't want to render mustache templates on non-strings
-      if (typeof argValue !== "string") continue
-
-      // Render the string with values from the workflow context and state
-      mappedArgs[arg] = renderTemplateString(argValue, {
-        context: this.context,
-        state: appStore.get(),
-      })
-    }
-
-    return mappedArgs
-  },
-  run: async function(workflow) {
-    for (let block of workflow.steps) {
-      // This code gets run in the browser
-      if (block.environment === "CLIENT") {
-        const action = clientActions[block.actionId]
-        await action({
-          context: this.context,
-          args: this.bindContextArgs(block.args),
-          id: block.id,
-        })
-      }
-
-      // this workflow block gets executed on the server
-      if (block.environment === "SERVER") {
-        const EXECUTE_WORKFLOW_URL = `/api/workflows/action`
-        const response = await api.post({
-          url: EXECUTE_WORKFLOW_URL,
-          body: {
-            action: block.actionId,
-            args: this.bindContextArgs(block.args, api),
-          },
-        })
-
-        this.context = {
-          ...this.context,
-          [block.actionId]: response,
-        }
-      }
-    }
-  },
-})
-
-export const triggerWorkflow = api => async ({ workflow }) => {
-  const workflowOrchestrator = new Orchestrator(api)
-  workflowOrchestrator.strategy = clientStrategy
-
-  const EXECUTE_WORKFLOW_URL = `/api/workflows/${workflow}`
-  const workflowDefinition = await api.get({ url: EXECUTE_WORKFLOW_URL })
-
-  workflowOrchestrator.execute(workflowDefinition)
-}
diff --git a/packages/client/src/api/workflow/orchestrator.js b/packages/client/src/api/workflow/orchestrator.js
deleted file mode 100644
index b1d17fac59..0000000000
--- a/packages/client/src/api/workflow/orchestrator.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * The workflow orchestrator is a class responsible for executing workflows.
- * It relies on the strategy pattern, which allows composable behaviour to be
- * passed into its execute() function. This allows custom execution behaviour based
- * on where the orchestrator is run.
- *
- */
-export default class Orchestrator {
-  constructor(api) {
-    this.api = api
-  }
-
-  set strategy(strategy) {
-    this._strategy = strategy({ api: this.api })
-  }
-
-  async execute(workflow) {
-    if (workflow.live) {
-      this._strategy.run(workflow.definition)
-    }
-  }
-}
diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js
index 52437f2a7a..233abc0f58 100644
--- a/packages/client/src/createApp.js
+++ b/packages/client/src/createApp.js
@@ -50,7 +50,6 @@ export const createApp = ({
       treeNode,
       onScreenSlotRendered,
       setupState: stateManager.setup,
-      getCurrentState: stateManager.getCurrentState,
     })
 
     return getInitialiseParams
diff --git a/packages/client/src/state/bbComponentApi.js b/packages/client/src/state/bbComponentApi.js
index 44b39facbf..99503bb2b9 100644
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@@ -1,12 +1,13 @@
 import setBindableComponentProp from "./setBindableComponentProp"
 import { attachChildren } from "../render/attachChildren"
+import store from "../state/store"
 
 export const trimSlash = str => str.replace(/^\/+|\/+$/g, "")
 
 export const bbFactory = ({
   componentLibraries,
   onScreenSlotRendered,
-  getCurrentState,
+  runEventActions,
 }) => {
   const apiCall = method => (url, body) => {
     return fetch(url, {
@@ -26,13 +27,6 @@ export const bbFactory = ({
     delete: apiCall("DELETE"),
   }
 
-  const safeCallEvent = (event, context) => {
-    const isFunction = obj =>
-      !!(obj && obj.constructor && obj.call && obj.apply)
-
-    if (isFunction(event)) event(context)
-  }
-
   return (treeNode, setupState) => {
     const attachParams = {
       componentLibraries,
@@ -44,12 +38,18 @@ export const bbFactory = ({
     return {
       attachChildren: attachChildren(attachParams),
       props: treeNode.props,
-      call: safeCallEvent,
+      call: async eventName =>
+        eventName &&
+        (await runEventActions(
+          treeNode.props[eventName],
+          store.getState(treeNode.contextStoreKey)
+        )),
       setBinding: setBindableComponentProp(treeNode),
       api,
       parent,
+      store: store.getStore(treeNode.contextStoreKey),
       // these parameters are populated by screenRouter
-      routeParams: () => getCurrentState()["##routeParams"],
+      routeParams: () => store.getState()["##routeParams"],
     }
   }
 }
diff --git a/packages/client/src/state/eventHandlers.js b/packages/client/src/state/eventHandlers.js
index 56e760e555..788ebf857f 100644
--- a/packages/client/src/state/eventHandlers.js
+++ b/packages/client/src/state/eventHandlers.js
@@ -1,20 +1,38 @@
-import api from "../api"
+import renderTemplateString from "./renderTemplateString"
 
 export const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType"
 
 export const eventHandlers = routeTo => {
-  const handler = (parameters, execute) => ({
-    execute,
-    parameters,
-  })
-
-  return {
-    "Navigate To": handler(["url"], param => routeTo(param && param.url)),
-    "Trigger Workflow": handler(["workflow"], api.triggerWorkflow),
+  const handlers = {
+    "Navigate To": param => routeTo(param && param.url),
   }
+
+  // when an event is called, this is what gets run
+  const runEventActions = async (actions, state) => {
+    if (!actions) return
+    // calls event handlers sequentially
+    for (let action of actions) {
+      const handler = handlers[action[EVENT_TYPE_MEMBER_NAME]]
+      const parameters = createParameters(action.parameters, state)
+      if (handler) {
+        await handler(parameters)
+      }
+    }
+  }
+
+  return runEventActions
 }
 
-export const isEventType = prop =>
-  Array.isArray(prop) &&
-  prop.length > 0 &&
-  !prop[0][EVENT_TYPE_MEMBER_NAME] === undefined
+// this will take a parameters obj, iterate all keys, and do a mustache render
+// for every string. It will work recursively if it encounnters an {}
+const createParameters = (parameterTemplateObj, state) => {
+  const parameters = {}
+  for (let key in parameterTemplateObj) {
+    if (typeof parameterTemplateObj[key] === "string") {
+      parameters[key] = renderTemplateString(parameterTemplateObj[key], state)
+    } else if (typeof parameterTemplateObj[key] === "object") {
+      parameters[key] = createParameters(parameterTemplateObj[key], state)
+    }
+  }
+  return parameters
+}
diff --git a/packages/client/src/state/runEventHandler.js b/packages/client/src/state/runEventHandler.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/client/src/state/stateManager.js b/packages/client/src/state/stateManager.js
index fbfb39b7a4..b753d2f346 100644
--- a/packages/client/src/state/stateManager.js
+++ b/packages/client/src/state/stateManager.js
@@ -1,8 +1,4 @@
-import {
-  isEventType,
-  eventHandlers,
-  EVENT_TYPE_MEMBER_NAME,
-} from "./eventHandlers"
+import { eventHandlers } from "./eventHandlers"
 import { bbFactory } from "./bbComponentApi"
 import renderTemplateString from "./renderTemplateString"
 import appStore from "./store"
@@ -25,33 +21,23 @@ export const createStateManager = ({
   onScreenSlotRendered,
   routeTo,
 }) => {
-  let handlerTypes = eventHandlers(routeTo)
-
-  // creating a reference to the current state
-  // this avoids doing store.get() ... which is expensive on
-  // hot paths, according to the svelte docs.
-  // the state object reference never changes (although it's internals do)
-  // so this should work fine for us
-  let currentState
-  appStore.subscribe(s => (currentState = s))
-  const getCurrentState = () => currentState
+  let runEventActions = eventHandlers(routeTo)
 
   const bb = bbFactory({
-    getCurrentState,
     componentLibraries,
     onScreenSlotRendered,
+    runEventActions,
   })
 
-  const setup = _setup({ handlerTypes, getCurrentState, bb })
+  const setup = _setup(bb)
 
   return {
     setup,
     destroy: () => {},
-    getCurrentState,
   }
 }
 
-const _setup = ({ handlerTypes, getCurrentState, bb }) => node => {
+const _setup = bb => node => {
   const props = node.props
   const initialProps = { ...props }
 
@@ -70,53 +56,10 @@ const _setup = ({ handlerTypes, getCurrentState, bb }) => node => {
         node.stateBound = true
       }
     }
-
-    if (isEventType(propValue)) {
-      const state = appStore.getState(node.contextStoreKey)
-      const handlersInfos = []
-      for (let event of propValue) {
-        const handlerInfo = {
-          handlerType: event[EVENT_TYPE_MEMBER_NAME],
-          parameters: event.parameters,
-        }
-
-        const resolvedParams = {}
-        for (let paramName in handlerInfo.parameters) {
-          const paramValue = handlerInfo.parameters[paramName]
-          resolvedParams[paramName] = () =>
-            renderTemplateString(paramValue, state)
-        }
-
-        handlerInfo.parameters = resolvedParams
-        handlersInfos.push(handlerInfo)
-      }
-
-      if (handlersInfos.length === 0) {
-        initialProps[propName] = doNothing
-      } else {
-        initialProps[propName] = async context => {
-          for (let handlerInfo of handlersInfos) {
-            const handler = makeHandler(handlerTypes, handlerInfo)
-            await handler(context)
-          }
-        }
-      }
-    }
   }
 
-  const setup = _setup({ handlerTypes, getCurrentState, bb })
+  const setup = _setup(bb)
   initialProps._bb = bb(node, setup)
 
   return initialProps
 }
-
-const makeHandler = (handlerTypes, handlerInfo) => {
-  const handlerType = handlerTypes[handlerInfo.handlerType]
-  return async context => {
-    const parameters = {}
-    for (let paramName in handlerInfo.parameters) {
-      parameters[paramName] = handlerInfo.parameters[paramName](context)
-    }
-    await handlerType.execute(parameters)
-  }
-}
diff --git a/packages/client/src/state/store.js b/packages/client/src/state/store.js
index 5b1ac54375..6464589b03 100644
--- a/packages/client/src/state/store.js
+++ b/packages/client/src/state/store.js
@@ -11,6 +11,7 @@ const contextStoreKey = (dataProviderId, childIndex) =>
   `${dataProviderId}${childIndex >= 0 ? ":" + childIndex : ""}`
 
 // creates a store for a datacontext (e.g. each item in a list component)
+// overrides store if already exists
 const create = (data, dataProviderId, childIndex, parentContextStoreId) => {
   const key = contextStoreKey(dataProviderId, childIndex)
   const state = { data }
@@ -22,14 +23,13 @@ const create = (data, dataProviderId, childIndex, parentContextStoreId) => {
     ? contextStores[parentContextStoreId].state
     : rootState
 
-  if (!contextStores[key]) {
-    contextStores[key] = {
-      store: writable(state),
-      subscriberCount: 0,
-      state,
-      parentContextStoreId,
-    }
+  contextStores[key] = {
+    store: writable(state),
+    subscriberCount: 0,
+    state,
+    parentContextStoreId,
   }
+
   return key
 }
 
@@ -94,6 +94,9 @@ const set = (value, dataProviderId, childIndex) =>
 const getState = contextStoreKey =>
   contextStoreKey ? contextStores[contextStoreKey].state : rootState
 
+const getStore = contextStoreKey =>
+  contextStoreKey ? contextStores[contextStoreKey] : rootStore
+
 export default {
   subscribe,
   update,
@@ -101,4 +104,5 @@ export default {
   getState,
   create,
   contextStoreKey,
+  getStore,
 }
diff --git a/packages/client/tests/testAppDef.js b/packages/client/tests/testAppDef.js
index 69fdf551dc..c583d91545 100644
--- a/packages/client/tests/testAppDef.js
+++ b/packages/client/tests/testAppDef.js
@@ -181,8 +181,7 @@ const maketestlib = window => ({
       currentProps = Object.assign(currentProps, props)
       if (currentProps.onClick) {
         node.addEventListener("click", () => {
-          const testText = currentProps.testText || "hello"
-          currentProps._bb.call(props.onClick, { testText })
+          currentProps._bb.call("onClick")
         })
       }
     }
diff --git a/packages/server/Dockerfile b/packages/server/Dockerfile
index 8a42beba6d..96ae3b7a30 100644
--- a/packages/server/Dockerfile
+++ b/packages/server/Dockerfile
@@ -4,6 +4,7 @@ WORKDIR /app
 
 ENV CLOUD=1
 ENV COUCH_DB_URL=https://couchdb.budi.live:5984
+env BUDIBASE_ENVIRONMENT=PRODUCTION
 
 # copy files and install dependencies
 COPY . ./
diff --git a/packages/server/package.json b/packages/server/package.json
index 27b55f48ef..c73ade269f 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -42,7 +42,7 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.1.19",
+    "@budibase/client": "^0.1.21",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
@@ -55,6 +55,7 @@
     "electron-updater": "^4.3.1",
     "fix-path": "^3.0.0",
     "fs-extra": "^8.1.0",
+    "joi": "^17.2.1",
     "jsonwebtoken": "^8.5.1",
     "koa": "^2.7.0",
     "koa-body": "^4.1.0",
@@ -74,6 +75,7 @@
     "tar-fs": "^2.1.0",
     "uuid": "^3.3.2",
     "validate.js": "^0.13.1",
+    "worker-farm": "^1.7.0",
     "yargs": "^13.2.4",
     "zlib": "^1.0.5"
   },
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 4f0ddbf0d8..ea12e5cc24 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -16,7 +16,7 @@ exports.authenticate = async ctx => {
   const { clientId } = await masterDb.get(ctx.user.appId)
 
   if (!clientId) {
-    ctx.throw(400, "ClientId not suplied")
+    ctx.throw(400, "ClientId not supplied")
   }
   // find the instance that the user is associated with
   const db = new CouchDB(ClientDb.name(clientId))
diff --git a/packages/server/src/api/controllers/model.js b/packages/server/src/api/controllers/model.js
index f8c5ebefd7..0f38056753 100644
--- a/packages/server/src/api/controllers/model.js
+++ b/packages/server/src/api/controllers/model.js
@@ -25,7 +25,7 @@ exports.save = async function(ctx) {
     ...ctx.request.body,
   }
 
-  // update renamed record fields when model is updated
+  // rename record fields when table column is renamed
   const { _rename } = modelToSave
   if (_rename) {
     const records = await db.query(`database/all_${modelToSave._id}`, {
@@ -41,6 +41,15 @@ exports.save = async function(ctx) {
     delete modelToSave._rename
   }
 
+  // update schema of non-statistics views when new columns are added
+  for (let view in modelToSave.views) {
+    const modelView = modelToSave.views[view]
+    if (!modelView) continue
+
+    if (modelView.schema.group || modelView.schema.field) continue
+    modelView.schema = modelToSave.schema
+  }
+
   const result = await db.post(modelToSave)
   modelToSave._rev = result.rev
 
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index df3c93687a..f9cea706f5 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -2,6 +2,16 @@ const CouchDB = require("../../db")
 const validateJs = require("validate.js")
 const newid = require("../../db/newid")
 
+function emitEvent(eventType, ctx, record) {
+  ctx.eventEmitter &&
+    ctx.eventEmitter.emit(eventType, {
+      args: {
+        record,
+      },
+      instanceId: ctx.user.instanceId,
+    })
+}
+
 validateJs.extend(validateJs.validators.datetime, {
   parse: function(value) {
     return new Date(value).getTime()
@@ -12,6 +22,40 @@ validateJs.extend(validateJs.validators.datetime, {
   },
 })
 
+exports.patch = async function(ctx) {
+  const db = new CouchDB(ctx.user.instanceId)
+  const record = await db.get(ctx.params.id)
+  const model = await db.get(record.modelId)
+  const patchfields = ctx.request.body
+
+  for (let key in patchfields) {
+    if (!model.schema[key]) continue
+    record[key] = patchfields[key]
+  }
+
+  const validateResult = await validate({
+    record,
+    model,
+  })
+
+  if (!validateResult.valid) {
+    ctx.status = 400
+    ctx.body = {
+      status: 400,
+      errors: validateResult.errors,
+    }
+    return
+  }
+
+  const response = await db.put(record)
+  record._rev = response.rev
+  record.type = "record"
+  ctx.body = record
+  ctx.status = 200
+  ctx.message = `${model.name} updated successfully.`
+  return
+}
+
 exports.save = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   const record = ctx.request.body
@@ -76,13 +120,7 @@ exports.save = async function(ctx) {
     }
   }
 
-  ctx.eventEmitter &&
-    ctx.eventEmitter.emit(`record:save`, {
-      args: {
-        record,
-      },
-      instanceId: ctx.user.instanceId,
-    })
+  emitEvent(`record:save`, ctx, record)
   ctx.body = record
   ctx.status = 200
   ctx.message = `${model.name} created successfully`
@@ -145,7 +183,7 @@ exports.destroy = async function(ctx) {
     return
   }
   ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId)
-  ctx.eventEmitter && ctx.eventEmitter.emit(`record:delete`, record)
+  emitEvent(`record:delete`, ctx, record)
 }
 
 exports.validate = async function(ctx) {
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 6f40a01c66..672d71aab9 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -87,7 +87,10 @@ exports.processLocalFileUpload = async function(ctx) {
         pendingFileUploads = { _id: "_local/fileuploads", uploads: [] }
       })
 
-    pendingFileUploads.uploads = [...filesToProcess, ...pendingFileUploads.uploads]
+    pendingFileUploads.uploads = [
+      ...filesToProcess,
+      ...pendingFileUploads.uploads,
+    ]
     await db.put(pendingFileUploads)
 
     ctx.body = filesToProcess
diff --git a/packages/server/src/api/controllers/view/viewBuilder.js b/packages/server/src/api/controllers/view/viewBuilder.js
index b5f9638115..6ac3fdb0f2 100644
--- a/packages/server/src/api/controllers/view/viewBuilder.js
+++ b/packages/server/src/api/controllers/view/viewBuilder.js
@@ -103,9 +103,10 @@ function viewTemplate({ field, modelId, groupBy, filters = [], calculation }) {
   let schema = null
 
   if (calculation) {
-    schema = groupBy
-      ? { ...GROUP_PROPERTY, ...SCHEMA_MAP[calculation] }
-      : { ...FIELD_PROPERTY, ...SCHEMA_MAP[calculation] }
+    schema = {
+      ...(groupBy ? GROUP_PROPERTY : FIELD_PROPERTY),
+      ...SCHEMA_MAP[calculation],
+    }
   }
 
   return {
diff --git a/packages/server/src/api/controllers/workflow/actions/CREATE_USER.js b/packages/server/src/api/controllers/workflow/actions/CREATE_USER.js
deleted file mode 100644
index be78275133..0000000000
--- a/packages/server/src/api/controllers/workflow/actions/CREATE_USER.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const userController = require("../../user")
-
-module.exports = async function createUser({ args, instanceId }) {
-  const ctx = {
-    params: {
-      instanceId,
-    },
-    request: {
-      body: args.user,
-    },
-  }
-
-  try {
-    const response = await userController.create(ctx)
-    return {
-      user: response,
-    }
-  } catch (err) {
-    console.error(err)
-    return {
-      user: null,
-    }
-  }
-}
diff --git a/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js b/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
deleted file mode 100644
index 11bbb94f4d..0000000000
--- a/packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const recordController = require("../../record")
-
-module.exports = async function saveRecord({ args, context }) {
-  const { model, ...record } = args.record
-
-  const ctx = {
-    params: {
-      instanceId: context.instanceId,
-      modelId: model._id,
-    },
-    request: {
-      body: record,
-    },
-    user: { instanceId: context.instanceId },
-  }
-
-  try {
-    await recordController.save(ctx)
-    return {
-      record: ctx.body,
-    }
-  } catch (err) {
-    console.error(err)
-    return {
-      record: null,
-      error: err.message,
-    }
-  }
-}
diff --git a/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js b/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js
deleted file mode 100644
index 39cb7a8432..0000000000
--- a/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const sgMail = require("@sendgrid/mail")
-
-sgMail.setApiKey(process.env.SENDGRID_API_KEY)
-
-module.exports = async function sendEmail({ args }) {
-  const msg = {
-    to: args.to,
-    from: args.from,
-    subject: args.subject,
-    text: args.text,
-  }
-
-  try {
-    await sgMail.send(msg)
-    return {
-      success: true,
-      ...args,
-    }
-  } catch (err) {
-    console.error(err)
-    return {
-      success: false,
-      error: err.message,
-    }
-  }
-}
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/blockDefinitions.js b/packages/server/src/api/controllers/workflow/blockDefinitions.js
similarity index 50%
rename from packages/builder/src/components/workflow/WorkflowPanel/blockDefinitions.js
rename to packages/server/src/api/controllers/workflow/blockDefinitions.js
index 5fd281f015..f713823245 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/blockDefinitions.js
+++ b/packages/server/src/api/controllers/workflow/blockDefinitions.js
@@ -1,85 +1,81 @@
 const ACTION = {
-  SET_STATE: {
-    name: "Update UI State",
-    tagline: "Update <b>{{path}}</b> to <b>{{value}}</b>",
-    icon: "ri-refresh-line",
-    description: "Update your User Interface with some data.",
-    environment: "CLIENT",
-    params: {
-      path: "string",
-      value: "longText",
-    },
-  },
-  NAVIGATE: {
-    name: "Navigate",
-    tagline: "Navigate to <b>{{url}}</b>",
-    icon: "ri-navigation-line",
-    description: "Navigate to another page.",
-    environment: "CLIENT",
-    params: {
-      url: "string",
-    },
-  },
   SAVE_RECORD: {
     name: "Save Record",
     tagline: "<b>Save</b> a <b>{{record.model.name}}</b> record",
     icon: "ri-save-3-fill",
     description: "Save a record to your database.",
-    environment: "SERVER",
     params: {
       record: "record",
     },
     args: {
       record: {},
     },
+    type: "ACTION",
   },
   DELETE_RECORD: {
     description: "Delete a record from your database.",
     icon: "ri-delete-bin-line",
     name: "Delete Record",
     tagline: "<b>Delete</b> a <b>{{record.model.name}}</b> record",
-    environment: "SERVER",
-    params: {
-      record: "record",
-    },
-    args: {
-      record: {},
-    },
+    params: {},
+    args: {},
+    type: "ACTION",
   },
-  // FIND_RECORD: {
-  //   description: "Find a record in your database.",
-  //   tagline: "<b>Find</b> a <b>{{record.model.name}}</b> record",
-  //   icon: "ri-search-line",
-  //   name: "Find Record",
-  //   environment: "SERVER",
-  //   params: {
-  //     record: "string",
-  //   },
-  // },
   CREATE_USER: {
     description: "Create a new user.",
     tagline: "Create user <b>{{username}}</b>",
     icon: "ri-user-add-fill",
     name: "Create User",
-    environment: "SERVER",
     params: {
       username: "string",
       password: "password",
       accessLevelId: "accessLevel",
     },
+    args: {
+      accessLevelId: "POWER_USER",
+    },
+    type: "ACTION",
   },
   SEND_EMAIL: {
     description: "Send an email.",
     tagline: "Send email to <b>{{to}}</b>",
     icon: "ri-mail-open-fill",
     name: "Send Email",
-    environment: "SERVER",
     params: {
       to: "string",
       from: "string",
       subject: "longText",
       text: "longText",
     },
+    type: "ACTION",
+  },
+}
+
+const LOGIC = {
+  FILTER: {
+    name: "Filter",
+    tagline: "{{filter}} <b>{{condition}}</b> {{value}}",
+    icon: "ri-git-branch-line",
+    description: "Filter any workflows which do not meet certain conditions.",
+    params: {
+      filter: "string",
+      condition: ["equals"],
+      value: "string",
+    },
+    args: {
+      condition: "equals",
+    },
+    type: "LOGIC",
+  },
+  DELAY: {
+    name: "Delay",
+    icon: "ri-time-fill",
+    tagline: "Delay for <b>{{time}}</b> milliseconds",
+    description: "Delay the workflow until an amount of time has passed.",
+    params: {
+      time: "number",
+    },
+    type: "LOGIC",
   },
 }
 
@@ -89,11 +85,11 @@ const TRIGGER = {
     event: "record:save",
     icon: "ri-save-line",
     tagline: "Record is added to <b>{{model.name}}</b>",
-    description: "Save a record to your database.",
-    environment: "SERVER",
+    description: "Fired when a record is saved to your database.",
     params: {
       model: "model",
     },
+    type: "TRIGGER",
   },
   RECORD_DELETED: {
     name: "Record Deleted",
@@ -101,70 +97,17 @@ const TRIGGER = {
     icon: "ri-delete-bin-line",
     tagline: "Record is deleted from <b>{{model.name}}</b>",
     description: "Fired when a record is deleted from your database.",
-    environment: "SERVER",
     params: {
       model: "model",
     },
-  },
-  // CLICK: {
-  //   name: "Click",
-  //   icon: "ri-cursor-line",
-  //   tagline: "{{component}} is clicked",
-  //   description: "Trigger when you click on an element in the UI.",
-  //   environment: "CLIENT",
-  //   params: {
-  //     component: "component"
-  //   }
-  // },
-  // LOAD: {
-  //   name: "Load",
-  //   icon: "ri-loader-line",
-  //   tagline: "{{component}} is loaded",
-  //   description: "Trigger an element has finished loading.",
-  //   environment: "CLIENT",
-  //   params: {
-  //     component: "component"
-  //   }
-  // },
-  // INPUT: {
-  //   name: "Input",
-  //   icon: "ri-text",
-  //   tagline: "Text entered into {{component}",
-  //   description: "Trigger when you type into an input box.",
-  //   environment: "CLIENT",
-  //   params: {
-  //     component: "component"
-  //   }
-  // },
-}
-
-const LOGIC = {
-  FILTER: {
-    name: "Filter",
-    tagline: "{{field}} <b>{{condition}}</b> {{value}}",
-    icon: "ri-git-branch-line",
-    description: "Filter any workflows which do not meet certain conditions.",
-    environment: "CLIENT",
-    params: {
-      filter: "string",
-      condition: ["equals"],
-      value: "string",
-    },
-  },
-  DELAY: {
-    name: "Delay",
-    icon: "ri-time-fill",
-    tagline: "Delay for <b>{{time}}</b> milliseconds",
-    description: "Delay the workflow until an amount of time has passed.",
-    environment: "CLIENT",
-    params: {
-      time: "number",
-    },
+    type: "TRIGGER",
   },
 }
 
-export default {
+// This contains the definitions for the steps and triggers that make up a workflow, a workflow comprises
+// of many steps and a single trigger
+module.exports = {
   ACTION,
-  TRIGGER,
   LOGIC,
+  TRIGGER,
 }
diff --git a/packages/server/src/api/controllers/workflow/index.js b/packages/server/src/api/controllers/workflow/index.js
index 5c77bbfaa6..efb93ad1c1 100644
--- a/packages/server/src/api/controllers/workflow/index.js
+++ b/packages/server/src/api/controllers/workflow/index.js
@@ -1,5 +1,13 @@
 const CouchDB = require("../../../db")
 const newid = require("../../../db/newid")
+const blockDefinitions = require("./blockDefinitions")
+const triggers = require("../../../workflows/triggers")
+
+/*************************
+ *                       *
+ *   BUILDER FUNCTIONS   *
+ *                       *
+ *************************/
 
 exports.create = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
@@ -53,22 +61,47 @@ exports.find = async function(ctx) {
   ctx.body = await db.get(ctx.params.id)
 }
 
-exports.executeAction = async function(ctx) {
-  const { args, action } = ctx.request.body
-  const workflowAction = require(`./actions/${action}`)
-  const response = await workflowAction({
-    args,
-    instanceId: ctx.user.instanceId,
-  })
-  ctx.body = response
-}
-
-exports.fetchActionScript = async function(ctx) {
-  const workflowAction = require(`./actions/${ctx.action}`)
-  ctx.body = workflowAction
-}
-
 exports.destroy = async function(ctx) {
   const db = new CouchDB(ctx.user.instanceId)
   ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
 }
+
+exports.getActionList = async function(ctx) {
+  ctx.body = blockDefinitions.ACTION
+}
+
+exports.getTriggerList = async function(ctx) {
+  ctx.body = blockDefinitions.TRIGGER
+}
+
+exports.getLogicList = async function(ctx) {
+  ctx.body = blockDefinitions.LOGIC
+}
+
+module.exports.getDefinitionList = async function(ctx) {
+  ctx.body = {
+    logic: blockDefinitions.LOGIC,
+    trigger: blockDefinitions.TRIGGER,
+    action: blockDefinitions.ACTION,
+  }
+}
+
+/*********************
+ *                   *
+ *   API FUNCTIONS   *
+ *                   *
+ *********************/
+
+exports.trigger = async function(ctx) {
+  const db = new CouchDB(ctx.user.instanceId)
+  let workflow = await db.get(ctx.params.id)
+  await triggers.externalTrigger(workflow, {
+    ...ctx.request.body,
+    instanceId: ctx.user.instanceId,
+  })
+  ctx.status = 200
+  ctx.body = {
+    message: `Workflow ${workflow._id} has been triggered.`,
+    workflow,
+  }
+}
diff --git a/packages/server/src/api/routes/record.js b/packages/server/src/api/routes/record.js
index deba513aa9..e291a153ce 100644
--- a/packages/server/src/api/routes/record.js
+++ b/packages/server/src/api/routes/record.js
@@ -22,6 +22,11 @@ router
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
     recordController.save
   )
+  .patch(
+    "/api/:modelId/records/:id",
+    authorized(WRITE_MODEL, ctx => ctx.params.modelId),
+    recordController.patch
+  )
   .post(
     "/api/:modelId/records/validate",
     authorized(WRITE_MODEL, ctx => ctx.params.modelId),
diff --git a/packages/server/src/api/routes/tests/accesslevel.spec.js b/packages/server/src/api/routes/tests/accesslevel.spec.js
index 81ab6a78ad..b2878e92ed 100644
--- a/packages/server/src/api/routes/tests/accesslevel.spec.js
+++ b/packages/server/src/api/routes/tests/accesslevel.spec.js
@@ -37,7 +37,7 @@ describe("/accesslevels", () => {
   beforeEach(async () => {
     instanceId = (await createInstance(request, appId))._id
     model = await createModel(request, appId, instanceId)
-    view = await createView(request, appId, instanceId)
+    view = await createView(request, appId, instanceId, model._id)
   })
 
   describe("create", () => {
@@ -111,7 +111,7 @@ describe("/accesslevels", () => {
       await request
         .get(`/api/accesslevels/${customLevel._id}`)
         .set(defaultHeaders(appId, instanceId))
-        .expect(404)      
+        .expect(404)
     })
   })
 
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 594c4a3121..9183c76517 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -51,6 +51,12 @@ exports.createModel = async (request, appId, instanceId, model) => {
           type: "string",
         },
       },
+      description: {
+        type: "text",
+        constraints: {
+          type: "string",
+        },
+      },
     },
   }
 
@@ -61,9 +67,10 @@ exports.createModel = async (request, appId, instanceId, model) => {
   return res.body
 }
 
-exports.createView = async (request, appId, instanceId, view) => {
+exports.createView = async (request, appId, instanceId, modelId, view) => {
   view = view || {
     map: "function(doc) { emit(doc[doc.key], doc._id); } ",
+    modelId: modelId,
   }
 
   const res = await request
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index 49f6be41ad..23214b95c3 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -120,6 +120,10 @@ describe("/models", () => {
       testModel = await createModel(request, app._id, instance._id, testModel)
     });
 
+    afterEach(() => {
+      delete testModel._rev
+    });
+
     it("returns all the models for that instance in the response body", done => {
       request
         .get(`/api/models`)
diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js
index 62cf205b1c..1944499e0f 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -30,20 +30,30 @@ describe("/records", () => {
     model = await createModel(request, app._id, instance._id)
     record = {
       name: "Test Contact",
+      description: "original description",
       status: "new",
       modelId: model._id
     }
   })
 
+  const createRecord = async r => 
+    await request
+      .post(`/api/${model._id}/records`)
+      .send(r || record)
+      .set(defaultHeaders(app._id, instance._id))
+      .expect('Content-Type', /json/)
+      .expect(200)
+
+  const loadRecord = async id => 
+    await request
+      .get(`/api/${model._id}/records/${id}`)
+      .set(defaultHeaders(app._id, instance._id))
+      .expect('Content-Type', /json/)
+      .expect(200)
+
+
   describe("save, load, update, delete", () => {
 
-    const createRecord = async r => 
-      await request
-        .post(`/api/${model._id}/records`)
-        .send(r || record)
-        .set(defaultHeaders(app._id, instance._id))
-        .expect('Content-Type', /json/)
-        .expect(200)
 
     it("returns a success message when the record is created", async () => {
       const res = await createRecord()
@@ -144,6 +154,35 @@ describe("/records", () => {
     })
   })
 
+  describe("patch", () => {
+    it("should update only the fields that are supplied", async () => {
+      const rec = await createRecord()
+      const existing = rec.body
+
+      const res = await request
+        .patch(`/api/${model._id}/records/${existing._id}`)
+        .send({
+          _id: existing._id,
+          _rev: existing._rev,
+          modelId: model._id,
+          name: "Updated Name",
+        })
+        .set(defaultHeaders(app._id, instance._id))
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+      expect(res.res.statusMessage).toEqual(`${model.name} updated successfully.`)
+      expect(res.body.name).toEqual("Updated Name")
+      expect(res.body.description).toEqual(existing.description)
+
+      const savedRecord = await loadRecord(res.body._id)
+
+      expect(savedRecord.body.description).toEqual(existing.description)
+      expect(savedRecord.body.name).toEqual("Updated Name")
+        
+    })
+  })
+
   describe("validate", () => {
     it("should return no errors on valid record", async () => {
       const result = await request
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index a8daa73f64..ac8ade122f 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -72,8 +72,14 @@ describe("/views", () => {
               type: "text",
               constraints: {
                 type: "string" 
-              }
-            }
+              },
+            },
+            description: {
+              type: "text",
+              constraints: {
+                type: "string" 
+              },
+            },
           }
         }
       });
diff --git a/packages/server/src/api/routes/tests/workflow.spec.js b/packages/server/src/api/routes/tests/workflow.spec.js
index f8b38c53ec..5991d06d9d 100644
--- a/packages/server/src/api/routes/tests/workflow.spec.js
+++ b/packages/server/src/api/routes/tests/workflow.spec.js
@@ -23,7 +23,7 @@ const TEST_WORKFLOW = {
 
     ],
     next: {
-      actionId: "abc123",
+      stepId: "abc123",
       type: "SERVER",
       conditions: {
       }
diff --git a/packages/server/src/api/routes/workflow.js b/packages/server/src/api/routes/workflow.js
index 987e18a60f..e6a61ae5f5 100644
--- a/packages/server/src/api/routes/workflow.js
+++ b/packages/server/src/api/routes/workflow.js
@@ -1,21 +1,77 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/workflow")
 const authorized = require("../../middleware/authorized")
+const joiValidator = require("../../middleware/joi-validator")
 const { BUILDER } = require("../../utilities/accessLevels")
+const Joi = require("joi")
 
 const router = Router()
 
+// prettier-ignore
+function generateStepSchema(allowStepTypes) {
+  return Joi.object({
+    stepId: Joi.string().required(),
+    id: Joi.string().required(),
+    description: Joi.string().required(),
+    name: Joi.string().required(),
+    tagline: Joi.string().required(),
+    icon: Joi.string().required(),
+    params: Joi.object(),
+    // TODO: validate args a bit more deeply
+    args: Joi.object(),
+    type: Joi.string().required().valid(...allowStepTypes),
+  }).unknown(true)
+}
+
+// prettier-ignore
+const workflowValidator = joiValidator.body(Joi.object({
+  live: Joi.bool(),
+  id: Joi.string().required(),
+  rev: Joi.string().required(),
+  name: Joi.string().required(),
+  type: Joi.string().valid("workflow").required(),
+  definition: Joi.object({
+    steps: Joi.array().required().items(generateStepSchema(["ACTION", "LOGIC"])),
+    trigger: generateStepSchema(["TRIGGER"]).required(),
+  }).required().unknown(true),
+}).unknown(true))
+
 router
+  .get(
+    "/api/workflows/trigger/list",
+    authorized(BUILDER),
+    controller.getTriggerList
+  )
+  .get(
+    "/api/workflows/action/list",
+    authorized(BUILDER),
+    controller.getActionList
+  )
+  .get(
+    "/api/workflows/logic/list",
+    authorized(BUILDER),
+    controller.getLogicList
+  )
+  .get(
+    "/api/workflows/definitions/list",
+    authorized(BUILDER),
+    controller.getDefinitionList
+  )
   .get("/api/workflows", authorized(BUILDER), controller.fetch)
   .get("/api/workflows/:id", authorized(BUILDER), controller.find)
-  .get(
-    "/api/workflows/:id/:action",
+  .put(
+    "/api/workflows",
     authorized(BUILDER),
-    controller.fetchActionScript
+    workflowValidator,
+    controller.update
   )
-  .put("/api/workflows", authorized(BUILDER), controller.update)
-  .post("/api/workflows", authorized(BUILDER), controller.create)
-  .post("/api/workflows/action", controller.executeAction)
+  .post(
+    "/api/workflows",
+    authorized(BUILDER),
+    workflowValidator,
+    controller.create
+  )
+  .post("/api/workflows/:id/trigger", controller.trigger)
   .delete("/api/workflows/:id/:rev", authorized(BUILDER), controller.destroy)
 
 module.exports = router
diff --git a/packages/server/src/app.js b/packages/server/src/app.js
index ee6fb3172d..5f720ad865 100644
--- a/packages/server/src/app.js
+++ b/packages/server/src/app.js
@@ -6,6 +6,7 @@ const http = require("http")
 const api = require("./api")
 const env = require("./environment")
 const eventEmitter = require("./events")
+const workflows = require("./workflows/index")
 const Sentry = require("@sentry/node")
 
 const app = new Koa()
@@ -49,4 +50,5 @@ process.on("SIGINT", () => process.exit(1))
 
 module.exports = server.listen(env.PORT || 4001, () => {
   console.log(`Budibase running on ${JSON.stringify(server.address())}`)
+  workflows.init()
 })
diff --git a/packages/server/src/environment.js b/packages/server/src/environment.js
index 9bab1ed1a0..b3043fbfe0 100644
--- a/packages/server/src/environment.js
+++ b/packages/server/src/environment.js
@@ -7,4 +7,5 @@ module.exports = {
   COUCH_DB_URL: process.env.COUCH_DB_URL,
   SALT_ROUNDS: process.env.SALT_ROUNDS,
   LOGGER: process.env.LOGGER,
+  BUDIBASE_ENVIRONMENT: process.env.BUDIBASE_ENVIRONMENT,
 }
diff --git a/packages/server/src/events/index.js b/packages/server/src/events/index.js
index 0ad4e986bd..f627532e09 100644
--- a/packages/server/src/events/index.js
+++ b/packages/server/src/events/index.js
@@ -1,33 +1,11 @@
 const EventEmitter = require("events").EventEmitter
-const CouchDB = require("../db")
-const { Orchestrator, serverStrategy } = require("./workflow")
+
+/**
+ * keeping event emitter in one central location as it might be used for things other than
+ * workflows (what it was for originally) - having a central emitter will be useful in the
+ * future.
+ */
 
 const emitter = new EventEmitter()
 
-async function executeRelevantWorkflows(event, eventType) {
-  const db = new CouchDB(event.instanceId)
-  const workflowsToTrigger = await db.query("database/by_workflow_trigger", {
-    key: [eventType],
-    include_docs: true,
-  })
-
-  const workflows = workflowsToTrigger.rows.map(wf => wf.doc)
-
-  // Create orchestrator
-  const workflowOrchestrator = new Orchestrator()
-  workflowOrchestrator.strategy = serverStrategy
-
-  for (let workflow of workflows) {
-    workflowOrchestrator.execute(workflow, event)
-  }
-}
-
-emitter.on("record:save", async function(event) {
-  await executeRelevantWorkflows(event, "record:save")
-})
-
-emitter.on("record:delete", async function(event) {
-  await executeRelevantWorkflows(event, "record:delete")
-})
-
 module.exports = emitter
diff --git a/packages/server/src/events/workflow.js b/packages/server/src/events/workflow.js
deleted file mode 100644
index a997530241..0000000000
--- a/packages/server/src/events/workflow.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const mustache = require("mustache")
-
-/**
- * The workflow orchestrator is a class responsible for executing workflows.
- * It relies on the strategy pattern, which allows composable behaviour to be
- * passed into its execute() function. This allows custom execution behaviour based
- * on where the orchestrator is run.
- *
- */
-exports.Orchestrator = class Orchestrator {
-  set strategy(strategy) {
-    this._strategy = strategy()
-  }
-
-  async execute(workflow, context) {
-    if (workflow.live) {
-      this._strategy.run(workflow.definition, context)
-    }
-  }
-}
-
-exports.serverStrategy = () => ({
-  context: {},
-  bindContextArgs: function(args) {
-    const mappedArgs = { ...args }
-
-    // bind the workflow action args to the workflow context, if required
-    for (let arg in args) {
-      const argValue = args[arg]
-      // We don't want to render mustache templates on non-strings
-      if (typeof argValue !== "string") continue
-
-      mappedArgs[arg] = mustache.render(argValue, { context: this.context })
-    }
-
-    return mappedArgs
-  },
-  run: async function(workflow, context) {
-    for (let block of workflow.steps) {
-      if (block.type === "CLIENT") continue
-
-      const action = require(`../api/controllers/workflow/actions/${block.actionId}`)
-      const response = await action({
-        args: this.bindContextArgs(block.args),
-        context,
-      })
-
-      this.context = {
-        ...this.context,
-        [block.id]: response,
-      }
-    }
-  },
-})
diff --git a/packages/server/src/middleware/joi-validator.js b/packages/server/src/middleware/joi-validator.js
new file mode 100644
index 0000000000..04880c81e9
--- /dev/null
+++ b/packages/server/src/middleware/joi-validator.js
@@ -0,0 +1,16 @@
+function validate(schema, property) {
+  // Return a Koa middleware function
+  return (ctx, next) => {
+    if (schema) {
+      const { error } = schema.validate(ctx[property])
+      if (error) {
+        ctx.throw(400, `Invalid ${property} - ${error.message}`)
+      }
+    }
+    return next()
+  }
+}
+
+module.exports.body = schema => {
+  return validate(schema, "body")
+}
diff --git a/packages/server/src/workflows/actions.js b/packages/server/src/workflows/actions.js
new file mode 100644
index 0000000000..1dd3aa694d
--- /dev/null
+++ b/packages/server/src/workflows/actions.js
@@ -0,0 +1,112 @@
+const userController = require("../api/controllers/user")
+const recordController = require("../api/controllers/record")
+const sgMail = require("@sendgrid/mail")
+
+sgMail.setApiKey(process.env.SENDGRID_API_KEY)
+
+let BUILTIN_ACTIONS = {
+  CREATE_USER: async function({ args, context }) {
+    const { username, password, accessLevelId } = args
+    const ctx = {
+      user: {
+        instanceId: context.instanceId,
+      },
+      request: {
+        body: { username, password, accessLevelId },
+      },
+    }
+
+    try {
+      const response = await userController.create(ctx)
+      return {
+        user: response,
+      }
+    } catch (err) {
+      console.error(err)
+      return {
+        user: null,
+      }
+    }
+  },
+  SAVE_RECORD: async function({ args, context }) {
+    const { model, ...record } = args.record
+
+    const ctx = {
+      params: {
+        instanceId: context.instanceId,
+        modelId: model._id,
+      },
+      request: {
+        body: record,
+      },
+      user: { instanceId: context.instanceId },
+    }
+
+    try {
+      await recordController.save(ctx)
+      return {
+        record: ctx.body,
+      }
+    } catch (err) {
+      console.error(err)
+      return {
+        record: null,
+        error: err.message,
+      }
+    }
+  },
+  SEND_EMAIL: async function({ args }) {
+    const msg = {
+      to: args.to,
+      from: args.from,
+      subject: args.subject,
+      text: args.text,
+    }
+
+    try {
+      await sgMail.send(msg)
+      return {
+        success: true,
+        ...args,
+      }
+    } catch (err) {
+      console.error(err)
+      return {
+        success: false,
+        error: err.message,
+      }
+    }
+  },
+  DELETE_RECORD: async function({ args, context }) {
+    const { model, ...record } = args.record
+    // TODO: better logging of when actions are missed due to missing parameters
+    if (record.recordId == null || record.revId == null) {
+      return
+    }
+    let ctx = {
+      params: {
+        modelId: model._id,
+        recordId: record.recordId,
+        revId: record.revId,
+      },
+      user: { instanceId: context.instanceId },
+    }
+
+    try {
+      await recordController.destroy(ctx)
+    } catch (err) {
+      console.error(err)
+      return {
+        record: null,
+        error: err.message,
+      }
+    }
+  },
+}
+
+module.exports.getAction = async function(actionName) {
+  if (BUILTIN_ACTIONS[actionName] != null) {
+    return BUILTIN_ACTIONS[actionName]
+  }
+  // TODO: load async actions here
+}
diff --git a/packages/server/src/workflows/index.js b/packages/server/src/workflows/index.js
new file mode 100644
index 0000000000..81708e8b12
--- /dev/null
+++ b/packages/server/src/workflows/index.js
@@ -0,0 +1,31 @@
+const triggers = require("./triggers")
+const environment = require("../environment")
+const workerFarm = require("worker-farm")
+const singleThread = require("./thread")
+
+let workers = workerFarm(require.resolve("./thread"))
+
+function runWorker(job) {
+  return new Promise((resolve, reject) => {
+    workers(job, err => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve()
+      }
+    })
+  })
+}
+
+/**
+ * This module is built purely to kick off the worker farm and manage the inputs/outputs
+ */
+module.exports.init = function() {
+  triggers.workflowQueue.process(async job => {
+    if (environment.BUDIBASE_ENVIRONMENT === "PRODUCTION") {
+      await runWorker(job)
+    } else {
+      await singleThread(job)
+    }
+  })
+}
diff --git a/packages/server/src/workflows/logic.js b/packages/server/src/workflows/logic.js
new file mode 100644
index 0000000000..a1d71bc0f2
--- /dev/null
+++ b/packages/server/src/workflows/logic.js
@@ -0,0 +1,24 @@
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+let LOGIC = {
+  DELAY: async function delay({ args }) {
+    await wait(args.time)
+  },
+
+  FILTER: async function filter({ args }) {
+    const { field, condition, value } = args
+    switch (condition) {
+      case "equals":
+        if (field !== value) return
+        break
+      default:
+        return
+    }
+  },
+}
+
+module.exports.getLogic = function(logicName) {
+  if (LOGIC[logicName] != null) {
+    return LOGIC[logicName]
+  }
+}
diff --git a/packages/server/src/workflows/queue/inMemoryQueue.js b/packages/server/src/workflows/queue/inMemoryQueue.js
new file mode 100644
index 0000000000..927eeb60b6
--- /dev/null
+++ b/packages/server/src/workflows/queue/inMemoryQueue.js
@@ -0,0 +1,44 @@
+let events = require("events")
+
+// Bull works with a Job wrapper around all messages that contains a lot more information about
+// the state of the message, implement this for the sake of maintaining API consistency
+function newJob(queue, message) {
+  return {
+    timestamp: Date.now(),
+    queue: queue,
+    data: message,
+  }
+}
+
+// designed to replicate Bull (https://github.com/OptimalBits/bull) in memory as a sort of mock
+class InMemoryQueue {
+  // opts is not used by this as there is no real use case when in memory, but is the same API as Bull
+  constructor(name, opts) {
+    this._name = name
+    this._opts = opts
+    this._messages = []
+    this._emitter = new events.EventEmitter()
+  }
+
+  // same API as bull, provide a callback and it will respond when messages are available
+  process(func) {
+    this._emitter.on("message", async () => {
+      if (this._messages.length <= 0) {
+        return
+      }
+      let msg = this._messages.shift()
+      let resp = func(msg)
+      if (resp.then != null) {
+        await resp
+      }
+    })
+  }
+
+  // simply puts a message to the queue and emits to the queue for processing
+  add(msg) {
+    this._messages.push(newJob(this._name, msg))
+    this._emitter.emit("message")
+  }
+}
+
+module.exports = InMemoryQueue
diff --git a/packages/server/src/workflows/thread.js b/packages/server/src/workflows/thread.js
new file mode 100644
index 0000000000..18eb6e2434
--- /dev/null
+++ b/packages/server/src/workflows/thread.js
@@ -0,0 +1,68 @@
+const mustache = require("mustache")
+const actions = require("./actions")
+const logic = require("./logic")
+
+/**
+ * The workflow orchestrator is a class responsible for executing workflows.
+ * It handles the context of the workflow and makes sure each step gets the correct
+ * inputs and handles any outputs.
+ */
+class Orchestrator {
+  constructor(workflow) {
+    this._context = {}
+    this._workflow = workflow
+  }
+
+  async getStep(type, stepId) {
+    let step = null
+    if (type === "ACTION") {
+      step = await actions.getAction(stepId)
+    } else if (type === "LOGIC") {
+      step = logic.getLogic(stepId)
+    }
+    if (step == null) {
+      throw `Cannot find workflow step by name ${stepId}`
+    }
+    return step
+  }
+
+  async execute(context) {
+    let workflow = this._workflow
+    for (let block of workflow.definition.steps) {
+      let step = await this.getStep(block.type, block.stepId)
+      let args = { ...block.args }
+      // bind the workflow action args to the workflow context, if required
+      for (let arg of Object.keys(args)) {
+        const argValue = args[arg]
+        // We don't want to render mustache templates on non-strings
+        if (typeof argValue !== "string") continue
+
+        args[arg] = mustache.render(argValue, { context: this._context })
+      }
+      const response = await step({
+        args,
+        context,
+      })
+
+      this._context = {
+        ...this._context,
+        [block.id]: response,
+      }
+    }
+  }
+}
+
+// callback is required for worker-farm to state that the worker thread has completed
+module.exports = async (job, cb = null) => {
+  try {
+    const workflowOrchestrator = new Orchestrator(job.data.workflow)
+    await workflowOrchestrator.execute(job.data.event)
+    if (cb) {
+      cb()
+    }
+  } catch (err) {
+    if (cb) {
+      cb(err)
+    }
+  }
+}
diff --git a/packages/server/src/workflows/triggers.js b/packages/server/src/workflows/triggers.js
new file mode 100644
index 0000000000..f8bbf5b5e5
--- /dev/null
+++ b/packages/server/src/workflows/triggers.js
@@ -0,0 +1,38 @@
+const CouchDB = require("../db")
+const emitter = require("../events/index")
+const InMemoryQueue = require("./queue/inMemoryQueue")
+
+let workflowQueue = new InMemoryQueue()
+
+async function queueRelevantWorkflows(event, eventType) {
+  if (event.instanceId == null) {
+    throw `No instanceId specified for ${eventType} - check event emitters.`
+  }
+  const db = new CouchDB(event.instanceId)
+  const workflowsToTrigger = await db.query("database/by_workflow_trigger", {
+    key: [eventType],
+    include_docs: true,
+  })
+
+  const workflows = workflowsToTrigger.rows.map(wf => wf.doc)
+  for (let workflow of workflows) {
+    if (!workflow.live) {
+      continue
+    }
+    workflowQueue.add({ workflow, event })
+  }
+}
+
+emitter.on("record:save", async function(event) {
+  await queueRelevantWorkflows(event, "record:save")
+})
+
+emitter.on("record:delete", async function(event) {
+  await queueRelevantWorkflows(event, "record:delete")
+})
+
+module.exports.externalTrigger = async function(workflow, params) {
+  workflowQueue.add({ workflow, event: params })
+}
+
+module.exports.workflowQueue = workflowQueue
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 5e04c7957b..a13c7dd4d8 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -172,7 +172,7 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.1.19":
+"@budibase/client@^0.1.21":
   version "0.1.21"
   resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.21.tgz#db414445c132b373f6c25e39d62628eb60cd8ac3"
   integrity sha512-/ju0vYbWh9MUjmxkGNlOL4S/VQd4p5mbz5rHu0yt55ak9t/yyzI6PzBBxlucBeRbXYd9OFynFjy1pvYt1v+z9Q==
@@ -210,10 +210,39 @@
     global-agent "^2.0.2"
     global-tunnel-ng "^2.7.1"
 
+"@hapi/address@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-4.1.0.tgz#d60c5c0d930e77456fdcde2598e77302e2955e1d"
+  integrity sha512-SkszZf13HVgGmChdHo/PxchnSaCJ6cetVqLzyciudzZRT0jcOouIF/Q93mgjw8cce+D+4F4C1Z/WrfFN+O3VHQ==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
 "@hapi/bourne@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.0.0.tgz#5bb2193eb685c0007540ca61d166d4e1edaf918d"
 
+"@hapi/formula@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-2.0.0.tgz#edade0619ed58c8e4f164f233cda70211e787128"
+  integrity sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==
+
+"@hapi/hoek@^9.0.0":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
+  integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
+
+"@hapi/pinpoint@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-2.0.0.tgz#805b40d4dbec04fc116a73089494e00f073de8df"
+  integrity sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==
+
+"@hapi/topo@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.0.0.tgz#c19af8577fa393a06e9c77b60995af959be721e7"
+  integrity sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -1930,7 +1959,7 @@ env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
 
-errno@~0.1.1:
+errno@~0.1.1, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
   dependencies:
@@ -3598,6 +3627,17 @@ jmespath@0.15.0, jmespath@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
 
+joi@^17.2.1:
+  version "17.2.1"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.2.1.tgz#e5140fdf07e8fecf9bc977c2832d1bdb1e3f2a0a"
+  integrity sha512-YT3/4Ln+5YRpacdmfEfrrKh50/kkgX3LgBltjqnlMPIYiZ4hxXZuVJcxmsvxsdeHg9soZfE3qXxHC2tMpCCBOA==
+  dependencies:
+    "@hapi/address" "^4.1.0"
+    "@hapi/formula" "^2.0.0"
+    "@hapi/hoek" "^9.0.0"
+    "@hapi/pinpoint" "^2.0.0"
+    "@hapi/topo" "^5.0.0"
+
 joycon@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-2.2.5.tgz#8d4cf4cbb2544d7b7583c216fcdfec19f6be1615"
@@ -6406,6 +6446,13 @@ word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
 
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
+  dependencies:
+    errno "~0.1.7"
+
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 170ea7393b..e600b264be 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -199,11 +199,9 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"url": "string",
-			"className": "string",
-			"description": "string",
-			"height": "string",
-			"width": "string"
+			"icon": "string",	
+			"size": {"type": "string", "default": "fa-lg"},
+			"color": {"type": "string", "default": "#000"}
 		}
 	},
 	"datatable": {
@@ -252,7 +250,7 @@
 	},
 	"list": {
 		"description": "A configurable data list that attaches to your backend models.",
-		"context": "model",
+		"context": "datasource",
 		"children": true,
 		"data": true,
 		"props": {
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 1325a3ad32..494a86f2ee 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -13,7 +13,7 @@
     "dev:builder": "rollup -cw"
   },
   "devDependencies": {
-    "@budibase/client": "^0.1.19",
+    "@budibase/client": "^0.1.21",
     "@rollup/plugin-commonjs": "^11.1.0",
     "lodash": "^4.17.15",
     "rollup": "^1.11.0",
@@ -31,16 +31,18 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.32.0",
+    "@fortawesome/fontawesome-free": "^5.14.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",
     "fusioncharts": "^3.15.1-sr.1",
+    "lodash.debounce": "^4.0.8",
     "svelte-flatpickr": "^2.4.0",
     "svelte-fusioncharts": "^1.0.0"
   }
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index c25dd152d1..7441f478d1 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -2,7 +2,6 @@
   export let className = "default"
   export let disabled = false
   export let text
-  export let onClick
 
   export let _bb
   let theButton
@@ -11,7 +10,7 @@
     theButton && _bb.attachChildren(theButton)
 
   const clickHandler = () => {
-    _bb.call(onClick)
+    _bb.call("onClick")
   }
 </script>
 
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 2c07ec0abe..0e4ff6f49b 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -14,7 +14,7 @@
     if (containerElement) {
       _bb.attachChildren(containerElement)
       if (!hasLoaded) {
-        _bb.call(onLoad)
+        _bb.call("onLoad")
         hasLoaded = true
       }
     }
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 21d4623822..ba5998e5c6 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -1,7 +1,8 @@
 <script>
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
-  import { Label } from "@budibase/bbui"
+  import { Label, DatePicker } from "@budibase/bbui"
+  import debounce from "lodash.debounce"
 
   export let _bb
   export let model
@@ -14,60 +15,49 @@
     number: "number",
   }
 
+  const DEFAULTS_FOR_TYPE = {
+    string: "",
+    boolean: false,
+    number: null,
+    link: [],
+  }
+
   let record
   let store = _bb.store
   let schema = {}
   let modelDef = {}
   let saved = false
-  let saving = false
   let recordId
   let isNew = true
-
-  let inputElements = {}
+  let errors = {}
 
   $: if (model && model.length !== 0) {
     fetchModel()
   }
 
-  $: fields = Object.keys(schema)
+  $: fields = schema ? Object.keys(schema) : []
 
-  $: Object.values(inputElements).length && setForm(record)
-
-  const createBlankRecord = () => {
-    if (!schema) return
-    const newrecord = {
-      modelId: model,
-    }
-    for (let fieldName in schema) {
-      const field = schema[fieldName]
-      // defaulting to first one, as a blank value will fail validation
-      if (
-        field.type === "string" &&
-        field.constraints &&
-        field.constraints.inclusion &&
-        field.constraints.inclusion.length > 0
-      ) {
-        newrecord[fieldName] = field.constraints.inclusion[0]
-      } else if (field.type === "number") newrecord[fieldName] = null
-      else if (field.type === "boolean") newrecord[fieldName] = false
-      else if (field.type === "link") newrecord[fieldName] = []
-      else newrecord[fieldName] = ""
-    }
-    return newrecord
-  }
+  $: errorMessages = Object.entries(errors).map(
+    ([field, message]) => `${field} ${message}`
+  )
 
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
-    record = createBlankRecord()
+    record = {
+      modelId: model,
+    }
   }
 
-  async function save() {
-    // prevent double clicking firing multiple requests
-    if (saving) return
-    saving = true
+  const save = debounce(async () => {
+    for (let field of fields) {
+      // Assign defaults to empty fields to prevent validation issues
+      if (!(field in record))
+        record[field] = DEFAULTS_FOR_TYPE[schema[field].type]
+    }
+
     const SAVE_RECORD_URL = `/api/${model}/records`
     const response = await _bb.api.post(SAVE_RECORD_URL, record)
 
@@ -79,13 +69,11 @@
         return state
       })
 
+      errors = {}
+
       // wipe form, if new record, otherwise update
       // model to get new _rev
-      if (isNew) {
-        resetForm()
-      } else {
-        record = json
-      }
+      record = isNew ? { modelId: model } : json
 
       // set saved, and unset after 1 second
       // i.e. make the success notifier appear, then disappear again after time
@@ -94,69 +82,27 @@
         saved = false
       }, 1000)
     }
-    saving = false
-  }
 
-  // we cannot use svelte bind on these inputs, as it does not allow
-  // bind, when the input type is dynamic
-  const resetForm = () => {
-    for (let el of Object.values(inputElements)) {
-      el.value = ""
-      if (el.checked) {
-        el.checked = false
-      }
+    if (response.status === 400) {
+      errors = json.errors
     }
-    record = createBlankRecord()
-  }
+  })
 
-  const setForm = rec => {
-    if (isNew || !rec) return
-    for (let fieldName in inputElements) {
-      if (typeof rec[fieldName] === "boolean") {
-        inputElements[fieldName].checked = rec[fieldName]
-      } else {
-        inputElements[fieldName].value = rec[fieldName]
-      }
-    }
-  }
-
-  const handleInput = field => event => {
-    let value
-
-    if (event.target.type === "checkbox") {
-      value = event.target.checked
-      record[field] = value
-      return
-    }
-
-    if (event.target.type === "number") {
-      value = parseInt(event.target.value)
-      record[field] = value
-      return
-    }
-
-    value = event.target.value
-    record[field] = value
-  }
-
-  onMount(() => {
+  onMount(async () => {
     const routeParams = _bb.routeParams()
     recordId =
       Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
     isNew = !recordId || recordId === "new"
 
     if (isNew) {
-      record = createBlankRecord()
-    } else {
-      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-      _bb.api
-        .get(GET_RECORD_URL)
-        .then(response => response.json())
-        .then(rec => {
-          record = rec
-          setForm(rec)
-        })
+      record = { modelId: model }
+      return
     }
+
+    const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+    const response = await _bb.api.get(GET_RECORD_URL)
+    const json = await response.json()
+    record = json
   })
 </script>
 
@@ -164,23 +110,28 @@
   {#if title}
     <h1>{title}</h1>
   {/if}
+  {#each errorMessages as error}
+    <p class="error">{error}</p>
+  {/each}
   <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <Label small forAttr={'form-stacked-text'}>{field}</Label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
+          <select bind:value={record[field]}>
             {#each schema[field].constraints.inclusion as opt}
               <option>{opt}</option>
             {/each}
           </select>
-        {:else}
-          <input
-            bind:this={inputElements[field]}
-            class="input"
-            type={TYPE_MAP[schema[field].type]}
-            on:change={handleInput(field)} />
+        {:else if schema[field].type === 'datetime'}
+          <DatePicker bind:value={record[field]} />
+        {:else if schema[field].type === 'boolean'}
+          <input class="input" type="checkbox" bind:checked={record[field]} />
+        {:else if schema[field].type === 'number'}
+          <input class="input" type="number" bind:value={record[field]} />
+        {:else if schema[field].type === 'string'}
+          <input class="input" type="text" bind:value={record[field]} />
         {/if}
       </div>
       <hr />
@@ -302,4 +253,9 @@
     background-position: right 17px top 1.5em, right 10px top 1.5em;
     background-size: 7px 7px, 7px 7px;
   }
+
+  .error {
+    color: red;
+    font-weight: 500;
+  }
 </style>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 56011df569..41aa5443a2 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -1,7 +1,8 @@
 <script>
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
-  import { Label } from "@budibase/bbui"
+  import { Label, DatePicker } from "@budibase/bbui"
+  import debounce from "lodash.debounce"
 
   export let _bb
   export let model
@@ -14,60 +15,49 @@
     number: "number",
   }
 
+  const DEFAULTS_FOR_TYPE = {
+    string: "",
+    boolean: false,
+    number: null,
+    link: [],
+  }
+
   let record
   let store = _bb.store
   let schema = {}
   let modelDef = {}
   let saved = false
-  let saving = false
   let recordId
   let isNew = true
-
-  let inputElements = {}
+  let errors = {}
 
   $: if (model && model.length !== 0) {
     fetchModel()
   }
 
-  $: fields = Object.keys(schema)
+  $: fields = schema ? Object.keys(schema) : []
 
-  $: Object.values(inputElements).length && setForm(record)
-
-  const createBlankRecord = () => {
-    if (!schema) return
-    const newrecord = {
-      modelId: model,
-    }
-    for (let fieldName in schema) {
-      const field = schema[fieldName]
-      // defaulting to first one, as a blank value will fail validation
-      if (
-        field.type === "string" &&
-        field.constraints &&
-        field.constraints.inclusion &&
-        field.constraints.inclusion.length > 0
-      ) {
-        newrecord[fieldName] = field.constraints.inclusion[0]
-      } else if (field.type === "number") newrecord[fieldName] = null
-      else if (field.type === "boolean") newrecord[fieldName] = false
-      else if (field.type === "link") newrecord[fieldName] = []
-      else newrecord[fieldName] = ""
-    }
-    return newrecord
-  }
+  $: errorMessages = Object.entries(errors).map(
+    ([field, message]) => `${field} ${message}`
+  )
 
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
-    record = createBlankRecord()
+    record = {
+      modelId: model,
+    }
   }
 
-  async function save() {
-    // prevent double clicking firing multiple requests
-    if (saving) return
-    saving = true
+  const save = debounce(async () => {
+    for (let field of fields) {
+      // Assign defaults to empty fields to prevent validation issues
+      if (!(field in record))
+        record[field] = DEFAULTS_FOR_TYPE[schema[field].type]
+    }
+
     const SAVE_RECORD_URL = `/api/${model}/records`
     const response = await _bb.api.post(SAVE_RECORD_URL, record)
 
@@ -79,13 +69,11 @@
         return state
       })
 
+      errors = {}
+
       // wipe form, if new record, otherwise update
       // model to get new _rev
-      if (isNew) {
-        resetForm()
-      } else {
-        record = json
-      }
+      record = isNew ? { modelId: model } : json
 
       // set saved, and unset after 1 second
       // i.e. make the success notifier appear, then disappear again after time
@@ -94,69 +82,27 @@
         saved = false
       }, 1000)
     }
-    saving = false
-  }
 
-  // we cannot use svelte bind on these inputs, as it does not allow
-  // bind, when the input type is dynamic
-  const resetForm = () => {
-    for (let el of Object.values(inputElements)) {
-      el.value = ""
-      if (el.checked) {
-        el.checked = false
-      }
+    if (response.status === 400) {
+      errors = json.errors
     }
-    record = createBlankRecord()
-  }
+  })
 
-  const setForm = rec => {
-    if (isNew || !rec) return
-    for (let fieldName in inputElements) {
-      if (typeof rec[fieldName] === "boolean") {
-        inputElements[fieldName].checked = rec[fieldName]
-      } else {
-        inputElements[fieldName].value = rec[fieldName]
-      }
-    }
-  }
-
-  const handleInput = field => event => {
-    let value
-
-    if (event.target.type === "checkbox") {
-      value = event.target.checked
-      record[field] = value
-      return
-    }
-
-    if (event.target.type === "number") {
-      value = parseInt(event.target.value)
-      record[field] = value
-      return
-    }
-
-    value = event.target.value
-    record[field] = value
-  }
-
-  onMount(() => {
+  onMount(async () => {
     const routeParams = _bb.routeParams()
     recordId =
       Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0])
     isNew = !recordId || recordId === "new"
 
     if (isNew) {
-      record = createBlankRecord()
-    } else {
-      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
-      _bb.api
-        .get(GET_RECORD_URL)
-        .then(response => response.json())
-        .then(rec => {
-          record = rec
-          setForm(rec)
-        })
+      record = { modelId: model }
+      return
     }
+
+    const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+    const response = await _bb.api.get(GET_RECORD_URL)
+    const json = await response.json()
+    record = json
   })
 </script>
 
@@ -164,23 +110,28 @@
   {#if title}
     <h1>{title}</h1>
   {/if}
+  {#each errorMessages as error}
+    <p class="error">{error}</p>
+  {/each}
   <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <Label small forAttr={'form-stacked-text'}>{field}</Label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
+          <select bind:value={record[field]}>
             {#each schema[field].constraints.inclusion as opt}
               <option>{opt}</option>
             {/each}
           </select>
-        {:else}
-          <input
-            bind:this={inputElements[field]}
-            class="input"
-            type={TYPE_MAP[schema[field].type]}
-            on:change={handleInput(field)} />
+        {:else if schema[field].type === 'datetime'}
+          <DatePicker bind:value={record[field]} />
+        {:else if schema[field].type === 'boolean'}
+          <input class="input" type="checkbox" bind:checked={record[field]} />
+        {:else if schema[field].type === 'number'}
+          <input class="input" type="number" bind:value={record[field]} />
+        {:else if schema[field].type === 'string'}
+          <input class="input" type="text" bind:value={record[field]} />
         {/if}
       </div>
       <hr />
@@ -293,4 +244,9 @@
     background-position: right 17px top 1.5em, right 10px top 1.5em;
     background-size: 7px 7px, 7px 7px;
   }
+
+  .error {
+    color: red;
+    font-weight: 500;
+  }
 </style>
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index f220d3c8f9..c877a024dc 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,9 +1,9 @@
-<script>
-  export let icon = ""
-  export let fontSize = "1em"
-  export let _bb
-
-  $: style = { fontSize }
-</script>
-
-<i class={icon} {style} />
+<script>
+  import "@fortawesome/fontawesome-free/js/all.js"
+
+  export let icon = ""
+  export let size = "fa-lg"
+  export let color = "#000"
+</script>
+
+<i style={`color: ${color};`} class={`${icon} ${size}`} />
diff --git a/packages/standard-components/src/IconOld.svelte b/packages/standard-components/src/IconOld.svelte
new file mode 100644
index 0000000000..f220d3c8f9
--- /dev/null
+++ b/packages/standard-components/src/IconOld.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let icon = ""
+  export let fontSize = "1em"
+  export let _bb
+
+  $: style = { fontSize }
+</script>
+
+<i class={icon} {style} />
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index c7d03ef1cb..8fafffc0cd 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -28,7 +28,7 @@
     if (itemContainer) {
       _bb.attachChildren(itemContainer)
       if (!hasLoaded) {
-        _bb.call(onLoad)
+        _bb.call("onLoad")
         hasLoaded = true
       }
     }
diff --git a/packages/standard-components/src/Table.svelte b/packages/standard-components/src/Table.svelte
index ebbfbb7db5..5d6627fe6c 100644
--- a/packages/standard-components/src/Table.svelte
+++ b/packages/standard-components/src/Table.svelte
@@ -11,7 +11,10 @@
   export let _bb
 
   const rowClickHandler = row => () => {
-    _bb.call(onRowClick, row)
+    // call currently only accepts one argument, so passing row does nothing
+    // however, we do not expose this event anyway. I am leaving this
+    // in for the future, as can and probably should hande this
+    _bb.call("onRowClick", row)
   }
 
   const cellValue = (colIndex, row) => {
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 91498002c0..0ce5088cb8 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -1,3 +1,5 @@
+import "@budibase/bbui/dist/bbui.css"
+
 export { default as container } from "./Container.svelte"
 export { default as text } from "./Text.svelte"
 export { default as heading } from "./Heading.svelte"
@@ -12,7 +14,6 @@ export { default as login } from "./Login.svelte"
 export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
-export { default as icon } from "./Icon.svelte"
 export { default as Navigation } from "./Navigation.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
@@ -28,3 +29,4 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export * from "./Chart"
+export { default as icon } from "./Icon.svelte"
diff --git a/yarn.lock b/yarn.lock
index af62734259..8c37dc6f01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -79,6 +79,16 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
+
+"@fortawesome/fontawesome@^1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.7"
+
 "@lerna/add@3.14.0":
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.14.0.tgz#799d416e67d48c285967abf883be746557aefa48"