diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index b16eb9ec6..000000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 000000000..d1ba2bc04
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 3aae8af2d..78e539bf6 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.47.0",
+    "@budibase/bbui": "^1.50.1",
     "@budibase/client": "^0.3.1",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 101f875e9..631764095 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -1,11 +1,13 @@
 import { getStore } from "./store"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation/"
+import { getThemeStore } from "./store/theme"
 import analytics from "analytics"
 
 export const store = getStore()
 export const backendUiStore = getBackendUiStore()
 export const automationStore = getAutomationStore()
+export const themeStore = getThemeStore()
 
 export const initialise = async () => {
   try {
diff --git a/packages/builder/src/builderStore/store/localStorage.js b/packages/builder/src/builderStore/store/localStorage.js
new file mode 100644
index 000000000..aaf10460b
--- /dev/null
+++ b/packages/builder/src/builderStore/store/localStorage.js
@@ -0,0 +1,43 @@
+import { get, writable } from "svelte/store"
+
+export const localStorageStore = (localStorageKey, initialValue) => {
+  const store = writable(initialValue, () => {
+    // Hydrate from local storage when we get a new subscriber
+    hydrate()
+
+    // Listen for local storage changes and keep store in sync
+    const storageListener = ({ key }) => key === localStorageKey && hydrate()
+    window.addEventListener("storage", storageListener)
+    return () => window.removeEventListener("storage", storageListener)
+  })
+
+  // New store setter which updates the store and localstorage
+  const set = value => {
+    store.set(value)
+    localStorage.setItem(localStorageKey, JSON.stringify(value))
+  }
+
+  // New store updater which updates the store and localstorage
+  const update = updaterFn => set(updaterFn(get(store)))
+
+  // Hydrates the store from localstorage
+  const hydrate = () => {
+    const localValue = localStorage.getItem(localStorageKey)
+    if (localValue == null) {
+      set(initialValue)
+    } else {
+      try {
+        store.set(JSON.parse(localValue))
+      } catch {
+        set(initialValue)
+      }
+    }
+  }
+
+  // Patch the default svelte store functions with our overrides
+  return {
+    ...store,
+    set,
+    update,
+  }
+}
diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
new file mode 100644
index 000000000..df94a4c3d
--- /dev/null
+++ b/packages/builder/src/builderStore/store/theme.js
@@ -0,0 +1,38 @@
+import { localStorageStore } from "./localStorage"
+
+export const getThemeStore = () => {
+  const themeElement = document.documentElement
+  const initialValue = {
+    darkMode: false,
+    hue: 208,
+    saturation: 9,
+    lightness: 16,
+  }
+
+  const store = localStorageStore("bb-theme", initialValue)
+
+  // Sets a CSS variable on the root document element
+  function setCSSVariable(prop, value) {
+    themeElement.style.setProperty(prop, value)
+  }
+
+  // Resets the custom theme to the default dark theme.
+  // The reset option is only available when dark theme is on, which is why it
+  // sets dark mode to true here
+  store.reset = () => {
+    store.set({
+      ...initialValue,
+      darkMode: true,
+    })
+  }
+
+  // Update theme when store changes
+  store.subscribe(theme => {
+    themeElement.classList[theme.darkMode ? "add" : "remove"]("dark")
+    setCSSVariable("--theme-hue", Math.round(theme.hue))
+    setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`)
+    setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`)
+  })
+
+  return store
+}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
index 4dab01d6f..0e0c6bb83 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
@@ -4,8 +4,10 @@
   viewBox="0 0 9 75"
   fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z" fill="#ADAEC4" />
-  <rect x="4" width="1" height="65" fill="#ADAEC4" />
+  <path
+    d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z"
+    fill="var(--grey-5)" />
+  <rect x="4" width="1" height="65" fill="var(--grey-5)" />
 </svg>
 
 <style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index a96e85d58..a00e65c69 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -54,7 +54,7 @@
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
     background-color: var(--ink);
     font-size: 16px;
-    color: var(--white);
+    color: var(--background);
   }
   .block.selected,
   .block:hover {
@@ -93,13 +93,13 @@
   }
 
   .ACTION {
-    background-color: var(--white);
+    background-color: var(--background);
     color: var(--ink);
   }
 
   .TRIGGER {
     background-color: var(--ink);
-    color: var(--white);
+    color: var(--background);
   }
   .TRIGGER header .label {
     background-color: var(--grey-9);
@@ -107,7 +107,7 @@
   }
 
   .LOGIC {
-    background-color: var(--blue-light);
+    background-color: var(--background);
     color: var(--ink);
   }
 
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index 5b9293bc8..3299206e7 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -49,7 +49,7 @@
     border-radius: 50%;
     height: 24px;
     width: 24px;
