diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 0c3e687328..1f3585f3a0 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -133,14 +133,15 @@
 <section class="config">
   <Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
   <hr />
+  <Spacer extraLarge />
   <Heading small lh>Config</Heading>
   <Body small grey>Provide a name for your query and select its function.</Body>
-  <Spacer medium />
+  <Spacer large />
   <div class="config-field">
     <Label small>Query Name</Label>
     <Input thin outline bind:value={query.name} />
   </div>
-  <Spacer medium />
+  <Spacer extraLarge />
   {#if queryConfig}
     <div class="config-field">
       <Label small>Function</Label>
@@ -152,7 +153,10 @@
         {/each}
       </Select>
     </div>
+    <Spacer extraLarge />
     <hr />
+    <Spacer extraLarge />
+    <Spacer small />
     <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
     <hr />
   {/if}
@@ -160,20 +164,22 @@
 
 {#if shouldShowQueryConfig}
   <section>
+    <Spacer extraLarge />
+    <Spacer small />
     <div class="config">
       <Heading small lh>Fields</Heading>
       <Body small grey>Fill in the fields specific to this query.</Body>
       <Spacer medium />
+      <Spacer extraLarge />
       <IntegrationQueryEditor
         {datasource}
         {query}
         schema={queryConfig[query.queryVerb]}
         bind:parameters />
-
-      <hr />
-
+      <Spacer extraLarge />
+      <Spacer extraLarge />
       <div class="viewer-controls">
-        <Heading small lh>Query Results</Heading>
+        <Heading extraSmall lh>Query Results</Heading>
         <div class="button-container">
           <Button
             secondary
@@ -191,7 +197,7 @@
         schema.
       </Body>
 
-      <Spacer large />
+      <Spacer extraLarge />
 
       <section class="viewer">
         {#if data}
@@ -242,6 +248,8 @@
     </div>
   </section>
 {/if}
+      <Spacer extraLarge />
+      <Spacer extraLarge />
 
 <style>
   .config-field {
@@ -263,7 +271,7 @@
 
   hr {
     margin-top: var(--layout-m);
-    margin-bottom: var(--layout-m);
+    border: 1px solid var(--grey-2);
   }
 
   .config {
@@ -276,7 +284,7 @@
   }
 
   .preview {
-    width: 800px;
+    width: 640px;
     height: 100%;
     overflow-y: auto;
     overflow-wrap: break-word;
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 708cfef68c..a590e0893b 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -36,6 +36,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
+    border-right: 1px solid var(--grey-2);
   }
 
   .content {
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 22c4751a40..6a4033d468 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -80,6 +80,7 @@
     align-items: stretch;
     gap: var(--spacing-l);
     position: relative;
+    border-right: 1px solid var(--grey-2);
   }
 
   i {
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index b7ea3b8218..57adcd4ac5 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -36,7 +36,7 @@
 <style>
   section {
     overflow: scroll;
-    width: 800px;
+    width: 640px;
     margin: 0 auto;
   }
   ::-webkit-scrollbar {
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
index e6821e16fe..158b701409 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -50,15 +50,17 @@
       <div class="datasource-icon">
         <svelte:component
           this={ICONS[datasource.source]}
-          height="30"
-          width="30" />
+          height="20"
+          width="20" />
       </div>
       <h3 class="section-title">{datasource.name}</h3>
     </header>
 
     <Body small grey lh>{integration.description}</Body>
-
+    <Spacer extraLarge />
     <hr />
+    <Spacer large />
+    <Spacer extraLarge />
 
     <div class="container">
       <div class="config-header">
@@ -70,14 +72,14 @@
         Connect your database to Budibase using the config below.
       </Body>
 
-      <Spacer medium />
+      <Spacer extraLarge />
       <IntegrationConfigForm
         integration={datasource.config}
         on:change={setUnsaved} />
-      <Spacer medium />
-
+      <Spacer extraLarge />
       <hr />
-
+      <Spacer large />
+      <Spacer extraLarge />
       <div class="query-header">
         <Heading small>Queries</Heading>
         <Button secondary on:click={() => $goto('../new')}>Add Query</Button>
@@ -99,15 +101,16 @@
 <style>
   h3 {
     margin: 0;
+    font-size: 18px;
   }
 
   section {
     margin: 0 auto;
-    width: 800px;
+    width: 640px;
   }
 
   hr {
-    margin-bottom: var(--layout-m);
+    border: 1px solid var(--grey-2);
   }
 
   header {
