diff --git a/packages/builder/package.json b/packages/builder/package.json
index 07b3287f18..40219ff4d4 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -57,7 +57,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.24.1",
+    "@budibase/bbui": "^1.29.0",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",
diff --git a/packages/builder/src/components/common/DatePicker.svelte b/packages/builder/src/components/common/DatePicker.svelte
index 8533389595..5b61df68a9 100644
--- a/packages/builder/src/components/common/DatePicker.svelte
+++ b/packages/builder/src/components/common/DatePicker.svelte
@@ -2,6 +2,7 @@
   import flatpickr from "flatpickr"
   import "flatpickr/dist/flatpickr.css"
   import { onMount } from "svelte"
+  import { Label } from "@budibase/bbui"
 
   export let value
   export let label
@@ -25,7 +26,7 @@
 </script>
 
 <div class="bb-margin-m">
-  <label class="uk-form-label">{label}</label>
+  <Label size="s" forAttr={'datepicker-label'}>{label}</Label>
   <div class="uk-form-controls">
     <input
       class="uk-input uk-form-width-{width} uk-form-{size}"
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
index 19a89a018d..34cca2fc21 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte
@@ -1,6 +1,7 @@
 <script>
   import { store } from "builderStore"
   import deepmerge from "deepmerge"
+  import { Label } from "@budibase/bbui"
 
   export let value
 
@@ -24,7 +25,7 @@
 </script>
 
 <div class="bb-margin-xl block-field">
-  <label class="uk-form-label">Page</label>
+  <Label size="s" forAttr={'page'}>Page</Label>
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value={pageName}>
       {#each Object.keys(pages) as page}
@@ -33,7 +34,7 @@
     </select>
   </div>
   {#if components.length > 0}
-    <label class="uk-form-label">Component</label>
+    <Label size="s" forAttr={'component'}>Component</Label>
     <div class="uk-form-controls">
       <select class="budibase__input" bind:value>
         {#each components as component}
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
index 793b97c5f0..d44f601e97 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -1,6 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { Input } from "@budibase/bbui"
+  import { Input, Label } from "@budibase/bbui"
 
   export let value
 </script>
@@ -17,7 +17,7 @@
 
 {#if value.model}
   <div class="bb-margin-xl block-field">
-    <label class="uk-form-label fields">Fields</label>
+    <Label size="s" forAttr={'fields'}>Fields</Label>
     {#each Object.keys(value.model.schema) as field}
       <div class="uk-form-controls bb-margin-xl">
         <Input bind:value={value[field]} label={field} />
@@ -25,9 +25,3 @@
     {/each}
   </div>
 {/if}
-
-<style>
-  .fields {
-    font-weight: 500;
-  }
-</style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 1b54463e06..060a922f7e 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -5,7 +5,7 @@
   import { notifier } from "builderStore/store/notifications"
   import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
   import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
-  import { Button, Input } from "@budibase/bbui"
+  import { Button, Input, Label } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -112,7 +112,7 @@
         <div class="panel-body">
           <div class="block-label">Workflow: {workflow.name}</div>
           <div class="config-item">
-            <label class="uk-form-label">User Access</label>
+            <Label size="s" forAttr={'useraccess'}>User Access</Label>
             <div class="access-levels">
 
               {#each ACCESS_LEVELS as level}
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index e0a41a9ff7..82b4ca0926 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
+  import { Label } from "@budibase/bbui"
 
   export let _bb
   export let model
@@ -167,7 +168,7 @@
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
-        <label class="form-label" for="form-stacked-text">{field}</label>
+        <Label size="s" forAttr={'form-stacked-text'}>{field}</Label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}
@@ -223,11 +224,6 @@
     margin-bottom: 16px;
   }
 
-  .form-label {
-    font-weight: bold;
-    margin-bottom: 12px;
-  }
-
   hr {
     border: 1px solid var(--grey-1);
     margin: 20px 0px;
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index f15fabf9ea..b71bee14b0 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { fade } from "svelte/transition"
+  import { Label } from "@budibase/bbui"
 
   export let _bb
   export let model
@@ -167,7 +168,7 @@
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
-        <label class="form-label" for="form-stacked-text">{field}</label>
+        <Label size="s" forAttr={'form-stacked-text'}>{field}</Label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
           <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}