diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 68c2db5fde817de5e76cf56aebb19e19b6dd020b..c7c331c7de59be06478400eab03317f128be3db9 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -29,6 +29,10 @@ export default {
     lfsLabel: s__('ProjectSettings|Git Large File Storage (LFS)'),
     mergeRequestsLabel: s__('ProjectSettings|Merge requests'),
     operationsLabel: s__('ProjectSettings|Operations'),
+    environmentsLabel: s__('ProjectSettings|Environments'),
+    environmentsHelpText: s__(
+      'ProjectSettings|Every project can make deployments to environments either via CI/CD or API calls. Non-project members have read-only access.',
+    ),
     packagesHelpText: s__(
       'ProjectSettings|Every project can have its own space to store its packages. Note: The Package Registry is always visible when a project is public.',
     ),
@@ -209,6 +213,7 @@ export default {
       requirementsAccessLevel: featureAccessLevel.EVERYONE,
       securityAndComplianceAccessLevel: featureAccessLevel.PROJECT_MEMBERS,
       operationsAccessLevel: featureAccessLevel.EVERYONE,
+      environmentsAccessLevel: featureAccessLevel.EVERYONE,
       containerRegistryAccessLevel: featureAccessLevel.EVERYONE,
       warnAboutPotentiallyUnwantedCharacters: true,
       lfsEnabled: true,
@@ -282,6 +287,9 @@ export default {
       return this.operationsAccessLevel > featureAccessLevel.NOT_ENABLED;
     },
 
+    environmentsEnabled() {
+      return this.environmentsAccessLevel > featureAccessLevel.NOT_ENABLED;
+    },
     repositoryEnabled() {
       return this.repositoryAccessLevel > featureAccessLevel.NOT_ENABLED;
     },
@@ -318,6 +326,9 @@ export default {
     packageRegistryAccessLevelEnabled() {
       return this.glFeatures.packageRegistryAccessLevel;
     },
+    splitOperationsEnabled() {
+      return this.glFeatures.splitOperationsVisibilityPermissions;
+    },
   },
 
   watch: {
@@ -374,6 +385,10 @@ export default {
           featureAccessLevel.PROJECT_MEMBERS,
           this.operationsAccessLevel,
         );
+        this.environmentsAccessLevel = Math.min(
+          featureAccessLevel.PROJECT_MEMBERS,
+          this.environmentsAccessLevel,
+        );
         this.containerRegistryAccessLevel = Math.min(
           featureAccessLevel.PROJECT_MEMBERS,
           this.containerRegistryAccessLevel,
@@ -415,6 +430,8 @@ export default {
           this.requirementsAccessLevel = featureAccessLevel.EVERYONE;
         if (this.operationsAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
           this.operationsAccessLevel = featureAccessLevel.EVERYONE;
+        if (this.environmentsAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
+          this.environmentsAccessLevel = featureAccessLevel.EVERYONE;
         if (this.containerRegistryAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
           this.containerRegistryAccessLevel = featureAccessLevel.EVERYONE;
 
@@ -857,6 +874,20 @@ export default {
           />
         </project-setting-row>
       </div>
+      <template v-if="splitOperationsEnabled">
+        <project-setting-row
+          ref="environments-settings"
+          :label="$options.i18n.environmentsLabel"
+          :help-text="$options.i18n.environmentsHelpText"
+        >
+          <project-feature-setting
+            v-model="environmentsAccessLevel"
+            :label="$options.i18n.environmentsLabel"
+            :options="featureAccessLevelOptions"
+            name="project[project_feature_attributes][environments_access_level]"
+          />
+        </project-setting-row>
+      </template>
     </div>
     <project-setting-row v-if="canDisableEmails" ref="email-settings" class="mb-3">
       <label class="js-emails-disabled">
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 87668a413b07e23b2f8dc8d3402e55ceabff31db..45081af5cbd441e02ee81c209acb5e63fd9caaef 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -30748,6 +30748,9 @@ msgstr ""
 msgid "ProjectSettings|Encourage"
 msgstr ""
 
+msgid "ProjectSettings|Environments"
+msgstr ""
+
 msgid "ProjectSettings|Every merge creates a merge commit."
 msgstr ""
 
@@ -30760,6 +30763,9 @@ msgstr ""
 msgid "ProjectSettings|Every project can have its own space to store its packages. Note: The Package Registry is always visible when a project is public."
 msgstr ""
 
+msgid "ProjectSettings|Every project can make deployments to environments either via CI/CD or API calls. Non-project members have read-only access."
+msgstr ""
+
 msgid "ProjectSettings|Everyone"
 msgstr ""
 
diff --git a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
index 85660d09baa93db7e369bdd8b3b30d9c3b313a03..f908508c4b5d3d9b8b278f5eee5e48ecedbf9e6c 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
@@ -127,6 +127,7 @@ describe('Settings Panel', () => {
   const findOperationsVisibilityInput = () =>
     findOperationsSettings().findComponent(ProjectFeatureSetting);
   const findConfirmDangerButton = () => wrapper.findComponent(ConfirmDanger);
+  const findEnvironmentsSettings = () => wrapper.findComponent({ ref: 'environments-settings' });
 
   afterEach(() => {
     wrapper.destroy();
@@ -786,4 +787,23 @@ describe('Settings Panel', () => {
       expect(findOperationsSettings().exists()).toBe(true);
     });
   });
+
+  describe('Environments', () => {
+    describe('with feature flag', () => {
+      it('should show the environments toggle', () => {
+        wrapper = mountComponent({
+          glFeatures: { splitOperationsVisibilityPermissions: true },
+        });
+
+        expect(findEnvironmentsSettings().exists()).toBe(true);
+      });
+    });
+    describe('without feature flag', () => {
+      it('should not show the environments toggle', () => {
+        wrapper = mountComponent({});
+
+        expect(findEnvironmentsSettings().exists()).toBe(false);
+      });
+    });
+  });
 });