diff --git a/.eslintignore b/.eslintignore
index e0e0fa3d0a..68d88aaaf1 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,5 @@ public
 dist
 packages/server/builder
 packages/server/coverage
+packages/server/client
 packages/builder/.routify
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 17875bffe0..522d218640 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,5 @@ dist
 packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
 packages/server/builder
 packages/server/coverage
+packages/server/client
 packages/builder/.routify
\ No newline at end of file
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/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index f2f1dbe174..d1c5d104d3 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -69,8 +69,9 @@
         <Input type="password" bind:value={block.inputs[key]} />
       {:else if value.customType === "email"}
         <DrawerBindableInput
+          title={value.title}
           panel={AutomationBindingPanel}
-          type={"email"}
+          type="email"
           value={block.inputs[key]}
           on:change={e => (block.inputs[key] = e.detail)}
           {bindings}
@@ -102,6 +103,7 @@
         </CodeEditorModal>
       {:else if value.type === "string" || value.type === "number"}
         <DrawerBindableInput
+          title={value.title}
           panel={AutomationBindingPanel}
           type={value.customType}
           value={block.inputs[key]}
@@ -127,6 +129,7 @@
 
   .block-field {
     display: grid;
+    grid-gap: 5px;
   }
 
   .block-label {
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..ee2487a9d6 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -17,10 +17,11 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  $: tempValue = Array.isArray(value) ? value : []
+  let valid = true
   $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: tempValue = readableValue
 
-  const handleClose = () => {
+  const saveBinding = () => {
     onChange(tempValue)
     bindingDrawer.hide()
   }
@@ -48,13 +49,15 @@
   <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" disabled={!valid} on:click={saveBinding}>
+    Save
+  </Button>
   <svelte:component
     this={panel}
     slot="body"
+    bind:valid
     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/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index e2d2a2741e..2a72d7a315 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -6,7 +6,6 @@
   } from "builderStore/dataBinding"
   import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
-  const dispatch = createEventDispatcher()
 
   export let panel = ServerBindingPanel
   export let value = ""
@@ -16,12 +15,11 @@
   export let placeholder
   export let label
 
+  const dispatch = createEventDispatcher()
   let bindingModal
-  let validity = true
-
+  let valid = true
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
-  $: invalid = !validity
 
   const saveBinding = () => {
     onChange(tempValue)
@@ -38,7 +36,7 @@
     {label}
     {thin}
     value={readableValue}
-    on:change={event => onChange(event.target.value)}
+    on:change={event => onChange(event.detail)}
     {placeholder}
   />
   <div class="icon" on:click={bindingModal.show}>
@@ -46,23 +44,20 @@
   </div>
 </div>
 <Modal bind:this={bindingModal}>
-  <ModalContent
-    {title}
-    onConfirm={saveBinding}
-    bind:disabled={invalid}
-    size="XL"
-  >
+  <ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
     <Body extraSmall grey>
       Add the objects on the left to enrich your text.
     </Body>
-    <svelte:component
-      this={panel}
-      serverSide
-      value={readableValue}
-      bind:validity
-      on:update={event => (tempValue = event.detail)}
-      bindableProperties={bindings}
-    />
+    <div class="panel-wrapper">
+      <svelte:component
+        this={panel}
+        serverSide
+        value={readableValue}
+        bind:valid
+        on:change={e => (tempValue = e.detail)}
+        bindableProperties={bindings}
+      />
+    </div>
   </ModalContent>
 </Modal>
 
@@ -100,4 +95,9 @@
     background-color: var(--spectrum-global-color-gray-50);
     border-color: var(--spectrum-alias-border-color-hover);
   }
+
+  .panel-wrapper {
+    border: var(--border-light);
+    border-radius: 4px;
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 2c0e33227b..4da29cb049 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,12 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import {
-    Input,
-    TextArea,
-    Heading,
-    Layout,
-    DrawerContent,
-  } from "@budibase/bbui"
+  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
@@ -16,83 +10,91 @@
   const dispatch = createEventDispatcher()
 
   export let bindableProperties = []
-  export let validity = true
+  export let valid = true
   export let value = ""
 
-  let hasReadable = bindableProperties[0].readableBinding != null
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
 
   $: categories = Object.entries(groupBy("category", bindableProperties))
-  $: value && checkValid()
-  $: dispatch("update", value)
+  $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+  $: dispatch("change", value)
   $: searchRgx = new RegExp(search, "ig")
-
-  function checkValid() {
-    if (hasReadable) {
-      const runtime = readableToRuntimeBinding(bindableProperties, value)
-      validity = isValid(runtime)
-    } else {
-      validity = isValid(value)
-    }
-  }
+  $: filteredCategories = categories.map(([categoryName, bindings]) => {
+    const filteredBindings = bindings.filter(binding => {
+      return binding.label.match(searchRgx)
+    })
+    return [categoryName, filteredBindings]
+  })
+  $: filteredHelpers = helpers?.filter(helper => {
+    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
+  })
 </script>
 
 <DrawerContent>
-  <div slot="sidebar" class="list">
-    <Layout>
-      <div class="section">
-        <Heading size="S">Available bindings</Heading>
-        <Input extraThin placeholder="Search" bind:value={search} />
-      </div>
-      <div class="section">
-        {#each categories as [categoryName, bindings]}
-          <Heading size="XS">{categoryName}</Heading>
-          {#each bindings.filter( binding => binding.label.match(searchRgx) ) as binding}
-            <div
-              class="binding"
-              on:click={() => {
-                value = addToText(value, getCaretPosition(), 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}
-      </div>
-      <div class="section">
-        <Heading size="XS">Helpers</Heading>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-          <div
-            class="binding"
-            on:click={() => {
-              value = addToText(value, getCaretPosition(), helper.text)
-            }}
-          >
-            <span class="binding__label">{helper.label}</span>
-            <br />
-            <div class="binding__description">
-              {@html helper.description || ""}
-            </div>
-            <pre>{helper.example || ""}</pre>
-          </div>
-        {/each}
-      </div>
-    </Layout>
-  </div>
-  <div class="text">
+  <svelte:fragment slot="sidebar">
+    <div class="container">
+      <section>
+        <div class="heading">Search</div>
+        <Search placeholder="Search" bind:value={search} />
+      </section>
+      {#each filteredCategories as [categoryName, bindings]}
+        {#if bindings.length}
+          <section>
+            <div class="heading">{categoryName}</div>
+            <ul>
+              {#each bindings as binding}
+                <li
+                  on:click={() => {
+                    value = addToText(value, getCaretPosition(), binding)
+                  }}
+                >
+                  <span class="binding__label">{binding.label}</span>
+                  <span class="binding__type">{binding.type}</span>
+                  {#if binding.description}
+                    <br />
+                    <div class="binding__description">
+                      {binding.description || ""}
+                    </div>
+                  {/if}
+                </li>
+              {/each}
+            </ul>
+          </section>
+        {/if}
+      {/each}
+      {#if filteredHelpers?.length}
+        <section>
+          <div class="heading">Helpers</div>
+          <ul>
+            {#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}
+    </div>
+  </svelte:fragment>
+  <div class="main">
     <TextArea
       bind:getCaretPosition
       bind:value
       placeholder="Add text, or click the objects on the left to add them to the textbox."
     />
-    {#if !validity}
+    {#if !valid}
       <p class="syntax-error">
         Current Handlebars syntax is invalid, please check the guide
         <a href="https://handlebarsjs.com/guide/">here</a>
@@ -103,70 +105,105 @@
 </DrawerContent>
 
 <style>
-  .list {
-    grid-gap: var(--spacing-s);
-    border-right: var(--border-light);
-    overflow-y: auto;
-  }
-  .section {
-    display: grid;
-    grid-gap: var(--spacing-s);
-  }
-
-  .text {
-    padding: var(--spacing-l);
-    font-family: var(--font-sans);
-  }
-  .text :global(textarea) {
+  .main :global(textarea) {
     min-height: 150px !important;
   }
-  .text :global(p) {
+
+  .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 {
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  }
+  section:not(:first-child) {
+    border-top: var(--border-light);
+  }
+  ul {
+    list-style: none;
+    padding: 0;
     margin: 0;
   }
 
-  .binding {
-    font-size: 12px;
+  li {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
     border: var(--border-light);
-    border-width: 1px 0 0 0;
-    padding: var(--spacing-m) 0;
-    margin: auto 0;
-    align-items: center;
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
+  }
+  li:not(:last-of-type) {
+    margin-bottom: var(--spacing-s);
+  }
+  li :global(*) {
+    transition: color 130ms ease-in-out;
+  }
+  li:hover {
+    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;
   }
-  .binding:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
+  li:hover :global(*) {
+    color: var(--spectrum-global-color-gray-900) !important;
   }
+
+  .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 {
+    padding-top: var(--spacing-m);
+    color: var(--red);
+    font-size: 12px;
+  }
+  .syntax-error a {
+    color: var(--red);
+    text-decoration: underline;
+  }
+
   .binding__label {
     font-weight: 600;
     text-transform: capitalize;
   }
   .binding__description {
-    color: var(--grey-8);
-    margin-top: 2px;
+    color: var(--spectrum-global-color-gray-700);
+    margin: 0.5rem 0 0 0;
     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;
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: var(--border-radius-s);
+    padding: 2px 4px;
     margin-left: 2px;
     font-weight: 600;
   }
-
-  .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/design/PropertiesPanel/CustomStylesSection.svelte b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
index caaaf5e4bf..4ff10c64c7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
@@ -40,7 +40,7 @@
     <Button cta slot="buttons" on:click={save}>Save</Button>
     <DrawerContent slot="body">
       <div class="content">
-        <Layout gap="S">
+        <Layout gap="S" noPadding>
           <Body size="S">Custom CSS overrides all other component styles.</Body>
           <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
         </Layout>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 8f5c113006..c8ce846192 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -132,7 +132,7 @@
         Save
       </Button>
       <DrawerContent slot="body">
-        <Layout>
+        <Layout noPadding>
           {#if value.parameters.length > 0}
             <ParameterBuilder
               bind:customParams={value.queryParams}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 843f33cab9..444aab5fe9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -73,54 +73,49 @@
 </script>
 
 <DrawerContent>
-  <div class="actions-list" slot="sidebar">
-    <Layout>
-      <ActionMenu>
-        <Button slot="control" secondary>Add Action</Button>
-        {#each actionTypes as actionType}
-          <MenuItem on:click={addAction(actionType)}>
-            {actionType.name}
-          </MenuItem>
-        {/each}
-      </ActionMenu>
-
-      {#if actions && actions.length > 0}
-        <div
-          class="action-dnd-container"
-          use:dndzone={{
-            items: actions,
-            flipDurationMs,
-            dropTargetStyle: { outline: "none" },
-          }}
-          on:consider={handleDndConsider}
-          on:finalize={handleDndFinalize}
-        >
-          {#each actions as action, index (action.id)}
-            <div
-              class="action-container"
-              animate:flip={{ duration: flipDurationMs }}
-            >
-              <div
-                class="action-header"
-                class:selected={action === selectedAction}
-                on:click={selectAction(action)}
-              >
-                {index + 1}.
-                {action[EVENT_TYPE_KEY]}
-              </div>
-              <div
-                on:click={() => deleteAction(index)}
-                style="margin-left: auto;"
-              >
-                <Icon size="S" hoverable name="Close" />
-              </div>
+  <Layout noPadding gap="S" slot="sidebar">
+    {#if actions && actions.length > 0}
+      <div
+        class="actions"
+        use:dndzone={{
+          items: actions,
+          flipDurationMs,
+          dropTargetStyle: { outline: "none" },
+        }}
+        on:consider={handleDndConsider}
+        on:finalize={handleDndFinalize}
+      >
+        {#each actions as action, index (action.id)}
+          <div
+            class="action-container"
+            animate:flip={{ duration: flipDurationMs }}
+            class:selected={action === selectedAction}
+            on:click={selectAction(action)}
+          >
+            <Icon name="DragHandle" size="XL" />
+            <div class="action-header">
+              {index + 1}.&nbsp;{action[EVENT_TYPE_KEY]}
             </div>
-          {/each}
-        </div>
-      {/if}
-    </Layout>
-  </div>
-  <Layout>
+            <Icon
+              name="Close"
+              hoverable
+              size="S"
+              on:click={() => deleteAction(index)}
+            />
+          </div>
+        {/each}
+      </div>
+    {/if}
+    <ActionMenu>
+      <Button slot="control" secondary>Add Action</Button>
+      {#each actionTypes as actionType}
+        <MenuItem on:click={addAction(actionType)}>
+          {actionType.name}
+        </MenuItem>
+      {/each}
+    </ActionMenu>
+  </Layout>
+  <Layout noPadding>
     {#if selectedAction}
       <div class="selected-action-container">
         <svelte:component
@@ -133,32 +128,41 @@
 </DrawerContent>
 
 <style>
-  .action-header {
+  .actions {
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-top: var(--spacing-s);
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
   }
 
   .action-header {
-    margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-s);
-    color: var(--grey-7);
-    font-weight: 600;
-  }
+    color: var(--spectrum-global-color-gray-700);
 
-  .action-header:hover,
-  .action-header.selected {
-    cursor: pointer;
-    color: var(--ink);
+    flex: 1 1 auto;
   }
 
   .action-container {
-    border-bottom: 1px solid var(--grey-1);
+    background-color: var(--background);
+    padding: var(--spacing-s) var(--spacing-m);
+    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;
+    gap: var(--spacing-m);
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
   }
-  .action-container:last-child {
-    border-bottom: none;
+  .action-container:hover,
+  .action-container.selected {
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-global-color-gray-500);
+    cursor: pointer;
+  }
+  .action-container:hover .action-header,
+  .action-container.selected .action-header {
+    color: var(--spectrum-global-color-gray-900);
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index 5d298e4b9f..d4e70dac05 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@@ -25,7 +25,7 @@
   }
 </script>
 
-<Layout gap="XS">
+<Layout gap="XS" noPadding>
   <Select
     label="Datasource"
     bind:value={parameters.datasourceId}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
index 712abd8a7c..d190200044 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@@ -42,7 +42,7 @@
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <DrawerContent slot="body">
-    <Layout>
+    <Layout noPadding>
       <Body size="S">
         {#if !numFilters}
           Add your first filter column.
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
index 9e33c627d9..1cf6240572 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
@@ -41,7 +41,7 @@
 
 <DrawerContent>
   <div class="container">
-    <Layout>
+    <Layout noPadding gap="S">
       {#if links?.length}
         <div
           class="links"
@@ -72,7 +72,7 @@
           {/each}
         </div>
       {/if}
-      <div class="button-container">
+      <div>
         <Button secondary icon="Add" on:click={addLink}>Add Link</Button>
       </div>
     </Layout>
@@ -83,16 +83,16 @@
   .container {
     width: 100%;
     max-width: 600px;
-    margin: var(--spacing-m) auto;
+    margin: 0 auto;
   }
   .links {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    gap: var(--spacing-s);
   }
   .link {
-    padding: 4px 8px;
     gap: var(--spacing-l);
     display: flex;
     flex-direction: row;
@@ -108,7 +108,4 @@
     flex: 1 1 auto;
     width: 0;
   }
-  .button-container {
-    margin-left: var(--spacing-l);
-  }
 </style>
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>
