diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index 1380f332b4407c6122e93bb3d68938b99a7421d0..20035b2d563b785a6becc39d53d197beaeebe432 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -299,7 +299,7 @@ export default {
       await expand();
     },
 
-    toggleDirectory(normalizedPath) {
+    toggleDirectory(normalizedPath, { toggleClose = true } = {}) {
       if (!this.expandedPathsMap[normalizedPath]) {
         // If directory is collapsed, expand it
         this.expandedPathsMap = {
@@ -307,8 +307,8 @@ export default {
           [normalizedPath]: true,
         };
         this.fetchDirectory(normalizedPath);
-      } else {
-        // If directory is already expanded, collapse it
+      } else if (toggleClose) {
+        // If directory is already expanded and toggleClose=true, collapse it
         const newExpandedPaths = { ...this.expandedPathsMap };
         delete newExpandedPaths[normalizedPath];
         this.expandedPathsMap = newExpandedPaths;
@@ -413,7 +413,8 @@ export default {
           :level="item.level"
           :opened="item.opened"
           :loading="item.loading"
-          :tabindex="item.loading ? -1 : 0"
+          show-tree-toggle
+          tabindex="-1"
           :aria-current="isCurrentPath(item.path)"
           role="treeitem"
           :aria-expanded="item.opened"
@@ -428,7 +429,7 @@ export default {
           }"
           class="gl-relative !gl-mx-0"
           truncate-middle
-          @clickTree="toggleDirectory(item.path)"
+          @clickTree="(options) => toggleDirectory(item.path, options)"
           @showMore="fetchDirectory(item.parentPath)"
         />
       </div>
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index aede0f21d15ff26df97b919a3bf7a8e27e5e45ee..2a42c9d70957089d52aa54f70fae6997ce2d984e 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlTruncate, GlIcon, GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
+import { __, sprintf } from '~/locale';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
 import { InternalEvents } from '~/tracking';
@@ -42,6 +43,11 @@ export default {
       required: false,
       default: false,
     },
+    showTreeToggle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isTree() {
@@ -51,12 +57,14 @@ export default {
       return this.file.type === 'blob';
     },
     fileClass() {
+      const addFilePadding = !this.isTree && this.showTreeToggle;
       return {
         'file-open': this.isBlob && this.file.opened,
         'is-active': this.isBlob && this.file.active,
         folder: this.isTree,
         'is-open': this.file.opened,
         'is-linked': this.file.linked,
+        'pl-3': addFilePadding,
       };
     },
     textForTitle() {
@@ -66,6 +74,15 @@ export default {
     fileRouterUrl() {
       return this.fileUrl || `/project${this.file.url}`;
     },
+    chevronIcon() {
+      return this.file.opened ? 'chevron-down' : 'chevron-right';
+    },
+    chevronAriaLabel() {
+      const action = this.file.opened
+        ? __('Collapse %{name} directory')
+        : __('Expand %{name} directory');
+      return sprintf(action, { name: this.file.name });
+    },
   },
   watch: {
     'file.active': function fileActiveWatch(active) {
@@ -83,11 +100,15 @@ export default {
     toggleTreeOpen(path) {
       this.$emit('toggleTreeOpen', path);
     },
+    onChevronClick(event) {
+      event.stopPropagation();
+      this.$emit('clickTree');
+    },
     clickFile() {
       this.trackEvent('click_file_tree_browser_on_repository_page');
 
       // Manual Action if a tree is selected/opened
-      if (this.isTree) this.$emit('clickTree', this.file.path);
+      if (this.isTree) this.$emit('clickTree', { toggleClose: false });
       if (this.isTree && this.hasUrlAtCurrentRoute()) {
         this.toggleTreeOpen(this.file.path);
       }
@@ -140,52 +161,74 @@ export default {
   >
     {{ __('Show more') }}
   </gl-button>
-  <button
-    v-else
-    :class="fileClass"
-    :title="textForTitle"
-    :data-level="level"
-    class="file-row"
-    :aria-expanded="file.type === 'tree' ? file.opened.toString() : undefined"
-    :aria-label="file.name"
-    @click="clickFile"
-  >
-    <span
-      ref="textOutput"
-      class="file-row-name"
-      :title="file.name"
-      :data-qa-file-name="file.name"
-      data-testid="file-row-name-container"
-      :class="[fileClasses, { 'str-truncated': !truncateMiddle, 'gl-min-w-0': truncateMiddle }]"
+
+  <div v-else class="gl-flex gl-items-center">
+    <gl-button
+      v-if="isTree && showTreeToggle"
+      category="tertiary"
+      size="small"
+      :icon="chevronIcon"
+      data-testid="tree-toggle-button"
+      class="file-row-indentation gl-mr-1 gl-shrink-0"
+      :aria-label="chevronAriaLabel"
+      @click="onChevronClick"
+    />
+
+    <button
+      :class="fileClass"
+      :title="textForTitle"
+      :data-level="level"
+      class="file-row gl-flex-grow-1"
+      :data-file-row="file.fileHash"
+      data-testid="file-row"
+      :aria-expanded="file.type === 'tree' ? file.opened.toString() : undefined"
+      :aria-label="file.name"
+      @click="clickFile"
     >
-      <gl-icon
-        v-if="file.linked"
-        v-gl-tooltip="
-          __('This file was linked in the page URL and will appear as the first one in the list')
-        "
-        name="link"
-        :size="16"
-      />
-      <file-icon
-        class="gl-mr-2"
-        :class="{ 'gl-text-subtle': file.type === 'tree' }"
-        :file-name="file.name"
-        :loading="file.loading"
-        :folder="isTree"
-        :opened="file.opened"
-        :size="16"
-        :submodule="file.submodule"
-      />
-      <gl-truncate
-        v-if="truncateMiddle"
-        :text="file.name"
-        position="middle"
-        class="gl-items-center gl-pr-7"
-      />
-      <template v-else>{{ file.name }}</template>
-    </span>
-    <slot></slot>
-  </button>
+      <span
+        ref="textOutput"
+        class="file-row-name"
+        :title="file.name"
+        :data-qa-file-name="file.name"
+        data-testid="file-row-name-container"
+        :class="[
+          fileClasses,
+          {
+            'str-truncated': !truncateMiddle,
+            'gl-min-w-0': truncateMiddle,
+            'file-row-indentation': !(isTree && showTreeToggle),
+          },
+        ]"
+      >
+        <gl-icon
+          v-if="file.linked"
+          v-gl-tooltip="
+            __('This file was linked in the page URL and will appear as the first one in the list')
+          "
+          name="link"
+          :size="16"
+        />
+        <file-icon
+          class="gl-mr-2"
+          :class="{ 'gl-text-subtle': file.type === 'tree' }"
+          :file-name="file.name"
+          :loading="file.loading"
+          :folder="isTree"
+          :opened="file.opened"
+          :size="16"
+          :submodule="file.submodule"
+        />
+        <gl-truncate
+          v-if="truncateMiddle"
+          :text="file.name"
+          position="middle"
+          class="gl-items-center gl-pr-7"
+        />
+        <template v-else>{{ file.name }}</template>
+      </span>
+      <slot></slot>
+    </button>
+  </div>
 </template>
 
 <style>
@@ -209,6 +252,10 @@ export default {
   overflow: visible;
 }
 
+.file-row-indentation {
+  margin-left: calc(var(--level) * var(--file-row-level-padding, 16px));
+}
+
 .file-row-name {
   display: flex;
   align-items: center;
@@ -217,6 +264,5 @@ export default {
   line-height: 1rem;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-left: calc(var(--level) * var(--file-row-level-padding, 16px));
 }
 </style>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 02be9744714e9ae3494b248c275016bb53c8eed0..83e41fe8be184351f539dc0fe30c3ee0afa8ccf1 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -15781,6 +15781,9 @@ msgstr ""
 msgid "Collapse %{accessibleLabel}"
 msgstr ""
 
+msgid "Collapse %{name} directory"
+msgstr ""
+
 msgid "Collapse %{section} merge requests"
 msgstr ""
 
@@ -27531,6 +27534,9 @@ msgstr ""
 msgid "Expand %{accessibleLabel}"
 msgstr ""
 
+msgid "Expand %{name} directory"
+msgstr ""
+
 msgid "Expand %{section} merge requests"
 msgstr ""
 
diff --git a/spec/features/projects/repository/file_tree_browser_spec.rb b/spec/features/projects/repository/file_tree_browser_spec.rb
index 740357145f1b644a5ea13f072264600fad227a32..063d7740928c73610b0a45da90aaf563a9c16b0c 100644
--- a/spec/features/projects/repository/file_tree_browser_spec.rb
+++ b/spec/features/projects/repository/file_tree_browser_spec.rb
@@ -57,10 +57,10 @@
 
     it 'expands and collapses directories' do
       within('.file-tree-browser') do
-        click_file('files')
+        click_button('Expand files directory')
         expect(page).to have_file('ruby')
 
-        click_file('files')
+        click_button('Collapse files directory')
         expect(page).not_to have_file('ruby')
       end
     end
@@ -78,8 +78,7 @@
         expect(ruby_folder[:class]).to include('is-open')
 
         # Should highlight the current file
-        popen_row = find_button('popen.rb')
-        expect(popen_row['aria-current']).to eq('true')
+        expect(find('[aria-current="true"]')).to be_present
       end
     end
   end
diff --git a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
index 052eac127dadd8217f67e239a68c6af6afbf1198..b8a4c8f8ab2153433b5e43ec5751d8502c8fd81d 100644
--- a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
+++ b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
@@ -109,13 +109,45 @@ describe('Tree List', () => {
     });
   });
 
-  it('calls toggleDirectory with correct path when clickTree is emitted from FileRow', () => {
-    const toggleDirectory = jest.spyOn(wrapper.vm, 'toggleDirectory').mockImplementation(() => {});
-    const path = '/dir_1/dir_2';
-    findFileRows().at(0).vm.$emit('clickTree', path);
-    expect(toggleDirectory).toHaveBeenCalledWith(path);
+  it('fetches directory contents when tree row is clicked', async () => {
+    const subdirResponse = cloneDeep(mockResponse);
+    subdirResponse.data.project.repository.paginatedTree.nodes[0].trees.nodes = [];
+    getQueryHandlerSuccess.mockResolvedValueOnce(subdirResponse);
+
+    findFileRows().at(0).vm.$emit('clickTree');
+    await waitForPromises();
+
+    expect(getQueryHandlerSuccess).toHaveBeenLastCalledWith(
+      expect.objectContaining({ path: 'dir_1/dir_2' }),
+    );
   });
 
+  it.each`
+    toggleClose  | expectedOpened | description
+    ${true}      | ${false}       | ${'collapses'}
+    ${false}     | ${true}        | ${'stays expanded'}
+    ${undefined} | ${false}       | ${'collapses (default behavior)'}
+  `(
+    '$description when clicked with toggleClose: $toggleClose',
+    async ({ toggleClose, expectedOpened }) => {
+      await createComponent();
+      const subdirResponse = cloneDeep(mockResponse);
+      subdirResponse.data.project.repository.paginatedTree.nodes[0].trees.nodes = [];
+      getQueryHandlerSuccess.mockResolvedValueOnce(subdirResponse);
+
+      findFileRows().at(0).vm.$emit('clickTree');
+      await waitForPromises();
+
+      expect(findFileRows().at(0).props('file').opened).toBe(true);
+
+      const options = toggleClose === undefined ? undefined : { toggleClose };
+      findFileRows().at(0).vm.$emit('clickTree', options);
+      await nextTick();
+
+      expect(findFileRows().at(0).props('file').opened).toBe(expectedOpened);
+    },
+  );
+
   it('sets aria-setsize and aria-posinset relative to siblings at same level', async () => {
     await createComponent();
     const fileRows = findFileRows();
@@ -396,4 +428,35 @@ describe('Tree List', () => {
       );
     });
   });
+
+  describe('Tree toggle', () => {
+    it('passes show-tree-toggle="true" prop to all FileRow components', () => {
+      findFileRows().wrappers.forEach((fileRow) =>
+        expect(fileRow.props('showTreeToggle')).toBe(true),
+      );
+    });
+
+    it('fetches directory contents when chevron is clicked', async () => {
+      const subdirResponse = cloneDeep(mockResponse);
+      subdirResponse.data.project.repository.paginatedTree.nodes[0].blobs.nodes = [
+        {
+          id: 'gid://file1',
+          name: 'subfile.txt',
+          path: 'dir_1/dir_2/subfile.txt',
+          sha: 'xyz789',
+          webPath: 'dir_1/dir_2/subfile.txt',
+        },
+      ];
+      getQueryHandlerSuccess.mockResolvedValueOnce(subdirResponse);
+
+      const treeFileRow = findFileRows().at(0); // First row is the tree based on mockResponse
+      treeFileRow.vm.$emit('clickTree', treeFileRow.props('file').path);
+
+      await waitForPromises();
+
+      expect(getQueryHandlerSuccess).toHaveBeenLastCalledWith(
+        expect.objectContaining({ path: 'dir_1/dir_2' }),
+      );
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/file_row_spec.js b/spec/frontend/vue_shared/components/file_row_spec.js
index 17454bec6f764217cb17568ce753523e94d1a7ef..331b38d1370ee3434fffbb3c9f55e7bc4d90cd5f 100644
--- a/spec/frontend/vue_shared/components/file_row_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_spec.js
@@ -1,6 +1,6 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlIcon, GlButton } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { file } from 'jest/ide/helpers';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
 
@@ -15,7 +15,7 @@ describe('File row component', () => {
   let wrapper;
 
   function createComponent(propsData, $router = undefined) {
-    wrapper = shallowMount(FileRow, {
+    wrapper = shallowMountExtended(FileRow, {
       propsData,
       mocks: {
         $router,
@@ -25,6 +25,8 @@ describe('File row component', () => {
 
   const { bindInternalEventDocument } = useMockInternalEventsTracking();
 
+  const findFileButton = () => wrapper.findByTestId('file-row');
+
   it('renders name', () => {
     const fileName = 't4';
     createComponent({
@@ -62,7 +64,7 @@ describe('File row component', () => {
       level: 1,
     });
 
-    expect(wrapper.element.title.trim()).toEqual('path/to/file/with a very long folder name/');
+    expect(findFileButton().attributes('title')).toBe('path/to/file/with a very long folder name/');
   });
 
   it('does not render a title attribute if no tree present', () => {
@@ -84,21 +86,21 @@ describe('File row component', () => {
       level: 0,
     });
 
-    wrapper.element.click();
+    findFileButton().trigger('click');
 
     expect(wrapper.emitted('toggleTreeOpen')[0][0]).toEqual(fileName);
   });
 
-  it('emits clickTree on tree click with file path', () => {
+  it('emits clickTree on tree click with correct options', () => {
     const { trackEventSpy } = bindInternalEventDocument(wrapper.element);
 
     const fileName = 'folder';
     const filePath = 'path/to/folder';
     createComponent({ file: { ...file(fileName), type: 'tree', path: filePath }, level: 0 });
 
-    wrapper.element.click();
+    findFileButton().trigger('click');
 
-    expect(wrapper.emitted('clickTree')[0][0]).toEqual(filePath);
+    expect(wrapper.emitted('clickTree')[0][0]).toEqual({ toggleClose: false });
     expect(trackEventSpy).toHaveBeenCalledWith(
       'click_file_tree_browser_on_repository_page',
       {},
@@ -119,7 +121,7 @@ describe('File row component', () => {
       level: 1,
     });
 
-    wrapper.element.click();
+    findFileButton().trigger('click');
 
     expect(wrapper.emitted('clickFile')[0][0]).toEqual(fileProp);
     expect(trackEventSpy).toHaveBeenCalledWith(
@@ -250,4 +252,51 @@ describe('File row component', () => {
       expect(findShowMoreButton().props('loading')).toBe(true);
     });
   });
+
+  describe('Tree toggle chevron button', () => {
+    const findChevronButton = () => wrapper.findByTestId('tree-toggle-button');
+    const folderPath = 'path/to/folder';
+    const mockFile = { ...file(folderPath), type: 'tree', opened: false };
+
+    beforeEach(() => {
+      createComponent({
+        file: mockFile,
+        level: 0,
+        showTreeToggle: true,
+      });
+    });
+
+    it('renders chevron button with correct icon and text text', () => {
+      expect(findChevronButton().props()).toMatchObject({
+        category: 'tertiary',
+        size: 'small',
+        icon: 'chevron-right',
+      });
+
+      expect(findChevronButton().attributes('aria-label')).toBe('Expand path/to/folder directory');
+
+      // Ensure correct icon and aria-label when folder is expanded
+      createComponent({ file: { ...mockFile, opened: true }, level: 0, showTreeToggle: true });
+      expect(findChevronButton().props('icon')).toBe('chevron-down');
+      expect(findChevronButton().attributes('aria-label')).toBe(
+        'Collapse path/to/folder directory',
+      );
+    });
+
+    it('renders chevron button for trees and emits clickTree when clicked', () => {
+      findChevronButton().vm.$emit('click', { stopPropagation: jest.fn() });
+
+      expect(wrapper.emitted('clickTree')).toHaveLength(1);
+    });
+
+    it('does not render when showTreeToggle is false', () => {
+      createComponent({
+        file: mockFile,
+        level: 0,
+        showTreeToggle: false,
+      });
+
+      expect(findChevronButton().exists()).toBe(false);
+    });
+  });
 });