diff --git a/package.json b/package.json
index 7429805b1..f6f4e2644 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,10 @@
     "build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
   },
   "dependencies": {
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/actiongroup": "^1.0.1",
+    "@spectrum-css/link": "^3.1.1",
+    "@spectrum-css/menu": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1"
   }
 }
diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
new file mode 100644
index 000000000..df087dd62
--- /dev/null
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -0,0 +1,65 @@
+<script>
+    import "@spectrum-css/actionbutton/dist/index-vars.css"
+    import { createEventDispatcher } from "svelte"
+    const dispatch = createEventDispatcher()
+
+    
+    /** @type {('S', 'M', 'L', 'XL')} Size of button */
+    export let size = "M";
+    export let quiet = false;
+    export let emphasized = false;
+    export let selected = false
+    export let longPressable = false;
+    export let disabled = false
+    export let icon = '';
+
+    function longPress(element) {
+        if (!longPressable) return
+        let timer
+
+        const listener = () => {
+            timer = setTimeout(() => {
+                dispatch('longpress')
+            }, 700)
+        }
+
+        element.addEventListener('pointerdown', listener)
+
+        return {
+            destroy() {
+                clearTimeout(timer)
+                element.removeEventListener('pointerdown', longPress)
+            }
+        }
+    }
+</script>
+  
+
+<button 
+    use:longPress
+    class:spectrum-ActionButton--quiet={quiet}
+    class:spectrum-ActionButton--emphasized={emphasized}
+    class:is-selected={selected}
+    class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
+    {disabled}
+    on:longPress
+    on:click|preventDefault>
+    {#if longPressable}
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
+        </svg>
+    {/if}
+    {#if icon}
+        <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
+            <use xlink:href="#spectrum-icon-18-{icon}" />
+        </svg>
+    {/if}
+    {#if $$slots} 
+        <span class="spectrum-ActionButton-label"><slot /></span>
+    {/if}
+</button>
+  
+  <style>
+  
+  </style>
+  
\ No newline at end of file
diff --git a/packages/bbui/src/ActionGroup/ActionGroup.svelte b/packages/bbui/src/ActionGroup/ActionGroup.svelte
new file mode 100644
index 000000000..c4d0aeba7
--- /dev/null
+++ b/packages/bbui/src/ActionGroup/ActionGroup.svelte
@@ -0,0 +1,24 @@
+<script>
+    import "@spectrum-css/actiongroup/dist/index-vars.css"
+    export let vertical;
+    export let justified;
+    export let quiet;
+    export let compact;
+
+    // Attaches a spectrum-ActionGroup-item class to buttons inside the div
+    function group(element) {
+        const buttons = Array.from(element.getElementsByTagName('button'))
+        buttons.forEach(button => {
+            button.classList.add('spectrum-ActionGroup-item')
+        })
+    }
+</script>
+
+<div use:group
+    class:spectrum-ActionGroup--vertical={vertical}
+    class:spectrum-ActionGroup--justified={justified}
+    class:spectrum-ActionGroup--quiet={quiet}
+    class:spectrum-ActionGroup--compact={compact}
+    class="spectrum-ActionGroup">
+    <slot />
+</div>
\ No newline at end of file
diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
new file mode 100644
index 000000000..33b2fcbdd
--- /dev/null
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -0,0 +1,30 @@
+<script>
+    import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte'
+    import Menu from '../Menu/Menu.svelte'
+    let anchor;
+    let dropdown;
+
+    // This is needed because display: contents is considered "invisible".
+    // It should only ever be an action button, so should be fine.
+    function getAnchor(node) {
+        anchor = node.firstChild
+    }
+    
+    export const hide = () => { dropdown.hide() }
+    export const show = () => { dropdown.show() }
+</script>
+
+<div class="contents" use:getAnchor  on:click={dropdown.show}>
+    <slot name="button" />
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+    <Menu>
+        <slot />
+    </Menu>
+</DropdownMenu>
+
+<style>
+    div {
+        display: contents;
+    }
+</style>
\ No newline at end of file
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 9bf5a40a6..a25cc1bbd 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) {
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
       maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove
+      y = window.innerHeight - spaceAbove + 5
     } else {
       positionSide = "top"
-      y = bottom
+      y = bottom + 5
       maxHeight = spaceBelow - 20
     }
 
diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 80cd5aff1..b646f00c7 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -1,15 +1,13 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
 
-
-
-  export let href = false
   export let disabled = false
 
   /** @type {('S', 'M', 'L', 'XL')} Size of button */
   export let size = "M";
-  /** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
-  export let type = "primary"
+
+  // Types
+  export let cta, primary, secondary, warning, overBackground;
 
   export let quiet = false
   
@@ -17,33 +15,25 @@
 </script>
 
 
-{#if href}
-  <a
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()}"
-    {href}
-    {disabled}>
-    {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
+<button
+  class:spectrum-Button--cta={cta}
+  class:spectrum-Button--primary={primary}
+  class:spectrum-Button--secondary={secondary}
+  class:spectrum-Button--warning={warning}
+  class:spectrum-Button--overBackground={overBackground}
+  class:spectrum-Button--quiet={quiet}
+  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+  {disabled}
+  on:click|preventDefault>
+  {#if icon}
+    <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots} 
     <span class="spectrum-Button-label"><slot /></span>
-  </a>
-{:else}
-  <button
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()} {quiet && 'spectrum-Button--quiet'}"
-    {disabled}
-    on:click|preventDefault>
-    {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    {#if $$slots} 
-      <span class="spectrum-Button-label"><slot /></span>
-    {/if}
-  </button>
-{/if}
+  {/if}
+</button>
 
 <style>
 
diff --git a/packages/bbui/src/Button/TextButton.svelte b/packages/bbui/src/Button/TextButton.svelte
deleted file mode 100644
index 351a2c45b..000000000
--- a/packages/bbui/src/Button/TextButton.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script>
-  export let active = false,
-    text = false,
-    small = false,
-    medium = false,
-    large = false,
-    blue = false,
-    green = false,
-    yellow = false,
-    purple = false,
-    red = false,
-    orange = false,
-    disabled = false,
-    href = false
-</script>
-
-{#if href}
-  <a
-    {href}
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange><slot /></a>
-{:else}
-  <button
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange
-    {disabled}
-    on:click|preventDefault>
-    <slot />
-  </button>
-{/if}
-
-<style>
-  button,
-  a {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: all 0.08s ease 0s;
-    display: inline-flex;
-    align-items: center;
-    text-rendering: optimizeLegibility;
-    text-decoration: none;
-    outline: none;
-    -webkit-box-align: center;
-    user-select: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .text {
-    background-color: transparent;
-    color: var(--grey-7);
-    border: none;
-    font-weight: 500;
-  }
-  button.text:hover:not([disabled]) {
-    color: var(--ink);
-  }
-  button.text:active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text.active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text:disabled {
-    cursor: not-allowed;
-    color: var(--grey-4);
-  }
-
-  .blue {
-    color: var(--blue);
-  }
-
-  .green {
-    color: var(--green);
-  }
-
-  .red {
-    color: var(--red);
-  }
-
-  .purple {
-    color: var(--purple);
-  }
-
-  .yellow {
-    color: var(--yellow);
-  }
-
-  .orange {
-    color: var(--orange);
-  }
-
-  .small {
-    font-size: var(--font-size-xs);
-    margin: 0;
-  }
-
-  .medium {
-    font-size: var(--font-size-s);
-    margin: 0;
-  }
-
-  .large {
-    font-size: var(--font-size-m);
-    margin: 0;
-  }
-</style>
diff --git a/packages/bbui/src/Button/TextButton.svench b/packages/bbui/src/Button/TextButton.svench
deleted file mode 100644
index e3c347780..000000000
--- a/packages/bbui/src/Button/TextButton.svench
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextButton from "./TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-</script>
-
-<style>
-  div {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: var(--spacing-xl);
-  }
-</style>
-
-<View name="Text">
-  <div>
-    <TextButton text small on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text large on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text disabled on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" direction="w" />
-      Disabled Text Button
-    </TextButton>
-    <TextButton active text on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Active Calculation
-    </TextButton>
-  </div>
-</View>
-
-<View name="Colours">
-  <div>
-    <TextButton text medium yellow on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium blue on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text medium purple on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text medium red on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" />
-      Delete
-    </TextButton>
-    <TextButton text medium green on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Calculate
-    </TextButton>
-  </div>
-</View>
-
-<View name="Usage as a link">
-  <div>
-    <TextButton green text href="https://google.com">This is a link</TextButton>
-  </div>
-</View>
diff --git a/packages/bbui/src/DatePicker/DatePicker.svelte b/packages/bbui/src/DatePicker/DatePicker.svelte
index 2f87a48a4..d6f6a0075 100644
--- a/packages/bbui/src/DatePicker/DatePicker.svelte
+++ b/packages/bbui/src/DatePicker/DatePicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import Flatpickr from "svelte-flatpickr"
-  import { Label, Input } from "../"
+  import { Label } from "../"
   import "flatpickr/dist/flatpickr.css"
 
   const PICKER_OPTIONS = {
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 2f0cc1b4f..bbae35d25 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 clickOutside from "../Actions/click_outside"
+  import ActionButton from '../ActionButton/ActionButton.svelte'
 
   export let title
 
@@ -40,7 +40,7 @@
         </div>
         <div class="controls">
           <slot name="buttons" />
-          <i class="ri-close-fill close" on:click={hide} />
+          <ActionButton quiet icon="Close" on:click={hide} />
         </div>
       </header>
       <slot name="body" />
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
new file mode 100644
index 000000000..49a7c2bf2
--- /dev/null
+++ b/packages/bbui/src/Link/Link.svelte
@@ -0,0 +1,17 @@
+<script>
+    import "@spectrum-css/link/dist/index-vars.css"
+
+    export let href = "#"
+    export let size = "M"
+    export let quiet = false;
+    export let primary = false;
+    export let secondary = false;
+    export let overBackground = false
+</script>
+
+<a {href}
+    class:spectrum-Link--primary={primary}
+    class:spectrum-Link--secondary={secondary}
+    class:spectrum-Link--overBackground={overBackground}
+    class:spectrum-Link--quiet={quiet}
+class="spectrum-Link spectrum-Link--size{size}"><slot /></a>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
new file mode 100644
index 000000000..58b031fe7
--- /dev/null
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -0,0 +1,15 @@
+<script>
+    export let icon = undefined;
+    export let disabled = undefined;
+</script>
+
+<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
+    <span class="spectrum-Menu-itemLabel">
+        {#if icon}
+            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
+                <use xlink:href="#spectrum-icon-18-{icon}"></use>
+            </svg>
+        {/if}
+        <span class="spectrum-Menu-itemLabel"><slot /></span>
+    </span>
+</li>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte
new file mode 100644
index 000000000..2fa102173
--- /dev/null
+++ b/packages/bbui/src/Menu/Menu.svelte
@@ -0,0 +1,7 @@
+<script>
+    import "@spectrum-css/menu/dist/index-vars.css"
+</script>
+
+<ul class="spectrum-Menu" role="menu">
+    <slot />
+</ul>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Menu.svench b/packages/bbui/src/Menu/Menu.svench
new file mode 100644
index 000000000..1da76869b
--- /dev/null
+++ b/packages/bbui/src/Menu/Menu.svench
@@ -0,0 +1,19 @@
+<script>
+    import Menu from './Menu.svelte'
+    import Separator from './Separator.svelte'
+    import Section from './Section.svelte'
+    import Item from './Item.svelte'
+</script>
+
+<Menu>
+    <Section heading="Section heading">
+        <Item>Some Item 1</Item>
+        <Item>Some Item 2</Item>
+        <Item>Some Item 3</Item>
+    </Section>
+    <Separator />
+    <Section heading="Section heading">
+        <Item icon="SaveFloppy">Save</Item>
+        <Item disabled icon="DataDownload">Download</Item>
+    </Section>
+</Menu>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Section.svelte b/packages/bbui/src/Menu/Section.svelte
new file mode 100644
index 000000000..54ae4123b
--- /dev/null
+++ b/packages/bbui/src/Menu/Section.svelte
@@ -0,0 +1,9 @@
+<script>
+    export let heading
+</script>
+<li role="presentation">
+<span class="spectrum-Menu-sectionHeading">{heading}</span>
+    <ul class="spectrum-Menu" role="group">
+        <slot />
+    </ul>
+</li>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Separator.svelte b/packages/bbui/src/Menu/Separator.svelte
new file mode 100644
index 000000000..187fab234
--- /dev/null
+++ b/packages/bbui/src/Menu/Separator.svelte
@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator"></li>
\ No newline at end of file
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 533568926..c07bc57b4 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -46,11 +46,11 @@
         <div class="spectrum-ButtonGroup-item">
           <slot name="footer" />
           {#if showCancelButton}
-            <Button type="secondary" on:click={hide}>{cancelText}</Button>
+            <Button secondary on:click={hide}>{cancelText}</Button>
           {/if}
           {#if showConfirmButton}
             <Button
-            type="cta"
+            cta
               primary
               {...$$restProps}
               disabled={confirmDisabled}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 2d60addb7..c12019927 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -8,9 +8,11 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as DataList } from "./Form/DataList.svelte"
 export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
+export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
-export { default as TextButton } from "./Button/TextButton.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as Radio } from "./Form/Radio.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
@@ -22,7 +24,12 @@ export { default as Popover } from "./Popover/Popover.svelte"
 export { default as Body } from "./Styleguide/Body.svelte"
 export { default as Heading } from "./Styleguide/Heading.svelte"
 export { default as Label } from "./Styleguide/Label.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"
+export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 056fbbd70..30821edde 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -1,7 +1,7 @@
 <script>
   import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
-  import { Button, DropdownMenu, Modal } from "@budibase/bbui"
+  import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
 
@@ -64,14 +64,14 @@
 <div class="tab-container">
   {#each tabs as tab, idx}
   <div bind:this={anchors[idx]}>
-    <Button
+    <ActionButton
       size="S"
       quiet
       icon={tab.icon}
       disabled={tab.disabled}
       on:click={tab.disabled ? null : () => onChangeTab(idx)}>
         {tab.label}
-      </Button>
+      </ActionButton>
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index eba3d7658..99dc26b04 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -92,7 +92,7 @@
   </div>
 {/each}
 {#if stepId === 'WEBHOOK'}
-  <Button type="secondary" on:click={() => webhookModal.show()}>
+  <Button secondary on:click={() => webhookModal.show()}>
     Set Up Webhook
   </Button>
 {/if}
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index ad3eccf9c..3c01b4361 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -65,7 +65,7 @@
     {webhookModal} />
 {:else if $automationStore.selectedAutomation}
   <div class="block-label">{automation.name}</div>
-  <Button type="secondary" on:click={testAutomation}>Test Automation</Button>
+  <Button secondary on:click={testAutomation}>Test Automation</Button>
 {/if}
 <Button
   secondary
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index a65e2aada..ad3ebf520 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Calculator" type="overBackground" size="S" quiet
+  <Button icon="Calculator" primary size="S" quiet
     on:click={dropdown.show}
     active={view.field && view.calculation}>
     Calculate
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 31f0aff8f..a58a96b78 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -10,7 +10,7 @@
   let modal
 </script>
 
-<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
+<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
   Create New Column
 </Button>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 8ad8d2adf..cb65525f6 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -8,7 +8,7 @@
   let modal
 </script>
 
-<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
+<Button icon="Add" primary size="S" quiet on:click={modal.show}>
   {title}
 </Button>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index 020c8af3c..aca1f3001 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
+  <Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
     Create New View
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 32ce7b83b..18bbef612 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -13,7 +13,7 @@
   }
 </script>
 
-<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
+<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
   Delete
   {selectedRows.length}
   row(s)
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index 533d4c618..1cc930471 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
+  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
     Edit Roles
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index fe383d99a..7b5d93cf8 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
+  <Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
     Export
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
index cfe558a36..889b9bdcf 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Filter" type="overBackground" size="S" quiet
+  <Button icon="Filter" primary size="S" quiet
     on:click={dropdown.show}
     active={view.filters && view.filters.length}>
     Filter
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index fe7d29071..cd9a0af36 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
+  <Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
     Group By
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index 891dc0feb..1f9204338 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
+  <Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
     {#if hideAutocolumns}
       Show Auto Columns
     {:else}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 426a4f962..996396d9d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
+  <Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
     Manage Access
   </Button>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 392909d3e..2d1733888 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -288,10 +288,10 @@
   {/if}
   <footer class="create-column-options">
     {#if !uneditable && originalName != null}
-      <Button type="warning" size="S" text on:click={confirmDelete}>Delete Column</Button>
+      <Button warning size="S" text on:click={confirmDelete}>Delete Column</Button>
     {/if}
     <Button on:click={onClosed}>Cancel</Button>
-    <Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
+    <Button cta on:click={saveColumn} bind:disabled={invalid}>
       Save Column
     </Button>
   </footer>
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 5510358af..5b9237fb9 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
@@ -81,7 +81,7 @@
   {/each}
   <div>
     <Spacer small />
-    <Button icon="AddCircle" size="S" type="cta" on:click={addField}>
+    <Button icon="AddCircle" size="S" cta on:click={addField}>
       Add
       {fieldLabel}
     </Button>
diff --git a/packages/builder/src/components/settings/tabs/APIKeys.svelte b/packages/builder/src/components/settings/tabs/APIKeys.svelte
index 729f464fd..affc3fffd 100644
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Input, Label, TextButton } from "@budibase/bbui"
+  import { Input, Label, Link } from "@budibase/bbui"
   import api from "builderStore/api"
   import { notifications } from "@budibase/bbui"
   import { database } from "stores/backend"
@@ -41,9 +41,9 @@
     edit
     value={keys.budibase}
     label="Budibase Cloud API Key" />
-  <TextButton text medium blue href="https://portal.budi.live">
+  <Link primary href="https://portal.budi.live">
     Log in to the Budibase Hosting Portal to get your API Key. →
-  </TextButton>
+  </Link>
   <div>
     <Label extraSmall grey>Instance ID (Webhooks)</Label>
     <span>{$database._id}</span>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index 4ad6ba360..fb69d3c90 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -1,6 +1,6 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { Input, TextArea, Button, Body } from "@budibase/bbui"
+  import { Input, Button, Body } from "@budibase/bbui"
   import { del } from "builderStore/api"
 
   let value = ""
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 1eca39b5b..f408a6c3d 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,8 +1,6 @@
-<script>
-  import { TextButton } from "@budibase/bbui"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
-  import api from "builderStore/api"
+<script>  
+  import { goto } from "@roxi/routify"
+  import { ActionButton, Heading, Spacer } from "@budibase/bbui"
   import { notifications } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import download from "downloadjs"
@@ -31,11 +29,11 @@
   <Heading small black>{name}</Heading>
   <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
-    <TextButton text medium blue href="/builder/{_id}">
+    <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
       Open
       {name}
       →
-    </TextButton>
+    </ActionButton>
     {#if appExportLoading}
       <Spinner size="10" />
     {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
diff --git a/packages/builder/src/components/start/BuilderSettingsButton.svelte b/packages/builder/src/components/start/BuilderSettingsButton.svelte
index 5f0008e37..9bf50ab25 100644
--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsButton.svelte
@@ -1,32 +1,15 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
 
   let modal
 </script>
 
 <div>
-  <Button text on:click={modal.show}>
-    <i class="ri-settings-3-fill" />
-    <p>Settings</p>
+  <Button overBackground quiet icon="Settings" text on:click={modal.show}>
+    Settings
   </Button>
 </div>
 <Modal bind:this={modal} width="30%">
   <BuilderSettingsModal />
 </Modal>
-
-<style>
-  div i {
-    font-size: 26px;
-    color: var(--grey-7);
-    margin-left: 12px;
-  }
-
-  div p {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    color: var(--ink);
-    font-weight: 400;
-    margin: 0 0 0 12px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 7a04d3b92..21fdeb012 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Menu, MenuSection, MenuItem } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -61,7 +61,7 @@
     <div class="button-group">
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
       <Spacer medium />
-      <Button primary on:click={modal.show}>Create New Web App</Button>
+      <Button cta on:click={modal.show}>Create New Web App</Button>
     </div>
   </div>
 
diff --git a/yarn.lock b/yarn.lock
index 5f0162a7e..f8d5893de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -824,6 +824,26 @@
     estree-walker "^1.0.1"
     micromatch "^4.0.2"
 
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
+"@spectrum-css/actiongroup@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
+  integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
+
+"@spectrum-css/link@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
+  integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
+
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
+  integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"