diff --git a/forge/db/controllers/Device.js b/forge/db/controllers/Device.js
index 4c6664d7c7..8c203d1c2f 100644
--- a/forge/db/controllers/Device.js
+++ b/forge/db/controllers/Device.js
@@ -166,6 +166,7 @@ module.exports = {
         result.push(makeVar('FF_SNAPSHOT_ID', snapshotId))
         result.push(makeVar('FF_SNAPSHOT_NAME', snapshotName))
         result.push(...app.db.controllers.Device.removePlatformSpecificEnvVars(envVars))
+
         return result
     },
 
diff --git a/forge/db/controllers/Project.js b/forge/db/controllers/Project.js
index 56fe7a6bed..6d2e070f9e 100644
--- a/forge/db/controllers/Project.js
+++ b/forge/db/controllers/Project.js
@@ -270,6 +270,7 @@ module.exports = {
         result.push(makeVar('FF_PROJECT_ID', project.id || '', true)) // deprecated as of V1.6.0
         result.push(makeVar('FF_PROJECT_NAME', project.name || '', true)) // deprecated as of V1.6.0
         result.push(...app.db.controllers.Project.removePlatformSpecificEnvVars(envVars))
+
         return result
     },
 
@@ -485,7 +486,8 @@ module.exports = {
             sourceProjectEnvVars.forEach(envVar => {
                 newProjectSettings.env.push({
                     name: envVar.name,
-                    value: options.envVars === 'keys' ? '' : envVar.value
+                    value: options.envVars === 'keys' ? '' : envVar.value,
+                    hidden: envVar.hidden ?? false
                 })
             })
         }
diff --git a/forge/db/views/Project.js b/forge/db/views/Project.js
index 2f4c4d28d1..7e381b8d65 100644
--- a/forge/db/views/Project.js
+++ b/forge/db/views/Project.js
@@ -82,7 +82,12 @@ module.exports = function (app) {
                 result.launcherSettings.disableAutoSafeMode = disableAutoSafeMode.value
             }
             // Environment
