diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index b16eb9ec68..0000000000
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 0000000000..d1ba2bc046
--- /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 3aae8af2d6..78e539bf60 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 101f875e96..6317640955 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 0000000000..aaf10460b6
--- /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 0000000000..df94a4c3d5
--- /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 4dab01d6f1..0e0c6bb83a 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 a96e85d582..a00e65c69f 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 5b9293bc8c..3299206e78 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 35986785de..2599e4f8b0 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 cbf4cc43ed..b5e878fe66 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 d5b3b63e0f..a4d2a74fc2 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 e72fee2ee6..fa008b4200 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 b0f90a10a9..7aa535f289 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 55adef2fbf..976059a5bf 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 75f3700af3..cd390375c0 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 2a8aabc2ca..417423a985 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 0000000000..3a752fcb1d
--- /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 d6ee4b9591..6a6941b67d 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 4118c2b9e7..793ef84bbf 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 cde2d62e67..416336124f 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 d954330d64..dfb530e86b 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 2c6a51698e..6cb4d94168 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 06c42c553f..edc1fdf40b 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 14551adf1d..e4c7ce92d1 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 bb73dfd80d..76624abd06 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 10ccbd4256..e62f76e4b7 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 14e6656381..4df9a0d62e 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 62429bf554..6cba6417d4 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 0d7cd280d7..4bac03d4a6 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 e88d379dc1..619b6a11d3 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 d9f5964b30..6cd61a15f7 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 51fcce3889..c26004e44d 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 823dcf6183..e9dfb0abfc 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 579ecdd8ba..0616399dff 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 7f4339b974..88c7dfc549 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 7d0724facd..d1d682d0b9 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 08d64474f4..708cfef68c 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 4bfb984c3b..2d76396546 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 b2ee0e8fdb..0563c4e2cc 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 c4c67c796e..4d84c6d29a 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 40adf3c76c..871e94f987 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 a29bf5f44d..fcf0f5af52 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 0eb481c9be..5f2beb05fa 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 519089ef35..9b2fca0f54 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 ec3c39bd59..4b1d1eb2c2 100644
--- a/readme.md
+++ b/readme.md
@@ -1,23 +1,36 @@
-# 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
+
+
+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.
+
+Watch "releases" of this repo to get notified of major updates, and give the star button a click whilst you're there. 
+
+<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.
 
 
-# What is Budibase?
-
-Budibase is a platform for building web applications, without needing to write code.
-
-
 # Getting Started with Budibase
 
 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)