diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
index 038e4cf9b1..bc34d4d80c 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
@@ -22,13 +22,12 @@
 <div on:click|stopPropagation bind:this={anchor}>
   <TextButton
     text
-    small
     on:click={dropdown.show}
-    active={true}>
-      <Icon name="plus" />
+    active={false}>
+      <Icon name="add" />
       Add Parameters
   </TextButton>
-  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+  <DropdownMenu align="right" {anchor} bind:this={dropdown}>
     <div class="wrapper">
       <ParameterBuilder bind:parameters {bindable} />
     </div>
@@ -38,5 +37,6 @@
 <style>
   .wrapper {
     padding: var(--spacing-xl);
+    min-width: 600px;
   }
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 22cddb5606..2b5965613e 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -155,8 +155,9 @@
   }
 
   :global(.CodeMirror) {
-    height: auto !important;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
+    height: 500px !important;
+    border-radius: var(--border-radius-s);
+    font-family: monospace !important;
+    line-height: 1.3;
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 83a03c72d1..d5f4b3bd8b 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -24,18 +24,18 @@
 </script>
 
 <form on:submit|preventDefault>
+<div class="field">
   {#each schemaKeys as field}
-    <Label extraSmall grey>{field}</Label>
-    <div class="field">
       <Input
+        placeholder="Enter {field} name"
+        outline
         disabled={!editable}
         type={schema.fields[field]?.type}
         required={schema.fields[field]?.required}
         bind:value={fields[field]} />
-    </div>
   {/each}
+</div>
 </form>
-<Label extraSmall grey>Data</Label>
 {#if schema.customisable}
   <Editor
     label="Query"
@@ -49,7 +49,7 @@
   .field {
     margin-bottom: var(--spacing-m);
     display: grid;
-    grid-template-columns: 1fr 2%;
+    grid-template-columns: 1fr 1fr;
     grid-gap: var(--spacing-m);
     align-items: center;
   }
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 1be4a9d1ce..cadbfbf873 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import {
+    Button,
+    TextArea,
+    Label,
+    Input,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
   import BindableInput from "components/userInterface/BindableInput.svelte"
   import {
     readableToRuntimeBinding,
@@ -31,19 +38,22 @@
 
 <section>
   <Heading extraSmall black>Parameters</Heading>
+  <Spacer large />
   <div class="parameters" class:bindable>
-    <Label extraSmall grey>Parameter Name</Label>
-    <Label extraSmall grey>Default</Label>
-    {#if bindable}
-      <Label extraSmall grey>Value</Label>
-    {:else}
-      <div />
-    {/if}
     {#each parameters as parameter, idx}
-      <Input thin disabled={bindable} bind:value={parameter.name} />
-      <Input thin disabled={bindable} bind:value={parameter.default} />
+      <Input
+        placeholder="Parameter Name"
+        thin
+        disabled={bindable}
+        bind:value={parameter.name} />
+      <Input
+        placeholder="Default"
+        thin
+        disabled={bindable}
+        bind:value={parameter.default} />
       {#if bindable}
         <BindableInput
+          placeholder="Value"
           type="string"
           thin
           on:change={evt => onBindingChange(parameter.name, evt.detail)}
@@ -57,9 +67,7 @@
     {/each}
   </div>
   {#if !bindable}
-    <Button thin secondary small on:click={newQueryParameter}>
-      Add Parameter
-    </Button>
+    <Button secondary on:click={newQueryParameter}>Add Parameter</Button>
   {/if}
 </section>
 
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 712657b0c3..da5f4e1a40 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -131,53 +131,44 @@
 </script>
 
 <header>
-  <Heading small>{query.name}</Heading>
+  <div class="input">
+    <Input placeholder="✎ Edit Query Name" bind:value={query.name} />
+  </div>
   {#if config}
-    <div class="queryVerbs">
-    </div>
-      <Select thin secondary bind:value={query.queryVerb}>
+  <div class="props">
+    <div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
+    <div class="select">
+      <Select primary thin bind:value={query.queryVerb}>
         {#each Object.keys(config) as queryVerb}
           <option value={queryVerb}>{queryVerb}</option>
         {/each}
       </Select>
-      <div>
-        {config[query.queryVerb].type}
-      </div>
+  </div>
+    </div>
     <EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
-    <Spacer medium />
-    <Button primary href={docsLink} target="_blank">
-      <i class="ri-book-2-line" />
-    </Button>
   {/if}
 </header>
-
-<Spacer large />
+<Spacer extraLarge />
 
 {#if shouldShowQueryConfig}
   <section>
     <div class="config">
-      <Label extraSmall grey>Query Name</Label>
-      <Input thin bind:value={query.name} />
-
-      <Spacer medium />
-
       <IntegrationQueryEditor
         {query}
         schema={config[query.queryVerb]}
         bind:parameters />
 
-      <Spacer medium />
+      <Spacer extraLarge />
+      <Spacer large />
 
       <div class="viewer-controls">
         <Button
-          wide
-          thin
           blue
           disabled={data.length === 0}
           on:click={saveQuery}>
-          Save
+          Save Query
         </Button>
-        <Button wide thin primary on:click={previewQuery}>Run</Button>
+        <Button primary on:click={previewQuery}>Run Query</Button>
       </div>
 
       <section class="viewer">
@@ -189,10 +180,11 @@
               <ExternalDataSourceTable {query} {data} />
             {:else if tab === 'SCHEMA'}
               {#each fields as field, idx}
+                <Spacer small />
                 <div class="field">
-                  <Input thin type={'text'} bind:value={field.name} />
-                  <Select secondary thin bind:value={field.type}>
-                    <option value={''}>Select an option</option>
+                  <Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
+                  <Select thin border bind:value={field.type}>
+                    <option value={''}>Select a field type</option>
                     <option value={'STRING'}>Text</option>
                     <option value={'NUMBER'}>Number</option>
                     <option value={'BOOLEAN'}>Boolean</option>
@@ -203,7 +195,8 @@
                     on:click={() => deleteField(idx)} />
                 </div>
               {/each}
-              <Button thin secondary on:click={newField}>Add Field</Button>
+                <Spacer small />
+                <Button thin secondary on:click={newField}>Add Field</Button>
             {/if}
           </Switcher>
         {/if}
@@ -213,11 +206,28 @@
 {/if}
 
 <style>
+
+  .input {
+    width: 300px;
+  }
+
+  .select {
+    width: 200px;
+    margin-right: 40px;
+  }
+
+  .props {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+    align-items: center;
+    gap: var(--layout-l);
+  }
+
   .field {
     display: grid;
-    grid-gap: 10px;
     grid-template-columns: 1fr 1fr 50px;
-    margin-bottom: var(--spacing-m);
+    gap: var(--spacing-l);
   }
 
   a {
@@ -233,6 +243,16 @@
     cursor: pointer;
   }
 
+  .query-type {
+    font-family: var(--font-sans);
+    color: var(--grey-8);
+    font-size: var(--font-size-s);
+  }
+
+  .query-type-span {
+    text-transform: uppercase;
+  }
+
   .preview {
     width: 800px;
     height: 100%;
@@ -246,32 +266,18 @@
     align-items: center;
   }
 
-  .queryVerbs {
-    display: flex;
-    flex: 1;
-    font-size: var(--font-size-m);
-    align-items: center;
-    margin-left: var(--spacing-l);
-  }
-
-  .queryVerb {
-    text-transform: capitalize;
-    margin-right: var(--spacing-m);
-    color: var(--grey-5);
-    cursor: pointer;
-  }
-
-  .selected {
-    color: var(--white);
-    font-weight: 500;
-  }
-
   .viewer-controls {
-    display: grid;
-    grid-gap: var(--spacing-m);
-    grid-auto-flow: column;
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
     direction: rtl;
-    grid-template-columns: 10% 10% 1fr;
-    margin-bottom: var(--spacing-m);
+    z-index: 5;
+    gap: var(--spacing-m);
+    min-width: 150px;
+  }
+
+  .viewer {
+    margin-top: -28px;
+    z-index: -2;
   }
 </style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 2206694fd6..a4f59459c0 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -20,8 +20,6 @@
   }
 </script>
 
-<Heading extraSmall black>Query</Heading>
-<Spacer medium />
 
 {#if schema}
   {#key query._id}
@@ -33,7 +31,6 @@
         readOnly={!editable}
         value={query.fields.sql} />
     {:else if schema.type === QueryTypes.JSON}
-      <Spacer large />
       <Editor
         label="Query"
         mode="json"
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 d99c782908..c2419dd9a6 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
@@ -21,7 +21,6 @@
     query => query._id === $backendUiStore.selectedQueryId
   ) || {
     datasourceId: $params.selectedDatasource,
-    name: "New Query",
     parameters: [],
     fields: {},
     queryVerb: "read",
@@ -36,8 +35,10 @@
 
 <style>
   section {
-    background: var(--background);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius-m);
+    overflow: scroll;
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
   }
 </style>