diff --git a/packages/builder/src/components/common/MultiSelect.svelte b/packages/builder/src/components/common/MultiSelect.svelte
index 641ca6beaf..f000df7f41 100644
--- a/packages/builder/src/components/common/MultiSelect.svelte
+++ b/packages/builder/src/components/common/MultiSelect.svelte
@@ -2,22 +2,22 @@
   import { onMount } from "svelte"
   import { fly } from "svelte/transition"
   import { Label } from "@budibase/bbui"
+  const xPath =
+    "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 
   export let value = []
   export let readonly = false
-  export let placeholder = ""
   export let label
 
-  let input,
-    inputValue,
-    options = [],
-    activeOption,
-    showOptions = false,
-    selected = {},
-    first = true,
-    slot
-  const iconClearPath =
-    "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  let placeholder = "Type to search"
+  let input
+  let inputValue
+  let options = []
+  let activeOption
+  let optionsVisible = false
+  let selected = {}
+  let first = true
+  let slot
 
   onMount(() => {
     slot.querySelectorAll("option").forEach(o => {
@@ -31,7 +31,6 @@
         {}
       ))
     first = false
-    console.log(options)
   })
 
   $: if (!first) value = Object.values(selected).map(o => o.value)
@@ -55,61 +54,34 @@
     }
   }
 
