diff --git a/packages/builder/package.json b/packages/builder/package.json
index 3aae8af2d6..ec6a024e99 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.47.0",
+    "@budibase/bbui": "^1.49.0",
     "@budibase/client": "^0.3.1",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
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..53cfc855c2 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);
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..61276897f1 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -174,12 +174,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: rgba(0, 0, 0, 0.05);
+    --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 +213,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..568e776336 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;
@@ -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/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/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/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/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..7491e83fbc 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -151,5 +151,6 @@
     --spacing-s: 0;
     border-left: 0.5px solid var(--grey-3);
     outline-color: var(--blue);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 579ecdd8ba..9d05cb1342 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -1,44 +1,32 @@
-
 :root {
-
-    --white: #FFFFFF;
-    
-    --blue: #0055ff;
+    /* Primary colour */
+    --blue: #2196f3;
     --blue-light: #F1F4FC;
     --blue-dark: #2F4C9B;
 
+    /* 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;
-
 
+    /* Dark theme */
+    --hue: 208;
+    --saturation: 9%;
+    --base-brightness: 16%;
+    --ink: hsl(var(--hue), var(--saturation), 90%);
+    --background: hsl(var(--hue), var(--saturation), var(--base-brightness));
+    --grey-1: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 2%));
+    --grey-2: hsl(var(--hue), calc(var(--saturation) + 1%), calc(var(--base-brightness) + 4%));
+    --grey-3: hsl(var(--hue), var(--saturation),calc(var(--base-brightness) + 7%));
+    --grey-4: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 10%));
+    --grey-5: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 25%));
+    --grey-6: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 30%));
+    --grey-7: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 55%));
+    --grey-8: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 60%));
+    --grey-9: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 70%));
 }
 
 html, body {
-    font-family: inter;
+    font-family: var(--font-sans);
     color: var(--ink);
     padding: 0;
     margin: 0;
@@ -53,43 +41,23 @@ html, body {
 }
 
 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 {
@@ -97,7 +65,6 @@ textarea {
 }
 
 /* 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..59a933d4d0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -5,7 +5,6 @@
   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
@@ -125,7 +124,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 13f2b4ee53..e31b66e1b2 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..80df164817 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -709,24 +709,15 @@
     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.49.0":
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.49.0.tgz#0d9651a1c369488c90883148d6633575dfa782ec"
+  integrity sha512-L8yEUUkZda+ywMKcf/j8LIdkkHb0WceIhpZhqMkZvSZwoPN0DnM7RLVpWj/gPEPipPTNTqB9LInzA3Rq2RsWuQ==
   dependencies:
     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 +1406,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 +1460,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"
@@ -2430,26 +2409,6 @@ 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==
-  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"
-    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"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2619,54 +2578,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"
-  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
-  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-negative-zero "^2.0.0"
-    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-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"
@@ -2973,7 +2884,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=
@@ -3347,31 +3258,16 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 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"
@@ -3380,11 +3276,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
-is-callable@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
-  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3403,7 +3294,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,25 +3360,10 @@ 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"
 
-is-negative-zero@^2.0.0:
-  version "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"
@@ -3544,18 +3420,6 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-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-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -3564,41 +3428,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 +3458,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"
@@ -4744,19 +4578,6 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
-object-inspect@^1.8.0:
-  version "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:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
-  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4788,16 +4609,6 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
-  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.0"
-    has-symbols "^1.0.1"
-    object-keys "^1.1.1"
-
 object.getownpropertydescriptors@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
@@ -5278,19 +5089,6 @@ 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:
-  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==
-  dependencies:
-    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 +5501,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"
@@ -5944,14 +5734,6 @@ string.prototype.trimend@^1.0.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string.prototype.trimend@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46"
-  integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 string.prototype.trimleft@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
@@ -5975,14 +5757,6 @@ string.prototype.trimstart@^1.0.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string.prototype.trimstart@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7"
-  integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -6432,43 +6206,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..ef70028c6f 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.49.0",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",