diff --git a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
index 46c27c33f56e7f052fa85e133f9fcd47d9ceb385..1d926c0d0c50f141199f51ae0c09ec8375671cc1 100644
--- a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
@@ -193,6 +193,7 @@ export default {
       >
         <source-branch-dropdown
           id="source-branch-select"
+          :key="selectedProject.id"
           :selected-project="selectedProject"
           :selected-branch-name="selectedSourceBranchName"
           @change="onSourceBranchSelect"
diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
index e443df35ad23602d0e5f644faf3aa843e9930b83..3f9dd4eb6c6c41145f078a1c7350bd1943400f42 100644
--- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
@@ -2,6 +2,8 @@
 import { GlCollapsibleListbox } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { __ } from '~/locale';
+import { logError } from '~/lib/logger';
+
 import { BRANCHES_PER_PAGE } from '../constants';
 import getProjectQuery from '../graphql/queries/get_project.query.graphql';
 
@@ -26,6 +28,7 @@ export default {
     return {
       initialSourceBranchNamesLoading: false,
       sourceBranchNamesLoading: false,
+      sourceBranchNamesLoadingMore: false,
       sourceBranchNames: [],
     };
   },
@@ -36,6 +39,11 @@ export default {
     hasSelectedSourceBranch() {
       return Boolean(this.selectedBranchName);
     },
+    hasMoreBranches() {
+      return (
+        this.sourceBranchNames.length > 0 && this.sourceBranchNames.length % BRANCHES_PER_PAGE === 0
+      );
+    },
     branchDropdownText() {
       return this.selectedBranchName || __('Select a branch');
     },
@@ -59,45 +67,63 @@ export default {
     onSearch: debounce(function debouncedSearch(branchSearchQuery) {
       this.onSourceBranchSearchQuery(branchSearchQuery);
     }, 250),
-    onSourceBranchSearchQuery(branchSearchQuery) {
+    async onSourceBranchSearchQuery(branchSearchQuery) {
       this.branchSearchQuery = branchSearchQuery;
-      this.fetchSourceBranchNames({
+      this.sourceBranchNamesLoading = true;
+
+      await this.fetchSourceBranchNames({
+        projectPath: this.selectedProject.fullPath,
+        searchPattern: this.branchSearchQuery,
+      });
+      this.sourceBranchNamesLoading = false;
+    },
+    async onBottomReached() {
+      this.sourceBranchNamesLoadingMore = true;
+
+      await this.fetchSourceBranchNames({
         projectPath: this.selectedProject.fullPath,
         searchPattern: this.branchSearchQuery,
+        append: true,
       });
+
+      this.sourceBranchNamesLoadingMore = false;
     },
     onError({ message } = {}) {
       this.$emit('error', { message });
     },
-    async fetchSourceBranchNames({ projectPath, searchPattern } = {}) {
-      this.sourceBranchNamesLoading = true;
+    async fetchSourceBranchNames({ projectPath, searchPattern, append = false } = {}) {
       try {
         const { data } = await this.$apollo.query({
           query: getProjectQuery,
           variables: {
             projectPath,
             branchNamesLimit: this.$options.BRANCHES_PER_PAGE,
-            branchNamesOffset: 0,
+            branchNamesOffset: append ? this.sourceBranchNames.length : 0,
             branchNamesSearchPattern: searchPattern ? `*${searchPattern}*` : '*',
           },
         });
 
         const { branchNames, rootRef } = data?.project.repository || {};
-        this.sourceBranchNames =
-          branchNames.map((value) => {
+        const branchNameItems =
+          branchNames?.map((value) => {
             return { text: value, value };
           }) || [];
 
-        // Use root ref as the default selection
-        if (rootRef && !this.hasSelectedSourceBranch) {
-          this.onSourceBranchSelect(rootRef);
+        if (append) {
+          this.sourceBranchNames.push(...branchNameItems);
+        } else {
+          this.sourceBranchNames = branchNameItems;
+
+          // Use root ref as the default selection
+          if (rootRef && !this.hasSelectedSourceBranch) {
+            this.onSourceBranchSelect(rootRef);
+          }
         }
       } catch (err) {
+        logError(err);
         this.onError({
           message: __('Something went wrong while fetching source branches.'),
         });
-      } finally {
-        this.sourceBranchNamesLoading = false;
       }
     },
   },
@@ -107,6 +133,7 @@ export default {
 <template>
   <gl-collapsible-listbox
     :class="{ 'gl-font-monospace': hasSelectedSourceBranch }"
+    :selected="selectedBranchName"
     :disabled="!hasSelectedProject"
     :items="sourceBranchNames"
     :loading="initialSourceBranchNamesLoading"
@@ -114,6 +141,9 @@ export default {
     :searching="sourceBranchNamesLoading"
     :toggle-text="branchDropdownText"
     fluid-width
+    :infinite-scroll="hasMoreBranches"
+    :infinite-scroll-loading="sourceBranchNamesLoadingMore"
+    @bottom-reached="onBottomReached"
     @search="onSearch"
     @select="onSourceBranchSelect"
   />
diff --git a/app/assets/javascripts/jira_connect/branches/index.js b/app/assets/javascripts/jira_connect/branches/index.js
index a9a56a6362e682c87b58f5f771e874ea58025cd9..893b9dfa1c73281e98083aefc89b10f9f466a57d 100644
--- a/app/assets/javascripts/jira_connect/branches/index.js
+++ b/app/assets/javascripts/jira_connect/branches/index.js
@@ -19,6 +19,7 @@ export default function initJiraConnectBranches() {
 
   return new Vue({
     el,
+    name: 'JiraConnectNewBranchRoot',
     apolloProvider,
     provide: {
       initialBranchName,
diff --git a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
index cf2dacb50d8433e81468de8d739f3ccd8c67ff5f..95658f66d097941d3f35438b35ddaaa7e452aaa4 100644
--- a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
@@ -1,58 +1,45 @@
-import { GlCollapsibleListbox } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlCollapsibleListbox } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+
 import SourceBranchDropdown from '~/jira_connect/branches/components/source_branch_dropdown.vue';
 import { BRANCHES_PER_PAGE } from '~/jira_connect/branches/constants';
 import getProjectQuery from '~/jira_connect/branches/graphql/queries/get_project.query.graphql';
-import { mockProjects } from '../mock_data';
-
-const mockProject = {
-  id: 'test',
-  repository: {
-    branchNames: ['main', 'f-test', 'release'],
-    rootRef: 'main',
-  },
-};
-const mockSelectedProject = mockProjects[0];
-
-const mockProjectQueryResponse = {
-  data: {
-    project: mockProject,
-  },
-};
-const mockGetProjectQuery = jest.fn().mockResolvedValue(mockProjectQueryResponse);
-const mockQueryLoading = jest.fn().mockReturnValue(new Promise(() => {}));
+import {
+  mockBranchNames,
+  mockBranchNames2,
+  mockProjects,
+  mockProjectQueryResponse,
+} from '../mock_data';
+
+Vue.use(VueApollo);
 
 describe('SourceBranchDropdown', () => {
   let wrapper;
 
+  const mockSelectedProject = mockProjects[0];
+  const querySuccessHandler = jest.fn().mockResolvedValue(mockProjectQueryResponse());
+  const queryLoadingHandler = jest.fn().mockReturnValue(new Promise(() => {}));
+
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
-  const assertListboxItems = () => {
+  const assertListboxItems = (branchNames = mockBranchNames) => {
     const listboxItems = findListbox().props('items');
-    expect(listboxItems).toHaveLength(mockProject.repository.branchNames.length);
-    expect(listboxItems.map((item) => item.text)).toEqual(mockProject.repository.branchNames);
+    expect(listboxItems).toHaveLength(branchNames.length);
+    expect(listboxItems.map((item) => item.text)).toEqual(branchNames);
   };
 
-  function createMockApolloProvider({ getProjectQueryLoading = false } = {}) {
-    Vue.use(VueApollo);
-
-    const mockApollo = createMockApollo([
-      [getProjectQuery, getProjectQueryLoading ? mockQueryLoading : mockGetProjectQuery],
-    ]);
+  const createComponent = ({ props, handler = querySuccessHandler } = {}) => {
+    const mockApollo = createMockApollo([[getProjectQuery, handler]]);
 
-    return mockApollo;
-  }
-
-  function createComponent({ mockApollo, props, mountFn = shallowMount } = {}) {
-    wrapper = mountFn(SourceBranchDropdown, {
-      apolloProvider: mockApollo || createMockApolloProvider(),
+    wrapper = shallowMount(SourceBranchDropdown, {
+      apolloProvider: mockApollo,
       propsData: props,
     });
-  }
+  };
 
   describe('when `selectedProject` prop is not specified', () => {
     beforeEach(() => {
@@ -78,6 +65,7 @@ describe('SourceBranchDropdown', () => {
           loading: false,
           searchable: true,
           searching: false,
+          selected: null,
           toggleText: 'Select a branch',
         });
       });
@@ -92,23 +80,26 @@ describe('SourceBranchDropdown', () => {
     describe('when branches are loading', () => {
       it('sets loading prop to true', () => {
         createComponent({
-          mockApollo: createMockApolloProvider({ getProjectQueryLoading: true }),
           props: { selectedProject: mockSelectedProject },
+          handler: queryLoadingHandler,
         });
-        expect(findListbox().props('loading')).toEqual(true);
+        expect(findListbox().props('loading')).toBe(true);
       });
     });
 
     describe('when branches have loaded', () => {
       describe('when searching branches', () => {
         it('triggers a refetch', async () => {
-          createComponent({ mountFn: mount, props: { selectedProject: mockSelectedProject } });
+          createComponent({ props: { selectedProject: mockSelectedProject } });
           await waitForPromises();
 
           const mockSearchTerm = 'mai';
+          expect(querySuccessHandler).toHaveBeenCalledTimes(1);
+
           await findListbox().vm.$emit('search', mockSearchTerm);
 
-          expect(mockGetProjectQuery).toHaveBeenCalledWith({
+          expect(querySuccessHandler).toHaveBeenCalledTimes(2);
+          expect(querySuccessHandler).toHaveBeenLastCalledWith({
             branchNamesLimit: BRANCHES_PER_PAGE,
             branchNamesOffset: 0,
             branchNamesSearchPattern: `*${mockSearchTerm}*`,
@@ -129,10 +120,15 @@ describe('SourceBranchDropdown', () => {
             loading: false,
             searchable: true,
             searching: false,
+            selected: null,
             toggleText: 'Select a branch',
           });
         });
 
+        it('disables infinite scroll', () => {
+          expect(findListbox().props('infiniteScroll')).toBe(false);
+        });
+
         it('omits monospace styling from listbox', () => {
           expect(findListbox().classes()).not.toContain('gl-font-monospace');
         });
@@ -142,19 +138,19 @@ describe('SourceBranchDropdown', () => {
         });
 
         it("emits `change` event with the repository's `rootRef` by default", () => {
-          expect(wrapper.emitted('change')[0]).toEqual([mockProject.repository.rootRef]);
+          expect(wrapper.emitted('change')[0]).toEqual([mockBranchNames[0]]);
         });
 
         describe('when selecting a listbox item', () => {
           it('emits `change` event with the selected branch name', () => {
-            const mockBranchName = mockProject.repository.branchNames[1];
+            const mockBranchName = mockBranchNames[1];
             findListbox().vm.$emit('select', mockBranchName);
             expect(wrapper.emitted('change')[1]).toEqual([mockBranchName]);
           });
         });
 
         describe('when `selectedBranchName` prop is specified', () => {
-          const mockBranchName = mockProject.repository.branchNames[2];
+          const mockBranchName = mockBranchNames[2];
 
           beforeEach(() => {
             wrapper.setProps({
@@ -162,6 +158,10 @@ describe('SourceBranchDropdown', () => {
             });
           });
 
+          it('sets listbox selected to `selectedBranchName`', () => {
+            expect(findListbox().props('selected')).toBe(mockBranchName);
+          });
+
           it('sets listbox text to `selectedBranchName` value', () => {
             expect(findListbox().props('toggleText')).toBe(mockBranchName);
           });
@@ -170,6 +170,66 @@ describe('SourceBranchDropdown', () => {
             expect(findListbox().classes()).toContain('gl-font-monospace');
           });
         });
+
+        describe('when full page of branches returns', () => {
+          const fullPageBranchNames = Array(BRANCHES_PER_PAGE)
+            .fill(1)
+            .map((_, i) => mockBranchNames[i % mockBranchNames.length]);
+
+          beforeEach(async () => {
+            createComponent({
+              props: { selectedProject: mockSelectedProject },
+              handler: () => Promise.resolve(mockProjectQueryResponse(fullPageBranchNames)),
+            });
+            await waitForPromises();
+          });
+
+          it('enables infinite scroll', () => {
+            expect(findListbox().props('infiniteScroll')).toBe(true);
+          });
+        });
+      });
+
+      describe('when loading more branches from infinite scroll', () => {
+        const queryLoadMoreHandler = jest.fn();
+
+        beforeEach(async () => {
+          queryLoadMoreHandler.mockResolvedValueOnce(mockProjectQueryResponse());
+          queryLoadMoreHandler.mockResolvedValueOnce(mockProjectQueryResponse(mockBranchNames2));
+          createComponent({
+            props: { selectedProject: mockSelectedProject },
+            handler: queryLoadMoreHandler,
+          });
+
+          await waitForPromises();
+
+          await findListbox().vm.$emit('bottom-reached');
+        });
+
+        it('sets loading more prop to true', () => {
+          expect(findListbox().props('infiniteScrollLoading')).toBe(true);
+        });
+
+        it('triggers load more query', () => {
+          expect(queryLoadMoreHandler).toHaveBeenLastCalledWith({
+            branchNamesLimit: BRANCHES_PER_PAGE,
+            branchNamesOffset: 3,
+            branchNamesSearchPattern: '*',
+            projectPath: 'test-path',
+          });
+        });
+
+        it('renders available source branches as listbox items', async () => {
+          await waitForPromises();
+
+          assertListboxItems([...mockBranchNames, ...mockBranchNames2]);
+        });
+
+        it('sets loading more prop to false once done', async () => {
+          await waitForPromises();
+
+          expect(findListbox().props('infiniteScrollLoading')).toBe(false);
+        });
       });
     });
   });
diff --git a/spec/frontend/jira_connect/branches/mock_data.js b/spec/frontend/jira_connect/branches/mock_data.js
index 742ab5392c87129d99aedce0805c6abdc895fb9b..1720e0118c8489be9a3efcec3e9e828c213dcdad 100644
--- a/spec/frontend/jira_connect/branches/mock_data.js
+++ b/spec/frontend/jira_connect/branches/mock_data.js
@@ -1,3 +1,6 @@
+export const mockBranchNames = ['main', 'f-test', 'release'];
+export const mockBranchNames2 = ['dev', 'dev-1', 'dev-2'];
+
 export const mockProjects = [
   {
     id: 'test',
@@ -28,3 +31,15 @@ export const mockProjects = [
     },
   },
 ];
+
+export const mockProjectQueryResponse = (branchNames = mockBranchNames) => ({
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/27',
+      repository: {
+        branchNames,
+        rootRef: 'main',
+      },
+    },
+  },
+});