diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 0c3e687328..596b4a3a1a 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,24 @@
 
 {#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 />
-
+      <Spacer extraLarge />
       <hr />
-
+      <Spacer extraLarge />
+      <Spacer medium />
       <div class="viewer-controls">
-        <Heading small lh>Query Results</Heading>
+        <Heading small lh>Results</Heading>
         <div class="button-container">
           <Button
             secondary
@@ -191,7 +199,8 @@
         schema.
       </Body>
 
-      <Spacer large />
+      <Spacer extraLarge />
+      <Spacer medium />
 
       <section class="viewer">
         {#if data}
@@ -199,13 +208,7 @@
             {#if tab === 'JSON'}
               <pre class="preview">
               {#if !data[0]}
-                  
-                  
-                  
                 Please run your query to fetch some data.
-
-
-
                 {:else}
                   {JSON.stringify(data[0], undefined, 2)}
                 {/if}
@@ -242,6 +245,8 @@
     </div>
   </section>
 {/if}
+<Spacer extraLarge />
+<Spacer extraLarge />
 
 <style>
   .config-field {
@@ -263,7 +268,7 @@
 
   hr {
     margin-top: var(--layout-m);
-    margin-bottom: var(--layout-m);
+    border: 1px solid var(--grey-2);
   }
 
   .config {
@@ -275,12 +280,20 @@
     cursor: pointer;
   }
 
+  .viewer {
+    min-height: 200px;
+  }
+
   .preview {
-    width: 800px;
     height: 100%;
+    min-height: 120px;
     overflow-y: auto;
     overflow-wrap: break-word;
     white-space: pre-wrap;
+    background-color: var(--grey-1);
+    padding: var(--spacing-m);
+    border-radius: 8px;
+    color: var(--grey-6);
   }
 
   .viewer-controls {
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..3a51a3a75f 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
@@ -28,19 +28,24 @@
 </script>
 
 <section>
-  {#if $backendUiStore.selectedDatabase._id && selectedQuery}
-    <QueryInterface query={selectedQuery} />
-  {/if}
+  <div class="inner">
+    {#if $backendUiStore.selectedDatabase._id && selectedQuery}
+      <QueryInterface query={selectedQuery} />
+    {/if}
+  </div>
 </section>
 
 <style>
   section {
     overflow: scroll;
-    width: 800px;
-    margin: 0 auto;
   }
   ::-webkit-scrollbar {
     width: 0px;
     background: transparent; /* make scrollbar transparent */
   }
+
+  .inner {
+    width: 640px;
+    margin: 0 auto;
+  }
 </style>
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..6415f3f9de 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -45,20 +45,22 @@
 
 {#if datasource}
   <section>
-    <Spacer medium />
+    <Spacer extraLarge />
     <header>
       <div class="datasource-icon">
         <svelte:component
           this={ICONS[datasource.source]}
-          height="30"
-          width="30" />
+          height="26"
+          width="26" />
       </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: 24px;
   }
 
   section {
     margin: 0 auto;
-    width: 800px;
+    width: 640px;
   }
 
   hr {
-    margin-bottom: var(--layout-m);
+    border: 1px solid var(--grey-2);
   }
 
   header {
