diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
index a4069ee5f3e329744adb79256b7baf97c8598c13..7753b850744c2bfc207e242cb5efb1c1a2d32045 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective, GlCard, GlIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import branchRulesQuery from 'ee_else_ce/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
 import { expandSection } from '~/settings_panels';
@@ -14,6 +14,8 @@ export default {
     BranchRule,
     GlButton,
     GlModal,
+    GlCard,
+    GlIcon,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -55,29 +57,47 @@ export default {
 </script>
 
 <template>
-  <div class="settings-content gl-mb-0">
-    <branch-rule
-      v-for="(rule, index) in branchRules"
-      :key="`${rule.name}-${index}`"
-      :name="rule.name"
-      :is-default="rule.isDefault"
-      :branch-protection="rule.branchProtection"
-      :status-checks-total="rule.externalStatusChecks ? rule.externalStatusChecks.nodes.length : 0"
-      :approval-rules-total="rule.approvalRules ? rule.approvalRules.nodes.length : 0"
-      :matching-branches-count="rule.matchingBranchesCount"
-    />
-
-    <div v-if="!branchRules.length" data-testid="empty">{{ $options.i18n.emptyState }}</div>
-
-    <gl-button
-      v-gl-modal="$options.modalId"
-      class="gl-mt-5"
-      data-qa-selector="add_branch_rule_button"
-      category="secondary"
-      variant="confirm"
-      >{{ $options.i18n.addBranchRule }}</gl-button
-    >
-
+  <gl-card
+    class="gl-new-card gl-overflow-hidden"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-px-0"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper" data-testid="title">
+        <h3 class="gl-new-card-title">
+          {{ __('Branch Rules') }}
+        </h3>
+        <div class="gl-new-card-count">
+          <gl-icon name="branch" class="gl-mr-2" />
+          {{ branchRules.length }}
+        </div>
+      </div>
+      <gl-button
+        v-gl-modal="$options.modalId"
+        size="small"
+        class="gl-ml-3"
+        data-qa-selector="add_branch_rule_button"
+        >{{ $options.i18n.addBranchRule }}</gl-button
+      >
+    </template>
+    <ul class="content-list">
+      <branch-rule
+        v-for="(rule, index) in branchRules"
+        :key="`${rule.name}-${index}`"
+        :name="rule.name"
+        :is-default="rule.isDefault"
+        :branch-protection="rule.branchProtection"
+        :status-checks-total="
+          rule.externalStatusChecks ? rule.externalStatusChecks.nodes.length : 0
+        "
+        :approval-rules-total="rule.approvalRules ? rule.approvalRules.nodes.length : 0"
+        :matching-branches-count="rule.matchingBranchesCount"
+        class="gl-px-5! gl-py-4!"
+      />
+      <div v-if="!branchRules.length" class="gl-new-card-empty gl-px-5 gl-py-4" data-testid="empty">
+        {{ $options.i18n.emptyState }}
+      </div>
+    </ul>
     <gl-modal
       :ref="$options.modalId"
       :modal-id="$options.modalId"
@@ -88,5 +108,5 @@ export default {
       <p>{{ $options.i18n.branchRuleModalDescription }}</p>
       <p>{{ $options.i18n.branchRuleModalContent }}</p>
     </gl-modal>
-  </div>
+  </gl-card>
 </template>
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
index a5ff478a826448f39085923de3a1dcf64b64eb1e..f45a5b12db680cf049a172c666574c951f5d4242 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
@@ -6,7 +6,7 @@ import { getAccessLevels } from '../../../utils';
 export const i18n = {
   defaultLabel: s__('BranchRules|default'),
   protectedLabel: s__('BranchRules|protected'),
-  detailsButtonLabel: s__('BranchRules|Details'),
+  detailsButtonLabel: s__('BranchRules|View details'),
   allowForcePush: s__('BranchRules|Allowed to force push'),
   codeOwnerApprovalRequired: s__('BranchRules|Requires CODEOWNERS approval'),
   statusChecks: s__('BranchRules|%{total} status %{subject}'),
@@ -153,28 +153,36 @@ export default {
 </script>
 
 <template>
-  <div
-    class="gl-border-b gl-pt-5 gl-pb-5 gl-display-flex gl-justify-content-space-between"
-    data-qa-selector="branch_content"
-    :data-qa-branch-name="name"
-  >
-    <div>
-      <strong class="gl-font-monospace">{{ name }}</strong>
+  <li>
+    <div
+      class="gl-display-flex gl-justify-content-space-between"
+      data-qa-selector="branch_content"
+      :data-qa-branch-name="name"
+    >
+      <div>
+        <strong class="gl-font-monospace">{{ name }}</strong>
 
-      <gl-badge v-if="isDefault" variant="info" size="sm" class="gl-ml-2">{{
-        $options.i18n.defaultLabel
-      }}</gl-badge>
+        <gl-badge v-if="isDefault" variant="info" size="sm" class="gl-ml-2">{{
+          $options.i18n.defaultLabel
+        }}</gl-badge>
 
-      <gl-badge v-if="isProtected" variant="success" size="sm" class="gl-ml-2">{{
-        $options.i18n.protectedLabel
-      }}</gl-badge>
+        <gl-badge v-if="isProtected" variant="success" size="sm" class="gl-ml-2">{{
+          $options.i18n.protectedLabel
+        }}</gl-badge>
 
-      <ul v-if="hasApprovalDetails" class="gl-pl-6 gl-mt-2 gl-mb-0 gl-text-gray-500">
-        <li v-for="(detail, index) in approvalDetails" :key="index">{{ detail }}</li>
-      </ul>
+        <ul v-if="hasApprovalDetails" class="gl-pl-6 gl-mt-2 gl-mb-0 gl-text-gray-500">
+          <li v-for="(detail, index) in approvalDetails" :key="index">{{ detail }}</li>
+        </ul>
+      </div>
+      <gl-button
+        class="gl-align-self-start"
+        category="tertiary"
+        size="small"
+        data-qa-selector="details_button"
+        :href="detailsPath"
+      >
+        {{ $options.i18n.detailsButtonLabel }}</gl-button
+      >
     </div>
-    <gl-button class="gl-align-self-start" data-qa-selector="details_button" :href="detailsPath">
-      {{ $options.i18n.detailsButtonLabel }}</gl-button
-    >
-  </div>
+  </li>
 </template>
diff --git a/app/views/projects/branch_rules/_show.html.haml b/app/views/projects/branch_rules/_show.html.haml
index 605715e2899aa42c281bdc72d0577a16ce0e27b3..ed7561122c07f437661c0eafba34cedeb3d54e77 100644
--- a/app/views/projects/branch_rules/_show.html.haml
+++ b/app/views/projects/branch_rules/_show.html.haml
@@ -12,5 +12,5 @@
       = _('Define rules for who can push, merge, and the required approvals for each branch.')
       = link_to(_('Leave feedback.'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/388149', target: '_blank', rel: 'noopener noreferrer')
 
-  .settings-content.gl-pr-0
+  .settings-content
     #js-branch-rules{ data: { project_path: @project.full_path, branch_rules_path: project_settings_repository_branch_rules_path(@project), show_code_owners: show_code_owners.to_s, show_status_checks: show_status_checks.to_s, show_approvers: show_approvers.to_s } }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 80ff5f27fabf417ab33db5f0765d32f94fa5f5da..0297a09eb8b434ff0699d5a1829d134d84e99788 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8133,6 +8133,9 @@ msgstr ""
 msgid "Branch %{branch_name} was created. To set up auto deploy, choose a GitLab CI Yaml template and commit your changes. %{link_to_autodeploy_doc}"
 msgstr ""
 
+msgid "Branch Rules"
+msgstr ""
+
 msgid "Branch already exists"
 msgstr ""
 
@@ -8238,9 +8241,6 @@ msgstr ""
 msgid "BranchRules|Create wildcard: %{searchTerm}"
 msgstr ""
 
-msgid "BranchRules|Details"
-msgstr ""
-
 msgid "BranchRules|Does not allow force push"
 msgstr ""
 
@@ -8310,6 +8310,9 @@ msgstr ""
 msgid "BranchRules|Users"
 msgstr ""
 
+msgid "BranchRules|View details"
+msgstr ""
+
 msgid "BranchRules|default"
 msgstr ""