-            result.settings.env = app.db.controllers.Project.insertPlatformSpecificEnvVars(proj, result.settings.env)
+            result.settings.env = app.db.controllers.Project.insertPlatformSpecificEnvVars(proj, result.settings.env).map((env) => {
+                if (Object.hasOwnProperty.call(env, 'hidden') && env.hidden === true) {
+                    env.value = ''
+                }
+                return env
+            })
             if (!result.settings.palette?.modules) {
                 // If there are no modules listed in settings, check the StorageSettings
                 // for the project to see what Node-RED may already think is installed
diff --git a/forge/routes/api/device.js b/forge/routes/api/device.js
index e90e183714..8eff12beed 100644
--- a/forge/routes/api/device.js
+++ b/forge/routes/api/device.js
@@ -718,6 +718,12 @@ module.exports = async function (app) {
         }
     }, async (request, reply) => {
         const settings = await request.device.getAllSettings()
+        settings.env = settings.env.map((env) => {
+            if (Object.hasOwnProperty.call(env, 'hidden') && env.hidden === true) {
+                env.value = ''
+            }
+            return env
+        })
         if (request.teamMembership?.role === Roles.Owner) {
             reply.send(settings)
         } else {
diff --git a/forge/routes/api/project.js b/forge/routes/api/project.js
index 46bdc75f94..9fb6b6614c 100644
--- a/forge/routes/api/project.js
+++ b/forge/routes/api/project.js
@@ -411,6 +411,17 @@ module.exports = async function (app) {
 
             // Merge the settings into the existing values
             const currentProjectSettings = await request.project.getSetting(KEY_SETTINGS) || {}
+            if (newSettings.env && Array.isArray(newSettings.env)) {
+                newSettings.env = newSettings.env.map(env => {
+                    // hidden env vars are received as empty strings so we'll replace the empty string with the previous value,
+                    // allowing them to be overwritten when needed
+                    if (Object.prototype.hasOwnProperty.call(env, 'hidden') && env.hidden && !env.value.length) {
+                        const previousValue = currentProjectSettings.env.find(e => e.name === env.name)
+                        env.value = previousValue.value
+                    }
+                    return env
+                })
+            }
             const updatedSettings = app.db.controllers.ProjectTemplate.mergeSettings(currentProjectSettings, newSettings)
 
             changesToPersist.settings = { from: currentProjectSettings, to: updatedSettings }
diff --git a/frontend/src/pages/admin/Template/sections/Environment.vue b/frontend/src/pages/admin/Template/sections/Environment.vue
index 5239df8ddb..8edf4d6468 100644
--- a/frontend/src/pages/admin/Template/sections/Environment.vue
+++ b/frontend/src/pages/admin/Template/sections/Environment.vue
@@ -1,5 +1,5 @@
 <template>
-    <form class="space-y-4" @submit.prevent>
+    <form class="space-y-4 ff-environment" @submit.prevent>
         <FormHeading>
             <div class="flex">
                 <div class="mr-4">Environment Variables</div>
@@ -27,6 +27,7 @@
                 search-placeholder="Search environment variables..."
                 :columns="editTemplate ? [,,,,] : [,,,]"
                 :noDataMessage="noDataMessage"
+                data-el="env-vars-table"
             >
                 <template #actions>
                     <template v-if="!readOnly">
@@ -35,7 +36,7 @@
                             <template #icon><DocumentDownloadIcon /></template>
                             <span class="hidden sm:flex pl-1">Import .env</span>
                         </ff-button>
-                        <ff-button kind="primary" accesskey="a" @click="addVarHandler">
+                        <ff-button kind="primary" accesskey="a" data-el="add-variable" @click="addVarHandler">
                             <template #icon><PlusSmIcon /></template>
                             <span class="hidden sm:flex pl-1">Add variable</span>
                         </ff-button>
@@ -50,16 +51,18 @@
                     </ff-data-table-row>
                 </template>
                 <template #rows>
-                    <ff-data-table-row v-for="(item) in filteredRows" :key="item.index">
+                    <ff-data-table-row v-for="(item) in filteredRows" :key="item.index" :data-row="'row-' + item.name">
                         <td class="ff-data-table--cell !pl-1 !pr-0 !py-1 border min-w-max max-w-sm align-top">
                             <FormRow
                                 v-model="item.name"
+                                v-ff-tooltip:left="'Cannot be renamed'"
                                 class="font-mono"
                                 :containerClass="'w-full' + (!readOnly && (editTemplate || item.policy === undefined)) ? ' env-cell-uneditable':''"
                                 :inputClass="item.deprecated ? 'w-full text-yellow-700 italic' : 'w-full'"
-                                :error="item.error"
-                                :disabled="item.encrypted"
+                                :error="errors[item.index].error"
+                                :disabled="isDisabledName(item)"
                                 value-empty-text=""
+                                data-el="var-name"
                                 :type="(!readOnly && (editTemplate || item.policy === undefined))?'text':'uneditable'"
                             />
                         </td>
@@ -67,7 +70,12 @@
                             <div v-if="!item.encrypted" class="w-full">
                                 <template v-if="(!readOnly && (editTemplate || item.policy === undefined || item.policy))">
                                     <!-- editable -->
-                                    <textarea v-model="item.value" :class="'w-full font-mono max-h-40' + ((item.value && item.value.split('\n').length > 1) ? ' h-20' : ' h-8') + (item.deprecated ? ' text-yellow-700 italic' : '')" />
+                                    <textarea
+                                        v-model="item.value"
+                                        :placeholder="item.hidden ? 'Value hidden' : ''"
+                                        data-el="var-value"
+                                        :class="'w-full font-mono max-h-40' + ((item.value && item.value.split('\n').length > 1) ? ' h-20' : ' h-8') + (item.deprecated ? ' text-yellow-700 italic' : '')"
+                                    />
                                 </template>
                                 <template v-else>
                                     <FormRow
@@ -75,6 +83,7 @@
                                         class="font-mono"
                                         containerClass="w-full env-cell-uneditable"
                                         :inputClass="item.deprecated ? 'text-yellow-700 italic' : ''"
+                                        data-el="var-value"
                                         value-empty-text=""
                                         :type="'uneditable'"
                                     />
@@ -83,12 +92,48 @@
                             <div v-else class="pt-1 text-gray-400"><LockClosedIcon class="inline w-4" /> encrypted</div>
                         </td>
                         <td class="ff-data-table--cell !p-1 border w-16 align-top">
-                            <div v-if="(!readOnly && (editTemplate|| item.policy === undefined))" class="flex justify-center mt-1">
-                                <ff-button kind="tertiary" size="small" @click="removeEnv(item.index)">
+                            <div v-if="(!readOnly && (editTemplate|| item.policy === undefined))" class="flex justify-center mt-1 items-center gap-3">
+                                <ff-button kind="tertiary" size="small" data-el="remove" @click="removeEnv(item.index)">
                                     <template #icon>
                                         <TrashIcon />
                                     </template>
                                 </ff-button>
+                                <template v-if="typeof item.index === 'string' && item.index.startsWith('add-')">
+                                    <ff-button
+                                        v-ff-tooltip:left="'Setting visibility to hidden will lock the variable name and make the value hidden. To revert, you\'ll need to delete and recreate the variable.'"
+                                        kind="tertiary"
+                                        size="small"
+                                        data-el="visibility"
+                                        @click="setEnvHidden(item.index)"
+                                    >
+                                        <template #icon>
+                                            <EyeOffIcon v-if="item.hidden" />
+                                            <EyeIcon v-else />
+                                        </template>
+                                    </ff-button>
+                                </template>
+                                <template v-else>
+                                    <span
+                                        v-if="!!(originalEnvVars.find(v => v.index === item.index))?.hidden"
+                                        :key="item.index"
+                                        v-ff-tooltip:left="'Cannot be made public again, only overwritten'"
+                                        class="mx-2 disabled"
+                                        data-el="visibility"
+                                    >
+                                        <EyeOffIcon class="ff-icon-sm color-grey" />
+                                    </span>
+                                    <ff-button
+                                        v-else
+                                        v-ff-tooltip:left="'Setting visibility to hidden will lock the variable name and make the value hidden. To revert, you\'ll need to delete and recreate the variable.'"
+                                        kind="tertiary" size="small" data-el="visibility"
+                                        @click="setEnvHidden(item.index)"
+                                    >
+                                        <template #icon>
+                                            <EyeOffIcon v-if="item.hidden" />
+                                            <EyeIcon v-else />
+                                        </template>
+                                    </ff-button>
+                                </template>
                             </div>
                             <div
                                 v-else-if="(item.deprecated === true)"
@@ -112,7 +157,7 @@
 </template>
 
 <script>
-import { DocumentDownloadIcon, ExclamationIcon, InformationCircleIcon, LockClosedIcon, PlusSmIcon, TrashIcon } from '@heroicons/vue/outline'
+import { DocumentDownloadIcon, ExclamationIcon, EyeIcon, EyeOffIcon, InformationCircleIcon, LockClosedIcon, PlusSmIcon, TrashIcon } from '@heroicons/vue/outline'
 
 import FormHeading from '../../../../components/FormHeading.vue'
 import FormRow from '../../../../components/FormRow.vue'
@@ -133,7 +178,9 @@ export default {
         PlusSmIcon,
         LockClosedIcon,
         ExclamationIcon,
-        InformationCircleIcon
+        InformationCircleIcon,
+        EyeIcon,
+        EyeOffIcon
     },
     props: {
         editTemplate: {
@@ -152,17 +199,21 @@ export default {
             // for the dialog that opens, e.g. "FlowFuse - Device Group Environment Variables"
             type: String,
             default: null
+        },
+        originalEnvVars: {
+            type: Array,
+            required: true
         }
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'validated'],
     data () {
         return {
             addedCount: 0,
             input: {},
             envVarLookup: {},
-            originalEnvVars: null,
             search: '',
-            pauseEnvWatch: false
+            pauseEnvWatch: false,
+            errors: { }
         }
     },
     computed: {
@@ -192,23 +243,7 @@ export default {
         },
         'editable.settings.env': {
             deep: true,
-            handler (v) {
-                // only validate if the env data has changed (ignore the error
-                // field as that is updated in the validate method & would cause
-                // an infinite loop)
-                const _v = v.map(row => {
-                    const { error, ...rest } = row
-                    return rest
-                })
-                const _oldV = (this.originalEnvVars || []).map(row => {
-                    const { error, ...rest } = row
-                    return rest
-                })
-                if (JSON.stringify(_v) === JSON.stringify(_oldV)) {
-                    return // no changes to validate
-                }
-                this.validate()
-            }
+            handler: 'validate'
         }
     },
     mounted () {
@@ -224,38 +259,41 @@ export default {
             this.updateLookup()
             const counts = {}
 
-            // if this.originalEnvVars = null, then this is the first time here
-            // so we need to make a copy of the original env vars for later comparison
-            if (this.originalEnvVars === null) {
-                this.originalEnvVars = JSON.parse(JSON.stringify(this.editable?.settings?.env || [])) // make a copy for later comparison
-            }
-
-            // first scan: sanitise the policy field & index, clear errors, count up duplicate names
             envVars.forEach((field, i) => {
+                // set field policy
                 if (field.policy === undefined && (field.platform === true || field.deprecated === true)) {
                     field.policy = false
                 }
+                // set field index if not present
                 if (typeof field.index === 'undefined' || (typeof field.index === 'number' && field.index !== i)) {
                     field.index = i
                 }
-                counts[field.name] = (counts[field.name] || 0) + 1 // count the number of times each name appears
-                field.error = '' // clear any error
+
+                // count the number of times each name appears
+                counts[field.name] = (counts[field.name] || 0) + 1
+
+                // clear existing errors
+                this.errors[field.index] = { error: '' }
             })
 
+            let hasErrors = false
             // second scan: check for errors & flag them
             envVars.forEach((field, i) => {
-                const newRow = typeof field.index === 'string' && field.index.startsWith('add-')
                 if (field.name === '' || / /.test(field.name)) {
-                    field.error = 'Invalid name' // if name is empty  are empty - or - name contains spaces
-                } else if (newRow && field.name.startsWith('FF_')) {
-                    field.error = 'Reserved name'
+                    this.errors[field.index].error = 'Invalid name' // if name is empty  are empty - or - name contains spaces
+                    hasErrors = true
+                } else if (field.name.startsWith('FF_') && !field.platform) {
+                    this.errors[field.index].error = 'Reserved name'
+                    hasErrors = true
+                } else if (!field.name.match(/^[a-zA-Z_]+[a-zA-Z0-9_]*$/)) {
+                    this.errors[field.index].error = 'Names must start with a character'
+                    hasErrors = true
                 } else if (counts[field.name] > 1) {
-                    field.error = 'Duplicate name'
+                    this.errors[field.index].error = 'Duplicate name'
+                    hasErrors = true
                 }
             })
-
-            // lastly, update originalEnvVars
-            this.originalEnvVars = JSON.parse(JSON.stringify(this.editable?.settings?.env || [])) // for later comparison
+            this.$emit('validated', hasErrors)
         },
         updateLookup () {
             this.envVarLookup = {}
@@ -274,6 +312,7 @@ export default {
                 name: key || '',
                 value: value || '',
                 encrypted: encrypt,
+                hidden: false,
                 policy: this.editTemplate ? false : undefined
             }
             this.envVarLookup[field.name] = this.editable.settings.env.length
@@ -302,8 +341,13 @@ export default {
             }
         },
         removeEnv (index) {
-            const field = this.editable.settings.env[index]
-            delete this.envVarLookup[field.name]
+            if (typeof index === 'string' && index.startsWith('add-')) {
+                index = this.editable.settings.env.findIndex(env => env.index === index)
+            } else {
+                const field = this.editable.settings.env[index]
+                delete this.envVarLookup[field.name]
+            }
+
             this.editable.settings.env.splice(index, 1)
         },
         importEnv () {
@@ -337,12 +381,29 @@ export default {
                 fileUpload.value = ''
             }
             fileUpload.click()
+        },
+        setEnvHidden (index) {
+            let field
+            const isUnsavedVar = typeof index === 'string' && index.startsWith('add-')
+
+            if (isUnsavedVar) {
+                field = this.editable.settings.env.find(env => env.index === index)
+            } else {
+                field = this.editable.settings.env[index]
+            }
+
+            field.hidden = !field.hidden
+        },
+        isDisabledName (item) {
+            if (item.encrypted) return true
+            const originalItem = this.originalEnvVars.find(env => env.index === item.index)
+            return typeof item.index === 'number' && item.hidden && originalItem?.hidden
         }
     }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .ff-data-table--cell textarea {
     resize: vertical;
     max-height: 10rem; /* 160px approx ~8 lines, after which user will need to scroll */
@@ -372,3 +433,13 @@ export default {
     cursor: default;
 }
 </style>
+
+<style lang="scss">
+.ff-environment {
+    .ff-input.ff-text-input {
+        input:disabled {
+            color: $ff-grey-600
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/device/Settings/Environment.vue b/frontend/src/pages/device/Settings/Environment.vue
index 034367e4e4..8d97656056 100644
--- a/frontend/src/pages/device/Settings/Environment.vue
+++ b/frontend/src/pages/device/Settings/Environment.vue
@@ -1,8 +1,16 @@
 <template>
     <form class="space-y-6">
-        <TemplateSettingsEnvironment :readOnly="!hasPermission('device:edit-env')" v-model="editable" :editTemplate="false" />
+        <TemplateSettingsEnvironment
+            :readOnly="!hasPermission('device:edit-env')"
+            v-model="editable"
+            :original-env-vars="original?.settings?.env ?? []"
+            :editTemplate="false"
+            @validated="onFormValidated"
+        />
         <div v-if="hasPermission('device:edit-env')" class="space-x-4 whitespace-nowrap">
-            <ff-button size="small" :disabled="!unsavedChanges || hasError" @click="saveSettings()">Save Settings</ff-button>
+            <ff-button size="small" :disabled="isUpdateButtonDisabled" @click="saveSettings()" data-el="submit">
+                Save Settings
+            </ff-button>
         </div>
     </form>
 </template>
@@ -52,6 +60,8 @@ export default {
                     // or if we do recognise it, but the value is different
                     if (!this.original.settings.envMap[field.name] || field.value !== this.original.settings.envMap[field.name].value) {
                         changed = true
+                    } else if (field.hidden !== this.original.settings.envMap[field.name].hidden) {
+                        changed = true
                     }
                     // there is an issue with he key/value
                     if (field.error) {
@@ -90,14 +100,19 @@ export default {
             },
             original: {
                 settings: {
-                    envMap: {}
+                    envMap: {},
+                    env: []
                 }
             },
             templateEnvValues: {}
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership'])
+        ...mapState('account', ['teamMembership']),
+        isUpdateButtonDisabled () {
+            if (this.hasError) return true
+            return !this.unsavedChanges
+        }
     },
     mounted () {
         this.getSettings()
@@ -109,10 +124,23 @@ export default {
                 this.editable.settings.env = []
                 const settings = await deviceApi.getSettings(this.device.id)
                 settings.env?.forEach(envVar => {
+                    envVar = {
+                        hidden: false,
+                        ...envVar
+                    }
                     this.editable.settings.env.push(Object.assign({}, envVar))
                     // make a map of the key:value so it's easier to check for changes
                     this.original.settings.envMap[envVar.name] = envVar
                 })
+
+                this.original.settings.env = []
+                Object.keys(this.original.settings.envMap).forEach((key, i) => {
+                    this.original.settings.env.push({
+                        index: i,
+                        hidden: false,
+                        ...this.original.settings.envMap[key]
+                    })
+                })
             }
         },
         saveSettings: async function () {
@@ -122,12 +150,16 @@ export default {
             this.editable.settings.env.forEach(field => {
                 settings.env.push({
                     name: field.name,
-                    value: field.value
+                    value: field.value,
+                    hidden: field.hidden
                 })
             })
             await deviceApi.updateSettings(this.device.id, settings)
             this.$emit('device-updated')
             alerts.emit('Device settings successfully updated. NOTE: changes will be applied once the device restarts.', 'confirmation', 6000)
+        },
+        onFormValidated (hasErrors) {
+            this.hasError = hasErrors
         }
     }
 }
diff --git a/frontend/src/pages/instance/Settings/Environment.vue b/frontend/src/pages/instance/Settings/Environment.vue
index 5bc08e67d2..4e0127cb33 100644
--- a/frontend/src/pages/instance/Settings/Environment.vue
+++ b/frontend/src/pages/instance/Settings/Environment.vue
@@ -1,8 +1,16 @@
 <template>
     <form class="space-y-6">
-        <TemplateSettingsEnvironment v-model="editable" :readOnly="!hasPermission('device:edit-env')" :editTemplate="false" />
+        <TemplateSettingsEnvironment
+            v-model="editable"
+            :readOnly="!hasPermission('device:edit-env')"
+            :editTemplate="false"
+            :original-env-vars="original?.settings?.env ?? []"
+            @validated="onFormValidated"
+        />
         <div v-if="hasPermission('device:edit-env')" class="space-x-4 whitespace-nowrap">
-            <ff-button size="small" :disabled="!unsavedChanges || hasErrors" @click="saveSettings()">Save settings</ff-button>
+            <ff-button size="small" :disabled="!unsavedChanges || hasErrors" data-el="submit" @click="saveSettings()">
+                Save settings
+            </ff-button>
         </div>
     </form>
 </template>
@@ -64,8 +72,7 @@ export default {
                     description: false,
                     settings: {},
                     policy: {}
-                },
-                errors: {}
+                }
             },
             original: {},
             templateEnvValues: {}
@@ -81,11 +88,9 @@ export default {
             handler (v) {
                 if (this.project.template) {
                     let changed = false
-                    let errors = false
 
                     let originalCount = 0
                     this.editable.settings.env.forEach(field => {
-                        errors = errors || !!field.error
                         if (/^add/.test(field.index)) {
                             changed = true
                         } else {
@@ -98,6 +103,8 @@ export default {
                                     changed = true
                                 } else if (original.value !== field.value) {
                                     changed = true
+                                } else if (original.hidden !== field.hidden) {
+                                    changed = true
                                 }
                             } else {
                                 changed = true
@@ -108,7 +115,6 @@ export default {
                         changed = true
                     }
                     this.unsavedChanges = changed
-                    this.hasErrors = errors
                 }
             }
         }
@@ -131,6 +137,11 @@ export default {
                 })
                 if (this.project.settings.env) {
                     this.project.settings.env.forEach((envVar) => {
+                        // hidden key backwards compatability
+                        envVar = {
+                            hidden: false,
+                            ...envVar
+                        }
                         envVar.index = this.editable.settings.env.length // ensure all env vars have an index
                         if (templateEnvMap[envVar.name]) {
                             if (templateEnvMap[envVar.name].policy) {
@@ -165,12 +176,20 @@ export default {
                 }
                 settings.env.push({
                     name: field.name,
-                    value: field.value
+                    value: field.value,
+                    hidden: field.hidden
                 })
             })
-            await InstanceApi.updateInstance(this.project.id, { settings })
-            this.$emit('instance-updated')
-            alerts.emit('Instance settings successfully updated. Restart the instance to apply the changes.', 'confirmation', 6000)
+            InstanceApi.updateInstance(this.project.id, { settings })
+                .then(() => {
+                    // wait before we reload the instance so we don't get a blip by returning the old values
+                    setTimeout(() => this.$emit('instance-updated'), 1000)
+                })
+                .then(() => alerts.emit('Instance settings successfully updated. Restart the instance to apply the changes.', 'confirmation', 6000))
+                .catch(e => e)
+        },
+        onFormValidated (hasErrors) {
+            this.hasErrors = hasErrors
         }
     }
 }
diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
index bf4c9691df..a3de16f7b5 100644
--- a/frontend/src/ui-components/stylesheets/ff-components.scss
+++ b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -965,6 +965,7 @@ li.ff-list-item {
     cursor: pointer;
     position: relative;
     display: flex;
+    max-height: 20px;
     svg {
       position: relative;
       z-index: 2;
diff --git a/test/e2e/frontend/cypress/tests/devices/settings/environment.spec.js b/test/e2e/frontend/cypress/tests/devices/settings/environment.spec.js
new file mode 100644
index 0000000000..1d02034307
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/devices/settings/environment.spec.js
@@ -0,0 +1,95 @@
+describe('FlowForge - Device - Settings Environment', () => {
+    beforeEach(() => {
+        cy.login('bob', 'bbPassword')
+        cy.visit('/team/bteam/devices')
+        cy.get('[data-el="devices-browser"] tbody [data-el="ff-data-cell"] a').first().click()
+        cy.get('[data-nav="device-settings"]').click()
+        cy.get('[data-nav="environment"]').click()
+    })
+
+    it('can add, remove mark as hidden instance environment variables', () => {
+        cy.intercept('PUT', '/api/*/devices/*/settings').as('updateSettings')
+
+        cy.get('[data-el="env-vars-table"]').should('exist')
+        cy.get('[data-el="env-vars-table"]').should('be.visible')
+        cy.get('[data-el="env-vars-table"] tbody tr').should('have.length', 5)
+
+        cy.get('[data-el="submit"]').should('be.disabled')
+
+        cy.get('[data-el="add-variable"]').click()
+
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="env-vars-table"] tbody tr').should('have.length', 6)
+
+        // can remove an unsaved variable
+        cy.get('[data-el="env-vars-table"] [data-row="row-NEW"]').within(() => {
+            cy.get('[data-el="remove"]').click()
+        })
+
+        cy.get('[data-el="env-vars-table"] tbody tr').should('have.length', 5)
+
+        // can add a visible environment variable
+        cy.get('[data-el="add-variable"]').click()
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="env-vars-table"] [data-row="row-NEW"]').within(() => {
+            cy.get('[data-el="visibility"]').should('exist')
+            // filling in value first because changing the name will also change the selector
+            cy.get('[data-el="var-value"]').type('value')
+            cy.get('[data-el="var-name"]').type('new_var')
+        })
+
+        // can add a hidden environment variable
+        cy.get('[data-el="add-variable"]').click()
+        // previous entry changed name so new entry is the new row-NEW
+        cy.get('[data-el="env-vars-table"] [data-row="row-NEW"]').within(() => {
+            // filling in value first because changing the name will also change the selector
+            cy.get('[data-el="var-value"]').type('secret')
+            cy.get('[data-el="var-name"]').type('new_password')
+        })
+
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_password"]').within(() => {
+            cy.get('[data-el="visibility"]').click()
+        })
+
+        cy.get('[data-el="submit"]').click()
+        cy.wait('@updateSettings')
+
+        cy.get('[data-el="submit"]').should('be.disabled')
+
+        // check that the hidden var name and visibility can't be changed
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_password"]').within(() => {
+            cy.get('[data-el="var-name"] input').should('be.disabled')
+            cy.get('[data-el="var-value"]').should('have.value', '')
+            cy.get('[data-el="visibility"]').should('have.class', 'disabled')
+        })
+
+        // can mark an existing env var as hidden
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_var"]').within(() => {
+            cy.get('[data-el="visibility"]').should('not.have.class', 'disabled')
+            cy.get('[data-el="visibility"]').should('not.be.disabled')
+            cy.get('[data-el="visibility"]').click()
+        })
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+        cy.get('[data-el="submit"]').click()
+        cy.wait('@updateSettings')
+
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_var"]').within(() => {
+            cy.get('[data-el="var-name"] input').should('be.disabled')
+            cy.get('[data-el="var-value"]').should('be.empty')
+            cy.get('[data-el="visibility"]').should('have.class', 'disabled')
+        })
+
+        // cleanup, can remove vars
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_var"] [data-el="remove"]').click()
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_password"] [data-el="remove"]').click()
+
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="submit"]').click()
+        cy.wait('@updateSettings')
+
+        cy.get('[data-el="submit"]').should('be.disabled')
+    })
+})
diff --git a/test/e2e/frontend/cypress/tests/instances/settings/environment.spec.js b/test/e2e/frontend/cypress/tests/instances/settings/environment.spec.js
new file mode 100644
index 0000000000..bd645189ae
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/instances/settings/environment.spec.js
@@ -0,0 +1,101 @@
+describe('FlowForge - Instance - Settings Environment', () => {
+    let instanceId
+    beforeEach(() => {
+        cy.login('alice', 'aaPassword')
+        cy.home()
+
+        cy.request('GET', '/api/v1/teams/')
+            .then((response) => {
+                const team = response.body.teams[0]
+                return cy.request('GET', `/api/v1/teams/${team.id}/projects`)
+            })
+            .then((response) => {
+                instanceId = response.body.projects[0].id
+                cy.visit(`/instance/${instanceId}/settings/environment`)
+            })
+    })
+
+    it('can add, remove mark as hidden instance environment variables', () => {
+        cy.get('[data-el="env-vars-table"]').should('exist')
+        cy.get('[data-el="env-vars-table"]').should('be.visible')
+        cy.get('[data-el="env-vars-table"] tbody tr').should('have.length', 2)
+
+        cy.get('[data-el="submit"]').should('be.disabled')
+
+        cy.get('[data-el="add-variable"]').click()
+
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="env-vars-table"] tbody tr').should('have.length', 3)
+
+        // can remove an unsaved variable
+        cy.get('[data-el="env-vars-table"] [data-row="row-NEW"]').within(() => {
+            cy.get('[data-el="remove"]').click()
+        })
+
+        cy.get('[data-el="env-vars-table"] tbody tr').should('have.length', 2)
+
+        // can add a visible environment variable
+        cy.get('[data-el="add-variable"]').click()
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="env-vars-table"] [data-row="row-NEW"]').within(() => {
+            cy.get('[data-el="visibility"]').should('exist')
+            // filling in value first because changing the name will also change the selector
+            cy.get('[data-el="var-value"]').type('value')
+            cy.get('[data-el="var-name"]').type('new_var')
+        })
+
+        // can add a hidden environment variable
+        cy.get('[data-el="add-variable"]').click()
+        // previous entry changed name so new entry is the new row-NEW
+        cy.get('[data-el="env-vars-table"] [data-row="row-NEW"]').within(() => {
+            // filling in value first because changing the name will also change the selector
+            cy.get('[data-el="var-value"]').type('secret')
+            cy.get('[data-el="var-name"]').type('new_password')
+        })
+
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_password"]').within(() => {
+            cy.get('[data-el="visibility"]').click()
+        })
+        cy.intercept('PUT', '/api/*/projects/*').as('updateSettings')
+        cy.get('[data-el="submit"]').click()
+        cy.wait('@updateSettings')
+
+        cy.get('[data-el="submit"]').should('be.disabled')
+
+        // check that the hidden var name and visibility can't be changed
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_password"]').within(() => {
+            cy.get('[data-el="var-name"] input').should('be.disabled')
+            cy.get('[data-el="var-value"]').should('have.value', '')
+            cy.get('[data-el="visibility"]').should('have.class', 'disabled')
+        })
+
+        // can mark an existing env var as hidden
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_var"]').within(() => {
+            cy.get('[data-el="visibility"]').should('not.have.class', 'disabled')
+            cy.get('[data-el="visibility"]').should('not.be.disabled')
+            cy.get('[data-el="visibility"]').click()
+        })
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+        cy.get('[data-el="submit"]').click()
+        cy.wait('@updateSettings')
+
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_var"]').within(() => {
+            cy.get('[data-el="var-name"] input').should('be.disabled')
+            cy.get('[data-el="var-value"]').should('be.empty')
+            cy.get('[data-el="visibility"]').should('have.class', 'disabled')
+        })
+
+        // cleanup, can remove vars
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_var"] [data-el="remove"]').click()
+        cy.get('[data-el="env-vars-table"] [data-row="row-new_password"] [data-el="remove"]').click()
+
+        cy.get('[data-el="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="submit"]').click()
+        cy.wait('@updateSettings')
+
+        cy.get('[data-el="submit"]').should('be.disabled')
+    })
+})
diff --git a/test/unit/forge/routes/api/device_spec.js b/test/unit/forge/routes/api/device_spec.js
index f6d4bf22a1..50a0399a40 100644
--- a/test/unit/forge/routes/api/device_spec.js
+++ b/test/unit/forge/routes/api/device_spec.js
@@ -1143,6 +1143,37 @@ describe('Device API', async function () {
                 nonPlatformVars[0].should.have.property('value', 'foo')
                 settings.should.not.have.property('invalid')
             })
