diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index dc8e60edd6..9048502550 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -55,11 +55,6 @@
           title: "Plugins",
           href: "/builder/portal/plugins",
         },
-        {
-          title: "Environment",
-          href: "/builder/portal/environment",
-        },
-
         {
           title: "Settings",
           href: "/builder/portal/settings",
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
index 57410bcaeb..6d9f306991 100644
--- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
@@ -26,6 +26,11 @@
           url={$url("./organisation")}
           active={$isActive("./organisation")}
         />
+        <SideNavItem
+          text="Environment"
+          url={$url("./environment")}
+          active={$isActive("./environment")}
+        />
         {#if !$admin.cloud}
           <SideNavItem
             text="Version"
diff --git a/packages/builder/src/pages/builder/portal/environment/_components/editVariableModal.svelte b/packages/builder/src/pages/builder/portal/settings/environment/_components/editVariableModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/environment/_components/editVariableModal.svelte
rename to packages/builder/src/pages/builder/portal/settings/environment/_components/editVariableModal.svelte
diff --git a/packages/builder/src/pages/builder/portal/environment/index.svelte b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
similarity index 70%
rename from packages/builder/src/pages/builder/portal/environment/index.svelte
rename to packages/builder/src/pages/builder/portal/settings/environment/index.svelte
index 4c377d2051..ab52ceb1bf 100644
--- a/packages/builder/src/pages/builder/portal/environment/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/environment/index.svelte
@@ -4,12 +4,9 @@
     Heading,
     Body,
     Button,
-    Select,
     Divider,
     Modal,
     ModalContent,
-    Search,
-    Page,
     Table,
     Input,
     Checkbox,
@@ -42,30 +39,28 @@
   })
 </script>
 
-<Page narrow>
-  <Layout noPadding>
-    <Layout gap="XS" noPadding>
-      <Heading size="M">Envrironment Variables</Heading>
-      <Body
-        >Add and manage environment variable for development and production</Body
-      >
-    </Layout>
-    <Divider size="S" />
-    <Layout noPadding>
-      <Table
-        {schema}
-        data={$envVars}
-        allowEditColumns={false}
-        allowEditRows={false}
-        allowSelectRows={false}
-        {customRenderers}
-      />
-    </Layout>
-    <div>
-      <Button on:click={modal.show} cta>Add Variable</Button>
-    </div>
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading size="M">Envrironment Variables</Heading>
+    <Body
+      >Add and manage environment variable for development and production</Body
+    >
   </Layout>
-</Page>
+  <Divider size="S" />
+  <Layout noPadding>
+    <Table
+      {schema}
+      data={$envVars}
+      allowEditColumns={false}
+      allowEditRows={false}
+      allowSelectRows={false}
+      {customRenderers}
+    />
+  </Layout>
+  <div>
+    <Button on:click={modal.show} cta>Add Variable</Button>
+  </div>
+</Layout>
 
 <Modal bind:this={modal}>
   <ModalContent title="Add new environment variable">
diff --git a/packages/builder/src/stores/portal/envVars.js b/packages/builder/src/stores/portal/envVars.js
index ec3af53d8f..0d257d6bf7 100644
--- a/packages/builder/src/stores/portal/envVars.js
+++ b/packages/builder/src/stores/portal/envVars.js
@@ -6,16 +6,21 @@ export function createEnvVarsStore() {
 
   async function load() {
     // const envVars = await API.fetchEnvVars()
-
-    let testVars = ['blah', 'blah123']
-    const vars = testVars.map((name) => ({ name }))
+    let testVars = ["blah", "blah123"]
+    const vars = testVars.map(name => ({ name }))
     console.log(vars)
     set(vars)
   }
 
+  async function create() {
+    const envVar = await API.createEnvVar()
+    update(envVars => [envVar, ...envVars])
+  }
+
   return {
     subscribe,
     load,
+    create,
   }
 }
 
diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js
index 370c448bb3..a1ed6615a1 100644
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@@ -11,4 +11,4 @@ export { groups } from "./groups"
 export { plugins } from "./plugins"
 export { backups } from "./backups"
 export { overview } from "./overview"
-export { envVars } from "./envVars"
\ No newline at end of file
+export { envVars } from "./envVars"
diff --git a/packages/frontend-core/src/api/envVars.js b/packages/frontend-core/src/api/envVars.js
index 7a728e9d18..44f81cd6c9 100644
--- a/packages/frontend-core/src/api/envVars.js
+++ b/packages/frontend-core/src/api/envVars.js
@@ -2,7 +2,14 @@ export const buildEnvironmentVariableEndpoints = API => ({
   /**
    * Fetches a list of environment variables
    */
-  fetchEnvVars: async () => {
+  fetchVariables: async () => {
+    return await API.get({
+      url: `/api/env/variables`,
+      json: false,
+    })
+  },
+
+  createVariable: async () => {
     return await API.get({
       url: `/api/env/variables`,
       json: false,
