diff --git a/ee/app/assets/javascripts/ci/secrets/components/secrets_table/secrets_table.vue b/ee/app/assets/javascripts/ci/secrets/components/secrets_table/secrets_table.vue
index a878c3b2a754011ee5284812322cbb02d7eb2124..26ee873ec83a593bac89b3af3253d89aa18f42c3 100644
--- a/ee/app/assets/javascripts/ci/secrets/components/secrets_table/secrets_table.vue
+++ b/ee/app/assets/javascripts/ci/secrets/components/secrets_table/secrets_table.vue
@@ -1,10 +1,11 @@
 <script>
 import { GlButton, GlCard, GlTableLite, GlSprintf, GlLabel, GlPagination } from '@gitlab/ui';
 import { updateHistory, getParameterByName, setUrlParams } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserDate from '~/vue_shared/components/user_date.vue';
 import { LONG_DATE_FORMAT_WITH_TZ } from '~/vue_shared/constants';
+import { convertEnvironmentScope } from '~/ci/common/private/ci_environments_dropdown';
 import getSecretsQuery from '../../graphql/queries/client/get_secrets.query.graphql';
 import {
   NEW_ROUTE_NAME,
@@ -96,6 +97,10 @@ export default {
     getLabelBackgroundColor(label) {
       return this.isScopedLabel(label) ? SCOPED_LABEL_COLOR : UNSCOPED_LABEL_COLOR;
     },
+    environmentLabelText(environment) {
+      const environmentText = convertEnvironmentScope(environment);
+      return `${__('env')}::${environmentText}`;
+    },
     updateQueryParamsFromUrl() {
       this.page = Number(getParameterByName('page')) || INITIAL_PAGE;
     },
@@ -128,6 +133,7 @@ export default {
   LONG_DATE_FORMAT_WITH_TZ,
   NEW_ROUTE_NAME,
   PAGE_SIZE,
+  SCOPED_LABEL_COLOR,
 };
 </script>
 <template>
@@ -162,10 +168,15 @@ export default {
         </div>
       </template>
       <gl-table-lite :fields="$options.fields" :items="secretsNodes" stacked="md" class="gl-mb-0">
-        <template #cell(name)="{ item: { id, name, labels } }">
+        <template #cell(name)="{ item: { id, name, labels, environment } }">
           <router-link data-testid="secret-details-link" :to="getDetailsRoute(id)" class="gl-block">
             {{ name }}
           </router-link>
+          <gl-label
+            :title="environmentLabelText(environment)"
+            :background-color="$options.SCOPED_LABEL_COLOR"
+            scoped
+          />
           <gl-label
             v-for="label in labels"
             :key="label"
diff --git a/ee/app/assets/javascripts/ci/secrets/graphql/queries/client/get_secrets.query.graphql b/ee/app/assets/javascripts/ci/secrets/graphql/queries/client/get_secrets.query.graphql
index 8dae58ee84197f42a62b977b4f9791035d203a7c..edde16ee89201f1db25f9a78f2afff8cf909cb1b 100644
--- a/ee/app/assets/javascripts/ci/secrets/graphql/queries/client/get_secrets.query.graphql
+++ b/ee/app/assets/javascripts/ci/secrets/graphql/queries/client/get_secrets.query.graphql
@@ -6,6 +6,7 @@ query getSecrets($fullPath: ID!, $isGroup: Boolean = false, $offset: Int, $limit
       count
       nodes {
         id
+        environment
         key
         name
         labels
@@ -21,6 +22,7 @@ query getSecrets($fullPath: ID!, $isGroup: Boolean = false, $offset: Int, $limit
       count
       nodes {
         id
+        environment
         key
         name
         labels
diff --git a/ee/spec/frontend/ci/secrets/components/secrets_table/secrets_table_spec.js b/ee/spec/frontend/ci/secrets/components/secrets_table/secrets_table_spec.js
index 8d11b22708c7554bd313a2d870f3eb1bd444e0e5..5591611688ad922b6096ad0e10e66f7c52943a36 100644
--- a/ee/spec/frontend/ci/secrets/components/secrets_table/secrets_table_spec.js
+++ b/ee/spec/frontend/ci/secrets/components/secrets_table/secrets_table_spec.js
@@ -111,7 +111,7 @@ describe('SecretsTable component', () => {
 
     it.each([0, 0])('shows the labels for a secret', (labelIndex) => {
       expect(findSecretLabels().at(labelIndex).props()).toMatchObject({
-        title: secret.labels[labelIndex],
+        title: 'env::production',
       });
     });