diff --git a/web/client/components/TOC/fragments/legend/Legend.jsx b/web/client/components/TOC/fragments/legend/Legend.jsx
index 625402b7d6..89bb4a5016 100644
--- a/web/client/components/TOC/fragments/legend/Legend.jsx
+++ b/web/client/components/TOC/fragments/legend/Legend.jsx
@@ -51,6 +51,14 @@ class Legend extends React.Component {
     onImgError = () => {
         this.setState(() => ({error: true}));
     }
+    getScale = (props) => {
+        if (props.scales && props.currentZoomLvl !== undefined && props.scaleDependent) {
+            const zoom = Math.round(props.currentZoomLvl);
+            const scale = props.scales[zoom] ?? props.scales[props.scales.length - 1];
+            return Math.round(scale);
+        }
+        return null;
+    };
     getUrl = (props, urlIdx) => {
         if (props.layer && props.layer.type === "wms" && props.layer.url) {
             const layer = props.layer;
@@ -63,6 +71,7 @@ class Legend extends React.Component {
             let urlObj = urlUtil.parse(url);
 
             const cleanParams = clearNilValuesForParams(layer.params);
+            const scale = this.getScale(props);
             let query = assign({}, {
                 service: "WMS",
                 request: "GetLegendGraphic",
@@ -78,7 +87,7 @@ class Legend extends React.Component {
             props.language && layer.localizedLayerStyles ? {LANGUAGE: props.language} : {},
             addAuthenticationToSLD(cleanParams || {}, props.layer),
             cleanParams && cleanParams.SLD_BODY ? {SLD_BODY: cleanParams.SLD_BODY} : {},
-            props.scales && props.currentZoomLvl && props.scaleDependent ? {SCALE: Math.round(props.scales[props.currentZoomLvl])} : {});
+            scale !== null ? { SCALE: scale } : {});
             addAuthenticationParameter(url, query);
 
             return urlUtil.format({
diff --git a/web/client/components/TOC/fragments/legend/__tests__/Legend-test.jsx b/web/client/components/TOC/fragments/legend/__tests__/Legend-test.jsx
index 16e1b6524f..0966aa2b5a 100644
--- a/web/client/components/TOC/fragments/legend/__tests__/Legend-test.jsx
+++ b/web/client/components/TOC/fragments/legend/__tests__/Legend-test.jsx
@@ -10,10 +10,11 @@ import expect from 'expect';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Rx from 'rxjs';
+import url from 'url';
 
 import Legend from '../Legend';
 
-const TestUtils = require('react-dom/test-utils');
+import * as TestUtils from 'react-dom/test-utils';
 
 describe("test the Layer legend", () => {
     beforeEach((done) => {
@@ -166,4 +167,46 @@ describe("test the Layer legend", () => {
         expect(legendComponent.props.legendHeight).toBe(30);
         expect(legendComponent.props.scaleDependent).toBe(scaleDependentCustom);
     });
+    it('should apply the scale correctly even for zoom with decimal values', () => {
+        const layer = {
+            "type": "wms",
+            "url": "http://test2/reflector/open/service",
+            "visibility": true,
+            "title": "test layer 3 (no group)",
+            "name": "layer3",
+            "format": "image/png"
+        };
+        ReactDOM.render(
+            <Legend
+                layer={layer}
+                currentZoomLvl={2.3456}
+                scales={[10000, 5000, 2000, 1000]}
+            />,
+            document.getElementById("container"));
+        const legendImage = document.querySelector("img");
+        expect(legendImage).toBeTruthy();
+        const { query } = url.parse(legendImage.getAttribute('src'), true);
+        expect(query.SCALE).toBe('2000');
+    });
+    it('should apply the scale correctly even for zoom exceed the maximum scales index', () => {
+        const layer = {
+            "type": "wms",
+            "url": "http://test2/reflector/open/service",
+            "visibility": true,
+            "title": "test layer 3 (no group)",
+            "name": "layer3",
+            "format": "image/png"
+        };
+        ReactDOM.render(
+            <Legend
+                layer={layer}
+                currentZoomLvl={10}
+                scales={[10000, 5000, 2000, 1000]}
+            />,
+            document.getElementById("container"));
+        const legendImage = document.querySelector("img");
+        expect(legendImage).toBeTruthy();
+        const { query } = url.parse(legendImage.getAttribute('src'), true);
+        expect(query.SCALE).toBe('1000');
+    });
 });