diff --git a/QualityControl/common/library/typedef/DataPass.js b/QualityControl/common/library/typedef/DataPass.js
new file mode 100644
index 000000000..3ddad2eb1
--- /dev/null
+++ b/QualityControl/common/library/typedef/DataPass.js
@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+/**
+ * @typedef {object} DataPass
+ * @property {string} name - Human-readable data pass name.
+ * @property {boolean} isFrozen - Whether the data pass is frozen.
+ */
diff --git a/QualityControl/common/library/typedef/DetectorSummary.js b/QualityControl/common/library/typedef/DetectorSummary.js
new file mode 100644
index 000000000..481c887ea
--- /dev/null
+++ b/QualityControl/common/library/typedef/DetectorSummary.js
@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+/**
+ * @typedef {object} DetectorSummary
+ * @property {string} name - Human-readable detector name.
+ * @property {string} type - Detector type identifier.
+ */
diff --git a/QualityControl/lib/QCModel.js b/QualityControl/lib/QCModel.js
index aa5364af6..ba2af7ee2 100644
--- a/QualityControl/lib/QCModel.js
+++ b/QualityControl/lib/QCModel.js
@@ -171,4 +171,11 @@ function initializeIntervals(intervalsService, qcObjectService, filterService, r
       runModeService.refreshInterval,
     );
   }
+
+  if (filterService.dataPassesRefreshInterval > 0) {
+    intervalsService.register(
+      filterService.getDataPasses.bind(runModeService),
+      filterService.dataPassesRefreshInterval,
+    );
+  }
 }
