diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 5daf6774c9..29711177ec 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -52,22 +52,32 @@
         placeholder="Parameter Name"
         thin
         disabled={bindable}
-        bind:value={parameter.name} />
+        bind:value={parameter.name}
+      />
       <Input
         placeholder="Default"
         thin
         disabled={bindable}
-        bind:value={parameter.default} />
+        bind:value={parameter.default}
+      />
       {#if bindable}
         <DrawerBindableInput
           title={`Query parameter "${parameter.name}"`}
           placeholder="Value"
           thin
-          on:change={evt => onBindingChange(parameter.name, evt.detail)}
-          value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
-          {bindings} />
+          on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
+          value={runtimeToReadableBinding(
+            bindings,
+            customParams?.[parameter.name]
+          )}
+          {bindings}
+        />
       {:else}
-        <Icon hoverable name="Close" on:click={() => deleteQueryParameter(idx)} />
+        <Icon
+          hoverable
+          name="Close"
+          on:click={() => deleteQueryParameter(idx)}
+        />
       {/if}
     {/each}
   </div>
@@ -90,16 +100,5 @@
     grid-template-columns: 1fr 1fr 5%;
     grid-gap: 10px;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .delete {
-    transition: all 0.2s;
-  }
-
-  .delete:hover {
-    transform: scale(1.1);
-    font-weight: 500;
-    cursor: pointer;
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index ca8d5036b9..956ab1b158 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -6,6 +6,7 @@
     Button,
     Body,
     Label,
+    Layout,
     Input,
     Heading,
     Spacer,
@@ -110,46 +111,33 @@
   }
 </script>
 
-<section class="config">
-  <Spacer extraLarge />
+<Layout gap="S" noPadding>
   <Heading m>Query {integrationInfo?.friendlyName}</Heading>
-  <Spacer extraLarge />
   <Divider />
-  <Spacer extraLarge />
   <Heading s>Config</Heading>
-  <Body s>Provide a name for your query and select its function.</Body>
-  <Spacer medium />
-  <div class="config-field">
-    <Label>Query Name</Label>
-    <Input bind:value={query.name} />
-  </div>
-  <Spacer medium />
-  {#if queryConfig}
+  <div class="config">
     <div class="config-field">
-      <Label>Function</Label>
-      <Select
-        bind:value={query.queryVerb}
-        options={Object.keys(queryConfig)}
-        getOptionLabel={(verb) =>
-          queryConfig[verb]?.displayName || capitalise(verb)}
-      />
+      <Label>Query Name</Label>
+      <Input bind:value={query.name} />
     </div>
-    <Spacer extraLarge />
+    {#if queryConfig}
+      <div class="config-field">
+        <Label>Function</Label>
+        <Select
+          bind:value={query.queryVerb}
+          options={Object.keys(queryConfig)}
+          getOptionLabel={(verb) =>
+            queryConfig[verb]?.displayName || capitalise(verb)}
+        />
+      </div>
+      <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+    {/if}
+  </div>
+  {#if shouldShowQueryConfig}
     <Divider />
-    <Spacer extraLarge />
-    <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-    <Spacer extraLarge />
-    <Divider />
-  {/if}
-</section>
-
-{#if shouldShowQueryConfig}
-  <section>
-    <Spacer extraLarge />
     <div class="config">
       <Heading s>Fields</Heading>
       <Body s>Fill in the fields specific to this query.</Body>
-      <Spacer medium />
       <IntegrationQueryEditor
         {datasource}
         {query}
@@ -157,30 +145,27 @@
         schema={queryConfig[query.queryVerb]}
         bind:parameters
       />
-      <Spacer extraLarge />
       <Divider />
-      <Spacer extraLarge />
-      <div class="viewer-controls">
-        <Heading s>Results</Heading>
-        <div class="button-container">
-          <Button
-            secondary
-            thin
-            disabled={data.length === 0 || !query.name}
-            on:click={saveQuery}
-          >
-            Save Query
-          </Button>
-          <Spacer medium />
-          <Button thin secondary on:click={previewQuery}>Run Query</Button>
-        </div>
+    </div>
+    <div class="viewer-controls">
+      <Heading s>Results</Heading>
+      <div class="button-container">
+        <Button
+          secondary
+          thin
+          disabled={data.length === 0 || !query.name}
+          on:click={saveQuery}
+        >
+          Save Query
+        </Button>
+        <Spacer medium />
+        <Button thin secondary on:click={previewQuery}>Run Query</Button>
       </div>
-      <Spacer small />
+    </div>
       <Body s>
         Below, you can preview the results from your query and change the
         schema.
       </Body>
-      <Spacer medium />
       <section class="viewer">
         {#if data}
           <Tabs selected="JSON">
@@ -213,12 +198,14 @@
           </Tabs>
         {/if}
       </section>
-    </div>
-  </section>
-{/if}
-<Spacer extraLarge />
+  {/if}
+</Layout>
 
 <style>
+  .config {
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
   .config-field {
     display: grid;
     grid-template-columns: 20% 1fr;
@@ -236,10 +223,6 @@
     display: flex;
   }
 
-  .config {
-    margin-bottom: var(--spacing-s);
-  }
-
   .delete {
     align-self: center;
     cursor: pointer;
