diff --git a/packages/elements/package.json b/packages/elements/package.json
index fae27fc30..5a0105e96 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -26,7 +26,7 @@
     "start": "vite",
     "build": "vite build && cross-env IIFE_BUILD=true vite build",
     "test": "npm run test:unit && npm run test:integration",
-    "test:unit": "vitest run",
+    "test:unit": "vitest",
     "test:integration": "playwright test",
     "test:integration:update": "playwright test --update-snapshots",
     "test:integration:headless": "cross-env HEADLESS=true playwright test",
diff --git a/packages/elements/src/components/app/app.component.ts b/packages/elements/src/components/app/app.component.ts
index d340cc27a..3d75bc7bc 100644
--- a/packages/elements/src/components/app/app.component.ts
+++ b/packages/elements/src/components/app/app.component.ts
@@ -26,6 +26,8 @@ import type { Theme } from '../../lib/theme.js';
 import { globals, tailwind } from '../../style/index.js';
 import { RealTimeElement } from '../real-time-element.js';
 import theme from './theme.scss?inline';
+import { type MutationTestReportFilePickerComponent } from '../file-picker/file-picker.component.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 
 interface BaseContext {
   path: string[];
@@ -86,6 +88,8 @@ export class MutationTestReportAppComponent extends RealTimeElement {
     return getComputedStyle(this).getPropertyValue('--mut-body-bg');
   }
 
+  #filePickerRef = createRef<MutationTestReportFilePickerComponent>();
+
   @property()
   public get title(): string {
     if (this.context.result) {
@@ -343,13 +347,18 @@ export class MutationTestReportAppComponent extends RealTimeElement {
   public render() {
     if (this.context.result ?? this.errorMessage) {
       return html`
+        <mte-file-picker ${ref(this.#filePickerRef)} .rootModel="${this.rootModel}"></mte-file-picker>
         <div class="container bg-white pb-4 font-sans text-gray-800 motion-safe:transition-max-width">
           <div class="space-y-4 transition-colors">
             ${this.renderErrorMessage()}
             <mte-theme-switch @theme-switch="${this.themeSwitch}" class="sticky top-offset z-20 float-right pt-6" .theme="${this.theme}">
             </mte-theme-switch>
             ${this.renderTitle()} ${this.renderTabs()}
-            <mte-breadcrumb .view="${this.context.view}" .path="${this.context.path}"></mte-breadcrumb>
+            <mte-breadcrumb
+              @mte-file-picker-open="${() => this.#filePickerRef.value?.open()}"
+              .view="${this.context.view}"
+              .path="${this.context.path}"
+            ></mte-breadcrumb>
             <mte-result-status-bar
               .detected="${this.rootModel?.systemUnderTestMetrics.metrics.totalDetected}"
               .noCoverage="${this.rootModel?.systemUnderTestMetrics.metrics.noCoverage}"
diff --git a/packages/elements/src/components/breadcrumb.ts b/packages/elements/src/components/breadcrumb.ts
index 447792c3f..7b32795c9 100644
--- a/packages/elements/src/components/breadcrumb.ts
+++ b/packages/elements/src/components/breadcrumb.ts
@@ -1,13 +1,16 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+
 import { toAbsoluteUrl } from '../lib/html-helpers.js';
 import { View } from '../lib/router.js';
+import { searchIcon } from '../lib/svg-icons.js';
 import { tailwind } from '../style/index.js';
+import { createCustomEvent } from '../lib/custom-events.js';
 
 @customElement('mte-breadcrumb')
 export class MutationTestReportBreadcrumbComponent extends LitElement {
-  @property({ attribute: false })
+  @property({ type: Array, attribute: false })
   public declare path: string[] | undefined;
 
   @property()
@@ -27,13 +30,14 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
   public render() {
     return html`<nav class="my-4 flex rounded-md border border-primary-600 bg-primary-100 p-3 text-gray-700" aria-label="Breadcrumb">
       <ol class="inline-flex items-center">
-        ${this.path && this.path.length > 0 ? this.renderLink(this.rootName, []) : this.renderActiveItem(this.rootName)}
-        ${this.renderBreadcrumbItems()}
+        ${this.path && this.path.length > 0 ? this.#renderLink(this.rootName, []) : this.#renderActiveItem(this.rootName)}
+        ${this.#renderBreadcrumbItems()}
       </ol>
+      ${this.#renderSearchIcon()}
     </nav> `;
   }
 
-  private renderBreadcrumbItems() {
+  #renderBreadcrumbItems() {
     if (this.path) {
       const path = this.path;
       return repeat(
@@ -41,9 +45,9 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
         (item) => item,
         (item, index) => {
           if (index === path.length - 1) {
-            return this.renderActiveItem(item);
+            return this.#renderActiveItem(item);
           } else {
-            return this.renderLink(item, path.slice(0, index + 1));
+            return this.#renderLink(item, path.slice(0, index + 1));
           }
         },
       );
@@ -51,13 +55,13 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
     return undefined;
   }
 
-  private renderActiveItem(title: string) {
+  #renderActiveItem(title: string) {
     return html`<li aria-current="page">
       <span class="ml-1 text-sm font-medium text-gray-800 md:ml-2">${title}</span>
     </li> `;
   }
 
-  private renderLink(title: string, path: string[]) {
+  #renderLink(title: string, path: string[]) {
     return html`<li class="after:text-gray-800 after:content-['/'] md:after:pl-1">
       <a
         href="${toAbsoluteUrl(this.view, ...path)}"
@@ -66,4 +70,12 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
       >
     </li>`;
   }
+
+  #renderSearchIcon() {
+    return html` <button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto" title="open file picker">${searchIcon}</button> `;
+  }
+
+  #dispatchFilePickerOpenEvent() {
+    this.dispatchEvent(createCustomEvent('mte-file-picker-open', undefined));
+  }
 }
diff --git a/packages/elements/src/components/file-icon/file-icon.component.ts b/packages/elements/src/components/file-icon/file-icon.component.ts
index cdab4651d..e4765a025 100644
--- a/packages/elements/src/components/file-icon/file-icon.component.ts
+++ b/packages/elements/src/components/file-icon/file-icon.component.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { determineLanguage, ProgrammingLanguage } from '../../lib/code-helpers.js';
 import style from './file-icon.css?inline';
 import { classMap } from 'lit/directives/class-map.js';
+
 @customElement('mte-file-icon')
 export class MutationTestReportFileIconComponent extends LitElement {
   @property({ attribute: 'file-name' })
diff --git a/packages/elements/src/components/file-picker/file-picker.component.ts b/packages/elements/src/components/file-picker/file-picker.component.ts
new file mode 100644
index 000000000..1fb1fa231
--- /dev/null
+++ b/packages/elements/src/components/file-picker/file-picker.component.ts
@@ -0,0 +1,283 @@
+import { html, LitElement, nothing, type PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { TestFileModel } from 'mutation-testing-metrics';
+import type { FileUnderTestModel, Metrics, MetricsResult, MutationTestMetricsResult, TestMetrics } from 'mutation-testing-metrics';
+
+import { mutantFileIcon, searchIcon, testFileIcon } from '../../lib/svg-icons.js';
+import { renderIf, toAbsoluteUrl } from '../../lib/html-helpers.js';
+import { tailwind } from '../../style/index.js';
+import { View } from '../../lib/router.js';
+
+@customElement('mte-file-picker')
+export class MutationTestReportFilePickerComponent extends LitElement {
+  static styles = [tailwind];
+
+  #abortController = new AbortController();
+  #searchMap = new Map<string, FileUnderTestModel | TestFileModel>();
+
+  @property({ type: Object })
+  public declare rootModel: MutationTestMetricsResult;
+
+  @state()
+  public declare openPicker: boolean;
+
+  @state()
+  public declare filteredFiles: { name: string; file: FileUnderTestModel | TestFileModel }[];
+
+  @state()
+  public declare fileIndex: number;
+
+  constructor() {
+    super();
+
+    this.openPicker = false;
+    this.fileIndex = 0;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    window.addEventListener('keydown', (e) => this.#handleKeyDown(e), { signal: this.#abortController.signal });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this.#abortController.abort();
+  }
+
+  willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('rootModel')) {
+      this.#prepareMap();
+      this.#filter('');
+    }
+  }
+
+  open() {
+    this.openPicker = true;
+
+    void this.updateComplete.then(() => this.#focusInput());
+  }
+
+  render() {
+    if (!this.openPicker) {
+      return nothing;
+    }
+
+    return html`
+      <div
+        id="backdrop"
+        @click="${() => this.#closePicker()}"
+        class="fixed left-0 top-0 z-50 flex h-full w-full justify-center bg-black/50 backdrop-blur-lg"
+      >
+        <div
+          @click="${(e: MouseEvent) => e.stopPropagation()}"
+          role="dialog"
+          id="picker"
+          class="m-4 flex h-fit max-h-[500px] w-full max-w-[40rem] flex-col rounded-lg bg-gray-200/60 p-4 backdrop-blur-lg md:w-1/2"
+        >
+          <div class="mb-2 flex items-center rounded bg-gray-200/60 p-2 backdrop-blur-lg">
+            <div class="mx-2 flex items-center text-gray-800">${searchIcon}</div>
+            <label for="file-picker-input" class="sr-only">Search for a file</label>
+            <input
+              id="file-picker-input"
+              @keyup="${(e: KeyboardEvent) => this.#handleSearch(e)}"
+              type="search"
+              style="box-shadow: none"
+              class="mr-2 w-full rounded border-0 border-transparent bg-transparent text-gray-800 focus:shadow-none"
+              placeholder="Search for a file (Ctrl-K)"
+            />
+          </div>
+          <div tabindex="-1" class="overflow-auto"> ${this.#renderFoundFiles()} </div>
+        </div>
+      </div>
+    `;
+  }
+
+  #renderFoundFiles() {
+    return html`
+      <ul id="files" class="flex flex-col">
+        ${renderIf(this.filteredFiles.length === 0, () => html`<li class="text-gray-800">No files found</li>`)}
+        ${repeat(
+          this.filteredFiles,
+          (item) => item.name,
+          ({ name, file }, index) => {
+            const view = this.#getView(file);
+            return html`
+              <li>
+                <a
+                  ?data-active="${index === this.fileIndex}"
+                  tabindex="${index === this.fileIndex ? 0 : -1}"
+                  @focusout="${() => this.#handleFocus()}"
+                  @click="${() => this.#closePicker()}"
+                  class="my-1 flex flex-wrap items-center rounded border-2 border-white bg-white p-1 px-2 text-gray-800 outline-none data-[active]:border-primary-500"
+                  href="${toAbsoluteUrl(view, name)}"
+                >
+                  <span class="inline-flex" title="File with ${view}s">${this.#renderTestOrMutantIndication(view)}</span>
+                  <span class="ms-1">${file.result?.name}</span>
+                  <span class="mx-2">•</span>
+                  <span class="text-gray-400">${name}</span>
+                </a>
+              </li>
+            `;
+          },
+        )}
+      </ul>
+    `;
+  }
+
+  #renderTestOrMutantIndication(view: View) {
+    return html`${view === View.mutant ? mutantFileIcon : testFileIcon}`;
+  }
+
+  #handleFocus() {
+    this.shadowRoot?.querySelector('input')?.focus();
+  }
+
+  #prepareMap() {
+    if (this.rootModel == null) {
+      return;
+    }
+
+    const prepareFiles = <T extends FileUnderTestModel | TestFileModel>(
+      result: MetricsResult<T, Metrics | TestMetrics> | undefined,
+      parentPath: string | null = null,
+      allFilesKey: string,
+    ) => {
+      if (result === undefined) {
+        return;
+      }
+
+      if (result.file !== undefined && result.file !== null && result.name !== allFilesKey) {
+        this.#searchMap.set(parentPath == null ? result.name : `${parentPath}/${result.name}`, result.file);
+      }
+
+      if (result.childResults.length === 0) {
+        return;
+      }
+
+      result.childResults.forEach((child) => {
+        if (parentPath !== allFilesKey && parentPath !== null && result.name !== null) {
+          prepareFiles(child, `${parentPath}/${result.name}`, allFilesKey);
+        } else if ((parentPath === allFilesKey || parentPath === null) && result.name !== allFilesKey) {
+          prepareFiles(child, result.name, allFilesKey);
+        } else {
+          prepareFiles(child, null, allFilesKey);
+        }
+      });
+    };
+
+    prepareFiles(this.rootModel.systemUnderTestMetrics, null, 'All files');
+    prepareFiles(this.rootModel.testMetrics, null, 'All tests');
+  }
+
+  #handleKeyDown(event: KeyboardEvent) {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+      this.#togglePicker(event);
+    } else if (!this.openPicker && event.key === '/') {
+      this.#togglePicker(event);
+    } else if (event.key === 'Escape') {
+      this.#closePicker();
+    } else if (event.key === 'ArrowUp') {
+      this.#handleArrowUp();
+    } else if (event.key === 'ArrowDown') {
+      this.#handleArrowDown();
+    }
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      setTimeout(() => {
+        this.#scrollActiveLinkInView();
+      });
+    }
+
+    if (event.key === 'Enter') {
+      this.#handleEnter();
+    }
+  }
+
+  #scrollActiveLinkInView() {
+    const activeLink = this.shadowRoot?.querySelector('a[data-active]');
+    activeLink?.scrollIntoView({ block: 'nearest' });
+  }
+
+  #handleArrowDown() {
+    if (this.fileIndex === this.filteredFiles.length - 1) {
+      this.fileIndex = 0;
+      return;
+    }
+
+    this.fileIndex = Math.min(this.filteredFiles.length - 1, this.fileIndex + 1);
+  }
+
+  #handleArrowUp() {
+    if (this.fileIndex === 0) {
+      this.fileIndex = this.filteredFiles.length - 1;
+      return;
+    }
+
+    this.fileIndex = Math.max(0, this.fileIndex - 1);
+  }
+
+  #handleEnter() {
+    if (this.filteredFiles.length === 0) {
+      return;
+    }
+
+    const entry = this.filteredFiles[this.fileIndex];
+    window.location.href = toAbsoluteUrl(this.#getView(entry.file), entry.name);
+    this.#closePicker();
+  }
+
+  #togglePicker(event: KeyboardEvent | null = null) {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    this.openPicker = !this.openPicker;
+
+    if (!this.openPicker) {
+      document.body.style.overflow = 'auto';
+    } else {
+      document.body.style.overflow = 'hidden';
+    }
+
+    void this.updateComplete.then(() => this.#focusInput());
+  }
+
+  #focusInput() {
+    this.shadowRoot?.querySelector('input')?.focus();
+  }
+
+  #closePicker() {
+    document.body.style.overflow = 'auto';
+    this.openPicker = false;
+    this.fileIndex = 0;
+    this.#filter('');
+  }
+
+  #handleSearch(event: KeyboardEvent) {
+    if (!this.openPicker) {
+      return;
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Tab') {
+      return;
+    }
+
+    this.#filter((event.target as HTMLInputElement).value);
+    this.fileIndex = 0;
+  }
+
+  #filter(filterKey: string) {
+    this.filteredFiles = Array.from(this.#searchMap.keys())
+      .filter((file) => file.toLowerCase().includes(filterKey.toLowerCase()))
+      .map((file) => ({ name: file, file: this.#searchMap.get(file)! }));
+  }
+
+  #getView(file: FileUnderTestModel | TestFileModel): View {
+    return file instanceof TestFileModel ? View.test : View.mutant;
+  }
+}
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 63a719830..8bffb974c 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -1,5 +1,6 @@
 export * from './components/app/app.component.js';
 import './components/file/file.component.js';
+import './components/file-picker/file-picker.component.js';
 import './components/breadcrumb.js';
 import './components/state-filter/state-filter.component.js';
 import './components/theme-switch/theme-switch.component.js';
diff --git a/packages/elements/src/lib/custom-events.ts b/packages/elements/src/lib/custom-events.ts
index e43d22b57..a32e22f0e 100644
--- a/packages/elements/src/lib/custom-events.ts
+++ b/packages/elements/src/lib/custom-events.ts
@@ -2,6 +2,7 @@ import type { MutantModel, TestModel } from 'mutation-testing-metrics';
 import type { Theme } from './theme.js';
 
 export interface CustomEventMap {
+  'mte-file-picker-open': void;
   'mutant-selected': { selected: boolean; mutant: MutantModel | undefined };
   'test-selected': { selected: boolean; test: TestModel | undefined };
   'theme-changed': { theme: Theme; themeBackgroundColor: string };
diff --git a/packages/elements/src/lib/svg-icons.ts b/packages/elements/src/lib/svg-icons.ts
new file mode 100644
index 000000000..95380a7bc
--- /dev/null
+++ b/packages/elements/src/lib/svg-icons.ts
@@ -0,0 +1,25 @@
+import { svg } from 'lit';
+
+const mutantFileIcon = svg`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+    <path fill-rule="evenodd" d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm4.78 1.97a.75.75 0 0 1 0 1.06L5.81 8l.97.97a.75.75 0 1 1-1.06 1.06l-1.5-1.5a.75.75 0 0 1 0-1.06l1.5-1.5a.75.75 0 0 1 1.06 0Zm2.44 1.06a.75.75 0 0 1 1.06-1.06l1.5 1.5a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 1 1-1.06-1.06l.97-.97-.97-.97Z" clip-rule="evenodd" />
+  </svg>
+`;
+
+const searchIcon = svg`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+    />
+  </svg>
+`;
+
+const testFileIcon = svg`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+    <path fill-rule="evenodd" d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm2.22 1.97a.75.75 0 0 0 0 1.06l.97.97-.97.97a.75.75 0 1 0 1.06 1.06l1.5-1.5a.75.75 0 0 0 0-1.06l-1.5-1.5a.75.75 0 0 0-1.06 0ZM8.75 8.5a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z" clip-rule="evenodd" />
+  </svg>
+`;
+
+export { mutantFileIcon, searchIcon, testFileIcon };
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-win32.png
index dc42539e0..210931173 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-linux.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-linux.png
index 4741dfa3b..d5a2e67e0 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-linux.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-win32.png
index 936461b38..85ae7462b 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-win32.png
index 8e213370b..e090504da 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-linux.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-linux.png
index 2ef24e5c8..3878ed811 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-linux.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-win32.png
index 76d6953e6..bf7416ce4 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-show-the-statusReason-1-chromium-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-show-the-statusReason-1-chromium-win32.png
index 566064fe9..cb674650a 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-show-the-statusReason-1-chromium-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-should-show-the-statusReason-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png
index 613236653..f00e1b865 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png
index efefe373f..8a938a555 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png
index 4e75135c7..55baafa03 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png
index 616f6c3b6..7bdf05271 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png
index 1dbd22f8f..36c161aa1 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png
index 118a4d6de..869a77b9e 100644
Binary files a/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png and b/packages/elements/test/integration/drawer-mutant.it.spec.ts-snapshots/Drawer-mutant-view-when-a-mutant-is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-linux.png
index 0a8e2bf5f..ee2ab7e0c 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-win32.png
index 782282a31..4d239870b 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-linux.png
index a2ba84951..b0dd25986 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-win32.png
index 993eeac0f..30a626ced 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-linux.png
index 428233ea8..2092df8aa 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-win32.png
index 1626e9a17..627db94e3 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-linux.png
index 056108f29..d55f8ea25 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-win32.png
index c5dd54897..30a96f161 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-should-look-as-expected-in-dark-mode-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-linux.png
index 79d1c4446..9aa63bb96 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png
index fe8fb24bb..db05bd6b6 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png
index 4a5f51aeb..06070c38b 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png
index 7df328e2c..ed405b4b7 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-linux.png
index 25f9ce577..eb9127869 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png
index 853e30493..452833dd7 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png
index cf1c48cb2..ac6af6060 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png
index cef24d357..cdcd70855 100644
Binary files a/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png and b/packages/elements/test/integration/drawer-test.it.spec.ts-snapshots/Drawer-test-view-when-read-more-is-toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/po/Breadcrumb.po.ts b/packages/elements/test/integration/po/Breadcrumb.po.ts
index 5f1559eb8..7d61cb85b 100644
--- a/packages/elements/test/integration/po/Breadcrumb.po.ts
+++ b/packages/elements/test/integration/po/Breadcrumb.po.ts
@@ -9,4 +9,9 @@ export default class Breadcrumb extends PageObject {
     const anchor = this.host.getByText(to);
     await anchor.click();
   }
+
+  public async clickOnSearchIcon(): Promise<void> {
+    const button = this.$('button');
+    await button.click();
+  }
 }
diff --git a/packages/elements/test/integration/theming.it.spec.ts b/packages/elements/test/integration/theming.it.spec.ts
index a0ba6128c..284ef1fe3 100644
--- a/packages/elements/test/integration/theming.it.spec.ts
+++ b/packages/elements/test/integration/theming.it.spec.ts
@@ -41,6 +41,14 @@ test.describe('Theming', () => {
 
       itShouldMatchScreenshot('should match the dark theme');
     });
+
+    test.describe('when opening the file picker', () => {
+      test.beforeEach(async () => {
+        await page.breadcrumb().clickOnSearchIcon();
+      });
+
+      itShouldMatchScreenshot('should match the dark theme');
+    });
   });
 
   test.describe('light theme', () => {
@@ -67,5 +75,13 @@ test.describe('Theming', () => {
 
       itShouldMatchScreenshot('should match the light theme');
     });
+
+    test.describe('when opening the file picker', () => {
+      test.beforeEach(async () => {
+        await page.breadcrumb().clickOnSearchIcon();
+      });
+
+      itShouldMatchScreenshot('should match the light theme');
+    });
   });
 });
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-linux.png
index 9e078ba2e..c60888c9f 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-win32.png
index 488894109..e13400a77 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-linux.png
index 2a9639438..2658e881f 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-win32.png
index 91d6fc4b0..9401f9ca7 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-should-match-the-dark-theme-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-linux.png
index 2d249051a..3a4605eca 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-win32.png
index f5232b587..069b4a0d4 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-linux.png
index 7412b6f32..df976e517 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-win32.png
index dac437df0..404b61ff7 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-a-code-file-should-match-the-dark-theme-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-chromium-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-chromium-linux.png
new file mode 100644
index 000000000..1897ded98
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-chromium-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-chromium-win32.png
new file mode 100644
index 000000000..2f2a82316
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-firefox-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-firefox-linux.png
new file mode 100644
index 000000000..5bd25aea9
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-firefox-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-firefox-win32.png
new file mode 100644
index 000000000..386cdd8af
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-dark-theme-when-opening-the-file-picker-should-match-the-dark-theme-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-linux.png
index f951f35ee..cb44431ce 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-win32.png
index e48b5006e..0d7624929 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-linux.png
index ce27a008d..9c4a32337 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-win32.png
index a78861265..510541f3c 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-should-match-the-light-theme-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-linux.png
index 10e677c97..569c9d244 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-win32.png
index 45e6ecca8..5e8d8cdbf 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-linux.png
index 59efc2167..726b81ebe 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-linux.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-win32.png
index 87988e535..29edb8a6c 100644
Binary files a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-win32.png and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-a-code-file-should-match-the-light-theme-1-firefox-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-chromium-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-chromium-linux.png
new file mode 100644
index 000000000..66c2afaf1
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-chromium-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-chromium-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-chromium-win32.png
new file mode 100644
index 000000000..fa6fa1d5c
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-chromium-win32.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-firefox-linux.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-firefox-linux.png
new file mode 100644
index 000000000..a808c003d
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-firefox-linux.png differ
diff --git a/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-firefox-win32.png b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-firefox-win32.png
new file mode 100644
index 000000000..e3d8eeb87
Binary files /dev/null and b/packages/elements/test/integration/theming.it.spec.ts-snapshots/Theming-light-theme-when-opening-the-file-picker-should-match-the-light-theme-1-firefox-win32.png differ
diff --git a/packages/elements/test/unit/components/breadcrumb.component.spec.ts b/packages/elements/test/unit/components/breadcrumb.component.spec.ts
index ed4f8b1cf..3efc0f808 100644
--- a/packages/elements/test/unit/components/breadcrumb.component.spec.ts
+++ b/packages/elements/test/unit/components/breadcrumb.component.spec.ts
@@ -59,6 +59,14 @@ describe(MutationTestReportBreadcrumbComponent.name, () => {
     expect(elements[2].querySelector('a')).null;
   });
 