-    background: white;
+    background: var(--background);
     right: var(--spacing-s);
     bottom: 9px;
     display: flex;
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 35986785d..2599e4f8b 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -47,14 +47,16 @@
     if (allowEditing) {
       result = [
         {
-          pinned: "left",
+          checkboxSelection: true,
+          lockPosition: true,
           headerName: "Edit",
+          pinned: "left",
           sortable: false,
           resizable: false,
           suppressMovable: true,
           suppressMenu: true,
-          minWidth: 84,
-          width: 84,
+          minWidth: 114,
+          width: 114,
           cellRenderer: editRowRenderer,
         },
       ]
@@ -63,7 +65,6 @@
     Object.keys(schema || {}).forEach((key, idx) => {
       result.push({
         headerCheckboxSelection: false,
-        checkboxSelection: idx === 0 && allowEditing,
         headerComponent: TableHeader,
         headerComponentParams: {
           field: schema[key],
@@ -174,12 +175,18 @@
     height: auto;
     flex: 1 1 auto;
   }
-
-  :global(.ag-theme-alpine) {
-    --ag-border-color: var(--grey-4);
+  :global(.grid-wrapper) {
+    --ag-modal-overlay-background-color: transparent;
+    --ag-border-color: var(--grey-3);
     --ag-header-background-color: var(--grey-1);
     --ag-odd-row-background-color: var(--grey-1);
     --ag-row-border-color: var(--grey-3);
+    --ag-background-color: var(--background);
+    --ag-foreground-color: var(--ink);
+  }
+  :global(.ag-overlay-loading-center) {
+    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05) !important;
+    border-color: var(--grey-2);
   }
 
   :global(.ag-menu) {
@@ -207,7 +214,6 @@
     box-sizing: border-box;
     color: var(--ink);
     border-radius: var(--border-radius-m);
-    background: #fff;
     font-family: var(--font-sans) !important;
     box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
   }
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
index cbf4cc43e..b5e878fe6 100644
--- a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
@@ -21,6 +21,7 @@
     align-items: center;
     font-family: var(--font-sans);
     font-weight: 500;
+    color: var(--ink);
   }
 
   .loading-overlay > * {
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
index d5b3b63e0..a4d2a74fc 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
@@ -12,7 +12,7 @@
   }
 </script>
 
-<Button data-cy="edit-row" translucent small on:click={showModal}>Edit</Button>
+<Button data-cy="edit-row" secondary small on:click={showModal}>Edit</Button>
 <Modal bind:this={modal}>
   <CreateEditRowModal {row} />
 </Modal>
diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte
index e72fee2ee..fa008b420 100644
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ b/packages/builder/src/components/common/Checkbox.svelte
@@ -32,9 +32,7 @@
     position: relative;
     width: 20px;
     height: 20px;
-    /* background-color: #5e17e9; */
     background-color: var(--grey-2);
-    /* transform: translateY(-50%); */
     cursor: pointer;
     transition: 0.2s ease transform, 0.2s ease background-color,
       0.2s ease box-shadow;
@@ -51,7 +49,7 @@
     width: 12px;
     height: 12px;
     margin: 0 auto;
-    background-color: #fff;
+    background-color: var(--background);
     transform: translateY(-50%);
     transition: 0.2s ease width, 0.2s ease height;
     border-radius: 2px;
@@ -75,7 +73,7 @@
   .tick_mark:after {
     content: "";
     position: absolute;
-    background-color: #000;
+    background-color: var(--ink);
     border-radius: 2px;
     opacity: 0;
     transition: 0.2s ease transform, 0.2s ease opacity;
@@ -100,9 +98,7 @@
   }
 
   .checked {
-    /* background-color: #5e17e9; */
     background-color: var(--grey-2);
-    /* box-shadow: 0 7px 10px #5e17e9; */
   }
 
   .checked:before {
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index b0f90a10a..7aa535f28 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -43,7 +43,6 @@
 
 <style>
   .nav-item {
-    border-radius: var(--border-radius-m);
     cursor: pointer;
     color: var(--grey-7);
   }
@@ -60,6 +59,10 @@
   .nav-item:hover .actions {
     display: flex;
   }
+  .nav-item:hover,
+  .nav-item.selected {
+    border-radius: var(--border-radius-m);
+  }
 
   .content {
     padding: 0 var(--spacing-m);
diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
index 55adef2fb..976059a5b 100644
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
@@ -63,7 +63,7 @@
   .content {
     padding: 10px;
     display: block;
-    color: var(--white);
+    color: white;
     font-weight: 500;
   }
 </style>
diff --git a/packages/builder/src/components/common/Spinner.svelte b/packages/builder/src/components/common/Spinner.svelte
index 75f3700af..cd390375c 100644
--- a/packages/builder/src/components/common/Spinner.svelte
+++ b/packages/builder/src/components/common/Spinner.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div class="spinner-container">
-  <Circle {size} color="#000000" unit="px" />
+  <Circle {size} color="var(--ink)" unit="px" />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index 2a8aabc2c..417423a98 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -120,7 +120,7 @@
     position: absolute;
     bottom: 0;
     width: 100%;
-    background: var(--white);
+    background: var(--background);
   }
 
   .deployment {
diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte
new file mode 100644
index 000000000..3a752fcb1
--- /dev/null
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@@ -0,0 +1,95 @@
+<script>
+  import { themeStore } from "builderStore"
+  import { Label, DropdownMenu, Toggle, Button, Slider } from "@budibase/bbui"
+
+  let anchor
+  let popover
+  let showAdvanced = false
+</script>
+
+<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
+  <i class="ri-paint-fill" />
+</div>
+<div class="dropdown">
+  <DropdownMenu bind:this={popover} {anchor} align="right">
+    <div class="content">
+      <div>
+        <Label extraSmall grey>Theme</Label>
+        <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
+      </div>
+      {#if $themeStore.darkMode && !showAdvanced}
+        <div class="button">
+          <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
+        </div>
+      {/if}
+      {#if $themeStore.darkMode && showAdvanced}
+        <Slider
+          label="Hue"
+          bind:value={$themeStore.hue}
+          min="0"
+          max="360"
+          showValue />
+        <Slider
+          label="Saturation"
+          bind:value={$themeStore.saturation}
+          min="0"
+          max="100"
+          showValue />
+        <Slider
+          label="Lightness"
+          bind:value={$themeStore.lightness}
+          min="0"
+          max="32"
+          showValue />
+        <div class="button">
+          <Button text on:click={themeStore.reset}>Reset</Button>
+        </div>
+      {/if}
+    </div>
+  </DropdownMenu>
+</div>
+
+<style>
+  .dropdown {
+    z-index: 2;
+  }
+
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  .topnavitemright {
+    cursor: pointer;
+    color: var(--grey-7);
+    margin: 0 12px 0 0;
+    font-weight: 500;
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+  }
+  .topnavitemright:hover i {
+    color: var(--ink);
+  }
+
+  .content {
+    padding: var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .button {
+    align-self: flex-start;
+  }
+</style>
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index d6ee4b959..6a6941b67 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -19,7 +19,7 @@
 
 <style>
   .apps-card {
-    background-color: var(--white);
+    background-color: var(--background);
     padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
     max-width: 300px;
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 4118c2b9e..793ef84bb 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -268,7 +268,7 @@
     border-top-left-radius: 0.5rem;
     grid-gap: 30px;
     align-content: center;
-    background: #f5f5f5;
+    background: var(--grey-1);
   }
   .heading {
     display: flex;
@@ -294,7 +294,7 @@
     justify-content: end;
   }
   .spinner-container {
-    background: white;
+    background: var(--background);
     position: absolute;
     border-radius: 5px;
     left: 0;
diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte
index cde2d62e6..416336124 100644
--- a/packages/builder/src/components/start/Indicator.svelte
+++ b/packages/builder/src/components/start/Indicator.svelte
@@ -29,7 +29,7 @@
           1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
           1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
           10.1122 0.329679 10.1227 0.319527H10.1212Z"
-          fill="white" />
+          fill="var(--background)" />
       </svg>
     {:else}{step}{/if}
   </div>
@@ -42,7 +42,7 @@
     top: -30px;
     width: 1px;
     height: 30px;
-    background: #bdbdbd;
+    background: var(--grey-5);
   }
   .container:first-child::before {
     display: none;
@@ -54,27 +54,28 @@
     place-items: center;
   }
   .container.active {
-    box-shadow: inset 3px 0 0 0 #4285f4;
+    box-shadow: inset 3px 0 0 0 var(--blue);
   }
   .circle.active {
-    background: #4285f4;
+    background: var(--blue);
     color: white;
     border: none;
   }
   .circle.done {
-    background: #bdbdbd;
+    background: var(--grey-5);
     color: white;
     border: none;
   }
   .circle {
-    color: #bdbdbd;
+    color: var(--grey-5);
     font-size: 14px;
+    font-weight: 500;
     display: grid;
     place-items: center;
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    border: 1px solid #bdbdbd;
+    border: 1px solid var(--grey-5);
     box-sizing: border-box;
   }
 </style>
diff --git a/packages/builder/src/components/start/Steps/API.svelte b/packages/builder/src/components/start/Steps/API.svelte
index d954330d6..dfb530e86 100644
--- a/packages/builder/src/components/start/Steps/API.svelte
+++ b/packages/builder/src/components/start/Steps/API.svelte
@@ -5,7 +5,7 @@
   let blurred = { api: false }
 </script>
 
-<h2>Setup your API Key</h2>
+<h2>Set up your API Key</h2>
 <div class="container">
   <Input
     on:input={() => (blurred.api = true)}
@@ -22,4 +22,12 @@
     display: grid;
     grid-gap: 40px;
   }
+  a {
+    color: var(--grey-7);
+    font-weight: 500;
+    font-size: var(--font-size-s);
+  }
+  a:hover {
+    color: var(--ink);
+  }
 </style>
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
index 2c6a51698..6cb4d9416 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -6,7 +6,7 @@
   let blurred = { appName: false }
 </script>
 
-<h2>Create your web app</h2>
+<h2>Create your Web App</h2>
 <div class="container">
   {#if template}
     <div class="template">
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
index 06c42c553..edc1fdf40 100644
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@@ -5,7 +5,7 @@
   let blurred = { username: false, password: false }
 </script>
 
-<h2>Create new user</h2>
+<h2>Create your first User</h2>
 <div class="container">
   <Input
     on:input={() => (blurred.username = true)}
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index 14551adf1..e4c7ce92d 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -52,7 +52,7 @@
   }
 
   .templates-card {
-    background-color: var(--white);
+    background-color: var(--background);
     padding: var(--spacing-xl);
     border-radius: var(--border-radius-m);
     border: var(--border-dark);
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index bb73dfd80..76624abd0 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -18,9 +18,9 @@
 
 <div class="container" bind:this={anchor}>
   <Input {...inputProps} bind:value />
-  <button on:click={popover.show}>
+  <div class="icon" on:click={popover.show}>
     <Icon name="edit" />
-  </button>
+  </div>
 </div>
 <GenericBindingPopover
   {anchor}
@@ -34,25 +34,24 @@
     position: relative;
   }
 
-  button {
+  .icon {
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
     position: absolute;
-    background: none;
-    border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: var(--grey-4);
-    right: var(--spacing-s);
-    bottom: 5px;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: var(--spacing-xs);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 16px;
   }
-  button:hover {
-    background: var(--grey-5);
+  .icon:hover {
+    color: var(--ink);
     cursor: pointer;
   }
-  button :global(svg) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%) !important;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 10ccbd425..e62f76e4b 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -86,7 +86,7 @@
   .controls {
     margin-top: var(--spacing-m);
     display: grid;
-    align-items: baseline;
+    align-items: center;
     grid-gap: var(--spacing-l);
     grid-template-columns: 1fr auto auto;
   }
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index 14e665638..4df9a0d62 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -67,7 +67,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: white;
+    background: var(--background);
     color: var(--ink);
     font-size: 14px;
     font-weight: 500;
@@ -98,7 +98,7 @@
   .handler-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    border: 2px solid #f9f9f9;
+    border: 2px solid var(--grey-1);
     height: 80px;
     width: 100%;
   }
diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
index 62429bf55..6cba6417d 100644
--- a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
@@ -18,9 +18,11 @@
 <div class="container" bind:this={iconContainer} on:click={popover.show}>
   <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
 </div>
-<Popover bind:this={popover} anchor={iconContainer} align="right">
-  <FeedbackIframe on:finished={popover.hide} />
-</Popover>
+<div class="iframe">
+  <Popover bind:this={popover} anchor={iconContainer} align="right">
+    <FeedbackIframe on:finished={popover.hide} />
+  </Popover>
+</div>
 
 <style>
   i {
@@ -48,4 +50,8 @@
   .container:hover i {
     color: var(--ink);
   }
+
+  .iframe :global(.menu-container) {
+    background-color: white;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index 0d7cd280d..4bac03d4a 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -27,7 +27,7 @@
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: white;
+    background: var(--background);
     color: var(--grey-7);
     border-radius: var(--border-radius-m);
     font-size: var(--font-size-xs);
diff --git a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
index e88d379dc..619b6a11d 100644
--- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
+++ b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
@@ -49,7 +49,7 @@
 <style>
   .selected {
     color: var(--blue);
-    background: #f9f9f9;
+    background: var(--grey-1);
     opacity: 1;
   }
 
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index d9f5964b3..6cd61a15f 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -244,6 +244,6 @@
   }
 
   li:hover {
-    background-color: #e6e6e6;
+    background-color: var(--grey-3);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 51fcce388..c26004e44 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -46,7 +46,7 @@
     padding: 0 var(--spacing-m);
     height: 32px;
     text-align: center;
-    background: #ffffff;
+    background: var(--background);
     color: var(--grey-7);
     border-radius: 5px;
     font-size: var(--font-size-xs);
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 823dcf618..e9dfb0abf 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -95,9 +95,12 @@
       name={key} />
   </div>
   {#if bindable && control === Input && !key.startsWith('_')}
-    <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
+    <div
+      class="icon"
+      data-cy={`${key}-binding-button`}
+      on:click={dropdown.show}>
       <Icon name="edit" />
-    </button>
+    </div>
   {/if}
 </div>
 {#if control == Input}
@@ -139,17 +142,25 @@
     padding-left: 2px;
     overflow: hidden;
   }
-  button {
+
+  .icon {
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
     position: absolute;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: var(--spacing-xs);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 16px;
+  }
+  .icon:hover {
+    color: var(--ink);
     cursor: pointer;
-    background: none;
-    border: none;
-    height: 90%;
-    width: 2rem;
-    background: var(--grey-2);
-    right: 4px;
-    --spacing-s: 0;
-    border-left: 0.5px solid var(--grey-3);
-    outline-color: var(--blue);
   }
 </style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 579ecdd8b..0616399df 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -1,44 +1,28 @@
-
-:root {
-
-    --white: #FFFFFF;
-    
-    --blue: #0055ff;
-    --blue-light: #F1F4FC;
-    --blue-dark: #2F4C9B;
-
+html {
+    /* Light theme */
+    --background: #FFFFFF;
     --ink: #393C44;
-    --grey-7: #808192;
-    --grey-5: #ADAEC4;
-    
-    --grey: #F2F2F2;
-    --grey-1: var(--grey-1);
-    --grey-4: #e8e8ef;
-    --grey-4: #E6E6E6;
-
-    --red: #E26D69;
-    --red-light:#FFE6E6;
-    --red-dark: #800400;
-
-
-    --font-black: "Inter Black";
-    --font-bold: "Inter Bold";
-    --fontsemibold: "Inter Medium";
-    --font-normal: "Inter";
-
-    --bodytext: var(--font-normal) "regular" var(--secondary100) 16pt;
-    --bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt;
-    --smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt;
-    --lightbodytext: "regular" "normal" 16pt  var(--font-normal);
-    --heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt;
-    --quotation: var(--font-normal) "italics" var(--darkslate) 16pt;
-    --smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt;
-
-
+}
+html.dark {
+    /* Dark theme */
+    --theme-hue: 208;
+    --theme-saturation: 9%;
+    --theme-brightness: 16%;
+    --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%);
+    --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness));
+    --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%));
+    --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%));
+    --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%));
+    --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%));
+    --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%));
+    --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%));
+    --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%));
+    --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%));
+    --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%));
 }
 
 html, body {
-    font-family: inter;
+    font-family: var(--font-sans);
     color: var(--ink);
     padding: 0;
     margin: 0;
@@ -52,52 +36,11 @@ html, body {
     overflow-y: hidden;
 }
 
-h1 {
-    font-family: var(--font-black);
-    font-size: 36pt;
-    color: var(--secondary100);
-}
-
-h2 {
-    font-family: var(--font-bold);
-    font-size: 30pt;
-    color: var(--secondary100);
-}
-
-h3 {
-    font-family: var(--font-bold);
-    font-size: 24pt;
-    color: var(--secondary60);
-}
-
-h4 {
-    font-family: var(--font-bold);
-    font-size: 18pt;
-    color: var(--ink);
-}
-
-h5 {
-    font-family: var(--font-black);
-    font-size: 14pt;
-    color: var(--secondary100);
-}
-
-h5 {
-    font-family: var(--font-black);
-    font-size: 12pt;
-    color: var(--darkslate);
-}
-
-textarea {
-    font-family: var(--font-normal);
-}
-
 .hoverable:hover {
     cursor: pointer;
 }
 
 /* Top bottom spacing */
-
 .bb-margin-m {
     margin-bottom: var(--spacing-m);
 }
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 7f4339b97..88c7dfc54 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -8,10 +8,9 @@
 	<title>Budibase Builder</title>
 
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
+	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/external.css'>
-	<link rel='stylesheet' href='/_builder/bbui.css'>
-
 </head>
 
 <body id="app">
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 7d0724fac..d1d682d0b 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -2,10 +2,10 @@
   import { store, automationStore, backendUiStore } from "builderStore"
   import { Button } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
+  import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@sveltech/routify"
-  import { PreviewIcon } from "components/common/Icons/"
 
   // Get Package and set store
   export let application
@@ -66,6 +66,7 @@
       {/each}
     </div>
     <div class="toprightnav">
+      <ThemeEditor />
       <FeedbackNavLink />
       <div class="topnavitemright">
         <a target="_blank" href="https://docs.budibase.com">
@@ -125,7 +126,7 @@
   .top-nav {
     flex: 0 0 auto;
     height: 60px;
-    background: #fff;
+    background: var(--background);
     padding: 0 20px;
     display: flex;
     box-sizing: border-box;
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 08d64474f..708cfef68 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -29,7 +29,7 @@
 
   .nav {
     overflow-y: auto;
-    background: var(--white);
+    background: var(--background);
     padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 4bfb984c3..2d7639654 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -31,7 +31,7 @@
   }
   .nav {
     overflow-y: auto;
-    background: var(--white);
+    background: var(--background);
     padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte
index b2ee0e8fd..0563c4e2c 100644
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@@ -75,7 +75,7 @@
   }
 
   h4 {
-    color: var(--white);
+    color: white;
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 30px;
diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte
index c4c67c796..4d84c6d29 100644
--- a/packages/builder/src/pages/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/_layout.svelte
@@ -65,7 +65,7 @@
 
   .ui-nav {
     grid-column: 1;
-    background-color: var(--white);
+    background-color: var(--background);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-l);
@@ -84,14 +84,14 @@
     padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
   }
   .preview-content {
-    background: #fff;
+    background: var(--background);
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
     flex: 1 1 auto;
   }
 
   .components-pane {
     grid-column: 3;
-    background-color: var(--white);
+    background-color: var(--background);
     overflow-y: auto;
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 40adf3c76..871e94f98 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -58,7 +58,7 @@
 
   .ui-nav {
     grid-column: 1;
-    background-color: var(--white);
+    background-color: var(--background);
     padding: 20px;
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index a29bf5f44..fcf0f5af5 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -103,7 +103,7 @@
   .banner-content {
     position: absolute;
     font-size: 24px;
-    color: var(--white);
+    color: white;
     font-weight: 500;
   }
 </style>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 0eb481c9b..5f2beb05f 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -709,24 +709,16 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.47.0":
-  version "1.47.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.47.0.tgz#f7c1f1efff12b2a62eb52536fcc9a037f9b25982"
-  integrity sha512-mWOglrEjKSOe7At2gA8HDv5MUvPzFrpGgiikAeMEulvE7sq/SCreXtAps/Jx+RKq/tUMEZkDoA3S5nuQhsNM/A==
+"@budibase/bbui@^1.50.1":
+  version "1.50.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.50.1.tgz#5fa9cc8279cc93545b1832df1aef897df7a5e4aa"
+  integrity sha512-F6a+dhUAgagV3bPPCw79ok/xoqnAnHhQ7yNrVOFdv7pPoYsqd/30jic1ytHhCXPho4nSzDPTpCA1vIHXMj/3GA==
   dependencies:
+    quill "^1.3.7"
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
     svelte-portal "^1.0.0"
 
-"@budibase/client@^0.2.6":
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.6.tgz#de1b4872c7956d386a3b08969eda509bd39d1a64"
-  integrity sha512-sSoGN0k2Tcc5GewBjFMN+G3h21O9JvakYI33kBKgEVGrdEQLBbry7vRKb+lALeW2Bz65gafZL2joZzL8vnH0lw==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1415,11 +1407,6 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1474,13 +1461,6 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1888,6 +1868,11 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 clone@~0.1.9:
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/clone/-/clone-0.1.19.tgz#613fb68639b26a494ac53253e15b1a6bd88ada85"
@@ -2430,25 +2415,17 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
-deep-equal@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
-  integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
+deep-equal@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
   dependencies:
-    es-abstract "^1.18.0-next.1"
-    es-get-iterator "^1.1.0"
     is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.3"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
     object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
+    regexp.prototype.flags "^1.2.0"
 
 deep-is@~0.1.3:
   version "0.1.3"
@@ -2619,23 +2596,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.4:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
 es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
@@ -2654,19 +2614,6 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2736,6 +2683,11 @@ eventemitter2@^6.4.2:
   version "6.4.3"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.3.tgz#35c563619b13f3681e7eb05cbdaf50f56ba58820"
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
@@ -2838,9 +2790,10 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 extglob@^2.0.4:
   version "2.0.4"
@@ -2876,6 +2829,11 @@ fast-deep-equal@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
 
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-glob@^3.0.3:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
@@ -2973,7 +2931,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3356,22 +3314,12 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3403,7 +3351,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3469,11 +3417,6 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -3483,11 +3426,6 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3538,23 +3476,18 @@ is-reference@^1.1.2:
   dependencies:
     "@types/estree" "0.0.39"
 
-is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  dependencies:
-    has "^1.0.3"
-
-is-regex@^1.1.1:
+is-regex@^1.0.4, is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
   integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
   dependencies:
     has-symbols "^1.0.1"
 
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  dependencies:
+    has "^1.0.3"
 
 is-stream@^1.1.0:
   version "1.1.0"
@@ -3564,41 +3497,16 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   dependencies:
     has-symbols "^1.0.1"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3619,11 +3527,6 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4749,7 +4652,7 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-is@^1.1.3:
+object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
   integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
@@ -4910,6 +4813,11 @@ p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5157,6 +5065,27 @@ querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 ramda@~0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -5278,7 +5207,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -5286,11 +5215,6 @@ regexp.prototype.flags@^1.3.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5703,14 +5627,6 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -6432,43 +6348,10 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 519089ef3..9b2fca0f5 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -36,7 +36,7 @@
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.46.0",
+    "@budibase/bbui": "^1.50.1",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",
diff --git a/readme.md b/readme.md
index ec3c39bd5..4b1d1eb2c 100644
--- a/readme.md
+++ b/readme.md
@@ -1,13 +1,26 @@
-# Budibase is in Beta
+# Budibase
+[Budibase](https://www.budibase.com) is an open source no-code platform for building and deploying custom software, without coding.
 
-Budibase is currently beta software. Until our official launch, we cannot ensure backwards compatibility for your budibase applications between versions. Issues may arise when trying to edit apps created with old versions of the budibase builder.
+<p align="center">
+  <img src="https://i.imgur.com/tMCahK8.png">
+</p>
+
+# Status
+- [x] Alpha: We are demoing Budibase to users and receiving feedback
+- [x] Private Beta: We are testing Budibase with a closed set of customers
+- [x] Public Beta: Anyone can [sign-up and use Budibase](https://portal.budi.live/signup) but it's not production ready. We cannot ensure backwards compatibility
+- [ ] Official Launch: Production-ready
 
-If you are having issues between updates of the builder, please use the guide [here](https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md#troubleshooting) to clear down your environment.
 
+We are currently in Public Beta. Until our official launch, we cannot ensure backwards compatibility for your budibase applications between versions. Issues may arise when trying to edit apps created with old versions of the budibase builder.
 
-# What is Budibase?
+Watch "releases" of this repo to get notified of major updates, and give the star button a click whilst you're there. 
 
-Budibase is a platform for building web applications, without needing to write code.
+<p align="center">
+  <img src="https://i.imgur.com/cJpgqm8.png">
+</p>
+
+If you are having issues between updates of the builder, please use the guide [here](https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md#troubleshooting) to clear down your environment.
 
 
 # Getting Started with Budibase
@@ -15,9 +28,9 @@ Budibase is a platform for building web applications, without needing to write c
 The Budibase builder runs in Electron, on Mac, PC and Linux. [Download the latest release](https://github.com/Budibase/budibase/releases), and start building!
 
 
-## Documentation
+## Documentation and tutorial
 
-A work in progress, lives here: https://docs.budibase.com
+Our documentation and tutorials live here: https://docs.budibase.com
 
 ## Contributing
 
@@ -25,7 +38,7 @@ Contributors, see [CONTRIBUTING.md](./CONTRIBUTING.md)
 
 ## Get in touch
 
-If you have a question or would like to talk with other Budibase users, please join our Discord server:
+If you have a question or would like to talk with other Budibase users, please hop over to [Github discussions](https://github.com/Budibase/budibase/discussions) or join our Discord server:
 
 [Discord chatroom](https://discord.gg/rCYayfe)