diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 3a81107ff5..cbab6803eb 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -46,8 +46,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  button.active {
-    color: var(--spectrum-semantic-cta-color-background-default);
-  }
 </style>
diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index 84a4d9613a..3ff8462776 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Icon from '../Icon/Icon.svelte'
+  import Icon from "../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -58,9 +58,10 @@
     text-overflow: ellipsis;
     text-transform: capitalize;
     white-space: nowrap;
+    user-select: none;
   }
   .name.thin {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
   .icon {
diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
index 26e2b2677c..cc50225d2f 100644
--- a/packages/bbui/src/Divider/Divider.svelte
+++ b/packages/bbui/src/Divider/Divider.svelte
@@ -5,12 +5,25 @@
   export let s = false
 
   export let vertical = false
+  export let noMargin = false
+  export let noGrid = false
 
   $: useDefault = ![l, m, s].includes(true)
 </script>
 
 <hr
+  class:noMargin
+  class:noGrid
   class:spectrum-Divider--sizeL={l}
   class:spectrum-Divider--sizeM={m || useDefault}
   class:spectrum-Divider--sizeS={s}
   class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
+
+<style>
+  hr.noMargin {
+    margin: 0;
+  }
+  hr.noGrid {
+    grid-area: auto;
+  }
+</style>
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index cc3d2956ed..f1116b4bba 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -99,5 +99,8 @@
     max-height: none;
     margin: 40px 0;
     transform: none;
+    --spectrum-dialog-confirm-border-radius: var(
+      --spectrum-global-dimension-size-100
+    );
   }
 </style>
diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index c12b9417cf..47848dc44f 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -84,6 +84,9 @@
   .spectrum-Dialog-content {
     overflow: visible;
   }
+  .spectrum-Dialog-heading {
+    font-family: var(--spectrum-alias-body-text-font-family);
+  }
 
   .spectrum-Dialog-buttonGroup {
     gap: var(--spectrum-global-dimension-static-size-200);
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index f0079d845e..bea421fd07 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -42,3 +42,9 @@
     </div>
   </Portal>
 {/if}
+
+<style>
+  .spectrum-Popover {
+    min-width: var(--spectrum-global-dimension-size-2000) !important;
+  }
+</style>
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 2bf26b690d..3c7c224555 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -303,7 +303,7 @@
 
 <style>
   .wrapper {
-    background-color: var(--spectrum-alias-background-color-default);
+    background-color: var(--spectrum-alias-background-color-secondary);
     overflow: hidden;
     position: relative;
     z-index: 1;
@@ -313,23 +313,6 @@
     height: 100%;
     position: relative;
     overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--spectrum-global-color-gray-400)
-      var(--spectrum-alias-background-color-default);
-  }
-  .container::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-  .container::-webkit-scrollbar-track {
-    background: var(--spectrum-alias-background-color-default);
-  }
-  .container::-webkit-scrollbar-thumb {
-    background-color: var(--spectrum-global-color-gray-400);
-    border-radius: 4px;
-  }
-  .container::-webkit-scrollbar-corner {
-    background: var(--spectrum-alias-background-color-default);
   }
   .container.quiet {
     border: none !important;
@@ -364,7 +347,7 @@
     position: sticky;
     top: 0;
     z-index: 2;
-    background-color: var(--spectrum-alias-background-color-default);
+    background-color: var(--spectrum-alias-background-color-secondary);
     border-bottom: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
   }
diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index e5c9344433..b2637f2784 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -1,35 +1,49 @@
 <script>
-    import { getContext, onMount } from 'svelte'
-    import Portal from "svelte-portal"
-    export let title
-    export let icon = '';
-    
-    const selected = getContext('tab')
-    let tab;
-    let tabInfo
-    const setTabInfo = () => {
-        tabInfo = tab.getBoundingClientRect()
-        if ($selected.title === title) {
-            $selected.info = tabInfo
-        }
+  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import Portal from "svelte-portal"
+  export let title
+  export let icon = ""
+
+  const dispatch = createEventDispatcher()
+  const selected = getContext("tab")
+  let tab
+  let tabInfo
+  const setTabInfo = () => {
+    tabInfo = tab.getBoundingClientRect()
+    if ($selected.title === title) {
+      $selected.info = tabInfo
     }
+  }
 
-    onMount(() => {
-        setTabInfo()
-    })
+  onMount(() => {
+    setTabInfo()
+  })
 
+  const onClick = () => {
+    $selected = { ...$selected, title, info: tab.getBoundingClientRect() }
+    dispatch("click")
+  }
 </script>
 
-<div bind:this={tab} on:click={() => $selected = {...$selected, title, info: tab.getBoundingClientRect()} } class:is-selected={$selected.title === title} class="spectrum-Tabs-item" tabindex="0">
-    {#if icon}
-        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
-            <use xlink:href="#spectrum-icon-18-{icon}" />
-        </svg>
-    {/if}
-    <span class="spectrum-Tabs-itemLabel">{title}</span>
+<div
+  bind:this={tab}
+  on:click={onClick}
+  class:is-selected={$selected.title === title}
+  class="spectrum-Tabs-item"
+  tabindex="0">
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Folder">
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tabs-itemLabel">{title}</span>
 </div>
 {#if $selected.title === title}
-    <Portal target=".spectrum-Tabs-content-{$selected.id}">
-        <slot />
-    </Portal>
-{/if}
\ No newline at end of file
+  <Portal target=".spectrum-Tabs-content-{$selected.id}">
+    <slot />
+  </Portal>
+{/if}
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 10617a6a5a..7cd3e50b18 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -1,71 +1,85 @@
 <script>
-    import "@spectrum-css/tabs/dist/index-vars.css"
-    import { writable } from 'svelte/store'
-    import { onMount, setContext, createEventDispatcher } from 'svelte'
-    
-    export let selected;
-    export let vertical = false
-    let _id = id()
-    const tab = writable({title: selected, id: _id})
-    setContext('tab', tab)
-    
-    let container;
+  import "@spectrum-css/tabs/dist/index-vars.css"
+  import { writable } from "svelte/store"
+  import { onMount, setContext, createEventDispatcher } from "svelte"
 
-    const dispatch = createEventDispatcher()
+  export let selected
+  export let vertical = false
+  let _id = id()
+  const tab = writable({ title: selected, id: _id })
+  setContext("tab", tab)
 
-    $: selected = $tab.title
-    $: selected = dispatch('select', selected)
+  let container
 
-    let top, left, width, height;
-    $: calculateIndicatorLength($tab)
-    $: calculateIndicatorOffset($tab)
+  const dispatch = createEventDispatcher()
 
-    function calculateIndicatorLength() {
-        if (!vertical) {
-            width = $tab.info?.width + 24 + 'px'
-            height = $tab.info?.height
-        } else {
-            height = $tab.info?.height + 4 +  'px'
-            width = $tab.info?.width
-        }
+  $: selected = $tab.title
+  $: selected = dispatch("select", selected)
+
+  let top, left, width, height
+  $: calculateIndicatorLength($tab)
+  $: calculateIndicatorOffset($tab)
+
+  function calculateIndicatorLength() {
+    if (!vertical) {
+      width = $tab.info?.width + "px"
+      height = $tab.info?.height
+    } else {
+      height = $tab.info?.height + 4 + "px"
+      width = $tab.info?.width
     }
+  }
 
-    function calculateIndicatorOffset() {
-        if (!vertical) {
-            left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px'
-            top = $tab.info?.top
-        } else {
-            top = $tab.info?.top - container?.getBoundingClientRect().top + 'px'
-            left = $tab.info?.left
-        }
+  function calculateIndicatorOffset() {
+    if (!vertical) {
+      left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
+    } else {
+      top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
     }
-    
-    onMount(() => {
-            calculateIndicatorLength()
-            calculateIndicatorOffset()
-    })
+  }
 
-    function id() {
-        return (
-            "_" +
-            Math.random()
-            .toString(36)
-            .substr(2, 9)
-        )
-    }
+  onMount(() => {
+    calculateIndicatorLength()
+    calculateIndicatorOffset()
+  })
+
+  function id() {
+    return (
+      "_" +
+      Math.random()
+        .toString(36)
+        .substr(2, 9)
+    )
+  }
 </script>
-<div bind:this={container} class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
-    <slot />
-    <div class="spectrum-Tabs-selectionIndicator indicator-transition" style="width: {width}; height: {height}; left: {left}; top: {top};"></div>
+
+<div
+  bind:this={container}
+  class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
+  <slot />
+  {#if $tab.info}
+    <div
+      class="spectrum-Tabs-selectionIndicator indicator-transition"
+      style="width: {width}; height: {height}; left: {left}; top: {top};" />
+  {/if}
 </div>
 
 <div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
 
 <style>
-    .spectrum-Tabs-content {
-        margin-top: var(--spectrum-global-dimension-static-size-150);
-    }
-    .indicator-transition {
-        transition: all 200ms
-    }
-</style>
\ No newline at end of file
+  .spectrum-Tabs {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    position: relative;
+    border-width: 1px !important;
+  }
+  .spectrum-Tabs-content {
+    margin-top: var(--spectrum-global-dimension-static-size-150);
+  }
+  .indicator-transition {
+    transition: all 200ms;
+  }
+  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
+    bottom: 0 !important;
+  }
+</style>
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index ba3147cd5d..de758ec7fa 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -1,32 +1,3 @@
-.svench-content {
-  color: #666;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto",
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-h1.svench-content {
-  font-size: 2em;
-}
-h2.svench-content {
-  font-size: 1.66em;
-}
-h3.svench-content {
-  font-size: 1.33em;
-}
-h4.svench-content {
-  font-size: 1.33em;
-  font-weight: normal;
-}
-h5.svench-content {
-  font-size: 1em;
-  font-weight: bold;
-}
-h6.svench-content {
-  font-size: 1em;
-  font-weight: normal;
-  font-style: italic;
-}
-
 :root {
   --background: #ffffff;
   --ink: #000000;
@@ -74,7 +45,7 @@ h6.svench-content {
   --font-bold: "Inter Bold";
   --font-medium: "Inter Medium";
   --font-light: "Inter Light";
-  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
@@ -125,69 +96,6 @@ h6.svench-content {
   --border-transparent: 2px transparent solid;
 }
 
-h1 {
-  font-size: 3rem;
-  font-family: var(--font-sans);
-  font-weight: 700;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h2 {
-  font-size: 2.25rem;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h3 {
-  font-size: 1.7rem;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h4 {
-  font-size: var(--font-size-xl);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h5 {
-  font-size: var(--font-size-l);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h6 {
-  font-size: var(--font-size-m);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-p {
-  font-size: var(--font-size);
-  font-family: var(--font-sans);
-  font-weight: 400;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
 a {
   text-decoration: none;
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 6bfe2f4ec0..d363b5504b 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -23,13 +23,12 @@
 
 <style>
   .tab-content-padding {
-    padding: 0 var(--spectrum-alias-item-padding-m);
+    padding: 0 var(--spacing-xl);
   }
   .add-button {
     position: absolute;
-    top: var(--spectrum-alias-item-padding-l);
-    bottom: 0;
-    right: var(--spectrum-alias-item-padding-l);
+    top: var(--spacing-l);
+    right: var(--spacing-xl);
   }
 
   .title {
@@ -39,11 +38,4 @@
     align-items: stretch;
     position: relative;
   }
-  .title i {
-    font-size: 20px;
-  }
-  .title i:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 9587f94697..b15e25da4e 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -97,7 +97,7 @@
   }
 
   .block-label {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
index 8b589c66e1..3e1e97e756 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
@@ -1,9 +1,8 @@
 <script>
-  import { Button, Input } from "@budibase/bbui"
+  import { Button, Input, notifications, Heading } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { views as viewsStore } from "stores/backend"
   import { tables } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
   import analytics from "analytics"
 
   export let onClosed
@@ -31,7 +30,7 @@
 </script>
 
 <div class="actions">
-  <h5>Create View</h5>
+  <Heading s>Create View</Heading>
   <Input label="View Name" thin bind:value={name} />
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
@@ -49,6 +48,7 @@
     display: grid;
     grid-gap: var(--spacing-xl);
     padding: var(--spacing-xl);
+    width: 240px;
   }
 
   .footer {
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
index 70ee053322..e5f56edf2e 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Select } from "@budibase/bbui"
+  import { Button, Select, Heading } from "@budibase/bbui"
   import download from "downloadjs"
 
   const FORMATS = [
@@ -29,7 +29,7 @@
 </script>
 
 <div class="popover">
-  <h5>Export Data</h5>
+  <Heading s>Export Data</Heading>
   <Select
     label="Format"
     bind:value={exportFormat}
@@ -47,6 +47,7 @@
     display: grid;
     grid-gap: var(--spacing-xl);
     padding: var(--spacing-xl);
+    width: 240px;
   }
 
   h5 {
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
index 8a43c049e7..dd4054dee0 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
@@ -1,7 +1,15 @@
 <script>
   import { roles, permissions as permissionsStore } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
-  import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
+  import {
+    Button,
+    Label,
+    Input,
+    Select,
+    Spacer,
+    notifications,
+    Heading,
+    Body,
+  } from "@budibase/bbui"
   import { capitalise } from "../../../../helpers"
 
   export let resourceId
@@ -24,11 +32,9 @@
 </script>
 
 <div class="popover">
-  <h5>Who Can Access This Data?</h5>
+  <Heading s>Who Can Access This Data?</Heading>
   <div class="note">
-    <Label extraSmall grey>
-      Specify the minimum access level role for this data.
-    </Label>
+    <Body s>Specify the minimum access level role for this data.</Body>
   </div>
   <Spacer large />
   <div class="row">
@@ -74,7 +80,7 @@
   .row {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: var(--spacing-m);
+    grid-gap: var(--spacing-s);
   }
 
   .note {
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index da45dcc4ef..3335428b9d 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -221,7 +221,7 @@
     margin-top: var(--spacing-m);
     align-items: center;
     grid-gap: var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
   .display-column {
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 64b7743645..451f98e8f0 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -44,7 +44,7 @@
 
   .title,
   .subtitle {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
   .title {
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 7cc3ba7fde..9ad500f113 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -97,7 +97,7 @@
   .text {
     flex: 1 1 auto;
     font-weight: 500;
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index d84f6b7f49..21942727af 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -75,7 +75,9 @@
     } catch (err) {
       console.error(err)
       clearInterval(poll)
-      notifications.error("Error fetching deployment history. Please try again.")
+      notifications.error(
+        "Error fetching deployment history. Please try again."
+      )
     }
   }
 
@@ -96,7 +98,7 @@
 {#if deployments.length > 0}
   <section class="deployment-history" in:slide>
     <header>
-      <h4>Deployment History</h4>
+      <Heading>Deployment History</Heading>
       <div class="deploy-div">
         {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
           <a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
@@ -148,13 +150,13 @@
 </Modal>
 
 <style>
-  .deployment:nth-child(odd) {
-    background: var(--grey-1);
+  section {
+    padding: var(--spacing-xl) 0;
   }
 
   .deployment-list {
     height: 40vh;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   h4 {
@@ -163,9 +165,10 @@
   }
 
   header {
-    margin-left: var(--spacing-l);
-    margin-bottom: var(--spacing-xl);
-    margin-right: var(--spacing-l);
+    padding-left: var(--spacing-l);
+    padding-bottom: var(--spacing-xl);
+    padding-right: var(--spacing-l);
+    border-bottom: var(--border-light);
   }
 
   .deploy-div {
@@ -183,10 +186,14 @@
 
   .deployment {
     padding: var(--spacing-l);
-    height: 100px;
+    height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    border-bottom: var(--border-light);
+  }
+  .deployment:last-child {
+    border-bottom: none;
   }
 
   .deployment-info {
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index f9de686753..4c4c3a1871 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -102,8 +102,8 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xs);
-    font-size: var(--font-size-xs);
+    gap: var(--spacing-s);
+    font-size: var(--spectrum-global-dimension-font-size-75);
   }
   .category span {
     font-weight: 500;
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 729382e863..2e705cc868 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -26,7 +26,8 @@
   ]
 
   let modal
-  $: selected = tabs.find((t) => t.key === $params.assetType).title
+  $: selected =
+    tabs.find((t) => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
     const { key } = tabs.find((t) => t.title === detail)
@@ -121,9 +122,12 @@
   }
   .add-button {
     position: absolute;
-    top: var(--spectrum-alias-item-padding-l);
-    bottom: 0;
-    right: var(--spectrum-alias-item-padding-l);
+    top: var(--spacing-l);
+    right: var(--spacing-xl);
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 
   .role-select {
@@ -136,6 +140,6 @@
   }
 
   .tab-content-padding {
-    padding: 0 var(--spectrum-alias-item-padding-m);
+    padding: 0 var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 9b33e04056..3d0209b4d3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
-  import { Tabs, Tab } from '@budibase/bbui'
+  import { Tabs, Tab } from "@budibase/bbui"
   import { FrontendTypes } from "constants"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -52,12 +52,12 @@
         <div class="instance-name">{definition.name}</div>
       {/if}
       <SettingsView
-      componentInstance={$selectedComponent}
-      componentDefinition={definition}
-      {showDisplayName}
-      onChange={store.actions.components.updateProp}
-      onScreenPropChange={setAssetProps}
-      assetInstance={$store.currentView !== 'component' && $currentAsset} />
+        componentInstance={$selectedComponent}
+        componentDefinition={definition}
+        {showDisplayName}
+        onChange={store.actions.components.updateProp}
+        onScreenPropChange={setAssetProps}
+        assetInstance={$store.currentView !== 'component' && $currentAsset} />
     </div>
   </Tab>
   <Tab title="Design">
@@ -66,25 +66,25 @@
         <div class="instance-name">{definition.name}</div>
       {/if}
       <DesignView
-      componentInstance={$selectedComponent}
-      componentDefinition={definition}
-      {onStyleChanged}
-      {onCustomStyleChanged}
-      {onUpdateTransition}
-      {onResetStyles} />
+        componentInstance={$selectedComponent}
+        componentDefinition={definition}
+        {onStyleChanged}
+        {onCustomStyleChanged}
+        {onUpdateTransition}
+        {onResetStyles} />
     </div>
   </Tab>
 </Tabs>
 
 <style>
-
   .tab-content-padding {
-    padding: 0 var(--spacing-s);
+    padding: 0 var(--spacing-xl);
   }
 
   .instance-name {
-    font-size: var(--font-size-xs);
-    margin-bottom: var(--spacing-l);
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    margin-bottom: var(--spacing-m);
+    margin-top: var(--spacing-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
index 931b90a5a2..be83b1fe3c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
@@ -29,7 +29,7 @@
     background: var(--background);
     color: var(--grey-7);
     border-radius: var(--border-radius-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index ff5a20a0ee..af81ea3d24 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -179,8 +179,8 @@
     gap: var(--spacing-s);
   }
   .empty {
-    font-size: var(--font-size-xs);
+    font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spacing-m);
-    color: var(--grey-5);
+    color: var(--grey-6);
   }
 </style>
diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte
index d715a17d70..9c7235ce62 100644
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@@ -5,18 +5,4 @@
   let showAdvanced = false
 </script>
 
-<div class="content">
-  <div>
-    <Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
-  </div>
-</div>
-
-<style>
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-  }
-</style>
+<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 4f8eae4902..232f60811d 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,4 +1,4 @@
-<script>  
+<script>
   import { goto } from "@roxi/routify"
   import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
   import { notifications } from "@budibase/bbui"
@@ -26,7 +26,7 @@
 </script>
 
 <div class="apps-card">
-  <Heading s h3>{name}</Heading>
+  <Heading s>{name}</Heading>
   <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
     <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
@@ -36,7 +36,9 @@
     </ActionButton>
     {#if appExportLoading}
       <Spinner size="10" />
-    {:else}<ActionButton icon="Download" quiet />{/if}
+    {:else}
+      <ActionButton icon="Download" quiet />
+    {/if}
   </div>
 </div>
 
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 66cd14a6eb..0715fa0302 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -19,8 +19,8 @@
 </script>
 
 <div class="root">
-  <Heading m h2>Your Apps</Heading>
-  <Divider s />
+  <Heading m>Your Apps</Heading>
+  <Divider m />
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />
@@ -37,11 +37,14 @@
 </div>
 
 <style>
+  .root {
+    margin-top: 10px;
+  }
   .apps {
-    margin-top: var(--spectrum-global-dimension-static-size-150);
+    margin-top: var(--layout-m);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    grid-gap: var(--layout-m);
+    grid-gap: var(--layout-s);
     justify-content: start;
   }
 </style>
diff --git a/packages/builder/src/components/start/BuilderSettingsModal.svelte b/packages/builder/src/components/start/BuilderSettingsModal.svelte
index 33151041a9..8f1b51a9db 100644
--- a/packages/builder/src/components/start/BuilderSettingsModal.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsModal.svelte
@@ -1,8 +1,15 @@
 <script>
-  import { notifications } from "@budibase/bbui"
   import { hostingStore } from "builderStore"
   import { HostingTypes } from "constants/backend"
-  import { Input, ModalContent, Toggle } from "@budibase/bbui"
+  import {
+    Heading,
+    Divider,
+    notifications,
+    Input,
+    ModalContent,
+    Toggle,
+    Body,
+  } from "@budibase/bbui"
   import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import analytics from "analytics"
   import { onMount } from "svelte"
@@ -52,13 +59,14 @@
 </script>
 
 <ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
-  <h5>Theme</h5>
+  <Heading xs>Theme</Heading>
   <ThemeEditor />
-  <h5>Hosting</h5>
-  <p>
+  <Divider noMargin noGrid />
+  <Heading xs>Hosting</Heading>
+  <Body s>
     This section contains settings that relate to the deployment and hosting of
     apps made in this builder.
-  </p>
+  </Body>
   <Toggle
     text="Self hosted"
     on:change={updateSelfHosting}
@@ -68,24 +76,14 @@
     <Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
     <Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
   {/if}
-  <h5>Analytics</h5>
-  <p>
+  <Divider noMargin noGrid />
+  <Heading xs>Analytics</Heading>
+  <Body s>
     If you would like to send analytics that help us make budibase better,
     please let us know below.
-  </p>
+  </Body>
   <Toggle
     text="Send Analytics To Budibase"
     value={!analyticsDisabled}
     on:change={toggleAnalytics} />
 </ModalContent>
-
-<style>
-  h5 {
-    margin: 0;
-    font-size: 14px;
-  }
-  p {
-    margin: 0;
-    font-size: 12px;
-  }
-</style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 185e6e2e8b..298513bd23 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -6,6 +6,10 @@ html, body {
     min-height: 100%;
 }
 
+.spectrum--light {
+    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);
+}
+
 body {
     --background: var(--spectrum-alias-background-color-primary);
     --background-alt: var(--spectrum-alias-background-color-secondary);
@@ -24,7 +28,7 @@ body {
 
     font-family: var(--font-sans);
     color: var(--ink);
-    background-color: var(--background);
+    background-color: var(--background-alt);
 }
 
 #app {
@@ -51,4 +55,25 @@ body {
 
 * + .bb-margin-xl {
     margin-top: var(--spacing-xl);
+}
+
+/* Custom scrollbars */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--spectrum-alias-background-color-default);
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-corner {
+    background: var(--spectrum-alias-background-color-default);
+}
+html * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-400)
+    var(--spectrum-alias-background-color-default);
 }
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index d6eba33c96..b2165efd89 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -1,18 +1,22 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles } from "stores/backend"
-  import { Button, ActionGroup, ActionButton, Icon } from "@budibase/bbui"
+  import { Button, ActionGroup, ActionButton, Tabs, Tab } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
   import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
-  import { isActive, goto, layout } from "@roxi/routify"
+  import { isActive, goto, layout, params } from "@roxi/routify"
   import Logo from "/assets/bb-logo.svg"
+  import { capitalise } from "../../../helpers"
 
   // Get Package and set store
   export let application
 
   let promise = getPackage()
+  $: selected = capitalise(
+    $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
+  )
 
   async function getPackage() {
     const res = await get(`/api/applications/${application}/appPackage`)
@@ -59,17 +63,20 @@
             on:click={() => $goto(`/builder/`)} />
         </button>
 
+        <div class="tabs">
+          <Tabs {selected}>
+            {#each $layout.children as { path, title }}
+              <Tab
+                quiet
+                selected={$isActive(path)}
+                on:click={topItemNavigate(path)}
+                title={capitalise(title)} />
+            {/each}
+          </Tabs>
+        </div>
+
         <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        <ActionGroup>
-          {#each $layout.children as { path, title }}
-            <ActionButton
-              quiet
-              selected={$isActive(path)}
-              on:click={topItemNavigate(path)}>
-              {title}
-            </ActionButton>
-          {/each}
-        </ActionGroup>
+        <ActionGroup />
       </div>
       <div class="toprightnav">
         <ThemeEditorDropdown />
@@ -127,9 +134,8 @@
 
   .top-nav {
     flex: 0 0 auto;
-    height: 60px;
     background: var(--background);
-    padding: 0 20px;
+    padding: 0 var(--spacing-xl);
     display: flex;
     box-sizing: border-box;
     justify-content: space-between;
@@ -146,28 +152,15 @@
 
   .topleftnav {
     display: flex;
-    place-items: center;
-  }
-
-  .topnavitem {
-    cursor: pointer;
-    color: var(--grey-5);
-    margin: 0 0 0 20px;
-    font-weight: 500;
-    font-size: var(--font-size-m);
-    height: 100%;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
-    box-sizing: border-box;
   }
 
-  .topnavitem:hover {
-    color: var(--grey-7);
-    font-weight: 500;
-  }
-
-  .active {
-    color: var(--ink);
-    font-weight: 500;
+  .tabs {
+    display: flex;
+    position: relative;
+    margin-bottom: -1px;
   }
 
   .topnavitemright a {
@@ -192,9 +185,9 @@
     background-color: rgba(0, 0, 0, 0);
     cursor: pointer;
     outline: none;
-    height: 40px;
-    padding: 0px 10px 8px 0;
+    padding: 0 10px 0 0;
     align-items: center;
+    height: 32px;
   }
 
   .home-logo:active {
@@ -202,10 +195,7 @@
   }
 
   .home-logo img {
-    height: 40px;
-  }
-  span:first-letter {
-    text-transform: capitalize;
+    height: 32px;
   }
 
   i {
@@ -222,4 +212,7 @@
     left: var(--spacing-m);
     z-index: 1;
   }
+  .beta :global(button) {
+    background-color: var(--background);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
index 968d5ec251..feb15d00bb 100644
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
@@ -21,7 +21,8 @@
 
 <style>
   .root {
-    height: calc(100% - 60px);
+    flex: 1 1 auto;
+    height: 0;
     display: grid;
     grid-template-columns: 260px minmax(510px, 1fr) 260px;
   }
@@ -33,6 +34,8 @@
     justify-content: flex-start;
     align-items: stretch;
     border-right: var(--border-light);
+    background-color: var(--background);
+    padding-bottom: 60px;
   }
 
   .content {
@@ -54,5 +57,6 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
+    background-color: var(--background);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index 8077f28427..028fb3bbdf 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -52,7 +52,10 @@
         </div>
       </Tab>
     </Tabs>
-    <div class="add-button" data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}>
+    <div
+      class="add-button"
+      data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}
+    >
       <Icon hoverable name="AddCircle" on:click={modal.show} />
     </div>
   </div>
@@ -63,10 +66,10 @@
 
 <style>
   .root {
-    height: calc(100vh - 60px);
+    flex: 1 1 auto;
+    height: 0;
     display: grid;
     grid-template-columns: 260px minmax(0, 1fr);
-    background: var(--grey-2);
   }
 
   .content {
@@ -78,10 +81,9 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    background: var(--background);
   }
   .tab-content-padding {
-    padding: 0 var(--spectrum-alias-item-padding-m);
+    padding: 0 var(--spacing-xl);
   }
 
   .nav {
@@ -93,17 +95,12 @@
     align-items: stretch;
     position: relative;
     border-right: var(--border-light);
+    padding-bottom: 60px;
   }
 
   .add-button {
     position: absolute;
-    top: var(--spectrum-alias-item-padding-l);
-    bottom: 0;
-    right: var(--spectrum-alias-item-padding-l);
-  }
-
-  i:hover {
-    cursor: pointer;
-    color: var(--blue);
+    top: var(--spacing-l);
+    right: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/deploy/index.svelte b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
index 1d2f6be0e5..a8f5290a2b 100644
--- a/packages/builder/src/pages/builder/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { Button, Modal, notifications, Heading } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
-  import { notifications } from "@budibase/bbui"
   import api from "builderStore/api"
   import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
   import analytics from "analytics"
@@ -58,11 +57,11 @@
 </script>
 
 <section>
-  <div>
-    <h4>It's time to shine!</h4>
-    <Button secondary medium on:click={deployApp}>Deploy App</Button>
-  </div>
   <img src={Rocket} alt="Rocket flying through sky" />
+  <div>
+    <Heading m>It's time to shine!</Heading>
+    <Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
+  </div>
 </section>
 <Modal bind:this={feedbackModal}>
   <FeedbackIframe on:finished={() => feedbackModal.hide()} />
@@ -73,17 +72,13 @@
   img {
     width: 100%;
     height: 100%;
-  }
-
-  h4 {
-    color: white;
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 30px;
+    object-fit: cover;
+    filter: brightness(80%);
   }
 
   section {
     position: relative;
+    min-height: 100%;
   }
 
   div {
@@ -99,5 +94,9 @@
     margin-left: auto;
     margin-right: auto;
     width: 50%;
+    gap: var(--spacing-xl);
+  }
+  div :global(h1) {
+    color: white;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index 3ba2558fc7..38562fbfa7 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -168,7 +168,8 @@
     display: grid;
     grid-template-columns: 260px 1fr 260px;
     align-items: stretch;
-    height: calc(100vh - 60px);
+    flex: 1 1 auto;
+    height: 0;
   }
 
   .ui-nav {