diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
index cc138ddcaf9523c1fd0038a126a5a927107d51bf..c185b6edb3af3af9f8a7fd07937e6c109d53a3a7 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
@@ -111,17 +111,22 @@ export default {
         };
       },
       update({ project: { branchRules, group } }) {
-        const branchRule = branchRules.nodes.find((rule) => rule.name === this.branch);
-        this.branchRule = branchRule;
-        this.branchProtection = branchRule?.branchProtection;
-        this.statusChecks = branchRule?.externalStatusChecks?.nodes || [];
-        this.matchingBranchesCount = branchRule?.matchingBranchesCount;
+        const projectBranchRule = branchRules.nodes.find(
+          (rule) => rule.name === this.branch && !rule.branchProtection?.isGroupLevel,
+        );
+
+        this.branchRule = projectBranchRule;
+        this.branchProtection = projectBranchRule?.branchProtection;
+        this.statusChecks = projectBranchRule?.externalStatusChecks?.nodes || [];
+        this.matchingBranchesCount = projectBranchRule?.matchingBranchesCount;
         this.groupId = getIdFromGraphQLId(group?.id) || null;
+
         if (!this.showApprovers) return;
         // The approval rules app uses a separate endpoint to fetch the list of approval rules.
         // In future, we will update the GraphQL request to include the approval rules data.
         // Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/452330
-        const approvalRules = branchRule?.approvalRules?.nodes.map((rule) => rule.name) || [];
+        const approvalRules =
+          projectBranchRule?.approvalRules?.nodes.map((rule) => rule.name) || [];
         this.setRulesFilter(approvalRules);
         this.fetchRules();
       },
@@ -471,7 +476,9 @@ export default {
     </page-heading>
 
     <gl-loading-icon v-if="$apollo.loading" size="lg" />
-    <div v-else-if="!branchRule && !isPredefinedRule">{{ $options.i18n.noData }}</div>
+    <div v-else-if="!branchRule && !isPredefinedRule">
+      {{ $options.i18n.noData }}
+    </div>
     <div v-else>
       <access-levels-drawer
         :is-open="isAllowedToMergeDrawerOpen || isAllowedToPushAndMergeDrawerOpen"
diff --git a/ee/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js b/ee/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
index 41582243aa6ceb48aee04f44182f4c157ee63a89..c93f31da7e194cdcca27331560e22962c39c7a8c 100644
--- a/ee/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
+++ b/ee/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
@@ -310,18 +310,13 @@ describe('View branch rules in enterprise edition', () => {
       await createComponent({ editBranchRules: true }, { showCodeOwners: true }, mockResponse);
     });
 
-    it('does not render delete rule button', () => {
+    it('filters out a group level rule from display and renders empty state', () => {
+      expect(wrapper.text()).toBe('No data to display');
       expect(findDeleteRuleButton().exists()).toBe(false);
-    });
-
-    it('passes isGroupLevel prop to protection components', () => {
-      expect(findAllowedToMerge().props('isGroupLevel')).toBe(true);
-      expect(findAllowedToPush().props('isGroupLevel')).toBe(true);
-      expect(findAllowForcePushToggle().props('isGroupLevel')).toBe(true);
-    });
-
-    it('passes isGroupLevel prop to code owners protection toggle component', () => {
-      expect(findCodeOwnersToggle().props('isGroupLevel')).toBe(true);
+      expect(findAllowedToMerge().exists()).toBe(false);
+      expect(findAllowedToPush().exists()).toBe(false);
+      expect(findAllowForcePushToggle().exists()).toBe(false);
+      expect(findCodeOwnersToggle().exists()).toBe(false);
     });
   });
 });