diff --git a/packages/builder/package.json b/packages/builder/package.json
index ace69a028a..d3ccdc4a9b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -60,7 +60,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.28.2",
+    "@budibase/bbui": "^1.29.0",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index ee6a8a4730..7dd67f3784 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -1,17 +1,25 @@
 <script>
-  import { Button, TextArea, Label } from "@budibase/bbui"
+  import { Button, TextArea, Label, Body } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
   export let bindableProperties
   console.log("Bindable Props: ", bindableProperties)
   export let value = ""
+  export let close
 
   function addToText(readableBinding) {
     value = value + `{{ ${readableBinding} }}`
   }
+  let originalValue = value
 
   $: dispatch("update", value)
+
+  function cancel() {
+    dispatch("update", originalValue)
+    close()
+    console.log("test")
+  }
 </script>
 
 <div class="container">
@@ -25,13 +33,17 @@
   </div>
   <div class="text">
     <Label size="l" color="dark">Data binding</Label>
+    <Body size="s" color="dark">
+      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 bind:value placeholder="" />
     <div class="controls">
       <a href="#">
-        <Label size="s" color="light">Objects</Label>
+        <Label size="s" color="light">Learn more about binding</Label>
       </a>
-      <Button>Test</Button>
-      <Button>Test</Button>
+      <Button on:click={cancel} secondary>Cancel</Button>
+      <Button on:click={close} primary>Done</Button>
     </div>
   </div>
 </div>
@@ -45,6 +57,12 @@
   .text {
     padding: var(--spacing-m);
   }
+  .controls {
+    margin-top: var(--spacing-m);
+    display: grid;
+    grid-gap: var(--spacing-l);
+    grid-template-columns: 1fr auto auto;
+  }
   .list {
     width: 150px;
     border-right: 1.5px solid blue;
@@ -53,6 +71,9 @@
     width: 600px;
     display: grid;
   }
+  .text :global(p) {
+    margin: 0;
+  }
   ul {
     list-style: none;
     padding-left: 0;
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index fc829e115c..9ff426e7b8 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -121,6 +121,7 @@
     align="right">
     <BindingDropdown
       {...handlevalueKey(value)}
+      close={dropdown.hide}
       on:update={e => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
   </DropdownMenu>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 60d129d208..ebbbe2b5b2 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -688,10 +688,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.28.2":
-  version "1.28.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.28.2.tgz#b86d10c2c4489e352a391ee55cc6fc5b24492e4c"
-  integrity sha512-8Mrh1ZrkGEl7syqMbsalI3pAy/V6Xh4tx14h3SXKx/XKXlzqxS4vq/+3DaphLbLn+0WZmHrxI5MkdfkSIh7nvw==
+"@budibase/bbui@^1.29.0":
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.0.tgz#f10815d6c8cb6125e2688960cd71640e2ce53c9b"
+  integrity sha512-pRnYxkymKE4DNWPJoutygIiUQFZ+sWSmL1aTVa//O6+GemieEwukT9JbMQ7+RdTHnWANJd0OxPGwAYvNEETOaw==
   dependencies:
     sirv-cli "^0.4.6"
 
