diff --git a/docs/developer-guide/local-config.md b/docs/developer-guide/local-config.md
index 918a90cca2..acef252e2a 100644
--- a/docs/developer-guide/local-config.md
+++ b/docs/developer-guide/local-config.md
@@ -73,7 +73,9 @@ This is the main structure:
       // Use POST requests for each WMS length URL highter than this value.
       "maxURLLength": 5000,
       // Custom path to home page
-      "homePath": '/home'
+      "homePath": '/home',
+      // If true it enables interactive legend for GeoServer WMS layers
+      "experimentalInteractiveLegend": true
   },
   // optional state initializer (it will override the one defined in appConfig.js)
   "initialState": {
diff --git a/web/client/components/TOC/fragments/settings/Display.jsx b/web/client/components/TOC/fragments/settings/Display.jsx
index 3b00af2926..2f3ea6957d 100644
--- a/web/client/components/TOC/fragments/settings/Display.jsx
+++ b/web/client/components/TOC/fragments/settings/Display.jsx
@@ -25,6 +25,7 @@ import WMSCacheOptions from './WMSCacheOptions';
 import ThreeDTilesSettings from './ThreeDTilesSettings';
 import ModelTransformation from './ModelTransformation';
 import StyleBasedWMSJsonLegend from '../../../../plugins/TOC/components/StyleBasedWMSJsonLegend';
+import { getMiscSetting } from '../../../../utils/ConfigUtils';
 export default class extends React.Component {
     static propTypes = {
         opacityText: PropTypes.node,
@@ -123,6 +124,8 @@ export default class extends React.Component {
     };
     render() {
         const formatValue = this.props.element && this.props.element.format || "image/png";
+        const experimentalInteractiveLegend = getMiscSetting('experimentalInteractiveLegend', false);
+        const enableInteractiveLegend = !!(experimentalInteractiveLegend && this.props.element?.enableInteractiveLegend);
         return (
             <Grid
                 fluid
@@ -265,7 +268,7 @@ export default class extends React.Component {
                         <Col xs={12} className={"legend-label"}>
                             <label key="legend-options-title" className="control-label"><Message msgId="layerProperties.legendOptions.title" /></label>
                         </Col>
-                        { this.props.element?.serverType !== ServerTypes.NO_VENDOR && !this.props?.hideInteractiveLegendOption &&
+                        { experimentalInteractiveLegend && this.props.element?.serverType !== ServerTypes.NO_VENDOR && !this.props?.hideInteractiveLegendOption &&
                             <Col xs={12} className="first-selectize">
                                 <Checkbox
                                     data-qa="display-interactive-legend-option"
@@ -278,13 +281,13 @@ export default class extends React.Component {
                                         }
                                         this.props.onChange("enableInteractiveLegend", e.target.checked);
                                     }}
-                                    checked={this.props.element.enableInteractiveLegend} >
+                                    checked={enableInteractiveLegend} >
                                     <Message msgId="layerProperties.enableInteractiveLegendInfo.label"/>
                                     &nbsp;<InfoPopover text={<Message msgId="layerProperties.enableInteractiveLegendInfo.info" />} />
                                 </Checkbox>
                             </Col>
                         }
-                        {!this.props.element?.enableInteractiveLegend && <><Col xs={12} sm={6} className="first-selectize">
+                        {!enableInteractiveLegend && <><Col xs={12} sm={6} className="first-selectize">
                             <FormGroup validationState={this.getValidationState("legendWidth")}>
                                 <ControlLabel><Message msgId="layerProperties.legendOptions.legendWidth" /></ControlLabel>
                                 <IntlNumberFormControl
@@ -317,7 +320,7 @@ export default class extends React.Component {
                         <Col xs={12} className="legend-preview">
                             <ControlLabel><Message msgId="layerProperties.legendOptions.legendPreview" /></ControlLabel>
                             <div style={this.setOverFlow() && this.state.containerStyle || {}} ref={this.containerRef} >
-                                { this.props.element?.enableInteractiveLegend ?
+                                { enableInteractiveLegend ?
                                     <StyleBasedWMSJsonLegend
                                         owner="legendPreview"
                                         style={this.setOverFlow() && {} || undefined}
diff --git a/web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx
index bc49400a2d..631ae8713a 100644
--- a/web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx
+++ b/web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx
@@ -14,11 +14,13 @@ import GET_CAP_RESPONSE from 'raw-loader!../../../../../test-resources/wms/GetCa
 import Display from '../Display';
 import MockAdapter from "axios-mock-adapter";
 import axios from "../../../../../libs/ajax";
+import { setConfigProp } from "../../../../../utils/ConfigUtils";
 let mockAxios;
 describe('test Layer Properties Display module component', () => {
     beforeEach((done) => {
         document.body.innerHTML = '<div id="container"></div>';
         mockAxios = new MockAdapter(axios);
+        setConfigProp('miscSettings', { experimentalInteractiveLegend: true });
         setTimeout(done);
     });
 
@@ -26,6 +28,7 @@ describe('test Layer Properties Display module component', () => {
         ReactDOM.unmountComponentAtNode(document.getElementById("container"));
         document.body.innerHTML = '';
         mockAxios.restore();
+        setConfigProp('miscSettings', { });
         setTimeout(done);
     });
 
diff --git a/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js b/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
index dc29cafd84..f587a614dc 100644
--- a/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
+++ b/web/client/components/catalog/editor/AdvancedSettings/RasterAdvancedSettings.js
@@ -21,6 +21,7 @@ import WMSDomainAliases from "./WMSDomainAliases";
 import tooltip from '../../../misc/enhancers/buttonTooltip';
 import OverlayTrigger from '../../../misc/OverlayTrigger';
 import FormControl from '../../../misc/DebouncedFormControl';
+import { getMiscSetting } from '../../../../utils/ConfigUtils';
 
 const Button = tooltip(ButtonRB);
 const Select = localizedProps('noResultsText')(RS);
@@ -82,6 +83,8 @@ export default ({
         service.isNew && onChangeServiceProperty("autoSetVisibilityLimits", props.autoSetVisibilityLimits);
     }, [props.autoSetVisibilityLimits]);
 
+    const experimentalInteractiveLegend = getMiscSetting('experimentalInteractiveLegend', false);
+
     const tileSelectOptions = getTileSizeSelectOptions(tileSizeOptions);
     const serverTypeOptions = getServerTypeOptions();
     return (<CommonAdvancedSettings {...props} onChangeServiceProperty={onChangeServiceProperty} service={service} >
@@ -166,7 +169,7 @@ export default ({
                     }} />
             </InputGroup>
         </FormGroup>
-        {![ServerTypes.NO_VENDOR].includes(service.layerOptions?.serverType) && ['wms', 'csw'].includes(service.type) && <FormGroup controlId="enableInteractiveLegend" key="enableInteractiveLegend">
+        {experimentalInteractiveLegend && ![ServerTypes.NO_VENDOR].includes(service.layerOptions?.serverType) && ['wms', 'csw'].includes(service.type) && <FormGroup controlId="enableInteractiveLegend" key="enableInteractiveLegend">
             <Checkbox data-qa="display-interactive-legend-option"
                 onChange={(e) => onChangeServiceProperty("layerOptions", { ...service.layerOptions, enableInteractiveLegend: e.target.checked})}
                 checked={!isNil(service.layerOptions?.enableInteractiveLegend) ? service.layerOptions?.enableInteractiveLegend : false}>
diff --git a/web/client/components/catalog/editor/AdvancedSettings/__tests__/RasterAdvancedSettings-test.js b/web/client/components/catalog/editor/AdvancedSettings/__tests__/RasterAdvancedSettings-test.js
index 5797725287..75e3771901 100644
--- a/web/client/components/catalog/editor/AdvancedSettings/__tests__/RasterAdvancedSettings-test.js
+++ b/web/client/components/catalog/editor/AdvancedSettings/__tests__/RasterAdvancedSettings-test.js
@@ -12,15 +12,18 @@ import expect from 'expect';
 import RasterAdvancedSettings from "../RasterAdvancedSettings";
 import TestUtils from "react-dom/test-utils";
 import { waitFor } from '@testing-library/react';
+import { setConfigProp } from "../../../../../utils/ConfigUtils";
 
 describe('Test Raster advanced settings', () => {
     beforeEach((done) => {
         document.body.innerHTML = '<div id="container"></div>';
+        setConfigProp('miscSettings', { experimentalInteractiveLegend: true });
         setTimeout(done);
     });
     afterEach((done) => {
         ReactDOM.unmountComponentAtNode(document.getElementById("container"));
         document.body.innerHTML = '';
+        setConfigProp('miscSettings', { });
         setTimeout(done);
     });
     it('creates the component with defaults', () => {
diff --git a/web/client/plugins/TOC/components/WMSLegend.jsx b/web/client/plugins/TOC/components/WMSLegend.jsx
index c07cd9a113..6435f3fad7 100644
--- a/web/client/plugins/TOC/components/WMSLegend.jsx
+++ b/web/client/plugins/TOC/components/WMSLegend.jsx
@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import { isEmpty, isNumber } from 'lodash';
 import StyleBasedWMSJsonLegend from './StyleBasedWMSJsonLegend';
 import Legend from './Legend';
+import { getMiscSetting } from '../../../utils/ConfigUtils';
 /**
  * WMSLegend renders the wms legend image
  * @prop {object} node layer node options
@@ -65,8 +66,9 @@ class WMSLegend extends React.Component {
 
     render() {
         let node = this.props.node || {};
+        const experimentalInteractiveLegend = getMiscSetting('experimentalInteractiveLegend', false);
         const showLegend = this.canShow(node) && node.type === "wms" && node.group !== "background";
-        const isJsonLegend = this.props.node?.enableInteractiveLegend;
+        const isJsonLegend = !!(experimentalInteractiveLegend && this.props.node?.enableInteractiveLegend);
         const useOptions = showLegend && this.useLegendOptions();
         if (showLegend && !isJsonLegend) {
             return (
diff --git a/web/client/plugins/TOC/components/__tests__/WMSLegend-test.jsx b/web/client/plugins/TOC/components/__tests__/WMSLegend-test.jsx
index ae53b3cb29..878a63eb87 100644
--- a/web/client/plugins/TOC/components/__tests__/WMSLegend-test.jsx
+++ b/web/client/plugins/TOC/components/__tests__/WMSLegend-test.jsx
@@ -14,6 +14,7 @@ import expect from 'expect';
 import TestUtils from 'react-dom/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '../../../../libs/ajax';
+import { setConfigProp } from "../../../../utils/ConfigUtils";
 
 let mockAxios;
 
@@ -21,6 +22,7 @@ describe('test WMSLegend module component', () => {
     beforeEach((done) => {
         document.body.innerHTML = '<div id="container"></div>';
         mockAxios = new MockAdapter(axios);
+        setConfigProp('miscSettings', { experimentalInteractiveLegend: true });
         setTimeout(done);
     });
 
@@ -28,6 +30,7 @@ describe('test WMSLegend module component', () => {
         ReactDOM.unmountComponentAtNode(document.getElementById("container"));
         document.body.innerHTML = '';
         mockAxios.restore();
+        setConfigProp('miscSettings', { });
         setTimeout(done);
     });