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 000000000..cdad65f42
--- /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 4e4b41082..7082b1b5e 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/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 5ef8a3075..5a9af8de9 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -7,7 +7,7 @@
     Heading,
     DropdownMenu,
   } from "@budibase/bbui"
-  import { AddIcon } from "components/common/Icons/"
+  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
@@ -95,9 +95,11 @@
       {#each actions as action, index}
         <div class="action-container">
           <div on:click={selectAction(action)}>
-            <Body size="medium">
+            <p
+              class="bb-body bb-body--small bb-body--color-dark"
+              style="margin: var(--spacing-s) 0;">
               {index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}
-            </Body>
+            </p>
           </div>
           {#if action === selectedAction}
             <div class="selected-action-container">
@@ -154,16 +156,25 @@
   .actions-container {
     flex: 1;
     min-height: 0px;
-    padding: var(--spacing-xl);
-    padding-bottom: var(--spacing-m);
-    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-s);
+    padding-top: 0;
     border: var(--border-light);
     border-width: 0 0 1px 0;
+    overflow-y: auto;
   }
 
   .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;
+  }
+
+  .selected-action-container {
+    padding-bottom: var(--spacing-s);
+    padding-top: var(--spacing-s);
   }
 
   .delete-action-button {
@@ -191,4 +202,8 @@
   .footer > a:hover {
     color: var(--blue);
   }
+
+  .rotate :global(svg) {
+    transform: rotate(-90deg);
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
index 4d07c0a71..f3ab468cc 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
@@ -5,12 +5,25 @@
   export let parameters
 </script>
 
-<div>
+<div class="root">
   <Label size="m" color="dark">Screen</Label>
-  <Select outline bind:value={parameters.url}>
+  <Select secondary bind:value={parameters.url}>
     <option value="" />
     {#each $store.screens as screen}
-      <option value={screen.url}>{screen.props._instanceName}</option>
+      <option value={screen.route}>{screen.props._instanceName}</option>
     {/each}
   </Select>
 </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/UpdateRecord.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
index afd901ed3..22125ee7c 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
@@ -1,5 +1,101 @@
 <script>
+  import { Select, Label, TextButton } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import { CloseCircleIcon } from "components/common/icons"
 
+  export let parameters
+
+  const emptyField = () => ({ name: "", value: "" })
+
+  $: fields = Object.keys(parameters.fields || emptyField()).map(name => ({
+    name,
+    value: (parameters.fields && parameters.fields[name]) || "",
+  }))
+
+  $: 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
+  }
+
+  const bindablePropertyName = prop => {
+    if (prop.type === "instance") return prop.instance._instanceName
+    return instance.readableBinding.split(".")[
+      instance.readableBinding.lastIndexOf(".")
+    ]
+  }
+
+  let fieldNames
+  $: {
+    fieldNames =
+      parameters.model &&
+      Object.keys(
+        $backendUiStore.models.find(model => model._id === parameters.model)
+          .schema
+      )
+  }
 </script>
 
-<div>Update Record</div>
+<div class="root">
+  <Label size="m" color="dark">Table</Label>
+  <Select secondary bind:value={parameters.model}>
+    <option value="" />
+    {#each $backendUiStore.models as model}
+      <option value={model._id}>{model.name}</option>
+    {/each}
+  </Select>
+
+  {#if parameters.model && fields}
+    {#each fields as field}
+      <Label size="m" color="dark">Field</Label>
+      <Select secondary bind:value={field.name}>
+        <option value="" />
+        {#each fieldNames as fieldName}
+          <option value={fieldName}>{fieldName}</option>
+        {/each}
+      </Select>
+      <Label size="m" color="dark">Value</Label>
+      <Select secondary bind:value={field.value}>
+        <option value="" />
+        {#each bindableProperties as bindableProp}
+          <option value={bindableProp.runtimeBinding}>
+            {bindablePropertyName(bindableProp)}
+          </option>
+        {/each}
+      </Select>
+      <div class="remove-field-container">
+        <TextButton text small>
+          <CloseCircleIcon />
+        </TextButton>
+      </div>
+    {/each}
+  {/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;
+  }
+
+  .remove-field-container :global(button) {
+    vertical-align: bottom;
+  }
+</style>
