diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 688d3bf7e4..9dd5c68f43 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -10,11 +10,7 @@
   export let disabled = false
   export let icon = ""
 
-  export let xl = false
-  export let l = false
-  export let m = false
-  export let s = false
-  $: useDefault = ![xl, l, m, s].includes(true)
+  export let size = "M"
 
   function longPress(element) {
     if (!longPressable) return
@@ -42,11 +38,7 @@
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
-  class:spectrum-ActionButton--sizeS={s}
-  class:spectrum-ActionButton--sizeM={m || useDefault}
-  class:spectrum-ActionButton--sizeL={l}
-  class:spectrum-ActionButton--sizeXL={xl}
-  class="spectrum-ActionButton"
+  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   {disabled}
   on:longPress
   on:click|preventDefault
@@ -62,11 +54,7 @@
   {/if}
   {#if icon}
     <svg
-      class:spectrum-Icon--sizeS={s}
-      class:spectrum-Icon--sizeM={m || useDefault}
-      class:spectrum-Icon--sizeL={l}
-      class:spectrum-Icon--sizeXL={xl}
-      class="spectrum-Icon"
+      class="spectrum-Icon spectrum-Icon--size{size}"
       focusable="false"
       aria-hidden="true"
       aria-label={icon}
diff --git a/packages/bbui/src/Button/Close.svelte b/packages/bbui/src/Button/Close.svelte
deleted file mode 100644
index f2b76cdb38..0000000000
--- a/packages/bbui/src/Button/Close.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  export let onClose
-  export let dark = false
-  export let small = false
-</script>
-
-<button class:small class:dark on:click={onClose}>×</button>
-
-<style>
-  button {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    font-size: var(--font-size-l);
-    z-index: 1000;
-    top: var(--spacing-l);
-    right: var(--spacing-l);
-    margin: 0;
-    padding: 0;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 0;
-    color: black;
-    border-radius: var(--border-radius-xl);
-    background: white;
-    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    -webkit-appearance: none;
-    outline: none;
-  }
-
-  button:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
-  }
-
-  button:active {
-    background-color: var(--grey-4);
-    cursor: pointer;
-  }
-  .small {
-    font-size: var(--font-size-m);
-    line-height: 110%;
-    width: 1.3rem;
-    height: 1.3rem;
-  }
-  .dark {
-    color: white;
-    background: black;
-  }
-  .dark:hover {
-    background-color: var(--grey-8);
-    cursor: pointer;
-  }
-  .dark:active {
-    background-color: var(--grey-9);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/bbui/src/Button/Close.svench b/packages/bbui/src/Button/Close.svench
deleted file mode 100644
index 5bb7542b11..0000000000
--- a/packages/bbui/src/Button/Close.svench
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Close from "./Close.svelte";
-</script>
-
-<style>
-  div {
-    display: block;
-    position: relative;
-    min-width: 400px;
-    height: 200px;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-l);
-  }
-</style>
-
-<View name="default">
-  <div>
-    <Close />
-  </div>
-</View>
-<View name="dark color">
-  <div>
-    <Close dark />
-  </div>
-</View>
-<View name="small">
-  <div>
-    <Close small />
-  </div>
-</View>
-<View name="small dark">
-  <div>
-    <Close small dark />
-  </div>
-</View>
diff --git a/packages/bbui/src/ClearButton/ClearButton.svelte b/packages/bbui/src/ClearButton/ClearButton.svelte
index e6457d4857..5a2f6bc04c 100644
--- a/packages/bbui/src/ClearButton/ClearButton.svelte
+++ b/packages/bbui/src/ClearButton/ClearButton.svelte
@@ -1,10 +1,19 @@
 <script>
-    export let s = false;
-    export let disabled;
+  export let small = false
+  export let disabled
 </script>
 
-<button on:click class="spectrum-ClearButton" class:spectrum-ClearButton--small={s} {disabled}>
-    <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
-        <use xlink:href="#spectrum-css-icon-Cross75" />
-    </svg>
-</button>
\ No newline at end of file
+<button
+  on:click
+  class="spectrum-ClearButton"
+  class:spectrum-ClearButton--small={small}
+  {disabled}
+>
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-Cross75"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Cross75" />
+  </svg>
+</button>
diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index 3ff8462776..1c39bc6aa7 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -20,7 +20,7 @@
   <div class="property-group-name" on:click={onHeaderClick}>
     <div class:thin class="name">{name}</div>
     <div class="icon">
-      <Icon s name={show ? 'Remove' : 'Add'} />
+      <Icon size="S" name={show ? "Remove" : "Add"} />
     </div>
   </div>
   <div class="property-panel" class:show>
diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
index cc50225d2f..2b4de9cfb0 100644
--- a/packages/bbui/src/Divider/Divider.svelte
+++ b/packages/bbui/src/Divider/Divider.svelte
@@ -1,23 +1,19 @@
 <script>
   import "@spectrum-css/divider/dist/index-vars.css"
-  export let l = false
-  export let m = false
-  export let s = false
+  export let size = "M"
 
   export let vertical = false
   export let noMargin = false
   export let noGrid = false
-
-  $: useDefault = ![l, m, s].includes(true)
 </script>
 
 <hr
   class:noMargin
   class:noGrid
-  class:spectrum-Divider--sizeL={l}
-  class:spectrum-Divider--sizeM={m || useDefault}
-  class:spectrum-Divider--sizeS={s}
-  class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
+  class="spectrum-Divider spectrum-Divider--{vertical
+    ? 'vertical'
+    : 'horizontal'} spectrum-Dialog-divider spectrum-Divider--size{size}"
+/>
 
 <style>
   hr.noMargin {
diff --git a/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte b/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte
new file mode 100644
index 0000000000..f400caa5f5
--- /dev/null
+++ b/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte
@@ -0,0 +1,40 @@
+<div class="drawer-contents">
+  <div class="container" data-cy="binding-dropdown-modal">
+    <div class="sidebar">
+      <slot name="sidebar" />
+    </div>
+    <div class="main">
+      <slot name="main" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 290px 1fr;
+  }
+  .sidebar {
+    border-right: var(--border-light);
+    overflow: auto;
+  }
+
+  .sidebar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .main {
+    font-family: var(--font-sans);
+  }
+  .main :global(textarea) {
+    min-height: 200px;
+  }
+  .main :global(p) {
+    margin: 0;
+  }
+</style>
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 5e421cd753..847896178e 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -6,26 +6,18 @@
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
-  export let s = false
-  export let m = false
-  export let l = false
-  export let xl = false
+  export let size = "M"
   export let hoverable = false
   export let disabled = false
 
   $: rotation = directions.indexOf(direction) * 45
