diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
new file mode 100644
index 0000000000..a05d5b9996
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -0,0 +1,190 @@
+<script>
+    import groupBy from "lodash/fp/groupBy"
+    import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+    import { createEventDispatcher } from "svelte"
+    import { isValid } from "@budibase/string-templates"
+    import { handlebarsCompletions } from "constants/completions"
+  
+    const dispatch = createEventDispatcher()
+  
+    export let value = ""
+    export let bindingDrawer
+    export let bindableProperties = []
+  
+    let originalValue = value
+    let helpers = handlebarsCompletions()
+    let getCaretPosition
+    let search = ""
+    let validity = true
+  
+    $: categories = Object.entries(groupBy("category", bindableProperties))
+    $: value && checkValid()
+    $: dispatch("update", value)
+    $: searchRgx = new RegExp(search, "ig")
+  
+    function checkValid() {
+        validity = isValid(value)
+    }
+  
+    function addToText(binding) {
+        const position = getCaretPosition()
+        const toAdd = `{{ ${binding.path} }}`
+        if (position.start) {
+        value =
+            value.substring(0, position.start) +
+            toAdd +
+            value.substring(position.end, value.length)
+        } else {
+        value += toAdd
+        }
+    }
+    export function cancel() {
+      dispatch("update", originalValue)
+      bindingDrawer.close()
+    }
+</script>
+
+<div class="container">
+    <div class="list">
+        <Heading small>Available bindings</Heading>
+        <Spacer medium />
+        <Input extraThin placeholder="Search" bind:value={search} />
+        <Spacer medium />
+        {#each categories as [categoryName, bindings]}
+        <Heading extraSmall>{categoryName}</Heading>
+        <Spacer extraSmall />
+        {#each bindableProperties.filter(binding =>
+            binding.label.match(searchRgx)
+        ) as binding}
+            <div class="binding" on:click={() => addToText(binding)}>
+            <span class="binding__label">{binding.label}</span>
+            <span class="binding__type">{binding.type}</span>
+            <br />
+            <div class="binding__description">
+                {binding.description || ''}
+            </div>
+            </div>
+        {/each}
+        {/each}
+        <Heading extraSmall>Helpers</Heading>
+        <Spacer extraSmall />
+        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+            <div class="binding" on:click={() => addToText(helper)}>
+                <span class="binding__label">{helper.label}</span>
+                <br />
+                <div class="binding__description">
+                {@html helper.description || ''}
+                </div>
+                <pre>{helper.example || ''}</pre>
+            </div>
+        {/each}
+    </div>
+    <div class="text">
+        <TextArea
+        bind:getCaretPosition
+        thin
+        bind:value
+        placeholder="Add text, or click the objects on the left to add them to the textbox." />
+        {#if !validity}
+        <p class="syntax-error">
+            Current Handlebars syntax is invalid, please check the guide
+            <a href="https://handlebarsjs.com/guide/">here</a>
+            for more details.
+        </p>
+        {/if}
+    </div>
+</div>
+
+
+<style>
+    .container {
+      height: 40vh;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: 280px 1fr;
+    }
+  
+    .list {
+        border-right: var(--border-light);
+        padding: var(--spacing-l);
+        overflow: auto;
+    }
+    .list {
+        border-right: var(--border-light);
+        padding: var(--spacing-l);
+        overflow: auto;
+    }
+
+    .list::-webkit-scrollbar {
+        display: none;
+    }
+
+    .text {
+        padding: var(--spacing-l);
+        font-family: var(--font-sans);
+    }
+    .text :global(textarea) {
+        min-height: 100px;
+    }
+    .text :global(p) {
+        margin: 0;
+    }
+  
+    .binding {
+      font-size: 12px;
+      padding: var(--spacing-s);
+      border-radius: var(--border-radius-m);
+    }
+    .binding:hover {
+      background-color: var(--grey-2);
+      cursor: pointer;
+    }
+    .binding__label {
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+    .binding__description {
+      color: var(--grey-8);
+      margin-top: 2px;
+      white-space: normal;
+    }
+  
+    pre {
+      white-space: normal;
+    }
+  
+    .binding__type {
+      font-family: monospace;
+      background-color: var(--grey-2);
+      border-radius: var(--border-radius-m);
+      padding: 2px;
+      margin-left: 2px;
+      font-weight: 500;
+    }
+  
+    .editor {
+      padding-left: var(--spacing-l);
+    }
+    .editor :global(textarea) {
+      min-height: 60px;
+    }
+  
+    .controls {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-gap: var(--spacing-l);
+      align-items: center;
+      margin-top: var(--spacing-m);
+    }
+  
+    .syntax-error {
+      color: var(--red);
+      font-size: 12px;
+    }
+  
+    .syntax-error a {
+      color: var(--red);
+      text-decoration: underline;
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index ed89d4316d..2cd00d9ec0 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -5,7 +5,8 @@
   import { Button, Input, Select, Label } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
-  import BindableInput from "../../common/BindableInput.svelte"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
 
   export let block
   export let webhookModal
@@ -64,10 +65,12 @@
     {:else if value.customType === 'password'}
       <Input type="password" extraThin bind:value={block.inputs[key]} />
     {:else if value.customType === 'email'}
-      <BindableInput
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
         type={'email'}
         extraThin
-        bind:value={block.inputs[key]}
+        value={block.inputs[key]}
+        on:change={e => block.inputs[key] = e.detail}
         {bindings} />
     {:else if value.customType === 'table'}
       <TableSelector bind:value={block.inputs[key]} />
@@ -78,10 +81,12 @@
     {:else if value.customType === 'triggerSchema'}
       <SchemaSetup bind:value={block.inputs[key]} />
     {:else if value.type === 'string' || value.type === 'number'}
-      <BindableInput
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
         type={value.customType}
         extraThin
-        bind:value={block.inputs[key]}
+        value={block.inputs[key]}
+        on:change={e => block.inputs[key] = e.detail}
         {bindings} />
     {/if}
   </div>
@@ -102,11 +107,4 @@
     font-size: var(--font-size-xs);
     color: var(--grey-7);
   }
-
-  textarea {
-    min-height: 150px;
-    font-family: inherit;
-    padding: 12px;
-    margin-top: 8px;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
deleted file mode 100644
index 06013cfea2..0000000000
--- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte
+++ /dev/null
@@ -1,219 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import {
-    TextArea,
-    Input,
-    Heading,
-    Body,
-    Spacer,
-    Button,
-    Popover,
-  } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
-  import { handlebarsCompletions } from "constants/completions"
-  import { readableToRuntimeBinding } from "builderStore/dataBinding"
-
-  const dispatch = createEventDispatcher()
-
-  export let value = ""
-  export let bindings = []
-  export let anchor
-  export let align
-  export let popover = null
-
-  let helpers = handlebarsCompletions()
-  let getCaretPosition
-  let validity = true
-  let search = ""
-
-  $: categories = Object.entries(groupBy("category", bindings))
-  $: value && checkValid()
-  $: searchRgx = new RegExp(search, "ig")
-
-  function onClickBinding(binding) {
-    const position = getCaretPosition()
-    const toAdd = `{{ ${binding.path} }}`
-    if (position.start) {
-      value =
-        value.substring(0, position.start) +
-        toAdd +
-        value.substring(position.end, value.length)
-    } else {
-      value += toAdd
-    }
-  }
-
-  function checkValid() {
-    const runtimeValue = readableToRuntimeBinding(bindings, value)
-    validity = isValid(runtimeValue)
-  }
-</script>
-
-<Popover {anchor} {align} bind:this={popover}>
-  <div class="container">
-    <div class="bindings">
-      <Heading small>Available bindings</Heading>
-      <Spacer medium />
-      <Input extraThin placeholder="Search" bind:value={search} />
-      <Spacer medium />
-      <div class="bindings__wrapper">
-        <div class="bindings__list">
-          {#each categories as [categoryName, bindings]}
-            <Heading extraSmall>{categoryName}</Heading>
-            <Spacer extraSmall />
-            {#each bindings.filter(binding =>
-              binding.label.match(searchRgx)
-            ) as binding}
-              <div class="binding" on:click={() => onClickBinding(binding)}>
-                <span class="binding__label">{binding.label}</span>
-                <span class="binding__type">{binding.type}</span>
-                <br />
-                <div class="binding__description">
-                  {binding.description || ''}
-                </div>
-              </div>
-            {/each}
-          {/each}
-          <Heading extraSmall>Helpers</Heading>
-          <Spacer extraSmall />
-          {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-            <div class="binding" on:click={() => onClickBinding(helper)}>
-              <span class="binding__label">{helper.label}</span>
-              <br />
-              <div class="binding__description">
-                {@html helper.description || ''}
-              </div>
-              <pre>{helper.example || ''}</pre>
-            </div>
-          {/each}
-        </div>
-      </div>
-    </div>
-    <div class="editor">
-      <Heading small>Data binding</Heading>
-      <Body small lh black>
-        Binding connects one piece of data to another and makes it dynamic.
-        Click the objects on the left to add them to the textbox.
-      </Body>
-      <TextArea
-        thin
-        bind:getCaretPosition
-        bind:value
-        placeholder="Add options from the left, type text, or do both" />
-      {#if !validity}
-        <p class="syntax-error">
-          Current Handlebars syntax is invalid, please check the guide
-          <a href="https://handlebarsjs.com/guide/">here</a>
-          for more details.
-        </p>
-      {/if}
-      <div class="controls">
-        <a href="https://docs.budibase.com/design/binding">
-          <Body small>Learn more about binding</Body>
-        </a>
-        <Button on:click={popover.hide} disabled={!validity} primary>
-          Done
-        </Button>
-      </div>
-    </div>
-  </div>
-</Popover>
-
-<style>
-  .container {
-    display: grid;
-    grid-template-columns: 280px 1fr;
-    width: 800px;
-  }
-
-  .bindings {
-    border-right: 1px solid var(--grey-4);
-    flex: 0 0 240px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    padding-right: var(--spacing-l);
-  }
-  .bindings :global(label) {
-    margin: var(--spacing-m) 0;
-  }
-  .bindings :global(label:first-child) {
-    margin-top: 0;
-  }
-  .bindings__wrapper {
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: relative;
-    flex: 1 1 auto;
-    -ms-overflow-style: none;
-  }
-
-  .bindings__wrapper::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .bindings__list {
-    position: absolute;
-    width: 100%;
-  }
-
-  .binding {
-    font-size: 12px;
-    padding: var(--spacing-s);
-    border-radius: var(--border-radius-m);
-  }
-  .binding:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
-  }
-  .binding__label {
-    font-weight: 500;
-    text-transform: capitalize;
-  }
-  .binding__description {
-    color: var(--grey-8);
-    margin-top: 2px;
-    white-space: normal;
-  }
-
-  pre {
-    white-space: normal;
-  }
-
-  .binding__type {
-    font-family: monospace;
-    background-color: var(--grey-2);
-    border-radius: var(--border-radius-m);
-    padding: 2px;
-    margin-left: 2px;
-    font-weight: 500;
-  }
-
-  .editor {
-    padding-left: var(--spacing-l);
-  }
-  .editor :global(textarea) {
-    min-height: 60px;
-  }
-
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-gap: var(--spacing-l);
-    align-items: center;
-    margin-top: var(--spacing-m);
-  }
-
-  .syntax-error {
-    color: var(--red);
-    font-size: 12px;
-  }
-
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 7b010f2ecb..4244a0bced 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,7 +1,8 @@
 <script>
   import { backendUiStore } from "builderStore"
   import { Select } from "@budibase/bbui"
-  import BindableInput from "../../common/BindableInput.svelte"
+  import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
+  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
 
   export let value
   export let bindings
@@ -39,9 +40,11 @@
             {/each}
           </Select>
         {:else if schema.type === 'string' || schema.type === 'number'}
-          <BindableInput
+          <DrawerBindableInput
+            panel={AutomationBindingPanel}
             extraThin
-            bind:value={value[field]}
+            value={value[field]}
+            on:change={e => value[field] = e.detail}
             label={field}
             type="string"
             {bindings} />
diff --git a/packages/builder/src/components/common/BindableInput.svelte b/packages/builder/src/components/common/BindableInput.svelte
deleted file mode 100644
index a8df019869..0000000000
--- a/packages/builder/src/components/common/BindableInput.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
-  import { Input, Icon } from "@budibase/bbui"
-
-  const dispatch = createEventDispatcher()
-
-  export let bindings = []
-  export let value
-
-  let anchor
-  let popover = undefined
-  let enrichedValue
-  let inputProps
-
-  // Extract all other props to pass to input component
-  $: {
-    let { bindings, ...otherProps } = $$props
-    inputProps = otherProps
-  }
-  $: value && dispatch("change", value)
-</script>
-
-<div class="container" bind:this={anchor}>
-  <Input {...inputProps} bind:value />
-  <div class="icon" on:click={popover.show}>
-    <Icon name="lightning" />
-  </div>
-</div>
-<GenericBindingPopover
-  {anchor}
-  {bindings}
-  bind:value
-  bind:popover
-  align="right" />
-
-<style>
-  .container {
-    position: relative;
-  }
-
-  .icon {
-    right: 2px;
-    top: 5px;
-    bottom: 2px;
-    position: absolute;
-    align-items: center;
-    display: flex;
-    box-sizing: border-box;
-    padding-left: var(--spacing-xs);
-    border-left: 1px solid var(--grey-4);
-    background-color: var(--grey-2);
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
-    color: var(--grey-7);
-    font-size: 16px;
-    margin-top: 20px;
-  }
-  .icon:hover {
-    color: var(--ink);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index b534376a55..647638e8c9 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -8,6 +8,7 @@
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
+  export let panel = BindingPanel
   export let value = ""
   export let bindings = []
   export let thin = true
@@ -49,7 +50,8 @@
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
   <div slot="body">
-    <BindingPanel
+    <svelte:component
+      this={panel}
       value={readableValue}
       close={handleClose}
       on:update={event => (tempValue = event.detail)}