-  function optionsVisibility(show) {
-    if (readonly) return
-    if (typeof show === "boolean") {
-      showOptions = show
-      show && input.focus()
-    } else {
-      showOptions = !showOptions
-    }
-    if (!showOptions) {
+  function removeAll() {
+    selected = []
+    inputValue = ""
+  }
+
+  function showOptions(show) {
+    optionsVisible = show
+    if (!show) {
       activeOption = undefined
-    }
-  }
-
-  function handleKeyup(e) {
-    if (e.keyCode === 13) {
-      Object.keys(selected).includes(activeOption.value)
-        ? remove(activeOption.value)
-        : add(activeOption)
-      inputValue = ""
-    }
-    if ([38, 40].includes(e.keyCode)) {
-      // up and down arrows
-      const increment = e.keyCode === 38 ? -1 : 1
-      const calcIndex = filtered.indexOf(activeOption) + increment
-      activeOption =
-        calcIndex < 0
-          ? filtered[filtered.length - 1]
-          : calcIndex === filtered.length
-          ? filtered[0]
-          : filtered[calcIndex]
-    }
-  }
-
-  function handleBlur(e) {
-    optionsVisibility(false)
-  }
-
-  function handleTokenClick(e) {
-    if (e.target.closest(".token-remove")) {
-      e.stopPropagation()
-      remove(e.target.closest(".token").dataset.id)
-    } else if (e.target.closest(".remove-all")) {
-      selected = []
-      inputValue = ""
     } else {
-      optionsVisibility(true)
+      input.focus()
     }
   }
 
+  function handleBlur() {
+    showOptions(false)
+  }
+
+  function handleFocus() {
+    showOptions(true)
+  }
+
   function handleOptionMousedown(e) {
     const value = e.target.dataset.value
     if (selected[value]) {
       remove(value)
     } else {
-      add(options.filter(o => o.value === value)[0])
+      add(options.filter(option => option.value === value)[0])
       input.focus()
     }
   }
@@ -120,63 +92,61 @@
     <Label extraSmall grey>{label}</Label>
   {/if}
   <div class="multiselect" class:readonly>
-    <div class="tokens" class:showOptions on:click={handleTokenClick}>
-      {#each Object.values(selected) as s}
-        <div class="token" data-id={s.value}>
-          <span>{s.name}</span>
-          {#if !readonly}
-            <div class="token-remove" title="Remove {s.name}">
-              <svg
-                class="icon-clear"
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24">
-                <path d={iconClearPath} />
-              </svg>
-            </div>
-          {/if}
-        </div>
-      {/each}
-      <div class="actions">
-        {#if !readonly}
-          <input
-            autocomplete="off"
-            bind:value={inputValue}
-            bind:this={input}
-            on:keyup={handleKeyup}
-            on:blur={handleBlur}
-            {placeholder} />
-          <div
-            class="remove-all"
-            title="Remove All"
-            class:hidden={!Object.keys(selected).length}>
-            <svg
-              class="icon-clear"
-              xmlns="http://www.w3.org/2000/svg"
-              width="18"
-              height="18"
-              viewBox="0 0 24 24">
-              <path d={iconClearPath} />
-            </svg>
+    <div class="tokens-wrapper">
+      <div class="tokens" class:showOptions>
+        {#each Object.values(selected) as option}
+          <div class="token" data-id={option.value}>
+            <span>{option.name}</span>
+            {#if !readonly}
+              <div
+                class="token-remove"
+                title="Remove {option.name}"
+                on:click={() => remove(option.value)}>
+                <svg
+                  class="icon-clear"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24">
+                  <path d={xPath} />
+                </svg>
+              </div>
+            {/if}
           </div>
+        {/each}
+      </div>
+    </div>
+    <div class="actions">
+      {#if !readonly}
+        <input
+          autocomplete="off"
+          bind:value={inputValue}
+          bind:this={input}
+          on:blur={handleBlur}
+          on:focus={handleFocus}
+          {placeholder} />
+        <div
+          class="remove-all"
+          title="Remove All"
+          class:hidden={!Object.keys(selected).length}
+          on:click={removeAll}>
           <svg
-            class="dropdown-arrow"
+            class="icon-clear"
             xmlns="http://www.w3.org/2000/svg"
             width="18"
             height="18"
-            viewBox="0 0 18 18">
-            <path d="M5 8l4 4 4-4z" />
+            viewBox="0 0 24 24">
+            <path d={xPath} />
           </svg>
-        {/if}
-      </div>
+        </div>
+      {/if}
     </div>
 
     <select bind:this={slot} type="multiple" class="hidden">
       <slot />
     </select>
 
-    {#if showOptions}
+    {#if optionsVisible}
       <ul
         class="options"
         transition:fly={{ duration: 200, y: 5 }}
@@ -189,6 +159,9 @@
             {option.name}
           </li>
         {/each}
+        {#if !filtered.length && inputValue.length}
+          <li>No results</li>
+        {/if}
       </ul>
     {/if}
   </div>
@@ -196,19 +169,31 @@
 
 <style>
   .multiselect {
-    background-color: white;
-    border-bottom: 1px solid hsl(0, 0%, 70%);
     position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
   }
   .multiselect:not(.readonly):hover {
     border-bottom-color: hsl(0, 0%, 50%);
   }
 
+  .tokens-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 0 1 auto;
+  }
+
   .tokens {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
     position: relative;
+    width: 0;
+    flex: 1 1 auto;
   }
   .tokens::after {
     background: none repeat scroll 0 0 transparent;
@@ -218,7 +203,6 @@
     height: 2px;
     left: 50%;
     position: absolute;
-    background: hsl(45, 100%, 51%);
     transition: width 0.3s ease 0s, left 0.3s ease 0s;
     width: 0;
   }
@@ -227,18 +211,19 @@
     left: 0;
   }
   .token {
+    font-size: var(--font-size-xs);
     align-items: center;
-    background-color: hsl(214, 17%, 92%);
-    border-radius: 1.25rem;
+    background-color: var(--grey-3);
+    border-radius: var(--border-radius-l);
     display: flex;
     margin: 0.25rem 0.5rem 0.25rem 0;
     max-height: 1.3rem;
-    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+    padding: var(--spacing-s) var(--spacing-m);
     transition: background-color 0.3s;
     white-space: nowrap;
   }
   .token:hover {
-    background-color: hsl(214, 15%, 88%);
+    background-color: var(--grey-4);
   }
   .readonly .token {
     color: hsl(0, 0%, 40%);
@@ -246,9 +231,9 @@
   .token-remove,
   .remove-all {
     align-items: center;
-    background-color: hsl(214, 15%, 55%);
+    background-color: var(--grey-5);
     border-radius: 50%;
-    color: hsl(214, 17%, 92%);
+    color: var(--white);
     display: flex;
     justify-content: center;
     height: 1.25rem;
@@ -257,7 +242,7 @@
   }
   .token-remove:hover,
   .remove-all:hover {
-    background-color: hsl(215, 21%, 43%);
+    background-color: var(--grey-6);
     cursor: pointer;
   }
 
@@ -265,24 +250,17 @@
     align-items: center;
     display: flex;
     flex: 1;
-    min-width: 15rem;
   }
-
-  input {
+  .actions > * {
+    flex: 0 0 auto;
+  }
+  .actions > input {
     border: none;
-    font-size: 1.5rem;
+    font-size: var(--font-size-xs);
     line-height: 1.5rem;
-    margin: 0;
     outline: none;
-    padding: 0;
-    width: 100%;
-  }
-
-  .dropdown-arrow path {
-    fill: hsl(0, 0%, 70%);
-  }
-  .multiselect:hover .dropdown-arrow path {
-    fill: hsl(0, 0%, 50%);
+    background-color: transparent;
+    flex: 1 1 auto;
   }
 
   .icon-clear path {
@@ -290,7 +268,6 @@
   }
 
   .options {
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px -2px 4px rgba(0, 0, 0, 0.1);
     left: 0;
     list-style: none;
     margin-block-end: 0;
@@ -300,34 +277,27 @@
     padding-inline-start: 0;
     position: absolute;
     top: calc(100% + 1px);
-    width: 100%;
+    width: calc(100% - 4px);
+    border: var(--border-dark);
+    border-radius: var(--border-radius-m);
+    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
+    margin-top: var(--spacing-xs);
+    padding: var(--spacing-s) 0;
+    z-index: 1;
+    background-color: white;
   }
   li {
     background-color: white;
     cursor: pointer;
-    padding: 0.5rem;
-  }
-  li:last-child {
-    border-bottom-left-radius: 0.2rem;
-    border-bottom-right-radius: 0.2rem;
-  }
-  li:not(.selected):hover {
-    background-color: hsl(214, 17%, 92%);
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
   }
   li.selected {
-    background-color: hsl(232, 54%, 41%);
+    background-color: var(--blue);
     color: white;
   }
-  li.selected:nth-child(even) {
-    background-color: hsl(232, 50%, 45%);
-    color: white;
-  }
-  li.active {
-    background-color: hsl(214, 17%, 88%);
-  }
-  li.selected.active,
-  li.selected:hover {
-    background-color: hsl(232, 48%, 50%);
+  li:not(.selected):hover {
+    background-color: var(--grey-1);
   }
 
   .hidden {