diff --git a/app/assets/javascripts/work_items/components/work_item_development/work_item_create_branch_merge_request_modal.vue b/app/assets/javascripts/work_items/components/work_item_development/work_item_create_branch_merge_request_modal.vue
index 775a8e51079551d2aa7bf25ddee3acf425e9a142..8805ff1a5878e84ac30bd812ea6b0b2aab28e45e 100644
--- a/app/assets/javascripts/work_items/components/work_item_development/work_item_create_branch_merge_request_modal.vue
+++ b/app/assets/javascripts/work_items/components/work_item_development/work_item_create_branch_merge_request_modal.vue
@@ -1,13 +1,10 @@
 <script>
-import { GlForm, GlFormInput, GlFormInputGroup, GlFormGroup, GlModal } from '@gitlab/ui';
+import { GlForm, GlFormInputGroup, GlFormGroup, GlModal } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import { createAlert } from '~/alert';
-import {
-  NAME_TO_TEXT_LOWERCASE_MAP,
-  WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE,
-  WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_BRANCH,
-} from '~/work_items/constants';
+import { REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants';
+import { NAME_TO_TEXT_LOWERCASE_MAP } from '~/work_items/constants';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { createBranchMRApiPathHelper } from '~/work_items/utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -16,7 +13,7 @@ import {
   humanizeBranchValidationErrors,
 } from '~/lib/utils/text_utility';
 import SimpleCopyButton from '~/vue_shared/components/simple_copy_button.vue';
-
+import RefSelector from '~/ref/components/ref_selector.vue';
 import getProjectRootRef from '~/work_items/graphql/get_project_root_ref.query.graphql';
 import { s__, __, sprintf } from '~/locale';
 import confidentialMergeRequestState from '~/confidential_merge_request/state';