-  $: useDefault = ![s, m, l, xl].includes(true)
 </script>
 
 <svg
   on:click
   class:hoverable
   class:disabled
-  class:spectrum-Icon--sizeS={s}
-  class:spectrum-Icon--sizeM={m || useDefault}
-  class:spectrum-Icon--sizeL={l}
-  class:spectrum-Icon--sizeXL={xl}
-  class="spectrum-Icon"
+  class="spectrum-Icon spectrum-Icon--size{size}"
   focusable="false"
   aria-hidden={hidden}
   aria-label={name}
diff --git a/packages/bbui/src/Links/Home.svelte b/packages/bbui/src/Links/Home.svelte
deleted file mode 100644
index 29a00dcbd5..0000000000
--- a/packages/bbui/src/Links/Home.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-  export let href,
-    icon,
-    title,
-    active = false
-</script>
-
-<a {href} target="_blank" class="nav-item" class:active>
-  {#if icon}
-    <span class="nav-item-icon">
-      <svelte:component this={icon} />
-    </span>
-  {/if}
-  {#if title}
-    <div class="nav-item-title">{title}</div>
-  {/if}
-</a>
-
-<style>
-  .nav-item {
-    cursor: pointer;
-    padding: 12px;
-    height: 2rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    border-radius: var(--border-radius-s);
-  }
-
-  .nav-item:hover {
-    background-color: var(--grey-1);
-  }
-
-  .nav-item-title {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    font-weight: 400;
-    margin-left: 12px;
-  }
-
-  .nav-item-icon {
-    color: var(--grey-7);
-  }
-
-  .active {
-    background-color: var(--grey-2);
-  }
-</style>
diff --git a/packages/bbui/src/Links/Home.svench b/packages/bbui/src/Links/Home.svench
deleted file mode 100644
index 973d7977d0..0000000000
--- a/packages/bbui/src/Links/Home.svench
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Home from "./Home.svelte";
-  import Contribution from "../Icons/Contribution.svelte";
-</script>
-
-<View name="default">
-  <Home
-    href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-    title="Contribute"
-    icon={Contribution} />
-</View>
-<View name="active">
-  <Home
-    active
-    href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-    title="Contribute"
-    icon={Contribution} />
-</View>
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index a5b2ebb75d..fc5bd48079 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -42,7 +42,7 @@
       {title}
     </h1>
 
-    <Divider m />
+    <Divider size="M" />
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
       <slot />
diff --git a/packages/bbui/src/ProgressBar/ProgressBar.svelte b/packages/bbui/src/ProgressBar/ProgressBar.svelte
index 4b046ec81c..bca427b7ff 100644
--- a/packages/bbui/src/ProgressBar/ProgressBar.svelte
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@@ -1,38 +1,63 @@
 <script>
-    import "@spectrum-css/progressbar/dist/index-vars.css"
-    import { tweened } from 'svelte/motion';
-    import { cubicOut } from 'svelte/easing';
+  import "@spectrum-css/progressbar/dist/index-vars.css"
+  import { tweened } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
 
-    export let value = false
-    export let easing = cubicOut
-    export let duration = 1000;
-    export let width = false;
-    export let sideLabel = false
-    export let overBackground = false
+  export let value = false
+  export let easing = cubicOut
+  export let duration = 1000
+  export let width = false
+  export let sideLabel = false
+  export let overBackground = false
 
-    export let s = false;
-    export let m = false;
-    export let l = false;
-    export let xl = false;
+  export let size = "M"
 
-    const progress = tweened(0, {
-		duration: duration,
-		easing: easing
-	});
+  const progress = tweened(0, {
+    duration: duration,
+    easing: easing,
+  })
 
-    $: if (value) $progress = value
+  $: if (value) $progress = value
 </script>
 
-
-<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressBar--sideLabel={sideLabel} class:spectrum-ProgressBar--sizeS={s} class:spectrum-ProgressBar--sizeM={m} class:spectrum-ProgressBar--sizeL={l} class:spectrum-ProgressBar--sizeXL={xl} class="spectrum-ProgressBar"  value={$progress} role="progressbar" aria-valuenow={$progress} aria-valuemin="0" aria-valuemax="100" style={width ? `width: ${width}px;` : ''}>
-    {#if $$slots}
-        <div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-label"><slot /></div>
-    {/if}
-    {#if value}
-        <div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-percentage">{Math.round($progress)}%</div>
-    {/if}
-    <div class="spectrum-ProgressBar-track">
-        <div class="spectrum-ProgressBar-fill" style={value ? `width: ${$progress}%` : ''}></div>
+<div
+  class:spectrum-ProgressBar--indeterminate={!value}
+  class:spectrum-ProgressBar--sideLabel={sideLabel}
+  class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
+  value={$progress}
+  role="progressbar"
+  aria-valuenow={$progress}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  style={width ? `width: ${width}px;` : ""}
+>
+  {#if $$slots}
+    <div
+      class:spectrum-FieldLabel--sizeS={s}
+      class:spectrum-FieldLabel--sizeM={m}
+      class:spectrum-FieldLabel--sizeL={l}
+      class:spectrum-FieldLabel--sizeXL={xl}
+      class="spectrum-FieldLabel spectrum-ProgressBar-label"
+    >
+      <slot />
     </div>
-    <div class="spectrum-ProgressBar-label" hidden=""></div>
+  {/if}
+  {#if value}
+    <div
+      class:spectrum-FieldLabel--sizeS={s}
+      class:spectrum-FieldLabel--sizeM={m}
+      class:spectrum-FieldLabel--sizeL={l}
+      class:spectrum-FieldLabel--sizeXL={xl}
+      class="spectrum-FieldLabel spectrum-ProgressBar-percentage"
+    >
+      {Math.round($progress)}%
+    </div>
+  {/if}
+  <div class="spectrum-ProgressBar-track">
+    <div
+      class="spectrum-ProgressBar-fill"
+      style={value ? `width: ${$progress}%` : ""}
+    />
+  </div>
+  <div class="spectrum-ProgressBar-label" hidden="" />
 </div>
diff --git a/packages/bbui/src/Table/SelectEditRenderer.svelte b/packages/bbui/src/Table/SelectEditRenderer.svelte
index 1355666489..d66ac28a32 100644
--- a/packages/bbui/src/Table/SelectEditRenderer.svelte
+++ b/packages/bbui/src/Table/SelectEditRenderer.svelte
@@ -13,5 +13,5 @@
   <Checkbox value={selected} />
 {/if}
 {#if allowEditRows}
-  <ActionButton s on:click={onEdit}>Edit</ActionButton>
+  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
 {/if}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 842c88ef14..6413493580 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -10,6 +10,7 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
 export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as DrawerContentWithSidebar } from "./Drawer/DrawerContentWithSidebar.svelte"
 export { default as Avatar } from "./Avatar/Avatar.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
@@ -21,7 +22,6 @@ export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as Home } from "./Links/Home.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
@@ -29,7 +29,6 @@ export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelt
 export { default as Label } from "./Styleguide/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Link } from "./Link/Link.svelte"
-export { default as Close } from "./Button/Close.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 2c37e97956..4e6a0d9c18 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -66,7 +66,7 @@
   <div bind:this={anchors[idx]}>
     <ActionButton
       quiet
-      s
+      size="S"
       icon={tab.icon}
       disabled={tab.disabled}
       on:click={tab.disabled ? null : () => onChangeTab(idx)}>
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 2eefac0ea8..20fb152691 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -47,8 +47,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
index da50ae905a..6729c502c0 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Input, TextArea, Heading, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
@@ -46,43 +46,50 @@
 
 <div class="container">
   <div class="list">
-    <Heading s h3>Available bindings</Heading>
-    <Spacer medium />
-    <Input extraThin placeholder="Search" bind:value={search} />
-    <Spacer medium />
-    {#each categories as [categoryName, bindings]}
-      <Heading xs h4>{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 xs h3>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>
+    <Layout>
+      <div class="section">
+        <Heading s h3>Available bindings</Heading>
+        <Input extraThin placeholder="Search" bind:value={search} />
       </div>
-    {/each}
+      <div class="section">
+        {#each categories as [categoryName, bindings]}
+          <Heading xs h4>{categoryName}</Heading>
+          {#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}
+      </div>
+      <div class="section">
+        <Heading xs h3>Helpers</Heading>
+        {#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>
+    </Layout>
   </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." />
+      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
@@ -98,22 +105,17 @@
     height: 40vh;
     overflow-y: auto;
     display: grid;
-    grid-template-columns: 280px 1fr;
+    grid-template-columns: 290px 1fr;
   }
 
   .list {
+    grid-gap: var(--spacing-s);
     border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
+    overflow-y: auto;
   }
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-
-  .list::-webkit-scrollbar {
-    display: none;
+  .section {
+    display: grid;
+    grid-gap: var(--spacing-s);
   }
 
   .text {
@@ -159,21 +161,6 @@
     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;
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index f85bb0486d..e1f2fe78d8 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -30,7 +30,7 @@
 <div>
   <Input readonly value={fullWebhookURL(value)} />
   <div class="icon" on:click={() => copyToClipboard()}>
-    <Icon s name="Copy" />
+    <Icon size="S" name="Copy" />
   </div>
 </div>
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index 0b56eb0281..14c980f7f9 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -11,19 +11,21 @@
 
 <form>
   {#each Object.keys(schema) as configKey}
-    {#if schema[configKey].type === 'object'}
+    {#if schema[configKey].type === "object"}
       <Label>{capitalise(configKey)}</Label>
       <Spacer small />
       <KeyValueBuilder
         defaults={schema[configKey].default}
-        bind:object={integration[configKey]} />
+        bind:object={integration[configKey]}
+      />
     {:else}
       <div class="form-row">
         <Label>{capitalise(configKey)}</Label>
         <Input
           type={schema[configKey].type}
           on:change
-          bind:value={integration[configKey]} />
+          bind:value={integration[configKey]}
+        />
       </div>
     {/if}
   {/each}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index cc54d599d8..35d8368e0d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -22,7 +22,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 99fe974e84..47f50c2739 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -15,7 +15,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index 881321664b..235c889cd8 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -36,7 +36,7 @@
     on:change={event => onChange(event.detail)}
     {placeholder} />
   <div class="icon" on:click={bindingDrawer.show}>
-    <Icon s name="FlashOn" />
+    <Icon size="S" name="FlashOn" />
   </div>
 </div>
 <Drawer bind:this={bindingDrawer} {title}>
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index e60ab52e5c..4e2e1f6e1d 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -29,13 +29,13 @@
   <div class="content">
     {#if withArrow}
       <div class:opened class="icon arrow">
-        <Icon s name="ChevronRight" />
+        <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon"><Icon s name={icon} /></div>
+      <div class="icon"><Icon size="S" name={icon} /></div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 35775d0d18..0fd334794a 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -32,11 +32,8 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item, idx) => {
-    if (item.isCategory) {
-      // Select and open this category
-      selectedIndex = idx
-    } else {
+  const onItemChosen = async (item) => {
+    if (!item.isCategory) {
       // Add this component
       await store.actions.components.create(item.component)
     }
@@ -44,15 +41,14 @@
 </script>
 
 <ActionGroup>
-  {#each enrichedStructure as item, idx}
+  {#each enrichedStructure as item}
     <ActionMenu disabled={!item.isCategory}>
       <ActionButton
         icon={item.icon}
-        xs
         primary
         quiet
         slot="control"
-        on:click={() => onItemChosen(item, idx)}
+        on:click={() => onItemChosen(item)}
       >
         {item.name}
       </ActionButton>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 8cf46facc6..9490773621 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -68,7 +68,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
   <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index f76541a3b0..3871880bf5 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@@ -41,7 +41,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index b6ec6b7e00..899551d5bc 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -25,7 +25,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 647d7a00a5..16cc8409d5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Search, TextArea, Heading, Label, DrawerContentWithSidebar, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -57,16 +57,15 @@
   }
 </script>
 
-<div class="drawer-contents">
-  <div class="container" data-cy="binding-dropdown-modal">
-    <div class="list">
-      <Search placeholder="Search" bind:value={search} />
-      <Spacer medium />
-      {#if context}
+<DrawerContentWithSidebar>
+  <svelte:fragment slot="sidebar">
+  <Layout>
+    <Search placeholder="Search" bind:value={search} />
+    {#if context}
+      <section>
         <Heading xs h3>Columns</Heading>
-        <Spacer small />
         <ul>
-          {#each context.filter(context =>
+          {#each context.filter((context) =>
             context.readableBinding.match(searchRgx)
           ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -74,13 +73,13 @@
             </li>
           {/each}
         </ul>
-      {/if}
-      <Spacer small />
-      {#if instance}
+      </section>
+    {/if}
+    {#if instance}
+      <section>
         <Heading xs h3>Components</Heading>
-        <Spacer small />
         <ul>
-          {#each instance.filter(instance =>
+          {#each instance.filter((instance) =>
             instance.readableBinding.match(searchRgx)
           ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -88,12 +87,12 @@
             </li>
           {/each}
         </ul>
-      {/if}
-      <Spacer small />
+      </section>
+    {/if}
+    <section>
       <Heading xs h3>Helpers</Heading>
-      <Spacer small />
       <ul>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
           <li on:click={() => addToText(helper.text)}>
             <div>
               <Label extraSmall>{helper.displayText}</Label>
@@ -105,48 +104,32 @@
           </li>
         {/each}
       </ul>
-    </div>
-    <div class="text">
-      <TextArea
-        bind:getCaretPosition
-        bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
-      {#if !valid}
-        <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>
+    </section>
+  </Layout>
+  </svelte:fragment>
+  <div class="main" slot="main">
+    <TextArea
+      bind:getCaretPosition
+      bind:value
+      placeholder="Add text, or click the objects on the left to add them to the textbox."
+    />
+    {#if !valid}
+      <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>
+</DrawerContentWithSidebar>
 
 <style>
-  .container {
-    height: 100%;
+  .main {
+    padding: var(--spacing-m)
+  }
+  section {
     display: grid;
-    grid-template-columns: 260px 1fr;
-  }
-  .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: 200px;
-  }
-  .text :global(p) {
-    margin: 0;
+    grid-gap: var(--spacing-s);
   }
   ul {
     list-style: none;
@@ -160,10 +143,11 @@
     font-family: var(--font-sans);
     font-size: var(--font-size-xs);
     color: var(--grey-7);
-    padding: var(--spacing-m) 0;
+    padding: var(--spacing-m);
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
+    border-radius: var(--spacing-s);
     border: var(--border-light);
     border-width: 1px 0 1px 0;
   }
@@ -174,19 +158,14 @@
   }
 
   li:hover {
-    color: var(--ink);
-    font-weight: 500;
+    background-color: var(--grey-2);
+    cursor: pointer;
   }
 
   li:active {
     color: var(--blue);
   }
 
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
-
   .syntax-error {
     padding-top: var(--spacing-m);
     color: var(--red);
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index ad19bf3250..88948d9e4d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -149,7 +149,7 @@
         </li>
       {/each}
     </ul>
-    <Divider s />
+    <Divider size="S" />
     <div class="title">
       <Heading xs h3>Views</Heading>
     </div>
@@ -162,7 +162,7 @@
         </li>
       {/each}
     </ul>
-    <Divider s />
+    <Divider size="S" />
     <div class="title">
       <Heading xs h3>Relationships</Heading>
     </div>
@@ -175,7 +175,7 @@
         </li>
       {/each}
     </ul>
-    <Divider s />
+    <Divider size="S" />
     <div class="title">
       <Heading xs h3>Queries</Heading>
     </div>
@@ -190,7 +190,7 @@
     </ul>
 
     {#if otherSources?.length}
-      <Divider s />
+      <Divider size="S" />
       <div class="title">
         <Heading extraSmall>Other</Heading>
       </div>
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 62fe463bbf..fdd01f4976 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -120,7 +120,7 @@
               on:click={() => deleteAction(index)}
               style="margin-left: auto;"
             >
-              <Icon s hoverable name="Close" />
+              <Icon size="S" hoverable name="Close" />
             </div>
           </div>
         {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index 77c3bd2567..15a975012d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -70,7 +70,7 @@
       bindings={bindableProperties}
       on:change={event => updateFieldValue(idx, event.detail)} />
     <ActionButton
-      s
+      size="S"
       quiet
       icon="Delete"
       on:click={() => removeField(field[0])} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index b9a0095a11..59aff93be1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -87,7 +87,7 @@
       class="icon"
       data-cy={`${key}-binding-button`}
       on:click={bindingDrawer.show}>
-      <Icon s name="FlashOn" />
+      <Icon size="S" name="FlashOn" />
     </div>
     <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
       <svelte:fragment slot="description">
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 0715fa0302..4ef1a886c5 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -20,7 +20,7 @@
 
 <div class="root">
   <Heading m>Your Apps</Heading>
-  <Divider m />
+  <Divider size="M" />
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
index e675b6856d..fbb7a33c21 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -9,7 +9,9 @@
 
   let unsaved = false
 
-  $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
+  $: datasource = $datasources.list.find(
+    (ds) => ds._id === $datasources.selected
+  )
   $: integration = datasource && $integrations[datasource.source]
 
   async function saveDatasource() {
@@ -46,7 +48,8 @@
       <svelte:component
         this={ICONS[datasource.source]}
         height="26"
-        width="26" />
+        width="26"
+      />
       <Heading m>{datasource.name}</Heading>
     </header>
     <Body small grey lh>{integration.description}</Body>
@@ -63,17 +66,18 @@
       <IntegrationConfigForm
         schema={integration.datasource}
         integration={datasource.config}
-        on:change={setUnsaved} />
+        on:change={setUnsaved}
+      />
       <Spacer extraLarge />
       <Divider />
       <Spacer extraLarge />
       <div class="query-header">
         <Heading s>Queries</Heading>
-        <Button secondary on:click={() => $goto('./new')}>Add Query</Button>
+        <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
       </div>
       <Spacer extraLarge />
       <div class="query-list">
-        {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
+        {#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
           <div class="query-list-item" on:click={() => onClickQuery(query)}>
             <p class="query-name">{query.name}</p>
             <p>{capitalise(query.queryVerb)}</p>
@@ -86,11 +90,6 @@
 {/if}
 
 <style>
-  h3 {
-    margin: 0;
-    font-size: 24px;
-  }
-
   section {
     margin: 0 auto;
     width: 640px;
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 00d49a055b..6f88422c56 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -1,6 +1,8 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { Home as Link, SideNavigation as Navigation, SideNavigationItem as Item} from "@budibase/bbui"
+  import {
+    SideNavigation as Navigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
   import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
   import Logo from "/assets/budibase-logo.svg"
 </script>
@@ -11,19 +13,25 @@
     <div class="nav-section">
       <div class="nav-top">
         <Navigation>
-          <Item href="/builder/" icon="Apps" selected>
-            Apps
-          </Item>
+          <Item href="/builder/" icon="Apps" selected>Apps</Item>
           <Item external href="https://portal.budi.live/" icon="Servers">
             Hosting
           </Item>
           <Item external href="https://docs.budibase.com/" icon="Book">
             Documentation
           </Item>
-          <Item external href="https://github.com/Budibase/budibase/discussions" icon="PeopleGroup">
+          <Item
+            external
+            href="https://github.com/Budibase/budibase/discussions"
+            icon="PeopleGroup"
+          >
             Community
           </Item>
-          <Item external href="https://github.com/Budibase/budibase/issues/new/choose" icon="Bug">
+          <Item
+            external
+            href="https://github.com/Budibase/budibase/issues/new/choose"
+            icon="Bug"
+          >
             Raise an issue
           </Item>
         </Navigation>