+            it('can set hidden env vars for the device', async function () {
+                const device = await createDevice({ name: 'Ad1', type: '', team: TestObjects.ATeam.hashid, as: TestObjects.tokens.alice })
+                const response = await app.inject({
+                    method: 'PUT',
+                    url: `/api/v1/devices/${device.id}/settings`,
+                    body: {
+                        env: [{ name: 'a', value: 'foo' }, { name: 'b', value: 'bar', hidden: true }]
+                    },
+                    cookies: { sid: TestObjects.tokens.alice }
+                })
+                response.statusCode.should.equal(200)
+                response.json().should.have.property('status', 'okay')
+
+                const settingsResponse = await app.inject({
+                    method: 'GET',
+                    url: `/api/v1/devices/${device.id}/settings`,
+                    cookies: { sid: TestObjects.tokens.alice }
+                })
+
+                const settings = settingsResponse.json()
+                settings.should.have.property('env')
+                const nonPlatformVars = settings.env.filter(e => !e.name.startsWith('FF_')) // ignore platform defined vars
+                nonPlatformVars.should.have.length(2)
+                nonPlatformVars[0].should.have.property('name', 'a')
+                nonPlatformVars[0].should.have.property('value', 'foo')
+                nonPlatformVars[1].should.have.property('name', 'b')
+                nonPlatformVars[1].should.have.property('value', '')
+                nonPlatformVars[1].should.have.property('hidden', true)
+                settings.should.not.have.property('invalid')
+            })
+
             it('non team owner can set env vars for the device', async function () {
                 const device = await createDevice({ name: 'Ad1', type: '', team: TestObjects.ATeam.hashid, as: TestObjects.tokens.alice })
                 const response = await app.inject({
diff --git a/test/unit/forge/routes/api/project_spec.js b/test/unit/forge/routes/api/project_spec.js
index 23bd4b1c54..d0cf1bc30f 100644
--- a/test/unit/forge/routes/api/project_spec.js
+++ b/test/unit/forge/routes/api/project_spec.js
@@ -498,7 +498,8 @@ describe('Project API', function () {
                         dashboardUI: '/test-dash',
                         env: [
                             { name: 'one', value: 'a' },
-                            { name: 'two', value: 'b' }
+                            { name: 'two', value: 'b' },
+                            { name: 'three', value: 'c', hidden: true }
                         ]
                     }
                 )
@@ -560,6 +561,7 @@ describe('Project API', function () {
                 runtimeSettings.should.have.property('env')
                 runtimeSettings.env.should.have.property('one', 'a')
                 runtimeSettings.env.should.have.property('two', 'b')
+                runtimeSettings.env.should.have.property('three', 'c')
             })
 
             it('Create a project cloned from existing one - env-var keys only', async function () {
@@ -1621,7 +1623,8 @@ describe('Project API', function () {
                     codeEditor: 'monaco',
                     env: [
                         { name: 'one', value: 'a' },
-                        { name: 'two', value: 'b' }
+                        { name: 'two', value: 'b' },
+                        { name: 'three', value: 'c', hidden: true }
                     ]
                 }
             )
@@ -1633,7 +1636,8 @@ describe('Project API', function () {
                     settings: {
                         env: [
                             { name: 'one', value: '1' },
-                            { name: 'two', value: '2' }
+                            { name: 'two', value: '2' },
+                            { name: 'three', value: '3', hidden: true }
                         ]
                     }
                 },
@@ -1646,7 +1650,8 @@ describe('Project API', function () {
             newSettings.should.have.property('httpAdminRoot', '/test-red') // should be unchanged
             newSettings.should.have.property('env', [
                 { name: 'one', value: '1' },
-                { name: 'two', value: '2' }
+                { name: 'two', value: '2' },
+                { name: 'three', value: '3', hidden: true }
             ]) // should be unchanged
         })
         it('Change project env vars - member', async function () {
@@ -2613,6 +2618,52 @@ describe('Project API', function () {
             response.should.have.property('statusCode')
             response.statusCode.should.eqls(400)
         })
+        it('should return empty values for hidden env vars', async () => {
+            const projectSettings = await TestObjects.project1.getSetting('settings')
+            projectSettings.env = [{ name: 'hidden_var', value: 'hidden-content', hidden: true }]
+            await TestObjects.project1.updateSetting('settings', projectSettings)
+
+            const response = await app.inject({
+                method: 'GET',
+                url: `/api/v1/projects/${app.project.id}`,
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            response.should.have.property('statusCode')
+            response.statusCode.should.eqls(200)
+
+            const json = response.json()
+            json.settings.env[4].should.have.property('name', 'hidden_var')
+            json.settings.env[4].should.have.property('value', '')
+            json.settings.env[4].should.have.property('hidden', true)
+        })
+        it('should store hidden env vars', async () => {
+            const projectSettings = await TestObjects.project1.getSetting('settings')
+            projectSettings.env = [{ name: 'hidden_var', value: 'initial-content', hidden: true }]
+            await TestObjects.project1.updateSetting('settings', projectSettings)
+
+            const response = await app.inject({
+                method: 'PUT',
+                url: `/api/v1/projects/${app.project.id}`,
+                body: {
+                    settings: {
+                        env: [
+                            { name: 'hidden_var', value: 'updated-content', hidden: true }
+                        ]
+                    }
+                },
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            const json = response.json()
+
+            json.settings.env[4].should.have.property('name', 'hidden_var')
+            json.settings.env[4].should.have.property('value', '')
+            json.settings.env[4].should.have.property('hidden', true)
+
+            const updatedProjectSettings = await TestObjects.project1.getSetting('settings')
+            updatedProjectSettings.env[0].should.have.property('name', 'hidden_var')
+            updatedProjectSettings.env[0].should.have.property('value', 'updated-content')
+            updatedProjectSettings.env[0].should.have.property('hidden', true)
+        })
         // it('Reject Illegal names', async function () {
         //     const response = await app.inject({
         //         method: 'PUT',