diff --git a/web/client/actions/__tests__/layers-test.js b/web/client/actions/__tests__/layers-test.js
index 1e92923d4e..b10ee2c602 100644
--- a/web/client/actions/__tests__/layers-test.js
+++ b/web/client/actions/__tests__/layers-test.js
@@ -122,11 +122,19 @@ describe('Test correctness of the layers actions', () => {
 
     it('add layer', () => {
         const testVal = 'layer1';
-        const retval = addLayer(testVal);
+        const retval1 = addLayer(testVal);
 
-        expect(retval).toExist();
-        expect(retval.type).toBe(ADD_LAYER);
-        expect(retval.layer).toBe(testVal);
+        expect(retval1).toExist();
+        expect(retval1.type).toBe(ADD_LAYER);
+        expect(retval1.layer).toBe(testVal);
+        expect(retval1.foreground).toBe(false);
+
+        const retval2 = addLayer(testVal, true);
+
+        expect(retval2).toExist();
+        expect(retval2.type).toBe(ADD_LAYER);
+        expect(retval2.layer).toBe(testVal);
+        expect(retval2.foreground).toBe(true);
     });
 
     it('remove layer', () => {
diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js
index 39a09d2381..2ba8370d22 100644
--- a/web/client/actions/layers.js
+++ b/web/client/actions/layers.js
@@ -126,10 +126,11 @@ function layerError(layerId) {
     };
 }
 
-function addLayer(layer) {
+function addLayer(layer, foreground = false) {
     return {
         type: ADD_LAYER,
-        layer
+        layer,
+        foreground
     };
 }
 
diff --git a/web/client/reducers/__tests__/layers-test.js b/web/client/reducers/__tests__/layers-test.js
index 6b752b7551..1cc55d1e80 100644
--- a/web/client/reducers/__tests__/layers-test.js
+++ b/web/client/reducers/__tests__/layers-test.js
@@ -293,20 +293,54 @@ describe('Test the layers reducer', () => {
     });
 
     it('add new layer', () => {
-        let testAction = {
+        let testAction1 = {
             type: "ADD_LAYER",
-            layer: {group: "test", id: "test_id"}
+            layer: {group: "test", id: "test_id1"},
+            foreground: false
         };
 
-        let state = layers({}, testAction);
+        let state = layers({}, testAction1);
         expect(state).toExist();
         expect(state.flat).toExist();
         expect(state.flat[0].group).toExist();
         expect(state.flat[0].id).toExist();
-        expect(state.flat[0].id).toBe("test_id");
+        expect(state.flat[0].id).toBe("test_id1");
+        expect(state.groups).toExist();
+        expect(state.groups[0].name).toBe("test");
+        expect(state.groups[0].nodes[0]).toBe("test_id1");
+
+        let testAction2 = {
+            type: "ADD_LAYER",
+            layer: {group: "test", id: "test_id2"},
+            foreground: false
+        };
+
+        state = layers(state, testAction2);
+        expect(state).toExist();
+        expect(state.flat).toExist();
+        expect(state.flat[0].group).toExist();
+        expect(state.flat[0].id).toExist();
+        expect(state.flat[0].id).toBe("test_id2");
+        expect(state.groups).toExist();
+        expect(state.groups[0].name).toBe("test");
+        expect(state.groups[0].nodes[1]).toBe("test_id2");
+
+        let testAction3 = {
+            type: "ADD_LAYER",
+            layer: {group: "test", id: "test_id3"},
+            foreground: true
+        };
+
+        state = layers(state, testAction3);
+        expect(state).toExist();
+        expect(state.flat).toExist();
+        expect(state.flat[2].group).toExist();
+        expect(state.flat[2].id).toExist();
+        expect(state.flat[2].id).toBe("test_id3");
         expect(state.groups).toExist();
         expect(state.groups[0].name).toBe("test");
-        expect(state.groups[0].nodes[0]).toBe("test_id");
+        expect(state.groups[0].nodes[0]).toBe("test_id3");
+        expect(state.groups[0].nodes[1]).toBe("test_id1");
     });
 
     it('remove layer', () => {
diff --git a/web/client/reducers/layers.js b/web/client/reducers/layers.js
index 56dd093296..7d6a596c42 100644
--- a/web/client/reducers/layers.js
+++ b/web/client/reducers/layers.js
@@ -252,7 +252,8 @@ function layers(state = [], action) {
             if (groupName !== "background") {
                 let node = getNode(newGroups, groupName );
                 if (node) {
-                    newGroups = deepChange(state.groups, groupName, 'nodes', node.nodes.concat(newLayer.id));
+                    let newLayerIds = action.foreground ? [newLayer.id].concat(node.nodes) : node.nodes.concat([newLayer.id]);
+                    newGroups = deepChange(state.groups, groupName, 'nodes', newLayerIds);
                 } else {
                     const newGroup = LayersUtils.getLayersByGroup([newLayer]);
                     newGroups = newGroup.concat(newGroups);