diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 3658fdb7fe..a619ee0f8b 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
-  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Button from "../Button/Button.svelte"
   import Body from "../Typography/Body.svelte"
   import Heading from "../Typography/Heading.svelte"
 
@@ -38,13 +38,13 @@
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
-          <Body size="XXS">
+          <Body size="S">
             <slot name="description" />
           </Body>
         </div>
         <div class="buttons">
+          <Button secondary quiet on:click={hide}>Cancel</Button>
           <slot name="buttons" />
-          <ActionButton quiet icon="Close" on:click={hide} />
         </div>
       </header>
       <slot name="body" />
@@ -59,7 +59,7 @@
     left: 260px;
     width: calc(100% - 520px);
     background: var(--background);
-    border: var(--border-light);
+    border-top: var(--border-light);
     z-index: 2;
   }
 
@@ -68,17 +68,15 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: var(--spectrum-alias-item-padding-s) 0;
-  }
-  header :global(*) + :global(*) {
-    margin: 0 var(--spectrum-alias-grid-baseline);
+    padding: var(--spacing-l) var(--spacing-xl);
+    gap: var(--spacing-xl);
   }
 
   .text {
     display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-left: var(--spectrum-alias-item-padding-s);
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
   }
 </style>
diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 955abc0da4..28e0975d82 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -19,7 +19,7 @@
   .container {
     height: 100%;
     display: grid;
-    grid-template-columns: 290px 1fr;
+    grid-template-columns: 320px 1fr;
   }
   .no-sidebar {
     grid-template-columns: 1fr;
@@ -27,12 +27,15 @@
   .sidebar {
     border-right: var(--border-light);
     overflow: auto;
+    padding: var(--spacing-xl);
+    scrollbar-width: none;
   }
   .sidebar::-webkit-scrollbar {
     display: none;
   }
   .main {
     font-family: var(--font-sans);
+    padding: var(--spacing-xl);
   }
   .main :global(textarea) {
     min-height: 200px;
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 01e0c5918b..6290bd2a3d 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,20 +1,9 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import {
-    Search,
-    TextArea,
-    Heading,
-    Label,
-    DrawerContent,
-    Layout,
-  } from "@budibase/bbui"
+  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
-  import {
-    getBindableProperties,
-    readableToRuntimeBinding,
-  } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
+  import { readableToRuntimeBinding } from "builderStore/dataBinding"
   import { handlebarsCompletions } from "constants/completions"
   import { addToText } from "./utils"
 
@@ -22,44 +11,36 @@
 
   export let bindableProperties
   export let value = ""
-  export let bindingDrawer
-  export let valid = true
+  export let valid
 
-  let originalValue = value
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
 
-  $: value && checkValid()
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: dispatch("update", value)
-  $: ({ instance, context } = groupBy("type", bindableProperties))
+  $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+  $: dispatch("change", value)
+  $: ({ context } = groupBy("type", bindableProperties))
   $: searchRgx = new RegExp(search, "ig")
-
-  function checkValid() {
-    // TODO: need to convert the value to the runtime binding
-    const runtimeBinding = readableToRuntimeBinding(bindableProperties, value)
-    valid = isValid(runtimeBinding)
-  }
-
-  export function cancel() {
-    dispatch("update", originalValue)
-    bindingDrawer.close()
-  }
+  $: filteredColumns = context?.filter(context => {
+    return context.readableBinding.match(searchRgx)
+  })
+  $: filteredHelpers = helpers?.filter(helper => {
+    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
+  })
 </script>
 
 <DrawerContent>
   <svelte:fragment slot="sidebar">
-    <Layout>
-      <Search placeholder="Search" bind:value={search} />
-      {#if context}
+    <div class="container">
+      <section>
+        <div class="heading">Search</div>
+        <Search placeholder="Search" bind:value={search} />
+      </section>
+      {#if filteredColumns?.length}
         <section>
-          <Heading size="XS">Columns</Heading>
+          <div class="heading">Columns</div>
           <ul>
-            {#each context.filter( context => context.readableBinding.match(searchRgx) ) as { readableBinding }}
+            {#each filteredColumns as { readableBinding }}
               <li
                 on:click={() => {
                   value = addToText(value, getCaretPosition(), readableBinding)
@@ -71,39 +52,29 @@
           </ul>
         </section>
       {/if}
-      {#if instance}
+      {#if filteredHelpers?.length}
         <section>
-          <Heading size="XS">Components</Heading>
+          <div class="heading">Helpers</div>
           <ul>
-            {#each instance.filter( instance => instance.readableBinding.match(searchRgx) ) as { readableBinding }}
-              <li on:click={() => addToText(readableBinding)}>
-                {readableBinding}
+            {#each filteredHelpers as helper}
+              <li
+                on:click={() => {
+                  value = addToText(value, getCaretPosition(), helper.text)
+                }}
+              >
+                <div class="helper">
+                  <div class="helper__name">{helper.displayText}</div>
+                  <div class="helper__description">
+                    {@html helper.description}
+                  </div>
+                  <pre class="helper__example">{helper.example || ''}</pre>
+                </div>
               </li>
             {/each}
           </ul>
         </section>
       {/if}
-      <section>
-        <Heading size="XS">Helpers</Heading>
-        <ul>
-          {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-            <li
-              on:click={() => {
-                value = addToText(value, getCaretPosition(), helper.text)
-              }}
-            >
-              <div>
-                <Label extraSmall>{helper.displayText}</Label>
-                <div class="description">
-                  {@html helper.description}
-                </div>
-                <pre>{helper.example || ''}</pre>
-              </div>
-            </li>
-          {/each}
-        </ul>
-      </section>
-    </Layout>
+    </div>
   </svelte:fragment>
   <div class="main">
     <TextArea
@@ -122,50 +93,78 @@
 </DrawerContent>
 
 <style>
-  .main {
-    padding: var(--spacing-m);
-  }
-
   .main :global(textarea) {
     min-height: 150px !important;
   }
 
+  .container {
+    margin: calc(-1 * var(--spacing-xl));
+  }
+  .heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    padding: var(--spacing-xl) 0 var(--spacing-m) 0;
+  }
+
   section {
-    display: grid;
-    grid-gap: var(--spacing-s);
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  }
+  section:not(:first-child) {
+    border-top: var(--border-light);
   }
   ul {
     list-style: none;
-    margin: 0;
     padding: 0;
+    margin: 0;
   }
 
   li {
-    display: flex;
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
-    color: var(--grey-7);
     padding: var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-    border-top: var(--border-light);
-    border-width: 1px 0 1px 0;
     border-radius: 4px;
+    border: var(--border-light);
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
   }
-
-  pre,
-  .description {
-    white-space: normal;
+  li:not(:last-of-type) {
+    margin-bottom: var(--spacing-s);
+  }
+  li :global(*) {
+    transition: color 130ms ease-in-out;
   }
-
   li:hover {
-    background-color: var(--grey-2);
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-global-color-gray-500);
     cursor: pointer;
   }
+  li:hover :global(*) {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
 
-  li:active {
-    color: var(--blue);
+  .helper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+  .helper__name {
+    font-weight: bold;
+  }
+  .helper__description,
+  .helper__description :global(*) {
+    color: var(--spectrum-global-color-gray-700);
+  }
+  .helper__example {
+    white-space: normal;
+    margin: 0.5rem 0 0 0;
+    font-weight: 700;
+  }
+  .helper__description :global(p) {
+    margin: 0;
   }
 
   .syntax-error {
@@ -173,21 +172,8 @@
     color: var(--red);
     font-size: 12px;
   }
-
   .syntax-error a {
     color: var(--red);
     text-decoration: underline;
   }
-
-  .description :global(p) {
-    color: var(--grey-7);
-  }
-
-  .description :global(p:hover) {
-    color: var(--ink);
-  }
-
-  .description :global(p a) {
-    color: var(--grey-7);
-  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 800de89ea4..faf1776e8e 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -17,10 +17,10 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  $: tempValue = Array.isArray(value) ? value : []
   $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: tempValue = readableValue
 
-  const handleClose = () => {
+  const saveBinding = () => {
     onChange(tempValue)
     bindingDrawer.hide()
   }
@@ -48,13 +48,12 @@
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>
-  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
     value={readableValue}
-    close={handleClose}
-    on:update={event => (tempValue = event.detail)}
+    on:change={event => (tempValue = event.detail)}
     bindableProperties={bindings}
   />
 </Drawer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 0ee5646bc4..c1b5fa2f3b 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -20,7 +20,6 @@
   export let onChange = () => {}
 
   let bindingDrawer
-  let temporaryBindableValue = value
   let anchor
   let valid
 
@@ -29,10 +28,11 @@
     $store.selectedComponentId
   )
   $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
+  $: tempValue = safeValue
   $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
 
   const handleClose = () => {
-    handleChange(temporaryBindableValue)
+    handleChange(tempValue)
     bindingDrawer.hide()
   }
 
@@ -107,8 +107,7 @@
           slot="body"
           bind:valid
           value={safeValue}
-          close={handleClose}
-          on:update={e => (temporaryBindableValue = e.detail)}
+          on:change={e => (tempValue = e.detail)}
           {bindableProperties}
         />
       </Drawer>