+  it('should dispatch open-file-picker event', async () => {
+    // Act
+    const event = await sut.catchCustomEvent('mte-file-picker-open', () => sut.element.shadowRoot?.querySelector('button')?.click());
+
+    // Assert
+    expect(event).ok;
+  });
+
   function href(fragment: string) {
     return `${window.location.toString().split('#')[0]}${fragment}`;
   }
diff --git a/packages/elements/test/unit/components/file-picker.component.spec.ts b/packages/elements/test/unit/components/file-picker.component.spec.ts
new file mode 100644
index 000000000..01acbe0fc
--- /dev/null
+++ b/packages/elements/test/unit/components/file-picker.component.spec.ts
@@ -0,0 +1,195 @@
+import { userEvent } from '@vitest/browser/context';
+import { calculateMutationTestMetrics } from 'mutation-testing-metrics';
+
+import { CustomElementFixture } from '../helpers/CustomElementFixture.js';
+import { createReport } from '../helpers/factory.js';
+import { tick } from '../helpers/tick.js';
+import { MutationTestReportFilePickerComponent } from '../../../src/components/file-picker/file-picker.component.js';
+
+describe(MutationTestReportFilePickerComponent.name, () => {
+  let sut: CustomElementFixture<MutationTestReportFilePickerComponent>;
+
+  beforeEach(() => {
+    sut = new CustomElementFixture('mte-file-picker', { autoConnect: false });
+  });
+
+  it('should not show the file picker by default', async () => {
+    // Arrange
+    sut.element.rootModel = calculateMutationTestMetrics(createReport());
+
+    // Act
+    sut.connect();
+    await sut.whenStable();
+
+    // Assert
+    expect(sut.element.shadowRoot?.querySelector('#picker')).to.eq(null);
+  });
+
+  it('should show the picker when keycombo is pressed', async () => {
+    // Arrange
+    sut.element.rootModel = calculateMutationTestMetrics(createReport());
+
+    // Act
+    sut.connect();
+    await sut.whenStable();
+    await openPicker();
+
+    // Assert
+    expect(sut.element.shadowRoot?.querySelector('#picker')).toBeVisible();
+  });
+
+  it('should show the picker when macos keycombo is pressed', async () => {
+    // Arrange
+    sut.element.rootModel = calculateMutationTestMetrics(createReport());
+
+    // Act
+    sut.connect();
+    await sut.whenStable();
+    await userEvent.keyboard('{Meta>}{k}');
+    await sut.whenStable();
+
+    // Assert
+    expect(sut.element.shadowRoot?.querySelector('#picker')).toBeVisible();
+  });
+
+  describe('when the picker is open', () => {
+    beforeEach(async () => {
+      sut.element.rootModel = calculateMutationTestMetrics(
+        createReport({
+          files: {
+            'src/index.ts': { language: 'typescript', mutants: [], source: '' },
+            'src/index.html': { language: 'html', mutants: [], source: '' },
+            'src/append.js': { language: 'javascript', mutants: [], source: '' },
+          },
+        }),
+      );
+      sut.connect();
+      await sut.whenStable();
+      await openPicker();
+    });
+
+    it('should close the picker when the keycombo is pressed again', async () => {
+      // Act
+      await openPicker();
+
+      // Assert
+      expect(sut.element.shadowRoot?.querySelector('#picker')).to.eq(null);
+    });
+
+    it('should close the picker when the escape key is pressed', async () => {
+      // Act
+      await userEvent.keyboard('{Escape}');
+      await sut.whenStable();
+
+      // Assert
+      expect(sut.element.shadowRoot?.querySelector('#picker')).to.eq(null);
+    });
+
+    it('should close the picker when clicking outside the dialog', async () => {
+      // Act
+      const backdrop = sut.element.shadowRoot?.querySelector('#backdrop');
+      (backdrop as HTMLElement).click();
+      await sut.whenStable();
+
+      // Assert
+      expect(sut.element.shadowRoot?.querySelector('#picker')).to.eq(null);
+    });
+
+    describe('when not typing in the search box', () => {
+      it('should select the first item', async () => {
+        // Arrange & Act
+        await sut.whenStable();
+
+        // Assert
+        expect(sut.element.shadowRoot?.querySelector('a[data-active]')?.textContent?.trim()).include('append.js');
+      });
+    });
+
+    describe('when typing in the search box', () => {
+      it('should select the first item when searching with the letter "i"', async () => {
+        // Arrange
+        const input = sut.element.shadowRoot?.querySelector('#file-picker-input');
+
+        // Act
+        (input as HTMLInputElement).value = 'i';
+        await userEvent.type(input as HTMLInputElement, 'i');
+        await sut.whenStable();
+
+        // Assert
+        expect(sut.element.shadowRoot?.querySelector('a[data-active]')?.textContent?.trim()).include('index.html');
+      });
+
+      it('should redirect to mutant when pressing enter', async () => {
+        // Arrange
+        const input = sut.element.shadowRoot?.querySelector('#file-picker-input');
+        (input as HTMLInputElement).value = 'index.html';
+        await userEvent.type(input as HTMLInputElement, 'l');
+        await sut.whenStable();
+
+        // Act
+        await userEvent.keyboard('{enter}');
+        await sut.whenStable();
+
+        // Assert
+        expect(window.location.hash).to.eq('#mutant/index.html');
+      });
+    });
+
+    describe('when pressing the arrow keys', () => {
+      beforeEach(() => {
+        const input = sut.element.shadowRoot?.querySelector('#file-picker-input');
+        (input as HTMLInputElement).value = '';
+      });
+
+      it('should move active item to the next item when pressing down', async () => {
+        // Arrange & Act
+        await userEvent.keyboard('{arrowdown}');
+        await sut.whenStable();
+        await tick();
+
+        // Assert
+        expect(sut.element.shadowRoot?.querySelector('a[data-active]')?.textContent?.trim()).include('index.html');
+      });
+
+      it('should move to the first item when pressing down on the last item', async () => {
+        // Arrange & Act
+        await userEvent.keyboard('{arrowdown}');
+        await userEvent.keyboard('{arrowdown}');
+        await userEvent.keyboard('{arrowdown}');
+        await sut.whenStable();
+
+        // Assert
+        expect(sut.element.shadowRoot?.querySelector('a[data-active]')?.textContent?.trim()).include('append.js');
+      });
+
+      it('should move active item to the previous item when pressing up', async () => {
+        // Arrange & Act
+        await userEvent.keyboard('{arrowdown}');
+        await userEvent.keyboard('{arrowdown}');
+        await userEvent.keyboard('{arrowup}');
+
+        await sut.whenStable();
+
+        // Assert
+        expect(sut.element.shadowRoot?.querySelector('a[data-active]')?.textContent?.trim()).include('index.html');
+      });
+
+      it('should move to the last item when pressing up on the first item', async () => {
+        // Arrange
+        await userEvent.keyboard('{arrowup}');
+        await sut.whenStable();
+
+        // Act
+        await sut.whenStable();
+
+        // Assert
+        expect(sut.element.shadowRoot?.querySelector('a[data-active]')?.textContent?.trim()).include('index.ts');
+      });
+    });
+  });
+
+  async function openPicker() {
+    await userEvent.keyboard('{Control>}{k}');
+    await sut.whenStable();
+  }
+});