diff --git a/packages/builder/package.json b/packages/builder/package.json
index f6109b0c05..26d6ee3e61 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -50,7 +50,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.10.2",
+    "@budibase/bbui": "^1.13.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 134ec5a6a9..eed164131d 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -78,12 +78,17 @@
 
 .budibase__input {
     height: 36px;
-    width: 220px;
-    border-radius: 3px;
-    border: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border: none;
+    border-radius: 5px;
+    width: 100%;
     text-align: left;
     color: var(--ink);
     font-size: 14px;
+    padding-left: 8px;
+    -moz-box-sizing: border-box; 
+    -webkit-box-sizing: border-box; 
+     box-sizing: border-box; 
 }
 
 .uk-text-right {
diff --git a/packages/builder/src/components/common/Block.svelte b/packages/builder/src/components/common/Block.svelte
index c796f66f10..fc1958a211 100644
--- a/packages/builder/src/components/common/Block.svelte
+++ b/packages/builder/src/components/common/Block.svelte
@@ -15,16 +15,16 @@
 <style>
   div {
     height: 80px;
-    border-radius: 3px;
+    border-radius: 5px;
     color: var(--ink);
-    font-weight: 500;
+    font-weight: 400;
     padding: 15px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     transition: 0.3s transform;
-    background: var(--light-grey);
+    background: var(--grey-1);
   }
 
   i {
@@ -38,7 +38,7 @@
 
   div:hover {
     cursor: pointer;
-    transform: scale(1.1);
+    background: var(--grey-2);
   }
 
   .primary {
diff --git a/packages/builder/src/components/common/NumberBox.svelte b/packages/builder/src/components/common/NumberBox.svelte
index 4c81cf7433..8a38f8a0d2 100644
--- a/packages/builder/src/components/common/NumberBox.svelte
+++ b/packages/builder/src/components/common/NumberBox.svelte
@@ -26,12 +26,12 @@
   .numberbox {
     display: grid;
     align-items: center;
-    grid-template-columns: 40% 1fr;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
   }
 
   label {
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/common/ValuesList.svelte b/packages/builder/src/components/common/ValuesList.svelte
index 53a16455cc..f27bf4cf82 100644
--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@@ -15,16 +15,34 @@
   $: valuesText = join("\n")(values)
 </script>
 
-<div class="uk-margin">
-  <label class="uk-form-label">{label}</label>
+<div class="margin">
+  <label class="label">{label}</label>
   <div class="uk-form-controls">
     <textarea value={valuesText} on:change={inputChanged} />
   </div>
 </div>
 
 <style>
+  .margin {
+    margin-bottom: 16px;
+    display: grid;
+  }
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
   textarea {
+    font-size: 14px;
+    height: 200px;
     width: 100%;
-    height: 100px;
+    border-radius: 5px;
+    border: none;
+    cursor: text;
+    background: var(--grey-2);
+    padding: 12px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index 409f4b9892..85ffa58a6a 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -86,10 +86,7 @@
   <div class="table-controls">
     <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
     <Button primary on:click={createNewRecord}>
-      <span class="button-inner">
-        <i class="ri-add-circle-fill" />
-        Create New Record
-      </span>
+      <span class="button-inner">Create New Record</span>
     </Button>
   </div>
   <table class="uk-table">
@@ -207,9 +204,4 @@
     display: flex;
     align-items: center;
   }
-
-  .button-inner i {
-    margin-right: 5px;
-    font-size: 20px;
-  }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index 021006e788..3db48eab34 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -93,8 +93,12 @@
   </form>
 </div>
 <footer>
-  <Button secondary on:click={onClosed}>Cancel</Button>
-  <Button attention on:click={saveRecord}>Save</Button>
+  <div class="button-margin-3">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+  </div>
+  <div class="button-margin-4">
+    <Button blue on:click={saveRecord}>Save</Button>
+  </div>
 </footer>
 
 <style>
@@ -131,8 +135,22 @@
   }
 
   footer {
-    padding: 20px;
+    padding: 20px 30px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 20px;
     background: var(--grey-1);
-    border-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .button-margin-3 {
+    grid-column-start: 3;
+    display: grid;
+  }
+
+  .button-margin-4 {
+    grid-column-start: 4;
+    display: grid;
   }
 </style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
index e84b975bb2..13f4a5223e 100644
--- a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
@@ -48,7 +48,6 @@
     margin-top: 20px;
     margin-bottom: 20px;
     display: grid;
-    grid-gap: 20px;
     grid-template-columns: repeat(3, 1fr);
   }
 
@@ -68,7 +67,7 @@
   }
 
   .selected {
-    background: var(--blue-light);
+    background: var(--grey-3);
     color: var(--ink);
   }
 
diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
index 0bf563319b..f449c4c389 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
@@ -18,15 +18,14 @@
 
   div {
     padding: 0 10px 0 10px;
-    width: 90%;
-    height: 40px;
-    border-radius: 3px;
+    height: 36px;
+    border-radius: 5px;
     display: flex;
     align-items: center;
     transition: 0.3s background-color;
     color: var(--ink);
-    font-weight: 500;
-    font-size: 16px;
+    font-weight: 400;
+    font-size: 14px;
     margin-top: 4px;
     margin-bottom: 4px;
   }
@@ -41,7 +40,7 @@
   }
 
   i {
-    color: var(--dark-grey);
+    color: var(--grey-7);
     font-size: 20px;
     margin-right: 8px;
   }
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index 43008e1914..19778c278f 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -52,7 +52,7 @@
           headings={HEADINGS}
           bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
           {#if selectedTab === 'NAVIGATE'}
-            <Button secondary wide on:click={setupForNewModel}>
+            <Button purple wide on:click={setupForNewModel}>
               Create New Model
             </Button>
             <div class="hierarchy-items-container">
diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte
index d9a61508b3..4f69f156e2 100644
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte
@@ -95,30 +95,38 @@
 
 <style>
   .info {
-    background: var(--light-grey);
-    padding: 12px;
-    margin-bottom: 5px;
-    border-radius: 3px;
+    margin-bottom: 16px;
+    border-radius: 5px;
   }
 
   label {
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
   }
 
   .field {
     display: grid;
     align-items: center;
-    grid-template-columns: 40% 1fr;
-    margin-top: 8px;
+    margin-bottom: 16px;
   }
 
   .field-box header {
     font-size: 14px;
     font-weight: 500;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 
   .field-box span {
-    font-weight: bold;
+    background: var(--grey-2);
+    color: var(--grey-6);
+    font-weight: 400;
+    height: 36px;
+    display: grid;
+    align-items: center;
+    padding-left: 12px;
+    text-transform: capitalize;
+    border-radius: 5px;
+    cursor: not-allowed;
   }
 </style>
diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
index 655fbda8ff..39be32bf07 100644
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@@ -81,14 +81,14 @@
         </div>
       {/if}
       <footer>
-        <Button disabled={!edited} attention={edited} wide on:click={saveModel}>
+        <Button disabled={!edited} green={edited} wide on:click={saveModel}>
           Save
         </Button>
       </footer>
     {:else if selectedTab === 'DELETE'}
       <div class="titled-input">
         <header>Danger Zone</header>
-        <Button error wide on:click={deleteModel}>Delete</Button>
+        <Button red wide on:click={deleteModel}>Delete</Button>
       </div>
     {/if}
   </Switcher>
@@ -115,14 +115,13 @@
   }
 
   .titled-input {
-    padding: 12px;
-    background: var(--light-grey);
-    margin-bottom: 5px;
+    margin-bottom: 16px;
+    display: grid;
   }
 
   .titled-input header {
     display: block;
     font-size: 14px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 0850125de1..38e4dd67a9 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -30,7 +30,10 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
+  $: componentInstance =
+    $store.currentView !== "component"
+      ? { ...$store.currentPreviewItem, ...$store.currentComponentInfo }
+      : $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -46,18 +49,21 @@
 
   const onStyleChanged = store.setComponentStyle
 
-   function onPropChanged(key, value) {
-    if($store.currentView !== "component") {
+  function onPropChanged(key, value) {
+    if ($store.currentView !== "component") {
       store.setPageOrScreenProp(key, value)
       return
     }
     store.setComponentProp(key, value)
   }
 
-  $: isComponentOrScreen =  $store.currentView === "component" || $store.currentFrontEndType === "screen" 
+  $: isComponentOrScreen =
+    $store.currentView === "component" ||
+    $store.currentFrontEndType === "screen"
   $: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
 
-  $: displayName = isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
+  $: displayName =
+    isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
 
   function walkProps(component, action) {
     action(component)
@@ -92,11 +98,11 @@
     {categories}
     {selectedCategory} />
 
-    {#if displayName}
-      <div class="instance-name">
-        <strong>{componentInstance._instanceName}</strong>
-      </div>
-    {/if}
+  {#if displayName}
+    <div class="instance-name">
+      <strong>{componentInstance._instanceName}</strong>
+    </div>
+  {/if}
 
   <div class="component-props-container">
     {#if selectedCategory.value === 'design'}
@@ -108,8 +114,7 @@
         {panelDefinition}
         displayNameField={displayName}
         onChange={onPropChanged}
-        screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
-
+        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
     {/if}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index c5c6afe063..6de3fe11c2 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -7,7 +7,7 @@
   import { store } from "builderStore"
   import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
 
-  export let screens = []  
+  export let screens = []
 
   let confirmDeleteDialog
   let componentToDelete = ""
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index cf03861fb9..2a01968881 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -43,7 +43,7 @@
         style="padding-left: {level * 20 + 40}px">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-fill" />
-          {isScreenslot(component._component) ? "Screenslot" : component._instanceName}
+          {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
         </div>
         <div class="actions">
           <ComponentDropdownMenu {component} />
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index b9f761cec7..872ad16525 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -8,7 +8,7 @@
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
   import { store, workflowStore } from "builderStore"
   import { ArrowDownIcon } from "components/common/Icons/"
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from "svelte"
 
   export let parameter
 
@@ -26,7 +26,7 @@
   {/if}
   {#if parameter.name === 'workflow'}
     <Select on:change bind:value={parameter.value}>
-      <option value=""></option>
+      <option value="" />
       {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
         <option value={workflow._id}>{workflow.name}</option>
       {/each}
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 7437235747..5ad260d761 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -13,9 +13,10 @@
   export let displayNameField = false
   export let screenOrPageInstance
 
-  let pageScreenProps = ["title","favicon", "description", "route"]
-  
-  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
+  let pageScreenProps = ["title", "favicon", "description", "route"]
+
+  const propExistsOnComponentDef = prop =>
+    pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
@@ -38,18 +39,23 @@
 {#if screenOrPageInstance}
   {#each screenOrPageDefinition as def}
     <PropertyControl
-        control={def.control}
-        label={def.label}
-        key={def.key}
-        value={screenOrPageInstance[def.key]}
-        {onChange}
-        props={{ ...excludeProps(def, ['control', 'label']) }} />
+      control={def.control}
+      label={def.label}
+      key={def.key}
+      value={screenOrPageInstance[def.key]}
+      {onChange}
+      props={{ ...excludeProps(def, ['control', 'label']) }} />
   {/each}
   <hr />
 {/if}
 
 {#if displayNameField}
-  <PropertyControl control={Input} label="Name" key="_instanceName" value={componentInstance._instanceName} {onChange} />
+  <PropertyControl
+    control={Input}
+    label="Name"
+    key="_instanceName"
+    value={componentInstance._instanceName}
+    {onChange} />
 {/if}
 
 {#if panelDefinition && panelDefinition.length > 0}
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 1bf32fd925..d5188d8818 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -199,6 +199,6 @@
   }
 
   .components-list-container {
-    padding: 20px 0px 0 0;
+    padding: 10px 0px 0 0;
   }
 </style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index aed1ee4538..fb18a20e63 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -130,7 +130,11 @@
               {#each ACCESS_LEVELS as level}
                 <span class="access-level">
                   <label>{level.name}</label>
-                  <input class="uk-checkbox" type="checkbox" disabled={!level.editable} bind:checked={level.canExecute}/>
+                  <input
+                    class="uk-checkbox"
+                    type="checkbox"
+                    disabled={!level.editable}
+                    bind:checked={level.canExecute} />
                 </span>
               {/each}
             </div>
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 89861b8ac7..44f44276ed 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -40,10 +40,10 @@ export const FIELDS = {
   DATETIME: {
     name: "Date/Time",
     icon: "ri-calendar-event-fill",
-    type: "datetime",
+    type: "string",
     constraints: {
-      type: "date",
-      datetime: {},
+      type: "string",
+      length: {},
       presence: false,
     },
   },
@@ -119,10 +119,10 @@ export const BLOCKS = {
   END_DATE: {
     name: "End Date",
     icon: "ri-calendar-event-fill",
-    type: "datetime",
+    type: "string",
     constraints: {
-      type: "date",
-      datetime: {},
+      type: "string",
+      length: {},
       presence: false,
     },
   },
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index b3b81abff2..c099289972 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -24,6 +24,7 @@
     height: 100%;
     display: flex;
     background: var(--grey-1);
+    line-height: 1;
   }
 
   .content {
@@ -32,7 +33,6 @@
   }
 
   .nav {
-    overflow: auto;
     flex: 0 1 auto;
     width: 300px;
     height: 100%;
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index 1b84a255ba..2746a82d2f 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -29,6 +29,7 @@
     height: 100%;
     display: flex;
     background: var(--grey-1);
+    line-height: 1;
   }
 
   .content {
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index 0675c65f46..d09cd0ff2b 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -23,7 +23,10 @@
 
   const login = async () => {
     loading = true
-    const response = await _bb.api.post("/api/authenticate", { username, password })
+    const response = await _bb.api.post("/api/authenticate", {
+      username,
+      password,
+    })
     if (response.status === 200) {
       const json = await response.json()
       localStorage.setItem("budibase:token", json.token)