@@ -25,26 +22,24 @@ import ProjectFormGroup from '~/confidential_merge_request/components/project_fo
 export default {
   components: {
     GlForm,
-    GlFormInput,
     GlFormInputGroup,
     GlFormGroup,
     GlModal,
     ProjectFormGroup,
     SimpleCopyButton,
+    RefSelector,
   },
   i18n: {
-    sourceLabel: __('Source (branch or tag)'),
-    branchLabel: __('Branch name'),
+    sourceBranchOrTagLabel: __('Source (branch or tag)'),
+    targetBranchLabel: __('Target branch'),
+    newBranchLabel: __('Branch name'),
+    sourceBranchLabel: __('Source branch name'),
     createBranch: __('Create branch'),
     cancelLabel: __('Cancel'),
     createMergeRequest: __('Create merge request'),
     branchNameExists: __('Branch is already taken'),
-    sourceNotAvailable: __('Source is not available'),
     branchNameAvailable: __('Branch name is available'),
-    sourceIsAvailable: __('Source is available'),
     branchNameIsRequired: __('Branch name is required'),
-    sourceNameIsRequired: __('Source name is required'),
-    checkingSourceValidity: __('Checking source validity'),
     checkingBranchValidity: __('Checking branch validity'),
   },
   createMRModalId: 'create-merge-request-modal',
@@ -88,13 +83,9 @@ export default {
       isLoading: false,
       canCreateBranch: false,
       branchName: '',
-      sourceName: '',
-      invalidSource: false,
+      refName: '',
       invalidBranch: false,
-      invalidForm: false,
-      sourceDescription: '',
       branchDescription: '',
-      checkingSourceValidity: false,
       checkingBranchValidity: false,
       creatingBranch: false,
       defaultBranch: '',
@@ -121,16 +112,27 @@ export default {
     },
   },
   computed: {
+    enabledRefTypes() {
+      return this.showBranchFlow ? [REF_TYPE_BRANCHES, REF_TYPE_TAGS] : [REF_TYPE_BRANCHES];
+    },
+    numericProjectId() {
+      return this.projectId.split('/').at(-1);
+    },
+    refSelectorFieldLabel() {
+      return this.showBranchFlow
+        ? this.$options.i18n.sourceBranchOrTagLabel
+        : this.$options.i18n.targetBranchLabel;
+    },
+    branchNameFieldLabel() {
+      return this.showBranchFlow
+        ? this.$options.i18n.newBranchLabel
+        : this.$options.i18n.sourceBranchLabel;
+    },
     createButtonText() {
       return this.showBranchFlow
         ? this.$options.i18n.createBranch
         : this.$options.i18n.createMergeRequest;
     },
-    sourceFeedback() {
-      return this.sourceName?.length
-        ? this.$options.i18n.sourceNotAvailable
-        : this.$options.i18n.sourceNameIsRequired;
-    },
     branchFeedback() {
       const branchErrors = findInvalidBranchNameCharacters(this.branchName);
       if (!this.branchName.length) {
@@ -146,7 +148,8 @@ export default {
     },
     isSaveButtonDisabled() {
       return (
-        this.invalidForm || (this.isConfidentialWorkItem && !this.canCreateConfidentialMergeRequest)
+        this.invalidBranch ||
+        (this.isConfidentialWorkItem && !this.canCreateConfidentialMergeRequest)
       );
     },
     saveButtonAction() {
@@ -155,8 +158,7 @@ export default {
         attributes: {
           variant: 'confirm',
           disabled: this.isSaveButtonDisabled,
-          loading:
-            this.checkingSourceValidity || this.checkingBranchValidity || this.creatingBranch,
+          loading: this.checkingBranchValidity || this.creatingBranch,
         },
       };
     },
@@ -206,7 +208,7 @@ export default {
       if (this.canCreateBranch) {
         this.branchName = suggested_branch_name;
         /* eslint-enable camelcase */
-        this.sourceName = this.defaultBranch;
+        this.refName = this.defaultBranch;
       }
     },
     async createBranch() {
@@ -226,7 +228,7 @@ export default {
             : null,
           format: 'json',
           issue_iid: this.workItemIid,
-          ref: this.sourceName,
+          ref: this.refName,
         });
 
         this.$toast.show(__('Branch created.'), {
@@ -257,7 +259,7 @@ export default {
           : this.workItemFullPath,
         workItemIid: this.workItemIid,
         sourceBranch: this.branchName,
-        targetBranch: this.sourceName,
+        targetBranch: this.refName,
       });
 
       /** open the merge request once we have it created */
@@ -270,21 +272,14 @@ export default {
         this.createMergeRequest();
       }
     },
-    fetchRefs(refValue, target) {
+    fetchRefs(refValue) {
       if (!refValue || !refValue.trim().length) {
-        this.invalidSource = target === WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE;
-        this.invalidBranch = target === WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_BRANCH;
-        this.invalidForm = true;
+        this.invalidBranch = true;
         return;
       }
 
-      if (target === WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE) {
-        this.checkingSourceValidity = true;
-        this.sourceDescription = __('Checking source validity…');
-      } else {
-        this.checkingBranchValidity = true;
-        this.branchDescription = __('Checking branch validity…');
-      }
+      this.checkingBranchValidity = true;
+      this.branchDescription = __('Checking branch validity…');
 
       this.refCancelToken = axios.CancelToken.source();
 
@@ -300,19 +295,9 @@ export default {
         })
         .then(({ data }) => {
           const branches = data?.Branches || [];
-          const tags = data?.Tags || [];
 
-          if (target === WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE) {
-            this.invalidSource = !(
-              branches.indexOf(refValue) !== -1 || tags.indexOf(refValue) !== -1
-            );
-          } else {
-            this.invalidBranch = Boolean(
-              branches.indexOf(refValue) !== -1 || findInvalidBranchNameCharacters(refValue).length,
-            );
-          }
-
-          this.invalidForm = this.invalidSource || this.invalidBranch;
+          this.invalidBranch =
+            branches.includes(refValue) || findInvalidBranchNameCharacters(refValue).length > 0;
         })
         .catch((thrown) => {
           if (axios.isCancel(thrown)) {
@@ -324,24 +309,19 @@ export default {
           return false;
         })
         .finally(() => {
-          this.checkingSourceValidity = false;
           this.checkingBranchValidity = false;
         });
     },
-    checkValidity: debounce(function debouncedCheckValidity(refValue, target) {
-      return this.fetchRefs(refValue, target);
+    checkBranchValidity: debounce(function debouncedCheckBranchValidity(refValue) {
+      return this.fetchRefs(refValue);
     }, 250),
     hideModal() {
       this.$emit('hideModal');
       this.$nextTick(() => {
         this.invalidBranch = false;
-        this.invalidSource = false;
-        this.invalidForm = false;
       });
     },
   },
-  WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE,
-  WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_BRANCH,
 };
 </script>
 
@@ -366,33 +346,18 @@ export default {
           :help-page-path="$options.mergeRequestHelpPagePath"
           :new-fork-path="newForkPath"
         />
-        <gl-form-group
-          required
-          label-for="source-name-id"
-          :label="$options.i18n.sourceLabel"
-          :description="checkingSourceValidity ? sourceDescription : ''"
-          :invalid-feedback="checkingSourceValidity || isLoading ? '' : sourceFeedback"
-          :valid-feedback="
-            checkingSourceValidity || isLoading ? '' : $options.i18n.sourceIsAvailable
-          "
-          :state="sourceName ? !invalidSource : false"
-        >
-          <gl-form-input
-            id="source-name-id"
-            v-model.trim="sourceName"
-            data-testid="source-name"
-            :state="!invalidSource"
-            required
-            name="source-name"
-            type="text"
-            :disabled="isLoading || creatingBranch"
-            @input="checkValidity($event, $options.WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE)"
+        <gl-form-group label-for="ref-name-id" :label="refSelectorFieldLabel">
+          <ref-selector
+            id="ref-name-id"
+            v-model="refName"
+            :project-id="numericProjectId"
+            :enabled-ref-types="enabledRefTypes"
           />
         </gl-form-group>
         <gl-form-group
           required
           label-for="branch-name-id"
-          :label="$options.i18n.branchLabel"
+          :label="branchNameFieldLabel"
           :description="checkingBranchValidity ? branchDescription : ''"
           :invalid-feedback="checkingBranchValidity || isLoading ? '' : branchFeedback"
           :valid-feedback="
@@ -409,7 +374,7 @@ export default {
             required
             name="branch-name"
             type="text"
-            @input="checkValidity($event, $options.WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_BRANCH)"
+            @input="checkBranchValidity($event)"
           >
             <template #append>
               <simple-copy-button :text="branchName" :title="__('Copy to clipboard')" />
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index ba6e9d3dfafd32daaf307b518c97274692f5e943..93d94a6d5f21b78fe1bcb9ed8a8b768dd971a628 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -251,9 +251,6 @@ export const INJECTION_LINK_CHILD_PREVENT_ROUTER_NAVIGATION = Symbol(
   'injection:prevent-router-navigation',
 );
 
-export const WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_SOURCE = 'source';
-export const WORK_ITEM_CREATE_ENTITY_MODAL_TARGET_BRANCH = 'branch';
-
 export const BASE_ALLOWED_CREATE_TYPES = [
   WORK_ITEM_TYPE_NAME_INCIDENT,
   WORK_ITEM_TYPE_NAME_ISSUE,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 75994af249ee298a4fc212ffbe63bfe8291ce0a3..16ecc27d6b52ce8f8f4b10b653df8a2727f1f4ff 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -14030,12 +14030,6 @@ msgstr ""
 msgid "Checking if merge request can be merged…"
 msgstr ""
 
-msgid "Checking source validity"
-msgstr ""
-
-msgid "Checking source validity…"
-msgstr ""
-
 msgid "Checking username availability…"
 msgstr ""
 
@@ -65561,6 +65555,9 @@ msgstr ""
 msgid "Source branch is protected from force push"
 msgstr ""
 
+msgid "Source branch name"
+msgstr ""
+
 msgid "Source branch will be deleted."
 msgstr ""
 
@@ -65570,18 +65567,12 @@ msgstr ""
 msgid "Source code (%{fileExtension})"
 msgstr ""
 
-msgid "Source is available"
-msgstr ""
-
 msgid "Source is not available"
 msgstr ""
 
 msgid "Source name"
 msgstr ""
 
-msgid "Source name is required"
-msgstr ""
-
 msgid "Source project"
 msgstr ""
 
diff --git a/spec/features/issues/user_creates_branch_and_merge_request_spec.rb b/spec/features/issues/user_creates_branch_and_merge_request_spec.rb
index ef69823d4bf4212005f925582aaa1e3259136f6f..a038ff146eed7d099e4df489a585770a3114d9a1 100644
--- a/spec/features/issues/user_creates_branch_and_merge_request_spec.rb
+++ b/spec/features/issues/user_creates_branch_and_merge_request_spec.rb
@@ -43,13 +43,9 @@
         end
 
         within_modal do
-          expect(page).to have_field('Source (branch or tag)', with: project.default_branch)
+          expect(page).to have_selector('.ref-selector', text: project.default_branch)
           expect(page).to have_field('Branch name', with: issue.to_branch_name)
 
-          fill_in 'Source (branch or tag)', with: 'mas'
-
-          expect(page).to have_text('Source is not available')
-
           fill_in 'Branch name', with: 'new-branch-name'
 
           expect(page).to have_text('Branch name is available')
@@ -98,7 +94,7 @@
           perform_enqueued_jobs do
             click_button 'Create merge request'
             within_modal do
-              fill_in 'Branch name', with: branch_name
+              fill_in 'Source branch name', with: branch_name
               click_button 'Create merge request'
             end
 
@@ -124,15 +120,14 @@
         end
 
         context 'when source branch is non-default' do
-          let(:source_branch) { 'feature' }
-
           it 'creates a branch' do
             within_testid('create-options-dropdown') do
               click_button "More options"
             end
             click_button 'Create branch'
             within_modal do
-              fill_in 'Source (branch or tag)', with: source_branch
+              find('.ref-selector .gl-new-dropdown-toggle').click
+              find('.ref-selector [role="option"]', match: :first).click
               fill_in 'Branch name', with: branch_name
               click_button 'Create branch'
             end
@@ -147,7 +142,7 @@
           it 'has error message' do
             click_button 'Create merge request'
             within_modal do
-              fill_in 'Branch name', with: 'custom-branch-name w~th ^bad chars?'
+              fill_in 'Source branch name', with: 'custom-branch-name w~th ^bad chars?'
             end
 
             expect(page).to have_text("Can't contain spaces, ~, ^, ?")
diff --git a/spec/frontend/work_items/components/work_item_development/work_item_create_branch_merge_request_modal_spec.js b/spec/frontend/work_items/components/work_item_development/work_item_create_branch_merge_request_modal_spec.js
index 93344e5a39267c27fdc3ce12007a234cc73ea1a3..e26cca0c52a1e9078724a65f6f2a2d6a96667d34 100644
--- a/spec/frontend/work_items/components/work_item_development/work_item_create_branch_merge_request_modal_spec.js
+++ b/spec/frontend/work_items/components/work_item_development/work_item_create_branch_merge_request_modal_spec.js
@@ -1,5 +1,5 @@
 import Vue, { nextTick } from 'vue';
-import { GlForm, GlModal } from '@gitlab/ui';
+import { GlForm, GlModal, GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import MockAdapter from 'axios-mock-adapter';
@@ -13,6 +13,7 @@ import getProjectRootRef from '~/work_items/graphql/get_project_root_ref.query.g
 import { createAlert } from '~/alert';
 import { visitUrl } from '~/lib/utils/url_utility';
 import ProjectFormGroup from '~/confidential_merge_request/components/project_form_group.vue';
+import RefSelector from '~/ref/components/ref_selector.vue';
 
 jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -79,6 +80,9 @@ describe('CreateBranchMergeRequestModal', () => {
           show: showToast,
         },
       },
+      stubs: {
+        RefSelector,
+      },
     });
   };
 
@@ -87,7 +91,9 @@ describe('CreateBranchMergeRequestModal', () => {
   const firePrimaryEvent = () => findGlModal().vm.$emit('primary', { preventDefault: jest.fn() });
   const findPrimaryButton = () => findGlModal().props('actionPrimary');
   const findPrivateForksSelector = () => wrapper.findComponent(ProjectFormGroup);
-  const findSourceBranch = () => wrapper.find('[data-testid="source-name"]');
+  const findRefSelector = () => wrapper.findComponent(RefSelector);
+  const findRefSelectorListBox = () =>
+    wrapper.findComponent(RefSelector).findComponent(GlCollapsibleListbox);
   const findTargetBranch = () => wrapper.find('[data-testid="target-name"]');
   const findCopyToClipboardButton = () => wrapper.findComponent(SimpleCopyButton);
 
@@ -106,9 +112,47 @@ describe('CreateBranchMergeRequestModal', () => {
     });
 
     describe('on initialise', () => {
+      beforeEach(() => {
+        const branchesMock = [{ name: 'branch1' }, { name: 'branch2' }];
+        const tagsMock = [{ name: 'tag1' }, { name: 'tag2' }];
+        gon.api_version = 'v4';
+        mock = new MockAdapter(axios);
+
+        mock.onGet('/fullPath/-/issues/1/can_create_branch').reply(HTTP_STATUS_OK, {
+          can_create_branch: true,
+          suggested_branch_name: 'suggested_branch_name#with_hash',
+        });
+        mock
+          .onGet(`/api/v4/projects/2/repository/branches`)
+          .reply(HTTP_STATUS_OK, branchesMock, { 'x-total': 1 });
+        mock
+          .onGet(`/api/v4/projects/2/repository/tags`)
+          .reply(HTTP_STATUS_OK, tagsMock, { 'x-total': 1 });
+      });
+
       it('shows the form', () => {
         expect(findForm().exists()).toBe(true);
       });
+
+      it('ref selector dropdown only shows branches for create merge request flow', async () => {
+        createWrapper({ showBranchFlow: false });
+
+        await waitForPromises();
+        const dropdownItems = findRefSelectorListBox().props('items');
+
+        expect(dropdownItems.find((item) => item.text === 'Branches').options).toHaveLength(2);
+        expect(dropdownItems.find((item) => item.text === 'Tags')).toBeUndefined();
+      });
+
+      it('ref selector dropdown shows tags and branches for create branch flow', async () => {
+        createWrapper({ showBranchFlow: true });
+
+        await waitForPromises();
+        const dropdownItems = findRefSelectorListBox().props('items');
+
+        expect(dropdownItems.find((item) => item.text === 'Branches').options).toHaveLength(2);
+        expect(dropdownItems.find((item) => item.text === 'Tags').options).toHaveLength(2);
+      });
     });
 
     describe('Branch creation', () => {
@@ -142,7 +186,7 @@ describe('CreateBranchMergeRequestModal', () => {
           .onPost('/fullPath/-/branches')
           .reply(HTTP_STATUS_OK, { data: { url: 'http://test.com/branch' } });
 
-        findSourceBranch().vm.$emit('input', 'source');
+        findRefSelector().vm.$emit('input', 'source');
         findTargetBranch().vm.$emit('input', 'target');
         firePrimaryEvent();
 
@@ -217,7 +261,7 @@ describe('CreateBranchMergeRequestModal', () => {
           .onPost('/fullPath/-/branches')
           .reply(HTTP_STATUS_OK, { data: { url: 'http://test.com/branch' } });
 
-        findSourceBranch().vm.$emit('input', 'source_mr');
+        findRefSelector().vm.$emit('input', 'source_mr');
         findTargetBranch().vm.$emit('input', 'target_mr');
         firePrimaryEvent();