diff --git a/packages/bbui/src/Spacer/Spacer.svelte b/packages/bbui/src/Spacer/Spacer.svelte
deleted file mode 100644
index bdc00b7260..0000000000
--- a/packages/bbui/src/Spacer/Spacer.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  export let extraSmall = false
-  export let small = false
-  export let medium = false
-  export let large = false
-  export let extraLarge = false
-</script>
-
-<spacer
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge />
-
-<style>
-  spacer {
-    display: block;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .extraSmall {
-    height: var(--spacing-xs);
-    width: var(--spacing-xs);
-  }
-
-  .small {
-    height: var(--spacing-s);
-    width: var(--spacing-s);
-  }
-
-  .medium {
-    height: var(--spacing-m);
-    width: var(--spacing-m);
-  }
-
-  .large {
-    height: var(--spacing-l);
-    width: var(--spacing-l);
-  }
-
-  .extraLarge {
-    height: var(--spacing-xl);
-    width: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/bbui/src/Spacer/Spacer.svench b/packages/bbui/src/Spacer/Spacer.svench
deleted file mode 100644
index 0ad06cf35b..0000000000
--- a/packages/bbui/src/Spacer/Spacer.svench
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Spacer from "./Spacer.svelte";
-</script>
-
-<style>
-  .block {
-    background: black;
-    height: 100px;
-    width: 100px;
-    border-radius: var(--border-radius-s);
-  }
-
- .horizontal {
-    display: flex;
-  }
-</style>
-
-<View name="extraSmall">
-        <div class="block"></div>
-    <Spacer extraSmall />
-        <div class="block"></div>
-</View>
-
-<View name="Small">
-        <div class="block"></div>
-    <Spacer small />
-        <div class="block"></div>
-</View>
-
-<View name="Medium">
-        <div class="block"></div>
-    <Spacer medium />
-        <div class="block"></div>
-</View>
-
-<View name="Large">
-    <div class="horizontal">
-        <div class="block"></div>
-            <Spacer large />
-        <div class="block"></div>
-    </div>
-</View>
-
-<View name="extraLarge">
-    <div class="horizontal">
-        <div class="block"></div>
-            <Spacer extraLarge />
-        <div class="block"></div>
-    </div>
-</View>
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index d2dd1c2015..0780b6939a 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -1,6 +1,6 @@
 <script>
   import CodeMirror from "./codemirror"
-  import { Label, Spacer } from "@budibase/bbui"
+  import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "builderStore"
 
@@ -166,7 +166,6 @@
 
 {#if label}
   <Label small>{label}</Label>
-  <Spacer medium />
 {/if}
 <div style={`--code-mirror-height: ${editorHeight}px`}>
   <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
@@ -177,6 +176,10 @@
     visibility: hidden;
   }
 
+  div {
+    margin-top: var(--spacing-s);
+  }
+
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 17852c57d6..7e865d86d6 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -27,7 +27,6 @@
 
 <div class="apps-card">
   <Heading s>{name}</Heading>
-  <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
     <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
       Open
@@ -58,6 +57,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    margin-top: var(--spacing-m);
   }
 
   i {
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index 19492d2bae..ddfdbcb85e 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -25,7 +25,6 @@
       {#each templates as template}
         <div class="templates-card">
           <Heading black small>{template.name}</Heading>
-          <Spacer small />
           <Body medium grey>{template.category}</Body>
           <Body lh small black>{template.description}</Body>
           <div><img src={template.image} width="100%" /></div>
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 98ea6cba1d..6a031b7d3f 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer, ButtonGroup } from "@budibase/bbui"
+  import { Button, Heading, Modal, ButtonGroup } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -58,11 +58,10 @@
 <div class="container">
   <div class="header">
     <Heading m h1>Welcome to the Budibase Beta</Heading>
-    <div class="button-group">
+    <ButtonGroup>
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
-      <Spacer medium />
       <Button cta on:click={modal.show}>Create New Web App</Button>
-    </div>
+    </ButtonGroup>
   </div>
 
   <div class="banner">