diff --git a/lib/domain/dtos/filters/RunFilterDto.js b/lib/domain/dtos/filters/RunFilterDto.js
index c66a194778..e27c523ab3 100644
--- a/lib/domain/dtos/filters/RunFilterDto.js
+++ b/lib/domain/dtos/filters/RunFilterDto.js
@@ -99,10 +99,10 @@ exports.RunFilterDto = Joi.object({
         mcReproducibleAsNotBad: Joi.boolean().optional(),
     }),
 
-    detectorsQc: Joi.object()
+    detectorsQcNotBadFraction: Joi.object()
         .pattern(
             Joi.string().regex(/^_\d+$/), // Detector id with '_' prefix
-            Joi.object({ notBadFraction: FloatComparisonDto }),
+            FloatComparisonDto,
         )
         .keys({
             mcReproducibleAsNotBad: Joi.boolean().optional(),
diff --git a/lib/public/Model.js b/lib/public/Model.js
index 6818118c81..0d0ae222f3 100644
--- a/lib/public/Model.js
+++ b/lib/public/Model.js
@@ -95,21 +95,27 @@ export default class Model extends Observable {
         this._appConfiguration$ = new Observable();
         this._inputDebounceTime = INPUT_DEBOUNCE_TIME;
 
+        // Setup router
+        this.router = new QueryRouter();
+        this.router.observe(this.handleLocationChange.bind(this));
+        this.router.bubbleTo(this);
+        registerFrontLinkListener((e) => this.router.handleLinkEvent(e));
+
         // Models
 
         this.home = new HomePageModel(this);
         this.home.bubbleTo(this);
 
-        this.lhcPeriods = new LhcPeriodsModel(this);
+        this.lhcPeriods = new LhcPeriodsModel(this.router);
         this.lhcPeriods.bubbleTo(this);
 
-        this.dataPasses = new DataPassesModel(this);
+        this.dataPasses = new DataPassesModel(this.router);
         this.dataPasses.bubbleTo(this);
 
         this.qcFlags = new QcFlagsModel(this);
         this.qcFlags.bubbleTo(this);
 
-        this.simulationPasses = new SimulationPassesModel(this);
+        this.simulationPasses = new SimulationPassesModel(this.router);
         this.simulationPasses.bubbleTo(this);
 
         this.qcFlagTypes = new QcFlagTypesModel(this);
@@ -178,12 +184,6 @@ export default class Model extends Observable {
         this.errorModel = new ErrorModel();
         this.errorModel.bubbleTo(this);
 
-        // Setup router
-        this.router = new QueryRouter();
-        this.router.observe(this.handleLocationChange.bind(this));
-        this.router.bubbleTo(this);
-        registerFrontLinkListener((e) => this.router.handleLinkEvent(e));
-
         // Init pages
         this.handleLocationChange();
         this.window.addEventListener('resize', debounce(() => this.notify(), 100));
diff --git a/lib/public/components/Filters/LhcFillsFilter/StableBeamFilterModel.js b/lib/public/components/Filters/LhcFillsFilter/StableBeamFilterModel.js
deleted file mode 100644
index 1bc3f8aed2..0000000000
--- a/lib/public/components/Filters/LhcFillsFilter/StableBeamFilterModel.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * @license
- * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
- */
-
-import { SelectionModel } from '../../common/selection/SelectionModel.js';
-
-/**
- * Stable beam filter model
- * Holds true or false value
- */
-export class StableBeamFilterModel extends SelectionModel {
-    /**
-     * Constructor
-     */
-    constructor() {
-        super({ availableOptions: [{ value: true }, { value: false }],
-            defaultSelection: [{ value: false }],
-            multiple: false,
-            allowEmpty: false });
-    }
-
-    /**
-     * Returns true if the current filter is stable beams only
-     *
-     * @return {boolean} true if filter is stable beams only
-     */
-    isStableBeamsOnly() {
-        return this.current;
-    }
-
-    /**
-     * Sets the current filter to stable beams only
-     *
-     * @param {boolean} value value to set this stable beams only filter with
-     * @return {void}
-     */
-    setStableBeamsOnly(value) {
-        this.select({ value });
-    }
-
-    /**
-     * Get normalized selected option
-     */
-    get normalized() {
-        return this.current;
-    }
-
-    /**
-     * Overrides SelectionModel.isEmpty to respect the fact that stable beam filter cannot be empty.
-     * @returns {boolean} true if the current value of the filter is false.
-     */
-    get isEmpty() {
-        return this.current === false;
-    }
-
-    /**
-     * Reset the filter to default values
-     *
-     * @return {void}
-     */
-    resetDefaults() {
-        if (!this.isEmpty) {
-            this.reset();
-            this.notify();
-        }
-    }
-}
diff --git a/lib/public/components/Filters/LhcFillsFilter/stableBeamFilter.js b/lib/public/components/Filters/LhcFillsFilter/stableBeamFilter.js
deleted file mode 100644
index b4429c002c..0000000000
--- a/lib/public/components/Filters/LhcFillsFilter/stableBeamFilter.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * @license
- * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
- */
-
-import { h } from '/js/src/index.js';
-import { switchInput } from '../../common/form/switchInput.js';
-import { radioButton } from '../../common/form/inputs/radioButton.js';
-
-/**
- * Display a toggle switch or radio buttons to filter stable beams only
- *
- * @param {StableBeamFilterModel} stableBeamFilterModel the stableBeamFilterModel
- * @param {boolean} radioButtonMode define whether or not to return radio buttons or a switch.
- * @returns {Component} the toggle switch
- */
-export const toggleStableBeamOnlyFilter = (stableBeamFilterModel, radioButtonMode = false) => {
-    const name = 'stableBeamsOnlyRadio';
-    const labelOff = 'OFF';
-    const labelOn = 'ON';
-    if (radioButtonMode) {
-        return h('.form-group-header.flex-row.w-100', [
-            radioButton({
-                label: labelOff,
-                isChecked: !stableBeamFilterModel.isStableBeamsOnly(),
-                action: () => stableBeamFilterModel.setStableBeamsOnly(false),
-                name: name,
-            }),
-            radioButton({
-                label: labelOn,
-                isChecked: stableBeamFilterModel.isStableBeamsOnly(),
-                action: () => stableBeamFilterModel.setStableBeamsOnly(true),
-                name: name,
-            }),
-        ]);
-    } else {
-        return switchInput(stableBeamFilterModel.isStableBeamsOnly(), (newState) => {
-            stableBeamFilterModel.setStableBeamsOnly(newState);
-        }, { labelAfter: 'STABLE BEAM ONLY' });
-    }
-};
diff --git a/lib/public/components/Filters/RunsFilter/GaqFilterModel.js b/lib/public/components/Filters/RunsFilter/GaqFilterModel.js
new file mode 100644
index 0000000000..ef2b6be122
--- /dev/null
+++ b/lib/public/components/Filters/RunsFilter/GaqFilterModel.js
@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
+ */
+
+import { FilterModel } from '../common/FilterModel.js';
+import { NumericalComparisonFilterModel } from '../common/filters/NumericalComparisonFilterModel.js';
+
+/**
+ * FilterModel that filters by the fraction of gaq that was not bad
+ */
+export class GaqFilterModel extends FilterModel {
+    /**
+     * Constructor
+     * @param {ToggleFilterModel} mcReproducibleAsNotBad model that determines if a 'not bad' status was reproduceable for a Monte Carlo.
+     * This param is required as multiple other filters models need to make use of the same ToggleFilterModel instance
+     */
+    constructor(mcReproducibleAsNotBad) {
+        super();
+
+        this._notBadFraction = new NumericalComparisonFilterModel({ scale: 0.01, integer: false });
+        this._addSubmodel(this._notBadFraction);
+        this._mcReproducibleAsNotBad = mcReproducibleAsNotBad;
+
+        /**
+         * _mcReproducableAsNotBad will only be added to the normalize call notBadFraction is not empty
+         * So, notifying when it is empty will just send an unneeded request.
+         */
+        this._mcReproducibleAsNotBad.visualChange$.bubbleTo(this._visualChange$);
+        this._mcReproducibleAsNotBad.observe(() => {
+            if (!this.notBadFraction.isEmpty) {
+                this.notify();
+            }
+        });
+    }
+
+    /**
+     * @inheritDoc
+     */
+    reset() {
+        this._notBadFraction.reset();
+    }
+
+    /**
+     * @inheritDoc
+     */
+    get isEmpty() {
+        return this._notBadFraction.isEmpty;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    get normalized() {
+        const normalized = { notBadFraction: this._notBadFraction.normalized };
+
+        if (!this.isEmpty) {
+            normalized.mcReproducibleAsNotBad = this._mcReproducibleAsNotBad.isToggled();
+        }
+
+        return normalized;
+    }
+
+    /**
+     * Return the underlying notBadFraction model
+     *
+     * @return {NumericalComparisonFilterModel} the filter model
+     */
+    get notBadFraction() {
+        return this._notBadFraction;
+    }
+
+    /**
+     * Return the underlying mcReproducibleAsNotBad model
+     *
+     * @return {ToggleFilterModel} the filter model
+     */
+    get mcReproducibleAsNotBad() {
+        return this._mcReproducibleAsNotBad;
+    }
+}
diff --git a/lib/public/components/Filters/RunsFilter/MultiCompositionFilterModel.js b/lib/public/components/Filters/RunsFilter/MultiCompositionFilterModel.js
new file mode 100644
index 0000000000..0b278e1d4b
--- /dev/null
+++ b/lib/public/components/Filters/RunsFilter/MultiCompositionFilterModel.js
@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
+ */
+
+import { FilterModel } from '../common/FilterModel.js';
+
+/**
+ * FilterModel that allows devs to create custom filters from multiple other filters during instantiation, or using putFilter
+ */
+export class MultiCompositionFilterModel extends FilterModel {
+    /**
+     * Constructor
+     * @param {Object<string|number, FilterModel|SelectionModel>} filters the filters that will make up the composite filter
+     */
+    constructor(filters = {}) {
+        super();
+
+        /**
+         * @type {Object<string|number, FilterModel|SelectionModel>}
+         */
+        this._filters = {};
+
+        Object.entries(filters).forEach(([key, filter]) => this.putFilter(key, filter));
+    }
+
+    /**
+     * Return a subfilter by key
+     *
+     * @param {string} key the key of the subfilter
+     * @return {FilterModel} the subfilter
+     */
+    putFilter(key, filterModel) {
+        if (key in this._filters) {
+            return;
+        }
+
+        this._filters[key] = filterModel;
+        this._addSubmodel(filterModel);
+    }
+
+    /**
+     * Add new subfilter
+     *
+     * @param {string} key key of the subfilter
+     * @param {FilterModel} filter the the subfilter
+     */
+    getFilter(key) {
+        if (!(key in this._filters)) {
+            throw new Error(`No filter found with key ${key}`);
+        }
+
+        return this._filters[key];
+    }
+
+    /**
+     * @inheritDoc
+     */
+    reset() {
+        Object.values(this._filters).forEach((filter) => filter.reset());
+    }
+
+    /**
+     * @inheritDoc
+     */
+    get isEmpty() {
+        return Object.values(this._filters).every((filter) => filter.isEmpty);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    get normalized() {
+        const normalized = {};
+
+        for (const [id, detector] of Object.entries(this._filters)) {
+            if (!detector.isEmpty) {
+                normalized[id] = detector.normalized;
+            }
+        }
+
+        return normalized;
+    }
+}
diff --git a/lib/public/components/Filters/RunsFilter/dcs.js b/lib/public/components/Filters/RunsFilter/dcs.js
deleted file mode 100644
index 590eb81b78..0000000000
--- a/lib/public/components/Filters/RunsFilter/dcs.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @license
- * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
- */
-
-import { radioButton } from '../../common/form/inputs/radioButton.js';
-import { h } from '/js/src/index.js';
-
-/**
- * Filter panel for DCS toggle; ON/OFF/ANY
- * @param {RunsOverviewModel} runModel the run model object
- * @return {vnode} Three radio buttons inline
- */
-const dcsOperationRadioButtons = (runModel) => {
-    const state = runModel.getDcsFilterOperation();
-    const name = 'dcsFilterRadio';
-    const labelAny = 'ANY';
-    const labelOff = 'OFF';
-    const labelOn = 'ON';
-    return h('.form-group-header.flex-row.w-100', [
-        radioButton({
-            label: labelAny,
-            isChecked: state === '',
-            action: () => runModel.removeDcs(),
-            name,
-        }),
-        radioButton({
-            label: labelOff,
-            isChecked: state === false,
-            action: () => runModel.setDcsFilterOperation(false),
-            name,
-        }),
-        radioButton({
-            label: labelOn,
-            isChecked: state === true,
-            action: () => runModel.setDcsFilterOperation(true),
-            name,
-        }),
-    ]);
-};
-
-export default dcsOperationRadioButtons;
diff --git a/lib/public/components/Filters/RunsFilter/ddflp.js b/lib/public/components/Filters/RunsFilter/ddflp.js
deleted file mode 100644
index 74bf28f4ba..0000000000
--- a/lib/public/components/Filters/RunsFilter/ddflp.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @license
- * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
- */
-
-import { radioButton } from '../../common/form/inputs/radioButton.js';
-import { h } from '/js/src/index.js';
-
-/**
- * Filter panel for Data Distribution toggle; ON/OFF/ANY
- * @param {RunsOverviewModel} runModel the run model object
- * @return {vnode} Three radio buttons inline
- */
-const ddflpOperationRadioButtons = (runModel) => {
-    const state = runModel.getDdflpFilterOperation();
-    const name = 'ddFlpFilterRadio';
-    const labelAny = 'ANY';
-    const labelOff = 'OFF';
-    const labelOn = 'ON';
-    return h('.form-group-header.flex-row.w-100', [
-        radioButton({
-            label: labelAny,
-            isChecked: state === '',
-            action: () => runModel.removeDdflp(),
-            name,
-        }),
-        radioButton({
-            label: labelOff,
-            isChecked: state === false,
-            action: () => runModel.setDdflpFilterOperation(false),
-            name,
-        }),
-        radioButton({
-            label: labelOn,
-            isChecked: state === true,
-            action: () => runModel.setDdflpFilterOperation(true),
-            name,
-        }),
-    ]);
-};
-
-export default ddflpOperationRadioButtons;
diff --git a/lib/public/components/Filters/RunsFilter/epn.js b/lib/public/components/Filters/RunsFilter/epn.js
deleted file mode 100644
index 5e639d8afb..0000000000
--- a/lib/public/components/Filters/RunsFilter/epn.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @license
- * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
- */
-
-import { radioButton } from '../../common/form/inputs/radioButton.js';
-import { h } from '/js/src/index.js';
-
-/**
- * Filter panel for EPN toggle; ON/OFF/ANY
- * @param {RunsOverviewModel} runModel the run model object
- * @return {vnode} Three radio buttons inline
- */
-const epnOperationRadioButtons = (runModel) => {
-    const state = runModel.getEpnFilterOperation();
-    const name = 'epnFilterRadio';
-    const labelAny = 'ANY';
-    const labelOff = 'OFF';
-    const labelOn = 'ON';
-    return h('.form-group-header.flex-row.w-100', [
-        radioButton({
-            label: labelAny,
-            isChecked: state === '',
-            action: () => runModel.removeEpn(),
-            name,
-        }),
-        radioButton({
-            label: labelOff,
-            isChecked: state === false,
-            action: () => runModel.setEpnFilterOperation(false),
-            name,
-        }),
-        radioButton({
-            label: labelOn,
-            isChecked: state === true,
-            action: () => runModel.setEpnFilterOperation(true),
-            name,
-        }),
-    ]);
-};
-
-export default epnOperationRadioButtons;
diff --git a/lib/public/components/Filters/RunsFilter/triggerValueFilter.js b/lib/public/components/Filters/RunsFilter/triggerValueFilter.js
deleted file mode 100644
index 5addab02fe..0000000000
--- a/lib/public/components/Filters/RunsFilter/triggerValueFilter.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { checkboxFilter } from '../common/filters/checkboxFilter.js';
-import { TRIGGER_VALUES } from '../../../domain/enums/TriggerValue.js';
-
-/**
- * Returns a panel to be used by user to filter runs by trigger value
- * @param {RunsOverviewModel} runModel The global model object
- * @return {vnode} Multiple checkboxes for a user to select the values to be filtered.
- */
-export const triggerValueFilter = (runModel) => checkboxFilter(
-    'triggerValue',
-    TRIGGER_VALUES,
-    (value) => runModel.triggerValuesFilters.has(value),
-    (e, value) => {
-        if (e.target.checked) {
-            runModel.triggerValuesFilters.add(value);
-        } else {
-            runModel.triggerValuesFilters.delete(value);
-        }
-        runModel.triggerValuesFilters = Array.from(runModel.triggerValuesFilters);
-    },
-);
diff --git a/lib/public/components/Filters/common/FilteringModel.js b/lib/public/components/Filters/common/FilteringModel.js
index e937786456..c69a09feff 100644
--- a/lib/public/components/Filters/common/FilteringModel.js
+++ b/lib/public/components/Filters/common/FilteringModel.js
@@ -12,7 +12,9 @@
  */
 
 import { expandQueryLikeNestedKey } from '../../../utilities/expandNestedKey.js';
-import { Observable } from '/js/src/index.js';
+import { SelectionModel } from '../../common/selection/SelectionModel.js';
+import { FilterModel } from './FilterModel.js';
+import { buildUrl, Observable } from '/js/src/index.js';
 
 /**
  * Model representing a filtering system, including filter inputs visibility, filters values and so on
@@ -21,19 +23,29 @@ export class FilteringModel extends Observable {
     /**
      * Constructor
      *
+     * @param {QueryRouter} router router that controls the application's page navigation
      * @param {Object<string, FilterModel>} filters the filters with their label and model
      */
-    constructor(filters) {
+    constructor(router, filters) {
         super();
-
         this._visualChange$ = new Observable();
+        this._pageIdentifiers = [];
 
-        this._filters = filters;
-        this._filterModels = Object.values(filters);
-        for (const model of this._filterModels) {
-            model.bubbleTo(this);
-            model.visualChange$?.bubbleTo(this._visualChange$);
-        }
+        this._router = router;
+        this._filters = {};
+        this._filterModels = [];
+        Object.entries(filters).forEach(([key, model]) => this.put(key, model));
+    }
+
+    /**
+     * Sets the page identifiers
+     *
+     * @param {string[]} identifiers Strings that identify the pages as shown in the router params.
+     * Used to prevent unneeded reads/writes from/to the url
+     * @returns {void}
+     */
+    set pageIdentifiers(identifiers) {
+        this._pageIdentifiers = identifiers;
     }
 
     /**
@@ -50,6 +62,10 @@ export class FilteringModel extends Observable {
         if (notify) {
             this.notify();
         }
+
+        const { params } = this._router;
+        delete params.filter;
+        this._router.go(buildUrl('?', params), false, true);
     }
 
     /**
@@ -105,6 +121,22 @@ export class FilteringModel extends Observable {
         return this._filters[key];
     }
 
+    /**
+     * When the user updates the displayed Objects, the filters should be placed in the URL as well
+     * @returns {undefined}
+     */
+    setFilterToURL() {
+        const { params } = this._router;
+        const newParams = { ...params };
+        newParams.filter = this.normalized;
+
+        if (this._pageIdentifiers.includes(params.page)) {
+            this._router.go(buildUrl('?', newParams), false, true);
+        }
+
+        this.notify();
+    }
+
     /**
      * Add new filter
      *
@@ -118,9 +150,13 @@ export class FilteringModel extends Observable {
             return;
         }
 
+        if (!(filter instanceof FilterModel || filter instanceof SelectionModel)) {
+            throw new Error('Filter must extend FilterModel or SelectionModel');
+        }
+
         this._filters[key] = filter;
         this._filterModels.push(filter);
-        filter.bubbleTo(this);
+        filter.observe(() => this.setFilterToURL());
         filter.visualChange$?.bubbleTo(this._visualChange$);
     }
 }
diff --git a/lib/public/components/Filters/common/RadioButtonFilterModel.js b/lib/public/components/Filters/common/RadioButtonFilterModel.js
new file mode 100644
index 0000000000..5e93205bfc
--- /dev/null
+++ b/lib/public/components/Filters/common/RadioButtonFilterModel.js
@@ -0,0 +1,34 @@
+/**
+ * @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.
+ */
+
+import { SelectionModel } from '../../common/selection/SelectionModel.js';
+
+/**
+ * Model for managing a radiobutton view and state
+ */
+export class RadioButtonFilterModel extends SelectionModel {
+    /**
+     * Constructor
+     *
+     * @param {SelectionOption[]} [availableOptions] the list of possible operators
+     * @param {function} [setDefault] function that selects the default from the list of available options. Selects first entry by default
+     */
+    constructor(availableOptions, setDefault = (options) => [options[0]]) {
+        super({
+            availableOptions,
+            defaultSelection: setDefault(availableOptions),
+            multiple: false,
+            allowEmpty: false,
+        });
+    }
+}
diff --git a/lib/public/components/Filters/common/filters/ToggleFilterModel.js b/lib/public/components/Filters/common/filters/ToggleFilterModel.js
new file mode 100644
index 0000000000..b5a98fd4a4
--- /dev/null
+++ b/lib/public/components/Filters/common/filters/ToggleFilterModel.js
@@ -0,0 +1,63 @@
+/**
+ * @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.
+ */
+import { SelectionModel } from '../../../common/selection/SelectionModel.js';
+
+/**
+ * SelectionModel that restricts the selection to a boolean toggle (true/false).
+ */
+export class ToggleFilterModel extends SelectionModel {
+    /**
+     * Constructor
+     * @param {boolean} toggledByDefault If the filter should be toggled by default
+     * @param {boolean} falseIsEmpty if true, will treat false as empty.
+     */
+    constructor(toggledByDefault = false, falseIsEmpty = false) {
+        super({
+            availableOptions: [{ value: true }, { value: false }],
+            defaultSelection: [{ value: toggledByDefault }],
+            multiple: false,
+            allowEmpty: false,
+        });
+
+        this._falseIsEmpty = falseIsEmpty;
+    }
+
+    /**
+     * Returns true if the current value is set to true
+     *
+     * @return {boolean} true if filter is stable beams only
+     */
+    isToggled() {
+        return this.current;
+    }
+
+    /**
+     * Toggles the filter state
+     *
+     * @return {void}
+     */
+    toggle() {
+        this.select({ value: !this.current });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    get isEmpty() {
+        if (!this._falseIsEmpty) {
+            return this.current === false;
+        }
+
+        return false;
+    }
+}
diff --git a/lib/public/components/Filters/common/filters/checkboxFilter.js b/lib/public/components/Filters/common/filters/checkboxFilter.js
index dcfcb4a95b..2cf550c091 100644
--- a/lib/public/components/Filters/common/filters/checkboxFilter.js
+++ b/lib/public/components/Filters/common/filters/checkboxFilter.js
@@ -14,32 +14,6 @@
 
 import { h } from '/js/src/index.js';
 
-/**
- * A general component for generating checkboxes.
- *
- * @param {string} name The general name of the element.
- * @param {Array<String>} values the list of options to display
- * @param {function} isChecked true if the checkbox is checked, else false
- * @param {function} onChange the handler called once the checkbox state changes (change event is passed as first parameter, value as second)
- * @param {Object} [additionalProperties] Additional options that can be given to the class.
- * @returns {vnode} An object that has one or multiple checkboxes.
- * @deprecated use checkboxes
- */
-export const checkboxFilter = (name, values, isChecked, onChange, additionalProperties) =>
-    h('.flex-row.flex-wrap', values.map((value) => h('.form-check.flex-grow', [
-        h('input.form-check-input', {
-            id: `${name}Checkbox${value}`,
-            class: name,
-            type: 'checkbox',
-            checked: isChecked(value),
-            onchange: (e) => onChange(e, value),
-            ...additionalProperties || {},
-        }),
-        h('label.form-check-label', {
-            for: `${name}Checkbox${value}`,
-        }, value.toUpperCase()),
-    ])));
-
 /**
  * Display a filter composed of checkbox listing pre-defined options
  * @param {SelectionModel} selectionModel filter model
diff --git a/lib/public/components/Filters/common/filters/radioButtonFilter.js b/lib/public/components/Filters/common/filters/radioButtonFilter.js
new file mode 100644
index 0000000000..1b1d91d7ed
--- /dev/null
+++ b/lib/public/components/Filters/common/filters/radioButtonFilter.js
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
+ */
+
+import { radioButton } from '../../../common/form/inputs/radioButton.js';
+import { h } from '/js/src/index.js';
+
+/**
+ * Radiobutton filter component
+ *
+ * @param {RadioSelectionModel} selectionModel the a selectionmodel
+ * @param {string} filterName the name of the filter
+ * @return {vnode} A number of radiobuttons corresponding with the selection options
+ */
+const radioButtonFilter = (selectionModel, filterName) => {
+    const name = `${filterName}FilterRadio`;
+    return h(
+        '.form-group-header.flex-row.w-100',
+        selectionModel.options.map((option) => {
+            const { label } = option;
+            const action = () => selectionModel.select(option);
+            const isChecked = selectionModel.isSelected(option);
+
+            return radioButton({ label, isChecked, action, name });
+        }),
+    );
+};
+
+export default radioButtonFilter;
diff --git a/lib/public/components/Filters/common/filters/toggleFilter.js b/lib/public/components/Filters/common/filters/toggleFilter.js
new file mode 100644
index 0000000000..064ce2f0f9
--- /dev/null
+++ b/lib/public/components/Filters/common/filters/toggleFilter.js
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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.
+ */
+
+import { h } from '/js/src/index.js';
+import { switchInput } from '../../../common/form/switchInput.js';
+import { radioButton } from '../../../common/form/inputs/radioButton.js';
+
+/**
+ * Display a toggle switch or radio buttons for toggle filters
+ *
+ * @param {ToggleFilterModel} toggleFilterModel a ToggleFilterModel
+ * @param {name} toggleFilterModel the name used to identify and label the filter
+ * @param {boolean} radioButtonMode define whether or not to return radio buttons or a switch.
+ * @returns {Component} the toggle switch
+ */
+export const toggleFilter = (toggleFilterModel, name, id, radioButtonMode = false) => {
+    if (radioButtonMode) {
+        return h('.form-group-header.flex-row.w-100', [
+            radioButton({
+                label: 'OFF',
+                isChecked: !toggleFilterModel.isToggled(),
+                action: () => toggleFilterModel.toggle(),
+                name,
+            }),
+            radioButton({
+                label: 'ON',
+                isChecked: toggleFilterModel.isToggled(),
+                action: () => toggleFilterModel.toggle(),
+                name,
+            }),
+        ]);
+    }
+
+    return switchInput(toggleFilterModel.isToggled(), () => toggleFilterModel.toggle(), { labelAfter: name, id });
+};
diff --git a/lib/public/components/common/form/switchInput.js b/lib/public/components/common/form/switchInput.js
index ad7f7f8135..f06cb5154a 100644
--- a/lib/public/components/common/form/switchInput.js
+++ b/lib/public/components/common/form/switchInput.js
@@ -32,7 +32,7 @@ import { h } from '/js/src/index.js';
  * @return {Component} the switch component
  */
 export const switchInput = (value, onChange, options) => {
-    const { key, labelAfter, labelBefore, color } = options || {};
+    const { key, labelAfter, labelBefore, color, id } = options || {};
     const attributes = { ...key ? { key } : {} };
 
     return h(
@@ -40,7 +40,7 @@ export const switchInput = (value, onChange, options) => {
         attributes,
         [
             labelBefore,
-            h('.switch', [
+            h('.switch', { id }, [
                 h('input', {
                     onchange: (e) => onChange(e.target.checked),
                     type: 'checkbox',
diff --git a/lib/public/views/DataPasses/DataPassesModel.js b/lib/public/views/DataPasses/DataPassesModel.js
index 5d987b31d7..5af74e48be 100644
--- a/lib/public/views/DataPasses/DataPassesModel.js
+++ b/lib/public/views/DataPasses/DataPassesModel.js
@@ -21,14 +21,15 @@ import { DataPassesPerSimulationPassOverviewModel } from './PerSimulationPassOve
 export class DataPassesModel extends Observable {
     /**
      * The constructor of the model
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
 
-        this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel();
+        this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel(router);
         this._perLhcPeriodOverviewModel.bubbleTo(this);
 
-        this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel();
+        this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel(router);
         this._perSimulationPassOverviewModel.bubbleTo(this);
     }
 
diff --git a/lib/public/views/DataPasses/DataPassesOverviewModel.js b/lib/public/views/DataPasses/DataPassesOverviewModel.js
index b85cc052d7..d32b7eef67 100644
--- a/lib/public/views/DataPasses/DataPassesOverviewModel.js
+++ b/lib/public/views/DataPasses/DataPassesOverviewModel.js
@@ -22,15 +22,19 @@ import { OverviewPageModel } from '../../models/OverviewModel.js';
 export class DataPassesOverviewModel extends OverviewPageModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
-        this._filteringModel = new FilteringModel({
-            names: new TextTokensFilterModel(),
-            'include[byName]': new SelectionFilterModel({
-                availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })),
-            }),
-        });
+        this._filteringModel = new FilteringModel(
+            router,
+            {
+                names: new TextTokensFilterModel(),
+                'include[byName]': new SelectionFilterModel({
+                    availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })),
+                }),
+            },
+        );
 
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
diff --git a/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js b/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js
index dc125e1a94..ee7f580ef7 100644
--- a/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js
+++ b/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js
@@ -19,9 +19,10 @@ import { buildUrl } from '/js/src/index.js';
 export class DataPassesPerLhcPeriodOverviewModel extends DataPassesOverviewModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
         this._lhcPeriodId = null;
     }
 
diff --git a/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js b/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js
index 30fd3c616c..43c73d6988 100644
--- a/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js
+++ b/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js
@@ -21,11 +21,13 @@ import { DataPassesOverviewModel } from '../DataPassesOverviewModel.js';
 export class DataPassesPerSimulationPassOverviewModel extends DataPassesOverviewModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
-        super();
+    constructor(router) {
+        super(router);
         this._simulationPass = new ObservableData(RemoteData.notAsked());
         this._simulationPass.bubbleTo(this);
+        this._filteringModel.pageIdentifiers = ['data-passes-per-simulation-pass-overview'];
     }
 
     /**
diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js
index 8498a02d79..f898a1d989 100644
--- a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js
+++ b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js
@@ -32,19 +32,22 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
     constructor(model) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            created: new TimeRangeInputModel(),
-            runNumbers: new RawTextFilterModel(),
-            statusHistory: new RawTextFilterModel(),
-            currentStatus: new SelectionFilterModel({
-                availableOptions: Object.keys(StatusAcronym).map((status) => ({
-                    value: status,
-                    label: coloredEnvironmentStatusComponent(status),
-                    rawLabel: status,
-                })),
-            }),
-            ids: new RawTextFilterModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            model.router,
+            {
+                created: new TimeRangeInputModel(),
+                runNumbers: new RawTextFilterModel(),
+                statusHistory: new RawTextFilterModel(),
+                currentStatus: new SelectionFilterModel({
+                    availableOptions: Object.keys(StatusAcronym).map((status) => ({
+                        value: status,
+                        label: coloredEnvironmentStatusComponent(status),
+                        rawLabel: status,
+                    })),
+                }),
+                ids: new RawTextFilterModel(),
+            },
+        );
 
         this._filteringModel.observe(() => this._applyFilters(true));
         this._filteringModel.visualChange$?.bubbleTo(this);
@@ -56,6 +59,7 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
 
         model.appConfiguration$.observe(() => updateDebounceTime());
         updateDebounceTime();
+        this._filteringModel.pageIdentifiers = ['env-overview'];
     }
 
     /**
diff --git a/lib/public/views/Home/Overview/HomePageModel.js b/lib/public/views/Home/Overview/HomePageModel.js
index 40b6cfac85..1826bc5b61 100644
--- a/lib/public/views/Home/Overview/HomePageModel.js
+++ b/lib/public/views/Home/Overview/HomePageModel.js
@@ -32,7 +32,7 @@ export class HomePageModel extends Observable {
         this._logsOverviewModel = new LogsOverviewModel(model, true);
         this._logsOverviewModel.bubbleTo(this);
 
-        this._lhcFillsOverviewModel = new LhcFillsOverviewModel(true);
+        this._lhcFillsOverviewModel = new LhcFillsOverviewModel(model.router, true);
         this._lhcFillsOverviewModel.bubbleTo(this);
     }
 
diff --git a/lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js b/lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js
index f9850c1d2b..be4311d7e4 100644
--- a/lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js
+++ b/lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js
@@ -23,7 +23,7 @@ import { buttonLinkWithDropdown } from '../../../components/common/selection/inf
 import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
 import { formatBeamType } from '../../../utilities/formatting/formatBeamType.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
-import { toggleStableBeamOnlyFilter } from '../../../components/Filters/LhcFillsFilter/stableBeamFilter.js';
+import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 import { durationFilter } from '../../../components/Filters/LhcFillsFilter/durationFilter.js';
 import { beamTypeFilter } from '../../../components/Filters/LhcFillsFilter/beamTypeFilter.js';
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
@@ -117,7 +117,8 @@ export const lhcFillsActiveColumns = {
         name: 'Stable Beams Only',
         visible: false,
         format: (boolean) => boolean ? 'On' : 'Off',
-        filter: (lhcFillModel) => toggleStableBeamOnlyFilter(lhcFillModel.filteringModel.get('hasStableBeams'), true),
+        filter: (lhcFillModel) =>
+            toggleFilter(lhcFillModel.filteringModel.get('hasStableBeams'), 'stableBeamsOnlyRadio', 'stableBeamsOnlyRadio', true),
     },
     stableBeamsDuration: {
         name: 'SB Duration',
diff --git a/lib/public/views/LhcFills/LhcFills.js b/lib/public/views/LhcFills/LhcFills.js
index 70b6c5eb3d..a9b4036ab0 100644
--- a/lib/public/views/LhcFills/LhcFills.js
+++ b/lib/public/views/LhcFills/LhcFills.js
@@ -29,7 +29,7 @@ export default class LhcFills extends Observable {
         this.model = model;
 
         // Sub-models
-        this._overviewModel = new LhcFillsOverviewModel(true);
+        this._overviewModel = new LhcFillsOverviewModel(model.router, true);
         this._overviewModel.bubbleTo(this);
 
         this._detailsModel = new LhcFillDetailsModel();
diff --git a/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js b/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js
index c57ae69c25..de58e1324d 100644
--- a/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js
+++ b/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js
@@ -13,13 +13,13 @@
 
 import { buildUrl } from '/js/src/index.js';
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
-import { StableBeamFilterModel } from '../../../components/Filters/LhcFillsFilter/StableBeamFilterModel.js';
 import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
 import { addStatisticsToLhcFill } from '../../../services/lhcFill/addStatisticsToLhcFill.js';
 import { BeamTypeFilterModel } from '../../../components/Filters/LhcFillsFilter/BeamTypeFilterModel.js';
 import { TextComparisonFilterModel } from '../../../components/Filters/common/filters/TextComparisonFilterModel.js';
 import { TimeRangeFilterModel } from '../../../components/Filters/RunsFilter/TimeRangeFilter.js';
+import { ToggleFilterModel } from '../../../components/Filters/common/filters/ToggleFilterModel.js';
 
 /**
  * Model for the LHC fills overview page
@@ -30,30 +30,31 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
     /**
      * Constructor
      *
+     * @param {QueryRouter} router router that controls the application's page navigation
      * @param {boolean} [stableBeamsOnly=false] if true, overview will load stable beam only
      */
-    constructor(stableBeamsOnly = false) {
+    constructor(router, stableBeamsOnly = false) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            fillNumbers: new RawTextFilterModel(),
-            beamDuration: new TextComparisonFilterModel(),
-            runDuration: new TextComparisonFilterModel(),
-            hasStableBeams: new StableBeamFilterModel(),
-            stableBeamsStart: new TimeRangeFilterModel(),
-            stableBeamsEnd: new TimeRangeFilterModel(),
-            beamTypes: new BeamTypeFilterModel(),
-            schemeName: new RawTextFilterModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            router,
+            {
+                fillNumbers: new RawTextFilterModel(),
+                beamDuration: new TextComparisonFilterModel(),
+                runDuration: new TextComparisonFilterModel(),
+                hasStableBeams: new ToggleFilterModel(stableBeamsOnly),
+                stableBeamsStart: new TimeRangeFilterModel(),
+                stableBeamsEnd: new TimeRangeFilterModel(),
+                beamTypes: new BeamTypeFilterModel(),
+                schemeName: new RawTextFilterModel(),
+            },
+        );
 
         this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
 
         this.reset(false);
-
-        if (stableBeamsOnly) {
-            this._filteringModel.get('hasStableBeams').setStableBeamsOnly(true);
-        }
+        this._filteringModel.pageIdentifiers = ['lhc-fill-overview'];
     }
 
     /**
diff --git a/lib/public/views/LhcFills/Overview/index.js b/lib/public/views/LhcFills/Overview/index.js
index e81409f06c..a29abf5145 100644
--- a/lib/public/views/LhcFills/Overview/index.js
+++ b/lib/public/views/LhcFills/Overview/index.js
@@ -18,7 +18,7 @@ import { lhcFillsActiveColumns } from '../ActiveColumns/lhcFillsActiveColumns.js
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
-import { toggleStableBeamOnlyFilter } from '../../../components/Filters/LhcFillsFilter/stableBeamFilter.js';
+import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 
 const TABLEROW_HEIGHT = 53.3;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -50,7 +50,7 @@ const showLhcFillsTable = (lhcFillsOverviewModel) => {
     return [
         h('.flex-row.header-container.g2.pv2', [
             filtersPanelPopover(lhcFillsOverviewModel, lhcFillsActiveColumns),
-            toggleStableBeamOnlyFilter(lhcFillsOverviewModel.filteringModel.get('hasStableBeams')),
+            toggleFilter(lhcFillsOverviewModel.filteringModel.get('hasStableBeams'), 'STABLE BEAM ONLY'),
         ]),
         h('.w-100.flex-column', [
             table(lhcFillsOverviewModel.items, lhcFillsActiveColumns, null, { tableClasses: '.table-sm' }),
diff --git a/lib/public/views/Logs/Overview/LogsOverviewModel.js b/lib/public/views/Logs/Overview/LogsOverviewModel.js
index 4cb565e9b9..dbd1604e7c 100644
--- a/lib/public/views/Logs/Overview/LogsOverviewModel.js
+++ b/lib/public/views/Logs/Overview/LogsOverviewModel.js
@@ -38,16 +38,19 @@ export class LogsOverviewModel extends Observable {
     constructor(model, excludeAnonymous = false) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            author: new AuthorFilterModel(),
-            title: new RawTextFilterModel(),
-            content: new RawTextFilterModel(),
-            tags: new TagFilterModel(tagsProvider.items$),
-            runNumbers: new RawTextFilterModel(),
-            environmentIds: new RawTextFilterModel(),
-            fillNumbers: new RawTextFilterModel(),
-            created: new TimeRangeInputModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            model.router,
+            {
+                author: new AuthorFilterModel(),
+                title: new RawTextFilterModel(),
+                content: new RawTextFilterModel(),
+                tags: new TagFilterModel(tagsProvider.items$),
+                runNumbers: new RawTextFilterModel(),
+                environmentIds: new RawTextFilterModel(),
+                fillNumbers: new RawTextFilterModel(),
+                created: new TimeRangeInputModel(),
+            },
+        );
 
         this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
@@ -72,6 +75,7 @@ export class LogsOverviewModel extends Observable {
         excludeAnonymous && this._filteringModel.get('author').update('!Anonymous');
 
         this.reset(false);
+        this._filteringModel.pageIdentifiers = ['log-overview'];
     }
 
     /**
diff --git a/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js b/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js
index 95923cd0d7..6f1ae72b84 100644
--- a/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js
+++ b/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js
@@ -15,7 +15,7 @@ import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
 import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
-import badFilterRadioButtons from '../../../components/Filters/QcFlagTypesFilter/bad.js';
+import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
 
 /**
  * List of active columns for a QC Flag Types table
@@ -48,7 +48,7 @@ export const qcFlagTypesActiveColumns = {
         name: 'Bad',
         visible: true,
         sortable: true,
-        filter: ({ filteringModel }) => badFilterRadioButtons(filteringModel.get('bad')),
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('bad'), 'bad'),
         classes: 'f6 w-5',
         format: (bad) => bad ? h('.danger', 'Yes') : h('.success', 'No'),
     },
diff --git a/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js b/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js
index cc4ced6716..1f559eaf03 100644
--- a/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js
+++ b/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js
@@ -13,9 +13,9 @@
 
 import { TextTokensFilterModel } from '../../../components/Filters/common/filters/TextTokensFilterModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
-import { SelectionModel } from '../../../components/common/selection/SelectionModel.js';
 import { buildUrl } from '/js/src/index.js';
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
+import { RadioButtonFilterModel } from '../../../components/Filters/common/RadioButtonFilterModel.js';
 
 /**
  * QcFlagTypesOverviewModel
@@ -23,20 +23,19 @@ import { FilteringModel } from '../../../components/Filters/common/FilteringMode
 export class QcFlagTypesOverviewModel extends OverviewPageModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            names: new TextTokensFilterModel(),
-            methods: new TextTokensFilterModel(),
-            bad: new SelectionModel({
-                availableOptions: [{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }],
-                defaultSelection: [{ label: 'Any' }],
-                allowEmpty: false,
-                multiple: false,
-            }),
-        });
+        this._filteringModel = new FilteringModel(
+            router,
+            {
+                names: new TextTokensFilterModel(),
+                methods: new TextTokensFilterModel(),
+                bad: new RadioButtonFilterModel([{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }]),
+            },
+        );
 
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
@@ -44,6 +43,7 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
         });
 
         this._filteringModel.visualChange$.bubbleTo(this);
+        this._filteringModel.pageIdentifiers = ['qc-flag-types-overview'];
     }
 
     /**
diff --git a/lib/public/views/QcFlagTypes/QcFlagTypesModel.js b/lib/public/views/QcFlagTypes/QcFlagTypesModel.js
index 43468d3e34..b0802cfb97 100644
--- a/lib/public/views/QcFlagTypes/QcFlagTypesModel.js
+++ b/lib/public/views/QcFlagTypes/QcFlagTypesModel.js
@@ -29,7 +29,7 @@ export class QcFlagTypesModel extends Observable {
         this.model = model;
 
         // Overview
-        this._overviewModel = new QcFlagTypesOverviewModel();
+        this._overviewModel = new QcFlagTypesOverviewModel(model.router);
         this._overviewModel.bubbleTo(this);
     }
 
diff --git a/lib/public/views/Runs/ActiveColumns/runDetectorsAsyncQcActiveColumns.js b/lib/public/views/Runs/ActiveColumns/runDetectorsAsyncQcActiveColumns.js
index f4497010c4..2647f8589a 100644
--- a/lib/public/views/Runs/ActiveColumns/runDetectorsAsyncQcActiveColumns.js
+++ b/lib/public/views/Runs/ActiveColumns/runDetectorsAsyncQcActiveColumns.js
@@ -161,7 +161,7 @@ export const createRunDetectorsAsyncQcActiveColumns = (
             visible: false,
             profiles: profile,
             filter: (filteringModel) => {
-                const filterModel = filteringModel.get(`detectorsQc[_${dplDetectorId}][notBadFraction]`);
+                const filterModel = filteringModel.get('detectorsQcNotBadFraction').getFilter(`_${dplDetectorId}`);
                 return filterModel
                     ? numericalComparisonFilter(filterModel, { step: 0.1, selectorPrefix: `detectorsQc-for-${dplDetectorId}-notBadFraction` })
                     : null;
diff --git a/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js b/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js
index 66b1306ecb..382a29f02b 100644
--- a/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js
+++ b/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js
@@ -13,9 +13,6 @@
 
 import { CopyToClipboardComponent, h } from '/js/src/index.js';
 import { displayRunEorReasonsOverview } from '../format/displayRunEorReasonOverview.js';
-import ddflpFilter from '../../../components/Filters/RunsFilter/ddflp.js';
-import dcsFilter from '../../../components/Filters/RunsFilter/dcs.js';
-import epnFilter from '../../../components/Filters/RunsFilter/epn.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { displayRunDuration } from '../format/displayRunDuration.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
@@ -45,7 +42,7 @@ import { detectorsFilterComponent } from '../../../components/Filters/RunsFilter
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
 import { numericalComparisonFilter } from '../../../components/Filters/common/filters/numericalComparisonFilter.js';
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
-import { triggerValueFilter } from '../../../components/Filters/RunsFilter/triggerValueFilter.js';
+import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
@@ -515,7 +512,7 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         format: (boolean) => boolean ? 'On' : 'Off',
         exportFormat: (boolean) => boolean ? 'On' : 'Off',
-        filter: ddflpFilter,
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('ddflp'), 'ddFlp'),
     },
     dcs: {
         name: 'DCS',
@@ -524,14 +521,21 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         format: (boolean) => boolean ? 'On' : 'Off',
         exportFormat: (boolean) => boolean ? 'On' : 'Off',
-        filter: dcsFilter,
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('dcs'), 'dcs'),
     },
     triggerValue: {
         name: 'TRG',
         visible: true,
         profiles: [profiles.none, 'lhcFill', 'environment'],
         classes: 'w-5 f6 w-wrapped',
-        filter: triggerValueFilter,
+
+        /**
+         * TriggerValue filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the trigger value filter component
+         */
+        filter: ({ filteringModel }) => checkboxes(filteringModel.get('triggerValues'), { selector: 'triggerValue' }),
         format: (trgValue) => trgValue ? trgValue : '-',
     },
     epn: {
@@ -541,7 +545,7 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         format: (boolean) => boolean ? 'On' : 'Off',
         exportFormat: (boolean) => boolean ? 'On' : 'Off',
-        filter: epnFilter,
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('epn'), 'epn'),
     },
     epnTopology: {
         name: 'EPN Topology',
diff --git a/lib/public/views/Runs/Overview/RunsOverviewModel.js b/lib/public/views/Runs/Overview/RunsOverviewModel.js
index 0249c66085..6945eeb1aa 100644
--- a/lib/public/views/Runs/Overview/RunsOverviewModel.js
+++ b/lib/public/views/Runs/Overview/RunsOverviewModel.js
@@ -36,6 +36,9 @@ import { DataExportModel } from '../../../models/DataExportModel.js';
 import { runsActiveColumns as dataExportConfiguration } from '../ActiveColumns/runsActiveColumns.js';
 import { BeamModeFilterModel } from '../../../components/Filters/RunsFilter/BeamModeFilterModel.js';
 import { beamModesProvider } from '../../../services/beamModes/beamModesProvider.js';
+import { RadioButtonFilterModel } from '../../../components/Filters/common/RadioButtonFilterModel.js';
+import { SelectionModel } from '../../../components/common/selection/SelectionModel.js';
+import { TRIGGER_VALUES } from '../../../domain/enums/TriggerValue.js';
 
 /**
  * Model representing handlers for runs page
@@ -50,47 +53,54 @@ export class RunsOverviewModel extends OverviewPageModel {
     constructor(model) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            runNumbers: new RawTextFilterModel(),
-            detectors: new DetectorsFilterModel(detectorsProvider.dataTaking$),
-            tags: new TagFilterModel(
-                tagsProvider.items$,
-                [
-                    CombinationOperator.AND,
-                    CombinationOperator.OR,
-                    CombinationOperator.NONE_OF,
-                ],
-            ),
-            fillNumbers: new RawTextFilterModel(),
-            lhcPeriods: new RawTextFilterModel(),
-            o2start: new TimeRangeFilterModel(),
-            o2end: new TimeRangeFilterModel(),
-            definitions: new RunDefinitionFilterModel(),
-            runDuration: new NumericalComparisonFilterModel({ scale: 60 * 1000 }),
-            environmentIds: new RawTextFilterModel(),
-            runTypes: new RunTypesFilterModel(runTypesProvider.items$),
-            beamModes: new BeamModeFilterModel(beamModesProvider.items$),
-            runQualities: new SelectionFilterModel({
-                availableOptions: RUN_QUALITIES.map((quality) => ({
-                    label: quality.toUpperCase(),
-                    value: quality,
-                })),
-            }),
-            nDetectors: new NumericalComparisonFilterModel({ integer: true }),
-            nEpns: new NumericalComparisonFilterModel({ integer: true }),
-            nFlps: new NumericalComparisonFilterModel({ integer: true }),
-            ctfFileCount: new NumericalComparisonFilterModel({ integer: true }),
-            tfFileCount: new NumericalComparisonFilterModel({ integer: true }),
-            otherFileCount: new NumericalComparisonFilterModel({ integer: true }),
-            odcTopologyFullName: new RawTextFilterModel(),
-            eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$),
-            magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$),
-            muInelasticInteractionRate: new NumericalComparisonFilterModel(),
-            inelasticInteractionRateAvg: new NumericalComparisonFilterModel(),
-            inelasticInteractionRateAtStart: new NumericalComparisonFilterModel(),
-            inelasticInteractionRateAtMid: new NumericalComparisonFilterModel(),
-            inelasticInteractionRateAtEnd: new NumericalComparisonFilterModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            model.router,
+            {
+                runNumbers: new RawTextFilterModel(),
+                detectors: new DetectorsFilterModel(detectorsProvider.dataTaking$),
+                tags: new TagFilterModel(
+                    tagsProvider.items$,
+                    [
+                        CombinationOperator.AND,
+                        CombinationOperator.OR,
+                        CombinationOperator.NONE_OF,
+                    ],
+                ),
+                fillNumbers: new RawTextFilterModel(),
+                lhcPeriods: new RawTextFilterModel(),
+                o2start: new TimeRangeFilterModel(),
+                o2end: new TimeRangeFilterModel(),
+                definitions: new RunDefinitionFilterModel(),
+                runDuration: new NumericalComparisonFilterModel({ scale: 60 * 1000 }),
+                environmentIds: new RawTextFilterModel(),
+                runTypes: new RunTypesFilterModel(runTypesProvider.items$),
+                beamModes: new BeamModeFilterModel(beamModesProvider.items$),
+                runQualities: new SelectionFilterModel({
+                    availableOptions: RUN_QUALITIES.map((quality) => ({
+                        label: quality.toUpperCase(),
+                        value: quality,
+                    })),
+                }),
+                nDetectors: new NumericalComparisonFilterModel({ integer: true }),
+                nEpns: new NumericalComparisonFilterModel({ integer: true }),
+                nFlps: new NumericalComparisonFilterModel({ integer: true }),
+                ctfFileCount: new NumericalComparisonFilterModel({ integer: true }),
+                tfFileCount: new NumericalComparisonFilterModel({ integer: true }),
+                otherFileCount: new NumericalComparisonFilterModel({ integer: true }),
+                odcTopologyFullName: new RawTextFilterModel(),
+                eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$),
+                magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$),
+                muInelasticInteractionRate: new NumericalComparisonFilterModel(),
+                inelasticInteractionRateAvg: new NumericalComparisonFilterModel(),
+                inelasticInteractionRateAtStart: new NumericalComparisonFilterModel(),
+                inelasticInteractionRateAtMid: new NumericalComparisonFilterModel(),
+                inelasticInteractionRateAtEnd: new NumericalComparisonFilterModel(),
+                ddflp: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]),
+                dcs: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]),
+                epn: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]),
+                triggerValues: new SelectionModel({ availableOptions: TRIGGER_VALUES.map((value) => ({ label: value, value })) }),
+            },
+        );
 
         this._filteringModel.observe(() => this._applyFilters(true));
         this._filteringModel.visualChange$.bubbleTo(this);
@@ -109,6 +119,7 @@ export class RunsOverviewModel extends OverviewPageModel {
 
         model.appConfiguration$.observe(() => updateDebounceTime());
         updateDebounceTime();
+        this._filteringModel.pageIdentifiers = ['run-overview'];
     }
 
     /**
@@ -123,7 +134,7 @@ export class RunsOverviewModel extends OverviewPageModel {
      * @inheritdoc
      */
     getRootEndpoint() {
-        return buildUrl('/api/runs', { ...this._getFilterQueryParams(), ...{ filter: this.filteringModel.normalized } });
+        return buildUrl('/api/runs', { filter: this.filteringModel.normalized });
     }
 
     /**
@@ -145,14 +156,6 @@ export class RunsOverviewModel extends OverviewPageModel {
     resetFiltering(fetch = true) {
         this._filteringModel.reset();
 
-        this._triggerValuesFilters = new Set();
-
-        this.ddflpFilter = '';
-
-        this.dcsFilter = '';
-
-        this.epnFilter = '';
-
         if (fetch) {
             this._applyFilters(true);
         }
@@ -163,11 +166,7 @@ export class RunsOverviewModel extends OverviewPageModel {
      * @return {Boolean} If any filter is active
      */
     isAnyFilterActive() {
-        return this._filteringModel.isAnyFilterActive()
-               || this._triggerValuesFilters.size !== 0
-               || this.ddflpFilter !== ''
-               || this.dcsFilter !== ''
-               || this.epnFilter !== '';
+        return this._filteringModel.isAnyFilterActive();
     }
 
     /**
@@ -179,130 +178,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         return this._filteringModel;
     }
 
-    /**
-     * Getter for the trigger values filter Set
-     * @return {Set} set of trigger filter values
-     */
-    get triggerValuesFilters() {
-        return this._triggerValuesFilters;
-    }
-
-    /**
-     * Setter for trigger values filter, this replaces the current set
-     * @param {Array} newTriggerValues new Set of values
-     * @return {undefined}
-     */
-    set triggerValuesFilters(newTriggerValues) {
-        this._triggerValuesFilters = new Set(newTriggerValues);
-        this._applyFilters();
-    }
-
-    /**
-     * Returns the boolean of ddflp
-     * @return {Boolean} if ddflp is on
-     */
-    getDdflpFilterOperation() {
-        return this.ddflpFilter;
-    }
-
-    /**
-     * Sets the boolean of the filter if no new inputs were detected for 200 milliseconds
-     * @param {boolean} operation if the ddflp is on
-     * @return {undefined}
-     */
-    setDdflpFilterOperation(operation) {
-        this.ddflpFilter = operation;
-        this._applyFilters();
-    }
-
-    /**
-     * Unchecks the ddflp checkbox and fetches all the runs.
-     * @return {undefined}
-     *
-     */
-    removeDdflp() {
-        this.ddflpFilter = '';
-        this._applyFilters();
-    }
-
-    /**
-     * Returns the boolean of dcs
-     * @return {Boolean} if dcs is on
-     */
-    getDcsFilterOperation() {
-        return this.dcsFilter;
-    }
-
-    /**
-     * Sets the boolean of the filter if no new inputs were detected for 200 milliseconds
-     * @param {boolean} operation if the dcs is on
-     * @return {undefined}
-     */
-    setDcsFilterOperation(operation) {
-        this.dcsFilter = operation;
-        this._applyFilters();
-    }
-
-    /**
-     * Unchecks the dcs checkbox and fetches all the runs.
-     * @return {undefined}
-     */
-    removeDcs() {
-        this.dcsFilter = '';
-        this._applyFilters();
-    }
-
-    /**
-     * Returns the boolean of epn
-     * @return {Boolean} if epn is on
-     */
-    getEpnFilterOperation() {
-        return this.epnFilter;
-    }
-
-    /**
-     * Sets the boolean of the filter if no new inputs were detected for 200 milliseconds
-     * @param {boolean} operation if the epn is on
-     * @return {undefined}
-     */
-    setEpnFilterOperation(operation) {
-        this.epnFilter = operation;
-        this._applyFilters();
-    }
-
-    /**
-     * Unchecks the epn checkbox and fetches all the runs.
-     * @return {undefined}
-     */
-    removeEpn() {
-        this.epnFilter = '';
-        this._applyFilters();
-    }
-
-    /**
-     * Returns the list of URL params corresponding to the currently applied filter
-     *
-     * @return {Object} the URL params
-     *
-     * @private
-     */
-    _getFilterQueryParams() {
-        return {
-            ...this._triggerValuesFilters.size !== 0 && {
-                'filter[triggerValues]': Array.from(this._triggerValuesFilters).join(),
-            },
-            ...(this.ddflpFilter === true || this.ddflpFilter === false) && {
-                'filter[ddflp]': this.ddflpFilter,
-            },
-            ...(this.dcsFilter === true || this.dcsFilter === false) && {
-                'filter[dcs]': this.dcsFilter,
-            },
-            ...(this.epnFilter === true || this.epnFilter === false) && {
-                'filter[epn]': this.epnFilter,
-            },
-        };
-    }
-
     /**
      * Apply the current filtering and update the remote data list
      *
diff --git a/lib/public/views/Runs/Overview/RunsWithQcModel.js b/lib/public/views/Runs/Overview/RunsWithQcModel.js
index dcc239c156..f92530b11c 100644
--- a/lib/public/views/Runs/Overview/RunsWithQcModel.js
+++ b/lib/public/views/Runs/Overview/RunsWithQcModel.js
@@ -43,6 +43,8 @@ const qcFlagsExportConfigurationFactory = (detectors) => Object.fromEntries(dete
 import { ObservableData } from '../../../utilities/ObservableData.js';
 import { DetectorType } from '../../../domain/enums/DetectorTypes.js';
 import { mergeRemoteData } from '../../../utilities/mergeRemoteData.js';
+import { ToggleFilterModel } from '../../../components/Filters/common/filters/ToggleFilterModel.js';
+import { MultiCompositionFilterModel } from '../../../components/Filters/RunsFilter/MultiCompositionFilterModel.js';
 
 /**
  * Merge QC summaries
@@ -71,7 +73,8 @@ export class RunsWithQcModel extends RunsOverviewModel {
         super(model);
 
         this._observablesQcFlagsSummaryDependsOn$ = null;
-        this._mcReproducibleAsNotBad = false;
+        // This filter instance will be added as a sub-filter for a MultiCompositionFilter and a GaqFilter later.
+        this._mcReproducibleAsNotBad = new ToggleFilterModel();
 
         this._runDetectorsSelectionModel = new RunDetectorsSelectionModel();
         this._runDetectorsSelectionModel.bubbleTo(this);
@@ -84,35 +87,22 @@ export class RunsWithQcModel extends RunsOverviewModel {
             verticalScrollEnabled: true,
             freezeFirstColumn: true,
         });
+
+        this._filteringModel
+            .put('detectorsQcNotBadFraction', new MultiCompositionFilterModel({ mcReproducibleAsNotBad: this._mcReproducibleAsNotBad }));
     }
 
     /**
      * @inheritdoc
      */
     getRootEndpoint() {
-        const filter = {};
-        filter.detectorsQc = {
-            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad,
-        };
-
-        return buildUrl(super.getRootEndpoint(), { filter, include: { effectiveQcFlags: true } });
-    }
-
-    /**
-     * Set mcReproducibleAsNotBad
-     *
-     * @param {boolean} mcReproducibleAsNotBad new value
-     * @return {void}
-     */
-    setMcReproducibleAsNotBad(mcReproducibleAsNotBad) {
-        this._mcReproducibleAsNotBad = mcReproducibleAsNotBad;
-        this.load();
+        return buildUrl(super.getRootEndpoint(), { include: { effectiveQcFlags: true } });
     }
 
     /**
      * Get mcReproducibleAsNotBad
      *
-     * @return {boolean} mcReproducibleAsNotBad
+     * @return {ToggleFilterModel} mcReproducibleAsNotBad
      */
     get mcReproducibleAsNotBad() {
         return this._mcReproducibleAsNotBad;
@@ -146,15 +136,13 @@ export class RunsWithQcModel extends RunsOverviewModel {
      * @param {ObservableData<RemoteData<Detector>>} detectors$ detectors remote data observable
      */
     registerDetectorsNotBadFractionFilterModels(detectors$) {
+        const detectorsQcNotBadFraction = this._filteringModel.get('detectorsQcNotBadFraction');
+
         const callback = (observableData) => {
             const current = observableData.getCurrent();
             current?.apply({
-                Success: (detectors) => detectors.forEach(({ id }) => {
-                    this._filteringModel.put(`detectorsQc[_${id}][notBadFraction]`, new NumericalComparisonFilterModel({
-                        scale: 0.01,
-                        integer: false,
-                    }));
-                }),
+                Success: (detectors) => detectors.forEach(({ id }) =>
+                    detectorsQcNotBadFraction.putFilter(`_${id}`, new NumericalComparisonFilterModel({ scale: 0.01, integer: false }))),
             });
         };
         detectors$.observe(callback);
@@ -235,7 +223,7 @@ export class RunsWithQcModel extends RunsOverviewModel {
                             detectorIds: detectors
                                 .filter(({ type }) => type === DetectorType.PHYSICAL)
                                 .map(({ id }) => id).join(','),
-                            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad,
+                            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad.isToggled(),
                         }));
 
                         const { data: qcSummary2 } = await getRemoteData(buildUrl('/api/qcFlags/summary', {
@@ -249,7 +237,7 @@ export class RunsWithQcModel extends RunsOverviewModel {
                                     operator: 'none',
                                 },
                             },
-                            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad,
+                            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad.isToggled(),
                         }));
                         this._qcSummary$.setCurrent(RemoteData.success(mergeQcSummaries([qcSummary1, qcSummary2])));
                     } catch (error) {
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
index baa4745a4d..b45b8a25df 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
@@ -19,11 +19,11 @@ import { FixedPdpBeamTypeRunsOverviewModel } from '../Overview/FixedPdpBeamTypeR
 import { jsonPatch } from '../../../utilities/fetch/jsonPatch.js';
 import { jsonPut } from '../../../utilities/fetch/jsonPut.js';
 import { SkimmingStage } from '../../../domain/enums/SkimmingStage.js';
-import { NumericalComparisonFilterModel } from '../../../components/Filters/common/filters/NumericalComparisonFilterModel.js';
 import { jsonFetch } from '../../../utilities/fetch/jsonFetch.js';
 import { mergeRemoteData } from '../../../utilities/mergeRemoteData.js';
 import { RemoteDataSource } from '../../../utilities/fetch/RemoteDataSource.js';
 import { DetectorType } from '../../../domain/enums/DetectorTypes.js';
+import { GaqFilterModel } from '../../../components/Filters/RunsFilter/GaqFilterModel.js';
 
 const ALL_CPASS_PRODUCTIONS_REGEX = /cpass\d+/;
 const DETECTOR_NAMES_NOT_IN_CPASSES = ['EVS'];
@@ -65,10 +65,7 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         this._skimmableRuns$ = new ObservableData(RemoteData.notAsked());
         this._skimmableRuns$.bubbleTo(this);
 
-        this._filteringModel.put('gaq[notBadFraction]', new NumericalComparisonFilterModel({
-            scale: 0.01,
-            integer: false,
-        }));
+        this._filteringModel.put('gaq', new GaqFilterModel(this._mcReproducibleAsNotBad));
 
         this._freezeOrUnfreezeActionState$ = new ObservableData(RemoteData.notAsked());
         this._freezeOrUnfreezeActionState$.bubbleTo(this);
@@ -77,6 +74,7 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         this._discardAllQcFlagsActionState$.bubbleTo(this);
 
         this._item$.observe(() => this._fetchGaqSummaryForCurrentRuns());
+        this._filteringModel.pageIdentifiers = ['runs-per-data-pass'];
     }
 
     /**
@@ -144,14 +142,7 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
      * @inheritdoc
      */
     getRootEndpoint() {
-        const gaqNotBadFilter = this._filteringModel.get('gaq[notBadFraction]');
-        const filter = { dataPassIds: [this._dataPassId] };
-        if (!gaqNotBadFilter.isEmpty) {
-            filter.gaq = {
-                mcReproducibleAsNotBad: this._mcReproducibleAsNotBad,
-            };
-        }
-
+        const filter = { ...this._filteringModel.normalized, dataPassIds: [this._dataPassId] };
         return buildUrl(super.getRootEndpoint(), { filter });
     }
 
@@ -365,7 +356,7 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         });
         const url = buildUrl('/api/qcFlags/summary/gaq', {
             dataPassId: this._dataPassId,
-            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad,
+            mcReproducibleAsNotBad: this._mcReproducibleAsNotBad.isToggled(),
             runNumber: runNumber,
         });
         await this._gaqSummarySources[runNumber].fetch(url);
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index b8fc6c1164..59f396515c 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -37,8 +37,8 @@ import { iconCaretBottom } from '/js/src/icons.js';
 import { BkpRoles } from '../../../domain/enums/BkpRoles.js';
 import { getInelasticInteractionRateColumns } from '../ActiveColumns/getInelasticInteractionRateActiveColumns.js';
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
-import { mcReproducibleAsNotBadToggle } from '../mcReproducibleAsNotBadToggle.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
+import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 
 const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -174,13 +174,8 @@ export const RunsPerDataPassOverviewPage = ({
                         ),
                 });
             },
-
             filter: ({ filteringModel }) =>
-                numericalComparisonFilter(
-                    filteringModel.get('gaq[notBadFraction]'),
-                    { step: 0.1, selectorPrefix: 'gaqNotBadFraction' },
-                ),
-
+                numericalComparisonFilter(filteringModel.get('gaq').notBadFraction, { step: 0.1, selectorPrefix: 'gaqNotBadFraction' }),
             filterTooltip: 'not-bad fraction expressed as a percentage',
             profiles: ['runsPerDataPass'],
         },
@@ -246,10 +241,7 @@ export const RunsPerDataPassOverviewPage = ({
                     )),
                 ]),
             ),
-            mcReproducibleAsNotBadToggle(
-                mcReproducibleAsNotBad,
-                () => perDataPassOverviewModel.setMcReproducibleAsNotBad(!mcReproducibleAsNotBad),
-            ),
+            toggleFilter(mcReproducibleAsNotBad, h('em', 'MC.R as not-bad'), 'mcReproducibleAsNotBadToggle'),
             h('.mlauto', qcSummaryLegendTooltip()),
             h('#actions-dropdown-button', DropdownComponent(
                 h('button.btn.btn-primary', h('.flex-row.g2', ['Actions', iconCaretBottom()])),
diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js
index 8c2332fb22..2cd931065b 100644
--- a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js
+++ b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js
@@ -55,6 +55,7 @@ export class RunsPerLhcPeriodOverviewModel extends FixedPdpBeamTypeRunsOverviewM
 
         this._tabbedPanelModel = new RunsPerLhcPeriodTabbedPanelModel(this._qcSummary$);
         this._tabbedPanelModel.bubbleTo(this);
+        this._filteringModel.pageIdentifiers = ['runs-per-lhc-period'];
     }
 
     /**
diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
index f832c0f151..1006c5f44e 100644
--- a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
+++ b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
@@ -26,9 +26,9 @@ import errorAlert from '../../../components/common/errorAlert.js';
 import spinner from '../../../components/common/spinner.js';
 import { getInelasticInteractionRateColumns } from '../ActiveColumns/getInelasticInteractionRateActiveColumns.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
-import { mcReproducibleAsNotBadToggle } from '../mcReproducibleAsNotBadToggle.js';
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
+import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 
 const TABLEROW_HEIGHT = 62;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -110,10 +110,7 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
             filtersPanelPopover(perLhcPeriodOverviewModel, activeColumns, { profile: 'runsPerLhcPeriod' }),
             h('.pl2#runOverviewFilter', textInputFilter(perLhcPeriodOverviewModel.filteringModel, 'runNumbers', 'e.g. 534454, 534455...')),
             h('h2.flex-row', ['Good, physics runs of ', lhcPeriodName]),
-            mcReproducibleAsNotBadToggle(
-                mcReproducibleAsNotBad,
-                () => perLhcPeriodOverviewModel.setMcReproducibleAsNotBad(!mcReproducibleAsNotBad),
-            ),
+            toggleFilter(mcReproducibleAsNotBad, h('em', 'MC.R as not-bad'), 'mcReproducibleAsNotBadToggle'),
             exportTriggerAndModal(perLhcPeriodOverviewModel.exportModel, modalModel),
         ]),
         h(
diff --git a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js
index d5fbeb400f..0b78d2fe73 100644
--- a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js
+++ b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js
@@ -33,6 +33,7 @@ export class RunsPerSimulationPassOverviewModel extends FixedPdpBeamTypeRunsOver
 
         this._detectors$.bubbleTo(this);
         this._simulationPass$.bubbleTo(this);
+        this._filteringModel.pageIdentifiers = ['runs-per-simulation-pass'];
     }
 
     /**
diff --git a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
index c026c6912e..3b4ad6157f 100644
--- a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
+++ b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
@@ -27,7 +27,7 @@ import errorAlert from '../../../components/common/errorAlert.js';
 import { getInelasticInteractionRateColumns } from '../ActiveColumns/getInelasticInteractionRateActiveColumns.js';
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
-import { mcReproducibleAsNotBadToggle } from '../mcReproducibleAsNotBadToggle.js';
+import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 const TABLEROW_HEIGHT = 59;
@@ -102,10 +102,7 @@ export const RunsPerSimulationPassOverviewPage = ({
                     h('h2#breadcrumb-simulation-pass-name', simulationPass?.name ?? spinner({ size: 1, absolute: false })),
                 ]),
             ),
-            mcReproducibleAsNotBadToggle(
-                mcReproducibleAsNotBad,
-                () => perSimulationPassOverviewModel.setMcReproducibleAsNotBad(!mcReproducibleAsNotBad),
-            ),
+            toggleFilter(mcReproducibleAsNotBad, h('em', 'MC.R as not-bad'), 'mcReproducibleAsNotBadToggle'),
             h('.mlauto', qcSummaryLegendTooltip()),
             exportTriggerAndModal(perSimulationPassOverviewModel.exportModel, modalModel, { autoMarginLeft: false }),
             frontLink(
diff --git a/lib/public/views/Runs/mcReproducibleAsNotBadToggle.js b/lib/public/views/Runs/mcReproducibleAsNotBadToggle.js
deleted file mode 100644
index 636ed0f245..0000000000
--- a/lib/public/views/Runs/mcReproducibleAsNotBadToggle.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- *  @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.
- */
-
-import { switchInput } from '../../components/common/form/switchInput.js';
-import { h } from '/js/src/index.js';
-
-/**
- * Display a toggle switch to change interpretation of MC.Reproducible flag type from bad to not-bad
- *
- * @param {boolean} value current value
- * @param {function} onChange to be called when switching
- * @returns {Component} the toggle switch
- */
-export const mcReproducibleAsNotBadToggle = (value, onChange) => h('#mcReproducibleAsNotBadToggle', switchInput(
-    value,
-    onChange,
-    { labelAfter: h('em', 'MC.R as not-bad') },
-));
diff --git a/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js b/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js
index d986ece53b..8218bffbb1 100644
--- a/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js
+++ b/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js
@@ -23,11 +23,12 @@ import { FilteringModel } from '../../../components/Filters/common/FilteringMode
 export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._filteringModel = new FilteringModel({ names: new TextTokensFilterModel() });
+        this._filteringModel = new FilteringModel(router, { names: new TextTokensFilterModel() });
 
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
@@ -37,6 +38,7 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
         this._filteringModel.visualChange$.bubbleTo(this);
 
         this._dataPass = new ObservableData(RemoteData.notAsked());
+        this._filteringModel.pageIdentifiers = ['anchored-simulation-passes-overview'];
     }
 
     /**
diff --git a/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js b/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js
index 0d8af9b309..883e23c4ef 100644
--- a/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js
+++ b/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js
@@ -23,11 +23,12 @@ import { FilteringModel } from '../../../components/Filters/common/FilteringMode
 export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._filteringModel = new FilteringModel({ names: new TextTokensFilterModel() });
+        this._filteringModel = new FilteringModel(router, { names: new TextTokensFilterModel() });
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
@@ -38,6 +39,7 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
         this._lhcPeriod.bubbleTo(this);
 
         this._lhcPeriodId = null;
+        this._filteringModel.pageIdentifiers = ['simulation-passes-per-lhc-period-overview'];
     }
 
     /**
diff --git a/lib/public/views/SimulationPasses/SimulationPassesModel.js b/lib/public/views/SimulationPasses/SimulationPassesModel.js
index 8e8d6e7969..22436b4c5c 100644
--- a/lib/public/views/SimulationPasses/SimulationPassesModel.js
+++ b/lib/public/views/SimulationPasses/SimulationPassesModel.js
@@ -21,14 +21,15 @@ import { AnchoredSimulationPassesOverviewModel } from './AnchoredOverview/Anchor
 export class SimulationPassesModel extends Observable {
     /**
      * The constructor of the model
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._perLhcPeriodOverviewModel = new SimulationPassesPerLhcPeriodOverviewModel();
+        this._perLhcPeriodOverviewModel = new SimulationPassesPerLhcPeriodOverviewModel(router);
         this._perLhcPeriodOverviewModel.bubbleTo(this);
 
-        this._anchoredOverviewModel = new AnchoredSimulationPassesOverviewModel();
+        this._anchoredOverviewModel = new AnchoredSimulationPassesOverviewModel(router);
         this._anchoredOverviewModel.bubbleTo(this);
     }
 
diff --git a/lib/public/views/lhcPeriods/LhcPeriodsModel.js b/lib/public/views/lhcPeriods/LhcPeriodsModel.js
index 4f9d0ed185..b9ed51719e 100644
--- a/lib/public/views/lhcPeriods/LhcPeriodsModel.js
+++ b/lib/public/views/lhcPeriods/LhcPeriodsModel.js
@@ -20,11 +20,12 @@ import { LhcPeriodsOverviewModel } from './Overview/LhcPeriodsOverviewModel.js';
 export class LhcPeriodsModel extends Observable {
     /**
      * The constructor of the model
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._overviewModel = new LhcPeriodsOverviewModel();
+        this._overviewModel = new LhcPeriodsOverviewModel(router);
         this._overviewModel.bubbleTo(this);
     }
 
diff --git a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js
index e6073eb68f..b989b60488 100644
--- a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js
+++ b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js
@@ -24,15 +24,19 @@ import { buildUrl } from '/js/src/index.js';
 export class LhcPeriodsOverviewModel extends OverviewPageModel {
     /**
      * The constructor of the Overview model object
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            names: new TextTokensFilterModel(),
-            years: new TextTokensFilterModel(),
-            pdpBeamTypes: new TextTokensFilterModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            router,
+            {
+                names: new TextTokensFilterModel(),
+                years: new TextTokensFilterModel(),
+                pdpBeamTypes: new TextTokensFilterModel(),
+            },
+        );
 
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
diff --git a/lib/usecases/run/GetAllRunsUseCase.js b/lib/usecases/run/GetAllRunsUseCase.js
index fe9fdd5c95..ae0b14d071 100644
--- a/lib/usecases/run/GetAllRunsUseCase.js
+++ b/lib/usecases/run/GetAllRunsUseCase.js
@@ -82,7 +82,7 @@ class GetAllRunsUseCase {
                 inelasticInteractionRateAtMid,
                 inelasticInteractionRateAtEnd,
                 gaq,
-                detectorsQc,
+                detectorsQcNotBadFraction,
                 beamModes,
             } = filter;
 
@@ -389,28 +389,21 @@ class GetAllRunsUseCase {
                 }
             }
 
-            if (detectorsQc) {
+            if (detectorsQcNotBadFraction) {
                 const [dataPassId] = dataPassIds ?? [];
                 const [simulationPassId] = simulationPassIds ?? [];
                 const [lhcPeriodId] = lhcPeriodIds ?? [];
-                const { mcReproducibleAsNotBad } = detectorsQc;
-                delete detectorsQc.mcReproducibleAsNotBad;
+                const { mcReproducibleAsNotBad } = detectorsQcNotBadFraction;
+                delete detectorsQcNotBadFraction.mcReproducibleAsNotBad;
 
-                const dplDetectorIds = Object.keys(detectorsQc).map((id) => parseInt(id.slice(1), 10));
+                const dplDetectorIds = Object.keys(detectorsQcNotBadFraction).map((id) => parseInt(id.slice(1), 10));
                 if (dplDetectorIds.length > 0) {
-                    const qcSummary = await qcFlagSummaryService.getSummary(
-                        {
-                            dataPassId,
-                            simulationPassId,
-                            lhcPeriodId,
-                            dplDetectorIds,
-                        },
-                        { mcReproducibleAsNotBad },
-                    );
+                    const scope = { dataPassId, simulationPassId, lhcPeriodId, dplDetectorIds };
+                    const qcSummary = await qcFlagSummaryService.getSummary(scope, { mcReproducibleAsNotBad });
 
                     const runNumbers = Object.entries(qcSummary)
                         .filter(([_, runSummary]) => {
-                            const mask = Object.entries(detectorsQc).map(([prefixedDetectorId, { notBadFraction: { operator, limit } }]) => {
+                            const mask = Object.entries(detectorsQcNotBadFraction).map(([prefixedDetectorId, { operator, limit }]) => {
                                 const dplDetectorId = parseInt(prefixedDetectorId.slice(1), 10);
                                 if (!(dplDetectorId in runSummary)) {
                                     return false;
diff --git a/test/api/runs.test.js b/test/api/runs.test.js
index 083771bf02..36bc52673b 100644
--- a/test/api/runs.test.js
+++ b/test/api/runs.test.js
@@ -454,11 +454,11 @@ module.exports = () => {
             }
         });
 
-        it('should successfully filter by detectors notBadFraction', async () => {
+        it('should successfully filter by detectorsQcNotBadFraction', async () => {
             const dataPassId = 1;
             {
                 const response = await request(server).get(`/api/runs?filter[dataPassIds][]=${dataPassId}`
-                        + '&filter[detectorsQc][_1][notBadFraction][operator]=>&filter[detectorsQc][_1][notBadFraction][limit]=0.7');
+                        + '&filter[detectorsQcNotBadFraction][_1][operator]=>&filter[detectorsQcNotBadFraction][_1][limit]=0.7');
 
                 expect(response.status).to.equal(200);
                 const { data: runs } = response.body;
@@ -468,7 +468,7 @@ module.exports = () => {
             }
             {
                 const response = await request(server).get(`/api/runs?filter[dataPassIds][]=${dataPassId}`
-                        + '&filter[detectorsQc][_1][notBadFraction][operator]=<&filter[detectorsQc][_1][notBadFraction][limit]=0.9&filter[detectorsQc][mcReproducibleAsNotBad]=true');
+                        + '&filter[detectorsQcNotBadFraction][_1][operator]=<&filter[detectorsQcNotBadFraction][_1][limit]=0.9&filter[detectorsQcNotBadFraction][mcReproducibleAsNotBad]=true');
 
                 expect(response.status).to.equal(200);
                 const { data: runs } = response.body;
@@ -478,8 +478,8 @@ module.exports = () => {
             }
                         {
                 const response = await request(server).get(`/api/runs?filter[dataPassIds][]=${dataPassId}`
-                        + '&filter[detectorsQc][_1][notBadFraction][operator]=<&filter[detectorsQc][_1][notBadFraction][limit]=0.7'
-                        + '&filter[detectorsQc][_16][notBadFraction][operator]=>&filter[detectorsQc][_16][notBadFraction][limit]=0.9'
+                        + '&filter[detectorsQcNotBadFraction][_1][operator]=<&filter[detectorsQcNotBadFraction][_1][limit]=0.7'
+                        + '&filter[detectorsQcNotBadFraction][_16][operator]=>&filter[detectorsQcNotBadFraction][_16][limit]=0.9'
                     );
 
                 expect(response.status).to.equal(200);
diff --git a/test/lib/usecases/run/GetAllRunsUseCase.test.js b/test/lib/usecases/run/GetAllRunsUseCase.test.js
index 5b080d056c..febeae02aa 100644
--- a/test/lib/usecases/run/GetAllRunsUseCase.test.js
+++ b/test/lib/usecases/run/GetAllRunsUseCase.test.js
@@ -831,7 +831,7 @@ module.exports = () => {
                 query: {
                     filter: {
                         dataPassIds,
-                        detectorsQc: {  '_1': { notBadFraction: { operator: '<', limit: 0.7 } } },
+                        detectorsQcNotBadFraction: {  '_1': { operator: '<', limit: 0.7 } },
                     },
                 },
             });
@@ -843,7 +843,7 @@ module.exports = () => {
                 query: {
                     filter: {
                         dataPassIds,
-                        detectorsQc: {  '_1': { notBadFraction: { operator: '<', limit: 0.8 } } },
+                        detectorsQcNotBadFraction: {  '_1': { operator: '<', limit: 0.8 } },
                     },
                 },
             });
@@ -855,7 +855,7 @@ module.exports = () => {
                 query: {
                     filter: {
                         dataPassIds,
-                        detectorsQc: {  '_1': { notBadFraction: { operator: '<', limit: 0.9 } }, mcReproducibleAsNotBad: true },
+                        detectorsQcNotBadFraction: {  '_1': { operator: '<', limit: 0.9 }, mcReproducibleAsNotBad: true },
                     },
                 },
             });
@@ -867,9 +867,10 @@ module.exports = () => {
                 query: {
                     filter: {
                         dataPassIds,
-                        detectorsQc: {
-                            '_2': { notBadFraction: { operator: '>', limit: 0.8 } },
-                            '_1': { notBadFraction: {operator: '<', limit: 0.8 } },
+                        detectorsQcNotBadFraction:
+                        {
+                            '_2': { operator: '>', limit: 0.8 },
+                            '_1': { operator: '<', limit: 0.8 },
                         },
                     },
                 },
diff --git a/test/public/Filters/filtersToUrl.test.js b/test/public/Filters/filtersToUrl.test.js
new file mode 100644
index 0000000000..3003e226a4
--- /dev/null
+++ b/test/public/Filters/filtersToUrl.test.js
@@ -0,0 +1,169 @@
+/**
+ * @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.
+ */
+
+const { expect } = require('chai');
+const {
+    defaultBefore,
+    defaultAfter,
+    goToPage,
+    fillInput,
+    getPopoverSelector,
+    getPeriodInputsSelectors,
+    pressElement,
+    openFilteringPanel,
+    waitForTableLength,
+} = require('../defaults.js');
+
+module.exports = () => {
+    let page;
+    let browser;
+
+    before(async () => {
+        [page, browser] = await defaultBefore();
+    });
+
+    const getQueryParameters = (page) => Object.fromEntries(new URL(page.url()).searchParams.entries());
+
+    it('should set filters from LogsOverview to the URL', async () => {
+        await goToPage(page, 'log-overview');
+        const firstCheckboxId = 'tag-dropdown-option-DPG';
+        const popoverTrigger = '.createdAt-filter .popover-trigger';
+
+        await page.waitForSelector(popoverTrigger);
+        await openFilteringPanel(page);
+
+        const popOverSelector = await getPopoverSelector(await page.$(popoverTrigger));
+        const { fromDateSelector, toDateSelector, fromTimeSelector, toTimeSelector } = getPeriodInputsSelectors(popOverSelector);
+
+        await fillInput(page, '.title-textFilter', 'bogusbogusbogus', ['change']);
+        await fillInput(page, '#authorFilterText', 'Jane', ['change']);
+        await fillInput(page, '.content-textFilter', 'particle', ['change']);
+        await pressElement(page, '.tags-filter .dropdown-trigger');
+        await pressElement(page, `#${firstCheckboxId}`, true);
+        await fillInput(page, '.environments-filter input', '8E4aZTjY', ['change']);
+        await fillInput(page, '.runNumbers-textFilter', '1,2', ['change']);
+        await fillInput(page, '.fillNumbers-textFilter', '1, 6', ['change']);
+        await fillInput(page, fromDateSelector, '2020-02-02', ['change']);
+        await fillInput(page, toDateSelector, '2020-02-02', ['change']);
+        await fillInput(page, fromTimeSelector, '11:00', ['change']);
+        await fillInput(page, toTimeSelector, '12:00', ['change']);
+
+        const queryParameters = getQueryParameters(page);
+        expect(queryParameters).to.deep.equal({
+            "page": "log-overview",
+            "filter[author]": "Jane",
+            "filter[title]": "bogusbogusbogus",
+            "filter[content]": "particle",
+            "filter[tags][values]": "DPG",
+            "filter[tags][operation]": "and",
+            "filter[runNumbers]": "1,2",
+            "filter[environmentIds]": "8E4aZTjY",
+            "filter[fillNumbers]": "1, 6",
+            "filter[created][from]": "1580641200000",
+            "filter[created][to]": "1580644800000"
+        });
+    });
+
+    it('should set filters from EnvironmentsOverview to the URL', async () => {
+        await goToPage(page, 'env-overview');
+        const popoverTrigger = '.createdAt-filter .popover-trigger';
+
+        await page.waitForSelector(popoverTrigger);
+        await openFilteringPanel(page);
+
+        const createdAtPopoverSelector = await getPopoverSelector(await page.$(popoverTrigger));
+        const periodInputsSelectors = getPeriodInputsSelectors(createdAtPopoverSelector);
+
+        await fillInput(page, '.runs-filter input', '10', ['change']);
+        await fillInput(page, '.id-filter input', 'Dxi029djX, TDI59So3d', ['change']);
+        await pressElement(page, '#checkboxes-checkbox-DESTROYED');
+        await fillInput(page, '.historyItems-filter input', 'C-R-D-X', ['change']);
+        await fillInput(page, periodInputsSelectors.fromDateSelector, '2019-08-09', ['change']);
+        await fillInput(page, periodInputsSelectors.toDateSelector, '2019-08-10', ['change']);
+        await fillInput(page, periodInputsSelectors.fromTimeSelector, '00:00', ['change']);
+        await fillInput(page, periodInputsSelectors.toTimeSelector, '23:59', ['change']);
+
+        const queryParameters = getQueryParameters(page);
+        expect(queryParameters).to.deep.equal({
+            "page": "env-overview",
+            "filter[created][from]": "1565308800000",
+            "filter[created][to]": "1565481540000",
+            "filter[runNumbers]": "10",
+            "filter[statusHistory]": "C-R-D-X",
+            "filter[currentStatus]": "DESTROYED",
+            "filter[ids]": "Dxi029djX, TDI59So3d"
+        });
+    });
+
+    it('should set filters from LhcFillsOverview to the URL', async () => {
+        await goToPage(page, 'lhc-fill-overview');
+        await waitForTableLength(page, 5);
+        const filterSBDurationOperator= '#beam-duration-filter-operator';
+        const filterSBDurationOperand= '#beam-duration-filter-operand';
+        const filterRunDurationOperator= '#run-duration-filter-operator';
+        const filterRunDurationOperand= '#run-duration-filter-operand';
+        const filterBeamTypeP_Pb = '#beam-types-checkbox-p-Pb';
+        const sbEndPopoverTrigger = '.stableBeamsEnd-filter .popover-trigger';
+        const sbStartPopoverTrigger = '.stableBeamsStart-filter .popover-trigger';
+        const sbStartPopOverSelector = await getPopoverSelector(await page.$(sbStartPopoverTrigger));
+        const sbEndPopOverSelector = await getPopoverSelector(await page.$(sbEndPopoverTrigger));
+        const filterSchemeNameInputField= '.fillingSchemeName-filter input';
+        const {
+            fromDateSelector: sbStartFromDateSelector,
+            toDateSelector: sbStartToDateSelector,
+            fromTimeSelector: sbStartFromTimeSelector,
+            toTimeSelector: sbStartToTimeSelector
+        } = getPeriodInputsSelectors(sbStartPopOverSelector);
+
+        const {
+            fromDateSelector: sbEndFromDateSelector,
+            toDateSelector: sbEndToDateSelector,
+            fromTimeSelector: sbEndFromTimeSelector,
+            toTimeSelector: sbEndToTimeSelector
+        } = getPeriodInputsSelectors(sbEndPopOverSelector);
+
+        await openFilteringPanel(page);
+        await page.select(filterSBDurationOperator, '>=');
+        await fillInput(page, filterSBDurationOperand, '00:01:40', ['change']);
+        await page.select(filterRunDurationOperator, '<=');
+        await fillInput(page, filterRunDurationOperand, '00:00:00', ['change']);
+        await pressElement(page, filterBeamTypeP_Pb);
+        await fillInput(page, sbStartFromDateSelector, '2019-08-08', ['change']);
+        await fillInput(page, sbStartToDateSelector, '2019-08-08', ['change']);
+        await fillInput(page, sbStartFromTimeSelector, '10:00', ['change']);
+        await fillInput(page, sbStartToTimeSelector, '12:00', ['change']);
+        await fillInput(page, sbEndFromDateSelector, '2022-03-22', ['change']);
+        await fillInput(page, sbEndToDateSelector, '2022-03-22', ['change']);
+        await fillInput(page, sbEndFromTimeSelector, '01:00', ['change']);
+        await fillInput(page, sbEndToTimeSelector, '23:59', ['change']);
+        await fillInput(page, filterSchemeNameInputField, 'Single_12b_8_1024_8_2018', ['change']);
+
+        const queryParameters = getQueryParameters(page);
+        expect(queryParameters).to.deep.equal({
+            "page": "lhc-fill-overview",
+            "filter[beamDuration][operator]": ">=",
+            "filter[beamDuration][limit]": "00:01:40",
+            "filter[runDuration][operator]": "<=",
+            "filter[runDuration][limit]": "00:00:00",
+            "filter[hasStableBeams]": "true",
+            "filter[stableBeamsEnd][from]": "1647910800000",
+            "filter[stableBeamsEnd][to]": "1647993540000",
+            "filter[stableBeamsStart][from]": "1565258400000",
+            "filter[stableBeamsStart][to]": "1565265600000",
+            "filter[beamTypes]": "p-Pb",
+            "filter[schemeName]": "Single_12b_8_1024_8_2018"
+        });
+    });
+
+    after(async () => await defaultAfter(page, browser));
+}
diff --git a/test/public/runs/overview.test.js b/test/public/runs/overview.test.js
index c16cc0d251..66333186d8 100644
--- a/test/public/runs/overview.test.js
+++ b/test/public/runs/overview.test.js
@@ -601,7 +601,7 @@ module.exports = () => {
 
         it('Should successfully filter runs by their trigger value', async () => {
             await navigateToRunsOverview(page);
-            const filterInputSelectorPrefix = '#triggerValueCheckbox';
+            const filterInputSelectorPrefix = '#triggerValue-checkbox-';
             const offFilterSelector = `${filterInputSelectorPrefix}OFF`;
             const ltuFilterSelector = `${filterInputSelectorPrefix}LTU`;
 
diff --git a/test/public/runs/runsPerDataPass.overview.test.js b/test/public/runs/runsPerDataPass.overview.test.js
index 70f8a7ac0a..4d1edbb4d6 100644
--- a/test/public/runs/runsPerDataPass.overview.test.js
+++ b/test/public/runs/runsPerDataPass.overview.test.js
@@ -516,8 +516,6 @@ module.exports = () => {
     it('should successfully apply gaqNotBadFraction filters', async () => {
         await navigateToRunsPerDataPass(page, 2, 1, 3);
 
-        await pressElement(page, '#openFilterToggle', true);
-
         await page.waitForSelector('#gaqNotBadFraction-operator');
         await page.select('#gaqNotBadFraction-operator', '<=');
         await fillInput(page, '#gaqNotBadFraction-operand', '80', ['change']);
@@ -526,7 +524,6 @@ module.exports = () => {
         await pressElement(page, '#mcReproducibleAsNotBadToggle input', true);
         await expectColumnValues(page, 'runNumber', []);
 
-        await pressElement(page, '#openFilterToggle', true);
         await pressElement(page, '#reset-filters', true);
         await expectColumnValues(page, 'runNumber', ['108', '107', '106']);
     });
@@ -535,12 +532,8 @@ module.exports = () => {
         await page.waitForSelector('#detectorsQc-for-1-notBadFraction-operator');
         await page.select('#detectorsQc-for-1-notBadFraction-operator', '<=');
         await fillInput(page, '#detectorsQc-for-1-notBadFraction-operand', '90', ['change']);
-        await expectColumnValues(page, 'runNumber', ['106']);
-
-        await pressElement(page, '#mcReproducibleAsNotBadToggle input', true);
         await expectColumnValues(page, 'runNumber', ['107', '106']);
 
-        await pressElement(page, '#openFilterToggle', true);
         await pressElement(page, '#reset-filters', true);
         await expectColumnValues(page, 'runNumber', ['108', '107', '106']);
     });