diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index 0239981a83..d4c483acc1 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -7,18 +7,19 @@
 
 <form>
   {#each Object.keys(integration) as configKey}
-    <div class="form-row">
-      {#if typeof integration[configKey] === 'object'}
-        <Label small>{configKey}</Label>
-        <KeyValueBuilder bind:object={integration[configKey]} />
-      {:else}
+    {#if typeof integration[configKey] === 'object'}
+      <Label small>{configKey}</Label>
+      <Spacer small />
+      <KeyValueBuilder bind:object={integration[configKey]} />
+    {:else}
+      <div class="form-row">
         <Label small>{configKey}</Label>
         <Input
           outline
           type={integration[configKey].type}
           bind:value={integration[configKey]} />
-      {/if}
-    </div>
+      </div>
+    {/if}
   {/each}
 </form>
 
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 53f698e3f8..46bb73dad9 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -23,8 +23,8 @@
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
 <div class="container">
   {#each fields as field, idx}
-    <Input placeholder="Key" outline thin bind:value={field.name} />
-    <Input placeholder="Value" outline thin bind:value={field.value} />
+    <Input placeholder="Key" thin outline bind:value={field.name} />
+    <Input placeholder="Value" thin outline bind:value={field.value} />
     <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
   {/each}
 </div>
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 9168a01d11..864d5495ac 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -29,7 +29,7 @@
     {#each schemaKeys as field}
       {#if schema.fields[field]?.type === 'object'}
         <div>
-          <Label extraSmall grey>{field}</Label>
+          <Label small>{field}</Label>
           <KeyValueBuilder bind:object={fields[field]} />
         </div>
       {:else if schema.fields[field]?.type === 'json'}
@@ -45,7 +45,7 @@
         <div class="horizontal">
           <Label small>{field}</Label>
           <Input
-            placeholder="Enter {field} name"
+            placeholder="Enter {field}"
             outline
             disabled={!editable}
             type={schema.fields[field]?.type}
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 8b9a3f2ba9..d456ee3a28 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -77,6 +77,7 @@
 
   .controls {
     display: flex;
+    align-items: center;
     justify-content: space-between;
   }
 
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index a6979ba749..9182050f1e 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -64,7 +64,7 @@
   $: integrationInfo = $backendUiStore.integrations[datasourceType]
   $: queryConfig = integrationInfo?.query
 
-  $: shouldShowQueryConfig = config && query.queryVerb
+  $: shouldShowQueryConfig = queryConfig && query.queryVerb
 
   function newField() {
     fields = [...fields, {}]
@@ -134,14 +134,13 @@
 <section class="config">
   <Heading medium>Query {integrationInfo.friendlyName}</Heading>
   <hr />
-  <Spacer medium />
   <Heading small>Config</Heading>
   <Spacer medium />
   <Body small grey>Provide a name for your query and select its function.</Body>
   <Spacer medium />
   <div class="config-field">
     <Label small>Query Name</Label>
-    <Input thin bind:value={query.name} />
+    <Input thin outline bind:value={query.name} />
   </div>
   <Spacer medium />
   {#if queryConfig}
@@ -153,7 +152,6 @@
         {/each}
       </Select>
     </div>
-    <Spacer medium />
     <hr />
     <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
     <hr />
@@ -189,29 +187,33 @@
       <Heading small>Fields</Heading>
       <Spacer medium />
       <IntegrationQueryEditor
+        {datasource}
         {query}
-        schema={config[query.queryVerb]}
+        schema={queryConfig[query.queryVerb]}
         bind:parameters />
 
-      <Spacer medium />
       <hr />
-      <Spacer medium />
 
       <div class="viewer-controls">
         <Heading small>Query Results</Heading>
-        <Button
-          secondary
-          thin
-          disabled={data.length === 0 || !query.name}
-          on:click={saveQuery}>
-          Save Query
-        </Button>
+        <div>
+          <Button
+            secondary
+            thin
+            disabled={data.length === 0 || !query.name}
+            on:click={saveQuery}>
+            Save Query
+          </Button>
         <Button thin primary on:click={previewQuery}>Run Query</Button>
+        </div>
       </div>
       <Body small grey>
         Below, you can preview the results from your query and change the
         schema.
       </Body>
+
+      <Spacer medium />
+
       <section class="viewer">
         {#if data}
           <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
@@ -276,6 +278,11 @@
     font-size: var(--font-size-s);
   }
 
+  hr {
+    margin-top: var(--layout-m);
+    margin-bottom: var(--layout-m);
+  }
+
   .config {
     margin-bottom: var(--spacing-s);
   }
@@ -285,10 +292,6 @@
     cursor: pointer;
   }
 
-  .query-type-span {
-    text-transform: uppercase;
-  }
-
   .preview {
     width: 800px;
     height: 100%;
@@ -300,15 +303,8 @@
   .viewer-controls {
     display: flex;
     flex-direction: row;
-    /* margin-left: auto; */
-    /* direction: rtl; */
-    /* z-index: 5; */
+    justify-content: space-between;
     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 0f87f61606..411eba3dda 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -8,13 +8,16 @@
   const QueryTypes = {
     SQL: "sql",
     JSON: "json",
-    FIELDS: "fields",
+    FIELDS: "fields"
   }
 
   export let query
+  export let datasource
   export let schema
   export let editable = true
 
+  $: urlDisplay = schema.urlDisplay && `${datasource.config.url}${query.fields.path}${query.fields.queryString}`
+
   function updateQuery({ detail }) {
     query.fields[schema.type] = detail.value
   }
@@ -40,6 +43,27 @@
         parameters={query.parameters} />
     {:else if schema.type === QueryTypes.FIELDS}
       <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
+      {#if schema.urlDisplay}
+        <div class="url-row">
+          <Label small>URL</Label>
+          <Input thin outline disabled value={urlDisplay} />
+        </div>
+      {/if}
     {/if}
   {/key}
 {/if}
+
+<style>
+.url-row {
+  display: grid;
+  grid-template-columns: 20% 1fr;
+  grid-gap: var(--spacing-l);
+  align-items: center;
+}
+
+pre {
+  background: var(--background);
+  border-radius: var(--border-radius-s);
+  margin: 0;
+}
+</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 197baea112..274ce1f49e 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -50,6 +50,7 @@
 
       <Spacer medium />
       <IntegrationConfigForm integration={datasource.config} />
+      <Spacer medium />
 
       <hr />
 
diff --git a/packages/server/src/integrations/rest.js b/packages/server/src/integrations/rest.js
index d90a0ce2a1..60f133d40b 100644
--- a/packages/server/src/integrations/rest.js
+++ b/packages/server/src/integrations/rest.js
@@ -20,10 +20,14 @@ const SCHEMA = {
     create: {
       displayName: "POST",
       type: QUERY_TYPES.FIELDS,
+      urlDisplay: true,
       fields: {
         path: {
           type: FIELD_TYPES.STRING,
         },
+        queryString: {
+          type: FIELD_TYPES.STRING,
+        },
         headers: {
           type: FIELD_TYPES.OBJECT,
         },
@@ -35,10 +39,14 @@ const SCHEMA = {
     read: {
       displayName: "GET",
       type: QUERY_TYPES.FIELDS,
+      urlDisplay: true,
       fields: {
         path: {
           type: FIELD_TYPES.STRING,
         },
+        queryString: {
+          type: FIELD_TYPES.STRING,
+        },
         headers: {
           type: FIELD_TYPES.OBJECT,
         },
@@ -47,10 +55,14 @@ const SCHEMA = {
     update: {
       displayName: "PUT",
       type: QUERY_TYPES.FIELDS,
+      urlDisplay: true,
       fields: {
         path: {
           type: FIELD_TYPES.STRING,
         },
+        queryString: {
+          type: FIELD_TYPES.STRING,
+        },
         headers: {
           type: FIELD_TYPES.OBJECT,
         },
@@ -62,10 +74,14 @@ const SCHEMA = {
     delete: {
       displayName: "DELETE",
       type: QUERY_TYPES.FIELDS,
+      urlDisplay: true,
       fields: {
         path: {
           type: FIELD_TYPES.STRING,
         },
+        queryString: {
+          type: FIELD_TYPES.STRING,
+        },
         headers: {
           type: FIELD_TYPES.OBJECT,
         },
@@ -82,8 +98,8 @@ class RestIntegration {
     this.config = config
   }
 
-  async create({ path, headers = {}, json }) {
-    const response = await fetch(this.config.url + path, {
+  async create({ path, queryString, headers = {}, json }) {
+    const response = await fetch(this.config.url + path + queryString, {
       method: "POST",
       headers: {
         ...this.config.defaultHeaders,
@@ -95,8 +111,8 @@ class RestIntegration {
     return await response.json()
   }
 
-  async read({ path, headers = {} }) {
-    const response = await fetch(this.config.url + path, {
+  async read({ path, queryString, headers = {} }) {
+    const response = await fetch(this.config.url + path + queryString, {
       headers: {
         ...this.config.defaultHeaders,
         ...headers,
@@ -106,8 +122,8 @@ class RestIntegration {
     return await response.json()
   }
 
-  async update({ path, headers = {}, json }) {
-    const response = await fetch(this.config.url + path, {
+  async update({ path, queryString, headers = {}, json }) {
+    const response = await fetch(this.config.url + path + queryString, {
       method: "POST",
       headers: {
         ...this.config.defaultHeaders,
@@ -119,8 +135,8 @@ class RestIntegration {
     return await response.json()
   }
 
-  async delete({ path, headers = {} }) {
-    const response = await fetch(this.config.url + path, {
+  async delete({ path, queryString, headers = {} }) {
+    const response = await fetch(this.config.url + path + queryString, {
       method: "DELETE",
       headers: {
         ...this.config.defaultHeaders,