diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
index cbfbe15b95..53663a4841 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte
@@ -16,6 +16,7 @@
     runtimeToReadableMap,
   } from "builderStore/dataBinding"
   import { cloneDeep } from "lodash/fp"
+  import { getEnvironmentBindings } from "builderStore/dataBinding"
 
   export let datasource
   export let queries
@@ -93,6 +94,7 @@
     headings
     bind:object={datasource.config.staticVariables}
     on:change
+    bindings={getEnvironmentBindings()}
   />
 </Layout>
 <div />
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationModal.svelte
index f19f2279d9..d30ed72c94 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationModal.svelte
@@ -1,9 +1,22 @@
 <script>
   import { onMount } from "svelte"
-  import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Layout,
+    Select,
+    Body,
+    Input,
+    EnvDropdown,
+    Modal,
+  } from "@budibase/bbui"
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
   import BindableCombobox from "components/common/bindings/BindableCombobox.svelte"
-  import { getAuthBindings } from "builderStore/dataBinding"
+  import {
+    getAuthBindings,
+    getEnvironmentBindings,
+  } from "builderStore/dataBinding"
+  import { environment, licensing, auth } from "stores/portal"
+  import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
 
   export let configs
   export let currentConfig
@@ -28,7 +41,16 @@
   let hasErrors = false
   let hasChanged = false
 
-  onMount(() => {
+  let createVariableModal
+  let formFieldkey
+
+  onMount(async () => {
+    await environment.loadVariables()
+
+    if ($auth.user) {
+      await licensing.init()
+    }
+
     if (currentConfig) {
       deconstructConfig()
     }
@@ -146,6 +168,12 @@
     }
   }
 
+  const save = data => {
+    environment.createVariable(data)
+    form.basic[formFieldkey] = `{{ env.${data.name} }}`
+    createVariableModal.hide()
+  }
+
   const onFieldChange = () => {
     checkErrors()
     checkChanged()
@@ -154,6 +182,16 @@
   const onConfirmInternal = () => {
     onConfirm(constructConfig())
   }
+
+  async function handleUpgradePanel() {
+    await environment.upgradePanelOpened()
+    $licensing.goToUpgradePage()
+  }
+
+  function showModal(key) {
+    formFieldkey = key
+    createVariableModal.show()
+  }
 </script>
 
 <ModalContent
@@ -189,26 +227,39 @@
       error={blurred.type ? errors.type : null}
     />
     {#if form.type === AUTH_TYPES.BASIC}
-      <Input
+      <EnvDropdown
         label="Username"
         bind:value={form.basic.username}
         on:change={onFieldChange}
         on:blur={() => (blurred.basic.username = true)}
         error={blurred.basic.username ? errors.basic.username : null}
+        showModal={() => showModal("configKey")}
+        variables={$environment.variables}
+        environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
+        {handleUpgradePanel}
       />
-      <Input
+      <EnvDropdown
         label="Password"
         bind:value={form.basic.password}
         on:change={onFieldChange}
         on:blur={() => (blurred.basic.password = true)}
         error={blurred.basic.password ? errors.basic.password : null}
+        showModal={() => showModal("configKey")}
+        variables={$environment.variables}
+        environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
+        {handleUpgradePanel}
       />
     {/if}
     {#if form.type === AUTH_TYPES.BEARER}
       <BindableCombobox
         label="Token"
         value={form.bearer.token}
-        bindings={getAuthBindings()}
+        bindings={[
+          ...getAuthBindings(),
+          ...($licensing.environmentVariablesEnabled
+            ? getEnvironmentBindings()
+            : []),
+        ]}
         on:change={e => {
           form.bearer.token = e.detail
           onFieldChange()
@@ -226,3 +277,7 @@
     {/if}
   </Layout>
 </ModalContent>
+
+<Modal bind:this={createVariableModal}>
+  <CreateEditVariableModal {save} />
+</Modal>
diff --git a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
index 70029eb3c5..7cf2270c49 100644
--- a/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
+++ b/packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
@@ -20,7 +20,6 @@
   let name = row?.name || ""
   let productionValue
   let developmentValue
-
   let useProductionValue = true
 
   const deleteVariable = name => {
@@ -71,7 +70,7 @@
     <Input
       type="password"
       on:change={e => {
-        developmentValue = e.target.value
+        developmentValue = e.detail
       }}
       disabled={useProductionValue}
       label="Value"
diff --git a/packages/builder/src/pages/builder/portal/settings/environment/index.svelte b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
index fbe5a675c9..024c78df4c 100644
--- a/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
@@ -56,7 +56,7 @@
       <Heading size="M">Environment Variables</Heading>
       {#if !$licensing.environmentVariablesEnabled}
         <Tags>
-          <Tag icon="LockClosed">Pro plan</Tag>
+          <Tag icon="LockClosed">Business plan</Tag>
         </Tags>
       {/if}
     </div>
@@ -64,6 +64,8 @@
       >Add and manage environment variables for development and production</Body
     >
   </Layout>
+  <Divider size="S" />
+
   {#if $licensing.environmentVariablesEnabled}
     {#if noEncryptionKey}
       <InlineAlert
@@ -72,7 +74,12 @@
         type="error"
       />
     {/if}
-    <Divider size="S" />
+    <div>
+      <Button on:click={modal.show} cta disabled={noEncryptionKey}
+        >Add Variable</Button
+      >
+    </div>
+
     <Layout noPadding>
       <Table
         {schema}
@@ -83,11 +90,6 @@
         {customRenderers}
       />
     </Layout>
-    <div>
-      <Button on:click={modal.show} cta disabled={noEncryptionKey}
-        >Add Variable</Button
-      >
-    </div>
   {:else}
     <div class="buttons">
       <Button