diff --git a/QualityControl/lib/controllers/FilterController.js b/QualityControl/lib/controllers/FilterController.js
index 0fcd51908..118b4c5d7 100644
--- a/QualityControl/lib/controllers/FilterController.js
+++ b/QualityControl/lib/controllers/FilterController.js
@@ -63,12 +63,13 @@ export class FilterController {
    */
   async getFilterConfigurationHandler(req, res) {
     try {
-      let runTypes = [];
-      if (this._filterService) {
-        runTypes = await this._filterService.runTypes;
-      }
+      const runTypes = this._filterService?.runTypes ?? [];
+      const detectors = this._filterService?.detectors ?? [];
+      const dataPasses = this._filterService?.dataPasses ?? [];
       res.status(200).json({
         runTypes,
+        detectors,
+        dataPasses,
       });
     } catch (error) {
       res.status(503).json({ error: error.message || error });
diff --git a/QualityControl/lib/dtos/ObjectGetDto.js b/QualityControl/lib/dtos/ObjectGetDto.js
index 1aee13e5f..43c93b88f 100644
--- a/QualityControl/lib/dtos/ObjectGetDto.js
+++ b/QualityControl/lib/dtos/ObjectGetDto.js
@@ -14,6 +14,7 @@
 
 import Joi from 'joi';
 import { RunNumberDto } from './filters/RunNumberDto.js';
+import { QcDetectorNameDto } from './filters/QcDetectorNameDto.js';
 
 const periodNamePattern = /^LHC\d{1,2}[a-z0-9]+$/i;
 
@@ -25,6 +26,7 @@ const periodNamePattern = /^LHC\d{1,2}[a-z0-9]+$/i;
 function createFiltersSchema(runTypes) {
   return Joi.object({
     RunNumber: RunNumberDto.optional(),
+    QcDetectorName: QcDetectorNameDto.optional(),
     RunType: runTypes.length > 0
       ? Joi.string().valid(...runTypes).optional()
       : Joi.string().optional(),
diff --git a/QualityControl/lib/dtos/filters/QcDetectorNameDto.js b/QualityControl/lib/dtos/filters/QcDetectorNameDto.js
new file mode 100644
index 000000000..a067d8e54
--- /dev/null
+++ b/QualityControl/lib/dtos/filters/QcDetectorNameDto.js
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import Joi from 'joi';
+
+export const QcDetectorNameDto = Joi.string()
+  .min(1)
+  .messages({
+    'number.base': 'Detector name must be a string',
+    'number.min': 'Detector name must not be an empty string',
+  });
diff --git a/QualityControl/lib/services/BookkeepingService.js b/QualityControl/lib/services/BookkeepingService.js
index f5d9f6353..1435a279e 100644
--- a/QualityControl/lib/services/BookkeepingService.js
+++ b/QualityControl/lib/services/BookkeepingService.js
@@ -20,6 +20,8 @@ import { wrapRunStatus } from '../dtos/BookkeepingDto.js';
 const GET_BKP_DATABASE_STATUS_PATH = '/api/status/database';
 const GET_RUN_TYPES_PATH = '/api/runTypes';
 const GET_RUN_PATH = '/api/runs';
+const GET_DETECTORS_PATH = '/api/detectors';
+const GET_DATA_PASSES_PATH = '/api/dataPasses';
 
 const LOG_FACILITY = `${process.env.npm_config_log_label ?? 'qcg'}/bkp-service`;
 
@@ -127,6 +129,23 @@ export class BookkeepingService {
     return data;
   }
 
+  /**
+   * Retrieve the list of data passes from the bookkeeping service.
+   * @returns {Promise<object[]>} Resolves with an array of data passes.
+   */
+  async retrieveDataPasses() {
+    const { data } = await httpGetJson(
+      this._hostname,
+      this._port,
+      this._createPath(GET_DATA_PASSES_PATH),
+      {
+        protocol: this._protocol,
+        rejectUnauthorized: false,
+      },
+    );
+    return Array.isArray(data) ? data : [];
+  }
+
   /**
    * Retrieves the information of a specific run from the Bookkeeping service
    * @param {number} runNumber - The run number to check the status for
@@ -181,6 +200,23 @@ export class BookkeepingService {
     }
   }
 
+  /**
+   * Retrieves the information about the detectors from the Bookkeeping service.
+   * @returns {Promise<object[]>} Array of detector summaries.
+   */
+  async retrieveDetectorSummaries() {
+    const { data } = await httpGetJson(
+      this._hostname,
+      this._port,
+      this._createPath(GET_DETECTORS_PATH),
+      {
+        protocol: this._protocol,
+        rejectUnauthorized: false,
+      },
+    );
+    return Array.isArray(data) ? data : [];
+  }
+
   /**
    * Helper method to construct a URL path with the required authentication token.
    * Appends the service's token as a query parameter to the provided path.
diff --git a/QualityControl/lib/services/FilterService.js b/QualityControl/lib/services/FilterService.js
index d6da52c57..26f55f866 100644
--- a/QualityControl/lib/services/FilterService.js
+++ b/QualityControl/lib/services/FilterService.js
@@ -31,10 +31,13 @@ export class FilterService {
     this._logger = LogManager.getLogger(LOG_FACILITY);
     this._bookkeepingService = bookkeepingService;
     this._runTypes = [];
-    this.initFilters();
+    this._detectors = Object.freeze([]);
+    this._dataPasses = Object.freeze([]);
 
     this._runTypesRefreshInterval = config?.bookkeeping?.runTypesRefreshInterval ??
-      (config?.bookkeeping ? 24 * 60 * 60 * 1000 : -1);
+      (config?.bookkeeping ? 24 * 60 * 60 * 1000 : -1);// default interval is 1 day
+    this._dataPassesRefreshInterval = config?.bookkeeping?.dataPassesRefreshInterval ??
+      (config?.bookkeeping ? 60 * 60 * 1000 : -1);// default interval is 1 hour
 
     this.initFilters().catch((error) => {
       this._logger.errorMessage(`FilterService initialization failed: ${error.message || error}`);
@@ -48,6 +51,8 @@ export class FilterService {
   async initFilters() {
     await this._bookkeepingService.connect();
     await this.getRunTypes();
+    await this._initializeDetectors();
+    await this.getDataPasses();
   }
 
   /**
@@ -71,6 +76,56 @@ export class FilterService {
     }
   }
 
+  /**
+   * This method is used to retrieve the list of data passes from the bookkeeping service.
+   * @returns {Promise<void>} Resolves when the list of data passes is available.
+   */
+  async getDataPasses() {
+    try {
+      if (!this._bookkeepingService.active) {
+        return;
+      }
+
+      const rawDataPasses = await this._bookkeepingService.retrieveDataPasses();
+      this._dataPasses = Object.freeze(rawDataPasses.map(({ name, isFrozen }) => Object.freeze({ name, isFrozen })));
+    } catch (error) {
+      this._logger.errorMessage(`Error while retrieving data passes: ${error.message || error}`);
+    }
+  }
+
+  /**
+   * Returns a list of data passes.
+   * @returns {Readonly<DataPass[]>} An immutable array of data passes.
+   */
+  get dataPasses() {
+    return this._dataPasses;
+  }
+
+  /**
+   * This method is used to retrieve the list of detectors from the bookkeeping service
+   * @returns {Promise<undefined>} Resolves when the list of detectors is available
+   */
+  async _initializeDetectors() {
+    try {
+      if (!this._bookkeepingService.active) {
+        return;
+      }
+      
+      const detectorSummaries = await this._bookkeepingService.retrieveDetectorSummaries();
+      this._detectors = Object.freeze(detectorSummaries.map(({ name, type }) => Object.freeze({ name, type })));
+    } catch (error) {
+      this._logger.errorMessage(`Failed to retrieve detectors: ${error?.message || error}`);
+    }
+  }
+
+  /**
+   * Returns a list of detector summaries.
+   * @returns {Readonly<DetectorSummary[]>} An immutable array of detector summaries.
+   */
+  get detectors() {
+    return this._detectors;
+  }
+
   /**
    * Returns the interval in milliseconds for how often the list of run types should be refreshed.
    * @returns {number} Interval in milliseconds for refreshing the list of run types.
@@ -79,6 +134,14 @@ export class FilterService {
     return this._runTypesRefreshInterval;
   }
 
+  /**
+   * Returns the interval in milliseconds for how often the list of data passes should be refreshed.
+   * @returns {number} Interval in milliseconds for refreshing the list of data passes.
+   */
+  get dataPassesRefreshInterval() {
+    return this._dataPassesRefreshInterval;
+  }
+
   /**
    * This method is used to initialize the filter service
    * @returns {string[]} - resolves when the filter service is initialized
diff --git a/QualityControl/public/common/filters/filter.js b/QualityControl/public/common/filters/filter.js
index 6d658d9e2..a063dc108 100644
--- a/QualityControl/public/common/filters/filter.js
+++ b/QualityControl/public/common/filters/filter.js
@@ -13,7 +13,7 @@
  */
 
 import { FilterType } from './filterTypes.js';
-import { h, RemoteData } from '/js/src/index.js';
+import { h, RemoteData, DropdownComponent } from '/js/src/index.js';
 
 /**
  * Builds a filter element. If options to show, selector filter element; otherwise, input element.
@@ -61,6 +61,149 @@ export const dynamicSelector = (config) => {
   });
 };
 
+/**
+ * Represents options grouped for HTML <optgroup>.
+ * Keys are group labels (for the <optgroup> label),
+ * values are arrays of option values (for <option> elements).
+ * @typedef {Record<string, string[]>} GroupedDropdownOptions
+ */
+
+/**
+ * Builds a filter element. If options to show, selector filter element; otherwise, input element.
+ * @param {object} config - Configuration object for building the filter element.
+ * @param {string} config.queryLabel - The key used to query the storage with this parameter.
+ * @param {string} config.placeholder - The placeholder text to be displayed in the input field.
+ * @param {string} config.id - The unique identifier for the input field.
+ * @param {object} config.filterMap - Map of the current filter values.
+ * @param {string} [config.type='text'] - The type of the filter element (e.g., 'text', 'number').
+ * @param {GroupedDropdownOptions} [config.options={}] - List of options for a grouped dropdown selector (optional).
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onChangeCallback
+ * - Callback to be triggered on the change event of the filter.
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onInputCallback
+ * - Callback to be triggered on the input event.
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onEnterCallback
+ * - Callback to be triggered when the Enter key is pressed.
+ * @param {string} [config.width='.w-20'] - The CSS class that defines the width of the filter.
+ * @returns {vnode} A virtual node element representing the filter element (input or grouped dropdown).
+ */
+export const groupedDropdownComponent = ({
+  queryLabel,
+  placeholder,
+  id,
+  filterMap,
+  options = {},
+  onChangeCallback,
+  onInputCallback,
+  onEnterCallback,
+  type = 'text',
+  width = '.w-20',
+}) => {
+  const groups = Object.keys(options);
+  if (!groups.length) {
+    return filterInput({ queryLabel, placeholder, id, filterMap, onInputCallback, onEnterCallback, type, width });
+  }
+
+  const selectedOption = filterMap[queryLabel];
+  const validValue = Object.values(options).flat().some((option) => option === selectedOption);
+  if (selectedOption && !validValue) {
+    onChangeCallback(queryLabel, '', true);
+  }
+
+  const sortedGroupedOptions = groups
+    .sort((a, b) => a.localeCompare(b)) // sort group labels
+    .reduce((acc, key) => {
+      // sort option names and add to accumulator
+      acc[key] = [...options[key]].sort((a, b) => a.localeCompare(b));
+      return acc;
+    }, {});
+
+  return h(`${width}`, [
+    h('select.form-control', {
+      placeholder,
+      id,
+      name: id,
+      value: validValue ? selectedOption : '',
+      onchange: (event) => onChangeCallback(queryLabel, event.target.value, true),
+    }, [
+      h('option', { value: '' }, placeholder),
+      h('hr'),
+      ...Object.entries(sortedGroupedOptions).map(([key, value]) => h(
+        'optgroup',
+        { label: key },
+        value.map((option) => h('option', { value: option }, option)),
+      )),
+    ]),
+  ]);
+};
+
+/**
+ * Builds a filter element. If options to show, selector filter element; otherwise, input element.
+ * @param {object} config - Configuration object for building the filter element.
+ * @param {string} config.queryLabel - The key used to query the storage with this parameter.
+ * @param {string} config.placeholder - The placeholder text to be displayed in the input field.
+ * @param {string} config.id - The unique identifier for the input field.
+ * @param {object} config.filterMap - Map of the current filter values.
+ * @param {string} [config.type='text'] - The type of the filter element (e.g., 'text', 'number').
+ * @param {Record<string, object>} [config.options={}] - List of options for an input with dropdown selector (optional).
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onChangeCallback
+ * - Callback to be triggered on the change event of the filter.
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onInputCallback
+ * - Callback to be triggered on the input event.
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onEnterCallback
+ * - Callback to be triggered when the Enter key is pressed.
+ * @param {string} [config.width='.w-20'] - The CSS class that defines the width of the filter.
+ * @param {number} [config.maxDropdownOptions=20] - The maximum amount of dropdown options to display at once.
+ * @returns {vnode} A virtual node element representing the filter element.
+ */
+export const inputWithDropdownComponent = ({
+  queryLabel,
+  placeholder,
+  id,
+  filterMap,
+  options = {},
+  onChangeCallback,
+  onInputCallback,
+  onEnterCallback,
+  type = 'text',
+  width = '.w-20',
+  maxDropdownOptions = 10,
+}) => {
+  const dropdownOptions = Object.keys(options);
+  if (!dropdownOptions.length) {
+    return filterInput({ queryLabel, placeholder, id, filterMap, onInputCallback, onEnterCallback, type, width });
+  }
+
+  const dropdownComponent = DropdownComponent(
+    filterInput({
+      queryLabel,
+      placeholder,
+      id,
+      filterMap,
+      type,
+      onInputCallback,
+      onEnterCallback,
+      width: '.w-100',
+    }),
+    h('', { id: `${queryLabel?.toLowerCase()}-dropdown` }, Object.entries(options)
+      .filter(([option]) => option.toLowerCase().includes(filterMap[queryLabel]?.toLowerCase() ?? ''))
+      .sort(([a], [b]) => a.localeCompare(b))
+      .slice(0, maxDropdownOptions)
+      .map(([option, htmlOptions]) => h(
+        'button.btn.d-block.w-100',
+        {
+          onclick: () => {
+            onChangeCallback(queryLabel, option);
+            dropdownComponent.state.hidePopover();
+          },
+          ...htmlOptions ?? {},
+        },
+        option,
+      ))),
+  );
+
+  return h(width, dropdownComponent);
+};
+
 /**
  * Builds a filter input element that allows the user to specify a parameter to be used when querying objects.
  * This function renders a text input element with event handling for input and Enter key press.
diff --git a/QualityControl/public/common/filters/filterTypes.js b/QualityControl/public/common/filters/filterTypes.js
index 1ef8f14b2..0ac837bf3 100644
--- a/QualityControl/public/common/filters/filterTypes.js
+++ b/QualityControl/public/common/filters/filterTypes.js
@@ -14,7 +14,9 @@
 
 const FilterType = {
   INPUT: 'input',
+  INPUT_WITH_DROPDOWN: 'inputWithDropdown',
   DROPDOWN: 'dropdownSelector',
+  GROUPED_DROPDOWN: 'groupedDropdownSelector',
   RUN_MODE: 'runModeSelector',
 };
 
diff --git a/QualityControl/public/common/filters/filterViews.js b/QualityControl/public/common/filters/filterViews.js
index e5eb8edd7..486968a5d 100644
--- a/QualityControl/public/common/filters/filterViews.js
+++ b/QualityControl/public/common/filters/filterViews.js
@@ -12,7 +12,13 @@
  * or submit itself to any jurisdiction.
  */
 
-import { filterInput, dynamicSelector, ongoingRunsSelector } from './filter.js';
+import {
+  filterInput,
+  dynamicSelector,
+  ongoingRunsSelector,
+  groupedDropdownComponent,
+  inputWithDropdownComponent,
+} from './filter.js';
 import { FilterType } from './filterTypes.js';
 import { filtersConfig, runModeFilterConfig } from './filtersConfig.js';
 import { runModeCheckbox } from './runMode/runModeCheckbox.js';
@@ -50,6 +56,10 @@ const createFilterElement =
       case FilterType.INPUT: return filterInput({ ...commonConfig, type: inputType });
       case FilterType.DROPDOWN:
         return dynamicSelector({ ...commonConfig, options, onChangeCallback, inputType });
+      case FilterType.GROUPED_DROPDOWN:
+        return groupedDropdownComponent({ ...commonConfig, options, onChangeCallback, inputType });
+      case FilterType.INPUT_WITH_DROPDOWN:
+        return inputWithDropdownComponent({ ...commonConfig, options, onChangeCallback, inputType });
       case FilterType.RUN_MODE:
         return ongoingRunsSelector(
           { ...commonConfig },
diff --git a/QualityControl/public/common/filters/filtersConfig.js b/QualityControl/public/common/filters/filtersConfig.js
index 74f4faf7a..9bf13877b 100644
--- a/QualityControl/public/common/filters/filtersConfig.js
+++ b/QualityControl/public/common/filters/filtersConfig.js
@@ -17,10 +17,12 @@ import { FilterType } from './filterTypes.js';
 /**
  * Returns an array of filter configuration objects used to render dynamic filter inputs.
  * @param {FilterService} filterService - service to get the data to populate the filters
- * @param {Array<string>} filterService.runTypes - run types to show in the filter
- * @returns {Array<object>} Filter configuration array
+ * @param {RemoteData<string[]>} filterService.runTypes - run types to show in the filter
+ * @param {RemoteData<DetectorSummary[]>} filterService.detectors - detectors to show in the filter
+ * @param {RemoteData<DataPass[]>} filterService.dataPasses - data passes to show in the filter
+ * @returns {object[]} Filter configuration array
  */
-export const filtersConfig = ({ runTypes }) => [
+export const filtersConfig = ({ runTypes, detectors, dataPasses }) => [
   {
     type: FilterType.INPUT,
     queryLabel: 'RunNumber',
@@ -35,6 +37,22 @@ export const filtersConfig = ({ runTypes }) => [
     id: 'runTypeFilter',
     options: runTypes,
   },
+  {
+    type: FilterType.GROUPED_DROPDOWN,
+    queryLabel: 'QcDetectorName',
+    placeholder: 'Detector (any)',
+    id: 'detectorFilter',
+    options: detectors.match({
+      Success: (detectors) => detectors.reduce((acc, detector) => {
+        if (!acc[detector.type]) {
+          acc[detector.type] = [];
+        }
+        acc[detector.type].push(detector.name);
+        return acc;
+      }, {}),
+      Other: () => {},
+    }),
+  },
   {
     type: FilterType.INPUT,
     queryLabel: 'PeriodName',
@@ -42,10 +60,17 @@ export const filtersConfig = ({ runTypes }) => [
     id: 'periodNameFilter',
   },
   {
-    type: FilterType.INPUT,
+    type: FilterType.INPUT_WITH_DROPDOWN,
     queryLabel: 'PassName',
     placeholder: 'PassName (e.g. apass2)',
     id: 'passNameFilter',
+    options: dataPasses.match({
+      Success: (payload) => payload.reduce((acc, dataPass) => {
+        acc[dataPass.name] = dataPass.isFrozen ? { style: 'color: var(--color-gray-dark);' } : {};
+        return acc;
+      }, {}),
+      Other: () => {},
+    }),
   },
 ];
 
diff --git a/QualityControl/public/common/filters/model/FilterModel.js b/QualityControl/public/common/filters/model/FilterModel.js
index d2f209732..ed4ea4453 100644
--- a/QualityControl/public/common/filters/model/FilterModel.js
+++ b/QualityControl/public/common/filters/model/FilterModel.js
@@ -18,7 +18,7 @@ import FilterService from '../../../services/Filter.service.js';
 import { RunStatus } from '../../../library/runStatus.enum.js';
 import { prettyFormatDate } from '../../utils.js';
 
-const CCDB_QUERY_PARAMS = ['PeriodName', 'PassName', 'RunNumber', 'RunType'];
+const CCDB_QUERY_PARAMS = ['PeriodName', 'PassName', 'RunNumber', 'RunType', 'QcDetectorName'];
 
 const RUN_INFORMATION_MAP = {
   startTime: prettyFormatDate,
diff --git a/QualityControl/public/services/Filter.service.js b/QualityControl/public/services/Filter.service.js
index e61e0cfeb..0758cfaa6 100644
--- a/QualityControl/public/services/Filter.service.js
+++ b/QualityControl/public/services/Filter.service.js
@@ -27,7 +27,10 @@ export default class FilterService {
     this.filterModel = filterModel;
     this.loader = filterModel.model.loader;
 
-    this.runTypes = RemoteData.notAsked();
+    this._runTypes = RemoteData.notAsked();
+    this._detectors = RemoteData.notAsked();
+    this._dataPasses = RemoteData.notAsked();
+
     this.ongoingRuns = RemoteData.notAsked();
   }
 
@@ -35,14 +38,20 @@ export default class FilterService {
    * Method to get all run types to show in the filter
    * @returns {RemoteData} - result within a RemoteData object
    */
-  async getRunTypes() {
-    this.runTypes = RemoteData.loading();
+  async getFilterConfigurations() {
+    this._runTypes = RemoteData.loading();
+    this._detectors = RemoteData.loading();
+    this._dataPasses = RemoteData.notAsked();
     this.filterModel.notify();
     const { result, ok } = await this.loader.get('/api/filter/configuration');
     if (ok) {
-      this.runTypes = RemoteData.success(result?.runTypes || []);
+      this._runTypes = RemoteData.success(result?.runTypes || []);
+      this._detectors = RemoteData.success(result?.detectors || []);
+      this._dataPasses = RemoteData.success(result?.dataPasses || []);
     } else {
-      this.runTypes = RemoteData.failure('Error retrieving runTypes');
+      this._runTypes = RemoteData.failure('Error retrieving runTypes');
+      this._detectors = RemoteData.failure('Error retrieving detectors');
+      this._dataPasses = RemoteData.failure('Error retrieving dataPasses');
     }
     this.filterModel.notify();
   }
@@ -73,7 +82,7 @@ export default class FilterService {
    * @returns {void}
    */
   async initFilterService() {
-    await this.getRunTypes();
+    await this.getFilterConfigurations();
   }
 
   /**
@@ -105,4 +114,28 @@ export default class FilterService {
     }
     this.filterModel.notify();
   }
+
+  /**
+   * Gets the list of run types.
+   * @returns {string[]} An array containing the run types.
+   */
+  get runTypes() {
+    return this._runTypes;
+  }
+
+  /**
+   * Gets the list of detectors.
+   * @returns {DetectorSummary[]} An array containing detector objects.
+   */
+  get detectors() {
+    return this._detectors;
+  }
+
+  /**
+   * Returns a {@link RemoteData} object containing an array of data type {@link DataPass}.
+   * @returns {RemoteData<DataPass[]>} A {@link RemoteData} object containing an array of data type {@link DataPass}.
+   */
+  get dataPasses() {
+    return this._dataPasses;
+  }
 }
diff --git a/QualityControl/test/lib/controllers/FiltersController.test.js b/QualityControl/test/lib/controllers/FiltersController.test.js
index a5cdd026e..60ad0f158 100644
--- a/QualityControl/test/lib/controllers/FiltersController.test.js
+++ b/QualityControl/test/lib/controllers/FiltersController.test.js
@@ -38,10 +38,24 @@ export const filtersControllerTestSuite = async () => {
   });
 
   suite('getFilterConfigurationHandler', async () => {
-    test('should successfully retrieve run types from Bookkeeping service', async () => {
+    test('should successfully retrieve run types, detectors and data passes from Bookkeeping service', async () => {
       const filterService = sinon.createStubInstance(FilterService);
       const mockedRunTypes = ['runType1', 'runType2'];
+      const mockedDetectors = [
+        {
+          name: 'Detector human-readable name',
+          type: 'Detector type identifier',
+        },
+      ];
+      const mockedDataPasses = [
+        {
+          name: 'LHC22a_apass1',
+          isFrozen: false,
+        },
+      ];
       sinon.stub(filterService, 'runTypes').get(() => mockedRunTypes);
+      sinon.stub(filterService, 'detectors').get(() => mockedDetectors);
+      sinon.stub(filterService, 'dataPasses').get(() => mockedDataPasses);
 
       const res = {
         status: sinon.stub().returnsThis(),
@@ -51,9 +65,12 @@ export const filtersControllerTestSuite = async () => {
       const filterController = new FilterController(filterService);
       await filterController.getFilterConfigurationHandler(req, res);
       ok(res.status.calledWith(200), 'Response status was not 200');
-      ok(res.json.calledWith({ runTypes: mockedRunTypes }), 'Run types were not sent back');
+      ok(
+        res.json.calledWith({ runTypes: mockedRunTypes, detectors: mockedDetectors, dataPasses: mockedDataPasses }),
+        'Response should include runTypes, detectors and dataPasses',
+      );
     });
-    test('should return an empty array if bookkeeping service is not defined', async () => {
+    test('should return an empty arrays if bookkeeping service is not defined', async () => {
       const bkpService = null;
       const res = {
         status: sinon.stub().returnsThis(),
@@ -64,8 +81,8 @@ export const filtersControllerTestSuite = async () => {
       await filterController.getFilterConfigurationHandler(req, res);
       ok(res.status.calledWith(200), 'Response status was not 200');
       ok(
-        res.json.calledWith({ runTypes: [] }),
-        'Run types were not sent as an empty array',
+        res.json.calledWith({ runTypes: [], detectors: [], dataPasses: [] }),
+        'runTypes, detectors and dataPasses were not sent as an empty array',
       );
     });
   });
diff --git a/QualityControl/test/lib/services/BookkeepingService.test.js b/QualityControl/test/lib/services/BookkeepingService.test.js
index 9b1c0de5e..cc595cbc1 100644
--- a/QualityControl/test/lib/services/BookkeepingService.test.js
+++ b/QualityControl/test/lib/services/BookkeepingService.test.js
@@ -288,6 +288,202 @@ export const bookkeepingServiceTestSuite = async () => {
         ok(Object.values(RunStatus).includes(runStatus));
       });
 
+      suite('Retrieve detector summaries', () => {
+        const GET_DETECTORS_PATH = '/api/detectors';
+
+        let bkpService = null;
+
+        beforeEach(() => {
+          bkpService = new BookkeepingService(VALID_CONFIG.bookkeeping);
+          bkpService.validateConfig(); // ensures internal fields like _hostname/_port/_token are set
+          bkpService.connect();
+        });
+
+        afterEach(() => {
+          nock.cleanAll();
+        });
+
+        test('should handle all detector types correctly', async () => {
+          const mockResponse = {
+            data: [
+              { id: 1, name: 'ACO', type: 'PHYSICAL', createdAt: 1765468282000, updatedAt: 1765468282000 },
+              { id: 2, name: 'EVS', type: 'AOT-EVENT', createdAt: 1765468282000, updatedAt: 1765468282000 },
+              { id: 3, name: 'GLO', type: 'QC', createdAt: 1765468282000, updatedAt: 1765468282000 },
+              { id: 4, name: 'MUD', type: 'MUON-GLO', createdAt: 1765468282000, updatedAt: 1765468282000 },
+              { id: 5, name: 'VTX', type: 'AOT-GLO', createdAt: 1765468282000, updatedAt: 1765468282000 },
+              { id: 6, name: 'TST', type: 'VIRTUAL', createdAt: 1765468282000, updatedAt: 1765468282000 },
+            ],
+          };
+
+          nock(VALID_CONFIG.bookkeeping.url)
+            .get(GET_DETECTORS_PATH)
+            .query({ token: VALID_CONFIG.bookkeeping.token })
+            .reply(200, mockResponse);
+
+          const result = await bkpService.retrieveDetectorSummaries();
+
+          ok(Array.isArray(result));
+          strictEqual(result.length, mockResponse.data.length);
+
+          // Verify detector data is preserved
+          deepStrictEqual(result, mockResponse.data);
+        });
+
+        test('should return empty array when data is not an array', async () => {
+          const mockResponse = {
+            data: null,
+          };
+
+          nock(VALID_CONFIG.bookkeeping.url)
+            .get(GET_DETECTORS_PATH)
+            .query({ token: VALID_CONFIG.bookkeeping.token })
+            .reply(200, mockResponse);
+
+          const result = await bkpService.retrieveDetectorSummaries();
+
+          ok(Array.isArray(result));
+          strictEqual(result.length, 0);
+        });
+
+        test('should return empty array when data is empty array', async () => {
+          const mockResponse = {
+            data: [],
+          };
+
+          nock(VALID_CONFIG.bookkeeping.url)
+            .get(GET_DETECTORS_PATH)
+            .query({ token: VALID_CONFIG.bookkeeping.token })
+            .reply(200, mockResponse);
+
+          const result = await bkpService.retrieveDetectorSummaries();
+
+          ok(Array.isArray(result));
+          strictEqual(result.length, 0);
+        });
+      });
+
+      suite('Retrieve data passes', () => {
+        const GET_DATA_PASSES_PATH = '/api/dataPasses';
+
+        let bkpService = null;
+
+        beforeEach(() => {
+          bkpService = new BookkeepingService(VALID_CONFIG.bookkeeping);
+          bkpService.validateConfig(); // ensures internal fields like _hostname/_port/_token are set
+          bkpService.connect();
+        });
+
+        afterEach(() => {
+          nock.cleanAll();
+        });
+
+        test('should handle all detector types correctly', async () => {
+          const mockResponse = {
+            data: [
+              {
+                id: 9,
+                name: 'LHC23f_cpass0',
+                isFrozen: false,
+                versions: [],
+                pdpBeamTypes: ['OO'],
+                runCount: 1,
+                simulationPassesCount: 1,
+              },
+              {
+                id: 2,
+                name: 'LHC22b_skimming',
+                isFrozen: false,
+                versions: [],
+                pdpBeamTypes: ['pp'],
+                runCount: 2,
+                simulationPassesCount: 2,
+              },
+              {
+                id: 5,
+                name: 'LHC22b_apass2_skimmed',
+                isFrozen: false,
+                versions: [],
+                pdpBeamTypes: ['PbPb'],
+                runCount: 3,
+                simulationPassesCount: 1,
+              },
+              {
+                id: 1,
+                name: 'LHC22b_apass1',
+                isFrozen: false,
+                versions: [],
+                pdpBeamTypes: ['pp'],
+                runCount: 4,
+                simulationPassesCount: 0,
+              },
+              {
+                id: 4,
+                name: 'LHC22a_apass2',
+                isFrozen: false,
+                versions: [],
+                pdpBeamTypes: ['PbPb'],
+                runCount: 5,
+                simulationPassesCount: 2,
+              },
+              {
+                id: 3,
+                name: 'LHC22a_apass1',
+                isFrozen: false,
+                versions: [],
+                pdpBeamTypes: ['PbPb'],
+                runCount: 4,
+                simulationPassesCount: 0,
+              },
+            ],
+          };
+
+          nock(VALID_CONFIG.bookkeeping.url)
+            .get(GET_DATA_PASSES_PATH)
+            .query({ token: VALID_CONFIG.bookkeeping.token })
+            .reply(200, mockResponse);
+
+          const result = await bkpService.retrieveDataPasses();
+
+          ok(Array.isArray(result));
+          strictEqual(result.length, mockResponse.data.length);
+
+          // Verify data passes data is preserved
+          deepStrictEqual(result, mockResponse.data);
+        });
+
+        test('should return empty array when data is not an array', async () => {
+          const mockResponse = {
+            data: null,
+          };
+
+          nock(VALID_CONFIG.bookkeeping.url)
+            .get(GET_DATA_PASSES_PATH)
+            .query({ token: VALID_CONFIG.bookkeeping.token })
+            .reply(200, mockResponse);
+
+          const result = await bkpService.retrieveDataPasses();
+
+          ok(Array.isArray(result));
+          strictEqual(result.length, 0);
+        });
+
+        test('should return empty array when data is empty array', async () => {
+          const mockResponse = {
+            data: [],
+          };
+
+          nock(VALID_CONFIG.bookkeeping.url)
+            .get(GET_DATA_PASSES_PATH)
+            .query({ token: VALID_CONFIG.bookkeeping.token })
+            .reply(200, mockResponse);
+
+          const result = await bkpService.retrieveDataPasses();
+
+          ok(Array.isArray(result));
+          strictEqual(result.length, 0);
+        });
+      });
+
       test('should return ONGOING status when timeO2End is not present', async () => {
         const mockResponse = { data: { timeO2End: undefined } };
 
diff --git a/QualityControl/test/lib/services/FilterService.test.js b/QualityControl/test/lib/services/FilterService.test.js
index 248671f04..937f87b94 100644
--- a/QualityControl/test/lib/services/FilterService.test.js
+++ b/QualityControl/test/lib/services/FilterService.test.js
@@ -12,7 +12,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { deepStrictEqual } from 'node:assert';
+import { deepStrictEqual, ok, strictEqual } from 'node:assert';
 import { suite, test, beforeEach, afterEach } from 'node:test';
 import { FilterService } from '../../../lib/services/FilterService.js';
 import { RunStatus } from '../../../common/library/runStatus.enum.js';
@@ -24,6 +24,7 @@ export const filterServiceTestSuite = async () => {
   const configMock = {
     bookkeeping: {
       runTypesRefreshInterval: 24 * 60 * 60 * 1000, // 24 hours
+      dataPassesRefreshInterval: 60 * 60 * 1000, // 1 hour
     },
   };
 
@@ -32,6 +33,8 @@ export const filterServiceTestSuite = async () => {
       connect: stub(),
       retrieveRunTypes: stub(),
       retrieveRunInformation: stub(),
+      retrieveDetectorSummaries: stub(),
+      retrieveDataPasses: stub(),
       active: true, // assume the bookkeeping service is active by default
     };
     filterService = new FilterService(bookkeepingServiceMock, configMock);
@@ -57,12 +60,33 @@ export const filterServiceTestSuite = async () => {
       deepStrictEqual(filterServiceWithDefaultConfig._runTypesRefreshInterval, 24 * 60 * 60 * 1000);
     });
 
+    test('should set data passes refresh interval to default if not provided', () => {
+      const filterServiceWithDefaultConfig = new FilterService(bookkeepingServiceMock, { bookkeeping: {} });
+      strictEqual(filterServiceWithDefaultConfig._dataPassesRefreshInterval, 60 * 60 * 1000);
+    });
+
     test('should set run types refresh interval to the value from config', () => {
       const customConfig = { bookkeeping: { runTypesRefreshInterval: 5000 } };
       const filterServiceWithCustomConfig = new FilterService(bookkeepingServiceMock, customConfig);
       deepStrictEqual(filterServiceWithCustomConfig._runTypesRefreshInterval, 5000);
     });
 
+    test('should set data passes refresh interval to the value from config', () => {
+      const customConfig = { bookkeeping: { dataPassesRefreshInterval: 5000 } };
+      const filterServiceWithCustomConfig = new FilterService(bookkeepingServiceMock, customConfig);
+      strictEqual(filterServiceWithCustomConfig._dataPassesRefreshInterval, 5000);
+    });
+
+    test('should init _detectors on instantiation', async () => {
+      deepStrictEqual(filterService._detectors, []);
+      ok(Object.isFrozen(filterService._detectors));
+    });
+
+    test('should init _dataPasses on instantiation', async () => {
+      deepStrictEqual(filterService._dataPasses, []);
+      ok(Object.isFrozen(filterService._dataPasses));
+    });
+
     test('should init filters on instantiation', async () => {
       const initFiltersStub = stub(filterService, 'initFilters');
       await filterService.initFilters();
@@ -71,7 +95,54 @@ export const filterServiceTestSuite = async () => {
   });
 
   suite('initFilters', async () => {
+    test('should call _initializeDetectors', async () => {
+      const initializeDetectorsStub = stub(filterService, '_initializeDetectors');
+      await filterService.initFilters();
+      ok(initializeDetectorsStub.calledOnce);
+    });
 
+    test('should set _detectors on _initializeDetectors call', async () => {
+      const DETECTOR_SUMMARIES = [
+        {
+          name: 'Detector human-readable name',
+          type: 'Detector type identifier',
+        },
+      ];
+
+      bookkeepingServiceMock.retrieveDetectorSummaries.resolves(DETECTOR_SUMMARIES);
+      await filterService._initializeDetectors();
+
+      deepStrictEqual(filterService._detectors, DETECTOR_SUMMARIES);
+      ok(Object.isFrozen(filterService._detectors));
+    });
+
+    test('should call getDataPasses', async () => {
+      const getDataPassesStub = stub(filterService, 'getDataPasses');
+      await filterService.initFilters();
+      ok(getDataPassesStub.calledOnce);
+    });
+
+    test('should set _dataPasses on getDataPasses call', async () => {
+      const DATA_PASSES = [
+        {
+          name: 'Data pass human-readable name 1',
+          isFrozen: false,
+          dummy: 'some dummy data that should be removed',
+        },
+        {
+          name: 'Data pass human-readable name 2',
+          isFrozen: true,
+          dummy: 'some more dummy data that should be removed',
+        },
+      ];
+
+      bookkeepingServiceMock.retrieveDataPasses.resolves(DATA_PASSES);
+      await filterService.getDataPasses();
+
+      const EXPECTED_DATA_PASSES = DATA_PASSES.map(({ name, isFrozen }) => ({ name, isFrozen }));
+      deepStrictEqual(filterService._dataPasses, EXPECTED_DATA_PASSES);
+      ok(Object.isFrozen(filterService._dataPasses));
+    });
   });
 
   suite('getRunTypes', async () => {
@@ -105,6 +176,17 @@ export const filterServiceTestSuite = async () => {
     });
   });
 
+  suite('dataPassesRefreshInterval', async () => {
+    test('should return the data passes refresh interval', () => {
+      strictEqual(filterService.dataPassesRefreshInterval, configMock.bookkeeping.dataPassesRefreshInterval);
+    });
+
+    test('should return -1 if bookkeeping config is not set', () => {
+      const filterServiceWithoutConfig = new FilterService(bookkeepingServiceMock, {});
+      strictEqual(filterServiceWithoutConfig.dataPassesRefreshInterval, -1);
+    });
+  });
+
   suite('runTypes', async () => {
     test('should return the list of run types', () => {
       filterService._runTypes = ['type1', 'type2'];
diff --git a/QualityControl/test/public/pages/layout-show.test.js b/QualityControl/test/public/pages/layout-show.test.js
index cc18f809a..69219abe2 100644
--- a/QualityControl/test/public/pages/layout-show.test.js
+++ b/QualityControl/test/public/pages/layout-show.test.js
@@ -437,15 +437,10 @@ export const layoutShowTests = async (url, page, timeout = 5000, testParent) =>
     'should close JSON editor when clicking "Cancel"',
     { timeout },
     async () => {
-      const cancelButtonPath = 'body > div > div > div > div > button:nth-child(2)';
-      await page.locator(cancelButtonPath).click();
+      await page.locator('.o2-modal-content .btn-group > button:nth-child(2)').click();
       await delay(50);
-      const childrenCount = await page.evaluate(() => {
-        const bodyPath = 'body';
-        const body = document.querySelector(bodyPath);
-        return body.children.length;
-      });
-      strictEqual(childrenCount, 2);
+      const isModelOpen = await page.evaluate(() => document.querySelector('.o2-modal-content') !== null);
+      strictEqual(isModelOpen, false);
     },
   );
 
diff --git a/QualityControl/test/public/pages/object-tree.test.js b/QualityControl/test/public/pages/object-tree.test.js
index 31284c3e5..5b5f97e1e 100644
--- a/QualityControl/test/public/pages/object-tree.test.js
+++ b/QualityControl/test/public/pages/object-tree.test.js
@@ -337,4 +337,86 @@ export const objectTreePageTests = async (url, page, timeout = 5000, testParent)
       deepStrictEqual(options, ['', 'runType1', 'runType2']);
     },
   );
+
+  await testParent.test(
+    'should have a selector with sorted options to filter by run type if there are run types loaded',
+    { timeout },
+    async () => {
+      await page.locator('#passNameFilter').click();
+      await page.waitForSelector('#passname-dropdown', { visible: true, timeout: 1000 });
+
+      const options = await page.evaluate(() => {
+        const optionElements = document.querySelectorAll('#passname-dropdown > button');
+        return Array.from(optionElements).map((option) => option.textContent);
+      });
+
+      const expectedOptions = [
+        'LHC22a_apass1',
+        'LHC22a_apass2',
+        'LHC22b_apass1',
+        'LHC22b_apass2_skimmed',
+        'LHC22b_skimming',
+        'LHC23f_cpass0',
+      ];
+
+      strictEqual(
+        options.length,
+        expectedOptions.length,
+        `PassName dropdown should have ${expectedOptions.length} options, found ${expectedOptions}`,
+      );
+      deepStrictEqual(options, expectedOptions, 'PassName dropdown options are incorrect');
+    },
+  );
+
+  await testParent.test(
+    'should update the passNameFilter input when a dropdown option is selected',
+    { timeout },
+    async () => {
+      const expectedOptionValue
+        = await page.evaluate(() => document.querySelector('#passname-dropdown > button')?.textContent);
+
+      await page.locator('#passname-dropdown > button').click();
+      await page.waitForSelector('#passname-dropdown', { hidden: true, timeout: 1000 });
+      await delay(50);
+
+      const inputValue = await page.evaluate(() => document.querySelector('input#passNameFilter')?.value);
+
+      strictEqual(
+        inputValue,
+        expectedOptionValue,
+        'should set the input value to the clicked passName dropdown option',
+      );
+    },
+  );
+
+  await testParent.test(
+    'should have a grouped selector with sorted options to filter by detector if there are detectors loaded',
+    { timeout },
+    async () => {
+      const optionsObject = await page.evaluate(() => {
+        const optionElements = document.querySelectorAll('#detectorFilter > optgroup > option');
+
+        return Array.from(optionElements).reduce((acc, option) => {
+          const optgroup = option.parentElement.label;
+          if (!optgroup) {
+            return acc;
+          }
+
+          if (!acc[optgroup]) {
+            acc[optgroup] = [];
+          }
+          acc[optgroup].push(option.value);
+
+          return acc;
+        }, {});
+      });
+
+      deepStrictEqual(optionsObject, {
+        'AOT-EVENT': ['EVS'],
+        PHYSICAL: ['ACO', 'CPV'],
+        QC: ['GLO'],
+        VIRTUAL: ['TST'],
+      });
+    },
+  );
 };
diff --git a/QualityControl/test/setup/testSetupForBkp.js b/QualityControl/test/setup/testSetupForBkp.js
index a9c4c8a2c..33a44a610 100644
--- a/QualityControl/test/setup/testSetupForBkp.js
+++ b/QualityControl/test/setup/testSetupForBkp.js
@@ -42,6 +42,109 @@ export const initializeNockForBkp = () => {
         },
       },
     });
+  nock(BKP_URL)
+    .persist()
+    .get(`/api/detectors${TOKEN_PATH}`)
+    .reply(200, {
+      data: [
+        {
+          id: 17,
+          name: 'ACO',
+          type: 'PHYSICAL',
+          createdAt: 1765468282000,
+          updatedAt: 1765468282000,
+        },
+        {
+          id: 1,
+          name: 'CPV',
+          type: 'PHYSICAL',
+          createdAt: 1765468282000,
+          updatedAt: 1765468282000,
+        },
+        {
+          id: 23,
+          name: 'EVS',
+          type: 'AOT-EVENT',
+          createdAt: 1765468282000,
+          updatedAt: 1765468282000,
+        },
+        {
+          id: 21,
+          name: 'GLO',
+          type: 'QC',
+          createdAt: 1765468282000,
+          updatedAt: 1765468282000,
+        },
+        {
+          id: 15,
+          name: 'TST',
+          type: 'VIRTUAL',
+          createdAt: 1765468282000,
+          updatedAt: 1765468282000,
+        },
+      ],
+    });
+  nock(BKP_URL)
+    .persist()
+    .get(`/api/dataPasses${TOKEN_PATH}`)
+    .reply(200, {
+      data: [
+        {
+          id: 9,
+          name: 'LHC23f_cpass0',
+          isFrozen: false,
+          versions: [],
+          pdpBeamTypes: ['OO'],
+          runCount: 1,
+          simulationPassesCount: 1,
+        },
+        {
+          id: 2,
+          name: 'LHC22b_skimming',
+          isFrozen: false,
+          versions: [],
+          pdpBeamTypes: ['pp'],
+          runCount: 2,
+          simulationPassesCount: 2,
+        },
+        {
+          id: 5,
+          name: 'LHC22b_apass2_skimmed',
+          isFrozen: false,
+          versions: [],
+          pdpBeamTypes: ['PbPb'],
+          runCount: 3,
+          simulationPassesCount: 1,
+        },
+        {
+          id: 1,
+          name: 'LHC22b_apass1',
+          isFrozen: false,
+          versions: [],
+          pdpBeamTypes: ['pp'],
+          runCount: 4,
+          simulationPassesCount: 0,
+        },
+        {
+          id: 4,
+          name: 'LHC22a_apass2',
+          isFrozen: false,
+          versions: [],
+          pdpBeamTypes: ['PbPb'],
+          runCount: 5,
+          simulationPassesCount: 2,
+        },
+        {
+          id: 3,
+          name: 'LHC22a_apass1',
+          isFrozen: false,
+          versions: [],
+          pdpBeamTypes: ['PbPb'],
+          runCount: 4,
+          simulationPassesCount: 0,
+        },
+      ],
+    });
   nock(BKP_URL)
     .persist()
     .get(`/api/runs/0${TOKEN_PATH}`)