diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
index 2b85a787c933a9ff3488277dbe29a7aaf1bef9c7..01af0be20db50cfb002234cf3b9fc05c8afdc84f 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
@@ -1,12 +1,19 @@
 <script>
 import { GlButton, GlCard, GlTable, GlLoadingIcon, GlKeysetPagination } from '@gitlab/ui';
 import packagesProtectionRuleQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_protection_rules.query.graphql';
+import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils';
 import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
 import PackagesProtectionRuleForm from '~/packages_and_registries/settings/project/components/packages_protection_rule_form.vue';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 const PAGINATION_DEFAULT_PER_PAGE = 10;
 
+const ACCESS_LEVEL_GRAPHQL_VALUE_TO_LABEL = {
+  DEVELOPER: __('Developer'),
+  MAINTAINER: __('Maintainer'),
+  OWNER: __('Owner'),
+};
+
 export default {
   components: {
     SettingsBlock,
@@ -38,9 +45,11 @@ export default {
       return this.packageProtectionRulesQueryResult.map((packagesProtectionRule) => {
         return {
           col_1_package_name_pattern: packagesProtectionRule.packageNamePattern,
-          col_2_package_type: packagesProtectionRule.packageType,
+          col_2_package_type: getPackageTypeLabel(packagesProtectionRule.packageType),
           col_3_push_protected_up_to_access_level:
-            packagesProtectionRule.pushProtectedUpToAccessLevel,
+            ACCESS_LEVEL_GRAPHQL_VALUE_TO_LABEL[
+              packagesProtectionRule.pushProtectedUpToAccessLevel
+            ],
         };
       });
     },
@@ -91,7 +100,6 @@ export default {
         first: PAGINATION_DEFAULT_PER_PAGE,
       };
     },
-
     onPrevPage() {
       this.packageProtectionRulesQueryPaginationParams = {
         before: this.packageProtectionRulesQueryPageInfo.startCursor,
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
index 507711a0764c4e67cac4d4091368855185377dea..8a2a17176b0d74deb611f9a9ed4843c04d97c887 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
@@ -71,8 +71,8 @@ describe('Packages protection rules project settings', () => {
       packagesProtectionRuleQueryPayload().data.project.packagesProtectionRules.nodes.forEach(
         (protectionRule, i) => {
           expect(findTableRow(i).text()).toContain(protectionRule.packageNamePattern);
-          expect(findTableRow(i).text()).toContain(protectionRule.packageType);
-          expect(findTableRow(i).text()).toContain(protectionRule.pushProtectedUpToAccessLevel);
+          expect(findTableRow(i).text()).toContain('npm');
+          expect(findTableRow(i).text()).toContain('Maintainer');
         },
       );
     });