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 7d9ad83a1c6b0762638d03760e9f60d484a311fe..cb6bea76762a13b406c7e60564747ecb27b4e3c7 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
@@ -1,9 +1,20 @@
 <script>
-import { GlButton, GlModal, GlModalDirective, GlCard, GlIcon } from '@gitlab/ui';
+import {
+  GlButton,
+  GlModal,
+  GlModalDirective,
+  GlCard,
+  GlIcon,
+  GlDisclosureDropdown,
+  GlCollapsibleListbox,
+  GlFormGroup,
+} 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 glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { expandSection } from '~/settings_panels';
 import { scrollToElement } from '~/lib/utils/common_utils';
+import createBranchRuleMutation from './graphql/mutations/create_branch_rule.mutation.graphql';
 import BranchRule from './components/branch_rule.vue';
 import { I18N, PROTECTED_BRANCHES_ANCHOR, BRANCH_PROTECTION_MODAL_ID } from './constants';
 
@@ -14,12 +25,16 @@ export default {
     BranchRule,
     GlButton,
     GlModal,
+    GlFormGroup,
     GlCard,
     GlIcon,
+    GlCollapsibleListbox,
+    GlDisclosureDropdown,
   },
   directives: {
     GlModal: GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   apollo: {
     branchRules: {
       query: branchRulesQuery,
@@ -38,18 +53,87 @@ export default {
   },
   inject: {
     projectPath: { default: '' },
+    branchRulesPath: { default: '' },
   },
   data() {
     return {
       branchRules: [],
+      branchRuleName: '',
+      searchQuery: '',
     };
   },
+  computed: {
+    addRuleItems() {
+      return [{ text: this.$options.i18n.branchName, action: () => this.openCreateRuleModal() }];
+    },
+    createRuleItems() {
+      return this.isWildcardAvailable ? [this.wildcardItem] : this.filteredOpenBranches;
+    },
+    filteredOpenBranches() {
+      const openBranches = window.gon.open_branches.map((item) => ({
+        text: item.text,
+        value: item.text,
+      }));
+      return openBranches.filter((item) => item.text.includes(this.searchQuery));
+    },
+    wildcardItem() {
+      return { text: this.$options.i18n.createWildcard, value: this.searchQuery };
+    },
+    isWildcardAvailable() {
+      return this.searchQuery.includes('*');
+    },
+    createRuleText() {
+      return this.branchRuleName || this.$options.i18n.branchNamePlaceholder;
+    },
+    branchRuleEditPath() {
+      return `${this.branchRulesPath}?branch=${encodeURIComponent(this.branchRuleName)}`;
+    },
+    primaryProps() {
+      return {
+        text: this.$options.i18n.createProtectedBranch,
+        attributes: {
+          variant: 'confirm',
+          disabled: !this.branchRuleName,
+        },
+      };
+    },
+    cancelProps() {
+      return {
+        text: this.$options.i18n.createBranchRule,
+      };
+    },
+  },
   methods: {
     showProtectedBranches() {
       // Protected branches section is on the same page as the branch rules section.
       expandSection(this.$options.protectedBranchesAnchor);
       scrollToElement(this.$options.protectedBranchesAnchor);
     },
+    openCreateRuleModal() {
+      this.$refs[this.$options.modalId].show();
+    },
+    handleBranchRuleSearch(query) {
+      this.searchQuery = query;
+    },
+    addBranchRule() {
+      this.$apollo
+        .mutate({
+          mutation: createBranchRuleMutation,
+          variables: {
+            projectPath: this.projectPath,
+            name: this.branchRuleName,
+          },
+        })
+        .then(() => {
+          window.location.assign(this.branchRuleEditPath);
+        })
+        .catch(() => {
+          createAlert({ message: this.$options.i18n.createBranchRuleError });
+        });
+    },
+    selectBranchRuleName(branchName) {
+      this.branchRuleName = branchName;
+    },
   },
   modalId: BRANCH_PROTECTION_MODAL_ID,
   protectedBranchesAnchor: PROTECTED_BRANCHES_ANCHOR,
@@ -72,7 +156,15 @@ export default {
           {{ branchRules.length }}
         </div>
       </div>
+      <gl-disclosure-dropdown
+        v-if="glFeatures.addBranchRule"
+        :toggle-text="$options.i18n.addBranchRule"
+        :items="addRuleItems"
+        size="small"
+        no-caret
+      />
       <gl-button
+        v-else
         v-gl-modal="$options.modalId"
         size="small"
         class="gl-ml-3"
@@ -99,6 +191,37 @@ export default {
       </div>
     </ul>
     <gl-modal
+      v-if="glFeatures.addBranchRule"
+      :ref="$options.modalId"
+      :modal-id="$options.modalId"
+      :title="$options.i18n.createBranchRule"
+      :action-primary="primaryProps"
+      :action-cancel="cancelProps"
+      @primary="addBranchRule"
+      @change="searchQuery = ''"
+    >
+      <gl-form-group
+        :label="$options.i18n.branchName"
+        :description="$options.i18n.branchNameDescription"
+      >
+        <gl-collapsible-listbox
+          v-model="branchRuleName"
+          searchable
+          :items="createRuleItems"
+          :toggle-text="createRuleText"
+          block
+          @search="handleBranchRuleSearch"
+          @select="selectBranchRuleName"
+        >
+          <template v-if="isWildcardAvailable" #list-item="{ item }">
+            {{ item.text }}
+            <code>{{ searchQuery }}</code>
+          </template>
+        </gl-collapsible-listbox>
+      </gl-form-group>
+    </gl-modal>
+    <gl-modal
+      v-else
       :ref="$options.modalId"
       :modal-id="$options.modalId"
       :title="$options.i18n.addBranchRule"
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js b/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js
index 4413d8eab4ea2467e609f4463d3fb689b4a12f25..d16894e7d6f2a207d19cdd2460a2fca8dc92baab 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js
@@ -15,6 +15,16 @@ export const I18N = {
     'BranchRules|After a protected branch is created, it will show up in the list as a branch rule.',
   ),
   createProtectedBranch: s__('BranchRules|Create protected branch'),
+  createBranchRule: s__('BranchRules|Create branch rule'),
+  branchName: s__('BranchRules|Branch name or pattern'),
+  branchNamePlaceholder: s__('BranchRules|Select Branch or create wildcard'),
+  branchNameDescription: s__(
+    'BranchRules|Wildcards such as *-stable or production/* are supported',
+  ),
+  createBranchRuleError: s__('BranchRules|Something went wrong while creating branch rule.'),
+  createBranchRuleSuccess: s__('BranchRules|Branch rule created.'),
+  createWildcard: s__('BranchRules|Create wildcard'),
+  cancel: s__('BranchRules|Cancel'),
 };
 
 export const PROTECTED_BRANCHES_ANCHOR = '#js-protected-branches-settings';
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql b/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..e5fb79e0176219bc355e47856ab42557a285328c
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql
@@ -0,0 +1,8 @@
+mutation createBranchRule($projectPath: ID!, $name: String!) {
+  branchRuleCreate(input: { projectPath: $projectPath, name: $name }) {
+    errors
+    branchRule {
+      name
+    }
+  }
+}
diff --git a/app/controllers/projects/settings/repository_controller.rb b/app/controllers/projects/settings/repository_controller.rb
index 38b23b24c9ab98c010a621b313d3fa187310c65a..6a10d603ad7bedf403860a2416dda918b5eeb0fe 100644
--- a/app/controllers/projects/settings/repository_controller.rb
+++ b/app/controllers/projects/settings/repository_controller.rb
@@ -7,6 +7,10 @@ class RepositoryController < Projects::ApplicationController
       before_action :authorize_admin_project!
       before_action :define_variables, only: [:create_deploy_token]
 
+      before_action do
+        push_frontend_feature_flag(:add_branch_rule, @project)
+      end
+
       feature_category :source_code_management, [:show, :cleanup, :update]
       feature_category :continuous_delivery, [:create_deploy_token]
       urgency :low, [:show, :create_deploy_token]
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index fa1d693205d3ff9b85451907711db924b777aa77..d4b77c588dcf682c093ea1faeddddc95c9e60b6d 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -44,6 +44,7 @@ class ProjectsController < Projects::ApplicationController
     push_frontend_feature_flag(:explain_code_chat, current_user)
     push_frontend_feature_flag(:issue_email_participants, @project)
     push_frontend_feature_flag(:encoding_logs_tree)
+    push_frontend_feature_flag(:add_branch_rule, @project)
     # TODO: We need to remove the FF eventually when we rollout page_specific_styles
     push_frontend_feature_flag(:page_specific_styles, current_user)
     push_licensed_feature(:file_locks) if @project.present? && @project.licensed_feature_available?(:file_locks)
diff --git a/config/feature_flags/development/add_branch_rule.yml b/config/feature_flags/development/add_branch_rule.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bdbd8d58c71aaffad0e4148dd85c8c2af0443b6c
--- /dev/null
+++ b/config/feature_flags/development/add_branch_rule.yml
@@ -0,0 +1,8 @@
+---
+name: add_branch_rule
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/issues/435948
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/437003
+milestone: '16.8'
+type: development
+group: group::source code
+default_enabled: false
diff --git a/ee/spec/frontend/projects/settings/repository/branch_rules/mock_data.js b/ee/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
index c82942fa76f0eaf86acde3140c7214ba8da02e61..94b146ecc2709ec3a5c685a3b7c7a0f351710daf 100644
--- a/ee/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
+++ b/ee/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
@@ -92,12 +92,26 @@ export const branchRulesMockResponse = {
 
 export const appProvideMock = {
   projectPath: 'some/project/path',
+  branchRulesPath: 'settings/repository/branch_rules',
 };
 
 export const branchRuleProvideMock = {
   branchRulesPath: 'settings/repository/branch_rules',
 };
 
+export const createBranchRuleMockResponse = {
+  data: {
+    branchRuleCreate: {
+      errors: [],
+      branchRule: {
+        name: '*dkd',
+        __typename: 'BranchRule',
+      },
+      __typename: 'BranchRuleCreatePayload',
+    },
+  },
+};
+
 export const branchRulePropsMock = {
   name: 'main',
   isDefault: true,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c511d6bd5b59f30cb07ff4d1768a2850d88c28e3..3ca62d2bf16eadfee2c26f286d38d6a47e4784ff 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8663,15 +8663,27 @@ msgstr ""
 msgid "BranchRules|Branch name or pattern"
 msgstr ""
 
+msgid "BranchRules|Branch rule created."
+msgstr ""
+
 msgid "BranchRules|Branch rules details"
 msgstr ""
 
+msgid "BranchRules|Cancel"
+msgstr ""
+
 msgid "BranchRules|Check for a status response in merge requests. Failures do not block merges. %{linkStart}Learn more.%{linkEnd}"
 msgstr ""
 
+msgid "BranchRules|Create branch rule"
+msgstr ""
+
 msgid "BranchRules|Create protected branch"
 msgstr ""
 
+msgid "BranchRules|Create wildcard"
+msgstr ""
+
 msgid "BranchRules|Create wildcard: %{searchTerm}"
 msgstr ""
 
@@ -8729,6 +8741,12 @@ msgstr ""
 msgid "BranchRules|Roles"
 msgstr ""
 
+msgid "BranchRules|Select Branch or create wildcard"
+msgstr ""
+
+msgid "BranchRules|Something went wrong while creating branch rule."
+msgstr ""
+
 msgid "BranchRules|Status checks"
 msgstr ""
 
@@ -8747,6 +8765,9 @@ msgstr ""
 msgid "BranchRules|View details"
 msgstr ""
 
+msgid "BranchRules|Wildcards such as *-stable or production/* are supported"
+msgstr ""
+
 msgid "BranchRules|default"
 msgstr ""
 
diff --git a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
index dd534bec25dbc159a1cd610d91cd82228a8d7491..e86759ec6ca051dee937e4ff619e920bf3f8ef64 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
@@ -1,16 +1,21 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlCollapsibleListbox, GlDisclosureDropdown } from '@gitlab/ui';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BranchRules from '~/projects/settings/repository/branch_rules/app.vue';
 import BranchRule from '~/projects/settings/repository/branch_rules/components/branch_rule.vue';
 import branchRulesQuery from 'ee_else_ce/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
+import createBranchRuleMutation from '~/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql';
+
 import { createAlert } from '~/alert';
 import {
   branchRulesMockResponse,
   appProvideMock,
+  createBranchRuleMockResponse,
 } from 'ee_else_ce_jest/projects/settings/repository/branch_rules/mock_data';
 import {
   I18N,
@@ -31,16 +36,33 @@ Vue.use(VueApollo);
 describe('Branch rules app', () => {
   let wrapper;
   let fakeApollo;
-
+  const openBranches = [
+    { text: 'branch1', id: 'branch1', title: 'branch1' },
+    { text: 'branch2', id: 'branch2', title: 'branch2' },
+  ];
   const branchRulesQuerySuccessHandler = jest.fn().mockResolvedValue(branchRulesMockResponse);
-
-  const createComponent = async ({ queryHandler = branchRulesQuerySuccessHandler } = {}) => {
-    fakeApollo = createMockApollo([[branchRulesQuery, queryHandler]]);
+  const addRuleMutationSuccessHandler = jest.fn().mockResolvedValue(createBranchRuleMockResponse);
+
+  const createComponent = async ({
+    glFeatures = { addBranchRule: true },
+    queryHandler = branchRulesQuerySuccessHandler,
+    mutationHandler = addRuleMutationSuccessHandler,
+  } = {}) => {
+    fakeApollo = createMockApollo([
+      [branchRulesQuery, queryHandler],
+      [createBranchRuleMutation, mutationHandler],
+    ]);
 
     wrapper = mountExtended(BranchRules, {
       apolloProvider: fakeApollo,
-      provide: appProvideMock,
-      stubs: { GlModal: stubComponent(GlModal, { template: RENDER_ALL_SLOTS_TEMPLATE }) },
+      provide: {
+        ...appProvideMock,
+        glFeatures,
+      },
+      stubs: {
+        GlDisclosureDropdown,
+        GlModal: stubComponent(GlModal, { template: RENDER_ALL_SLOTS_TEMPLATE }),
+      },
       directives: { GlModal: createMockDirective('gl-modal') },
     });
 
@@ -51,9 +73,32 @@ describe('Branch rules app', () => {
   const findEmptyState = () => wrapper.findByTestId('empty');
   const findAddBranchRuleButton = () => wrapper.findByRole('button', I18N.addBranchRule);
   const findModal = () => wrapper.findComponent(GlModal);
+  const findAddBranchRuleDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findCreateBranchRuleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
+
+  beforeEach(() => {
+    window.gon = {
+      open_branches: openBranches,
+    };
+    setWindowLocation(TEST_HOST);
+  });
 
   beforeEach(() => createComponent());
 
+  it('renders branch rules', () => {
+    const { nodes } = branchRulesMockResponse.data.project.branchRules;
+
+    expect(findAllBranchRules().length).toBe(nodes.length);
+
+    expect(findAllBranchRules().at(0).props('name')).toBe(nodes[0].name);
+
+    expect(findAllBranchRules().at(0).props('branchProtection')).toEqual(nodes[0].branchProtection);
+
+    expect(findAllBranchRules().at(1).props('name')).toBe(nodes[1].name);
+
+    expect(findAllBranchRules().at(1).props('branchProtection')).toEqual(nodes[1].branchProtection);
+  });
+
   it('displays an error if branch rules query fails', async () => {
     await createComponent({ queryHandler: jest.fn().mockRejectedValue() });
     expect(createAlert).toHaveBeenCalledWith({ message: I18N.queryError });
@@ -64,21 +109,65 @@ describe('Branch rules app', () => {
     expect(findEmptyState().text()).toBe(I18N.emptyState);
   });
 
-  it('renders branch rules', () => {
-    const { nodes } = branchRulesMockResponse.data.project.branchRules;
-
-    expect(findAllBranchRules().length).toBe(nodes.length);
+  describe('Add branch rule', () => {
+    it('renders an Add branch rule dropdown', () => {
+      expect(findAddBranchRuleDropdown().props('toggleText')).toBe('Add branch rule');
+    });
 
-    expect(findAllBranchRules().at(0).props('name')).toBe(nodes[0].name);
+    it('renders a modal with correct props/attributes', () => {
+      expect(findModal().props()).toMatchObject({
+        title: I18N.createBranchRule,
+        modalId: BRANCH_PROTECTION_MODAL_ID,
+        actionCancel: {
+          text: 'Create branch rule',
+        },
+        actionPrimary: {
+          attributes: {
+            disabled: true,
+            variant: 'confirm',
+          },
+          text: 'Create protected branch',
+        },
+      });
+    });
 
-    expect(findAllBranchRules().at(0).props('branchProtection')).toEqual(nodes[0].branchProtection);
+    it('renders listbox with branch names', () => {
+      expect(findCreateBranchRuleListbox().exists()).toBe(true);
+      expect(findCreateBranchRuleListbox().props('items')).toHaveLength(openBranches.length);
+      expect(findCreateBranchRuleListbox().props('toggleText')).toBe(
+        'Select Branch or create wildcard',
+      );
+    });
 
-    expect(findAllBranchRules().at(1).props('name')).toBe(nodes[1].name);
+    it('when the primary modal action is clicked it calls create rule mutation', async () => {
+      findCreateBranchRuleListbox().vm.$emit('select', openBranches[0].text);
+      await nextTick();
+      findModal().vm.$emit('primary');
+      await nextTick();
+      await nextTick();
+      expect(addRuleMutationSuccessHandler).toHaveBeenCalledWith({
+        name: 'branch1',
+        projectPath: 'some/project/path',
+      });
+    });
 
-    expect(findAllBranchRules().at(1).props('branchProtection')).toEqual(nodes[1].branchProtection);
+    it('shows alert when mutation fails', async () => {
+      createComponent({ mutationHandler: jest.fn().mockRejectedValue() });
+      findCreateBranchRuleListbox().vm.$emit('select', openBranches[0].text);
+      await nextTick();
+      findModal().vm.$emit('primary');
+      await waitForPromises();
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'Something went wrong while creating branch rule.',
+      });
+    });
   });
 
-  describe('Add branch rule', () => {
+  describe('Add branch rule when addBranchRule FF disabled', () => {
+    beforeEach(() => {
+      window.gon.open_branches = openBranches;
+      createComponent({ glFeatures: { addBranchRule: false } });
+    });
     it('renders an Add branch rule button', () => {
       expect(findAddBranchRuleButton().exists()).toBe(true);
     });
diff --git a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
index d169397241d4533da14686fe59eba57b48d045b7..5981647ce38957526378f9db4a16514e1ad16699 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
@@ -65,8 +65,22 @@ export const branchRulesMockResponse = {
   },
 };
 
+export const createBranchRuleMockResponse = {
+  data: {
+    branchRuleCreate: {
+      errors: [],
+      branchRule: {
+        name: '*dkd',
+        __typename: 'BranchRule',
+      },
+      __typename: 'BranchRuleCreatePayload',
+    },
+  },
+};
+
 export const appProvideMock = {
   projectPath: 'some/project/path',
+  branchRulesPath: 'settings/repository/branch_rules',
 };
 
 export const branchRuleProvideMock = {