diff --git a/map-viewer/src/Map.jsx b/map-viewer/src/Map.jsx
index 09f7733..ab7def2 100644
--- a/map-viewer/src/Map.jsx
+++ b/map-viewer/src/Map.jsx
@@ -18,6 +18,8 @@ import mapLayers from './LayerDefinitions';
 import { coastalHabitats } from './ScaleDefinitions';
 import { protectedLayers } from './ScaleDefinitions';
 
+import {arrayMoveImmutable} from 'array-move';
+
 
 // import MyComponent from './components/MyComponent';
 
@@ -550,7 +552,8 @@ const Map = () => {
       setLayers({...visibleLayersUpdate});
     }
     else {
-      selectedServicesUpdate.push(serviceResult);
+      //Using concat because we want newly added things in front of array 
+      selectedServicesUpdate = [serviceResult].concat(selectedServicesUpdate);
       //You're calling setNumbers and passing it the array it already has.
       //You've changed one of its values but it's still the same array, and
       //I suspect React doesn't see any reason to re-render because state
@@ -562,6 +565,7 @@ const Map = () => {
         // Check 'all' for coastal protection case where we want this one 
         // layer visible across all scales
         if((layer.scaleID === scale.current || layer.scaleID === 'all') && layer.serviceType === serviceResult) {
+          map.moveLayer(layer.layerID);
           map.setLayoutProperty(layer.layerID, 'visibility', 'visible');
           visibleLayersUpdate[serviceResult] = {...layer};
 
@@ -601,6 +605,31 @@ const Map = () => {
     setMap(map);
   }
 
+  const changeLayerOrder = (servicesSorted, oldIndex, newIndex) => {
+    console.log("change order");
+    console.log(selectedServices);
+    console.log(oldIndex + " : " + newIndex);
+    const reversedServices = servicesSorted.slice().reverse();
+    reversedServices.forEach((serviceType, i) => {
+      const zbackId = visibleLayers[serviceType].layerID;
+      if(reversedServices.length < i+1) {
+        const nextService = reversedServices[i+1];
+        const zfrontId = visibleLayers[nextService].layerID;
+        map.moveLayer(zbackId, zfrontId);
+      }
+      else {
+        map.moveLayer(zbackId);
+      }
+    });
+
+    setServices(() => {
+        return arrayMoveImmutable(selectedServices, oldIndex, newIndex);
+    });
+    console.log("servicesSorted ", servicesSorted);
+    console.log("selectedServices: after order change ", [...selectedServices]);
+    setMap(map);
+  };
+
   return (
       <Col className="map-container" ref={mapContainer} >
         <VerticalMenu
@@ -612,6 +641,7 @@ const Map = () => {
         <Legend
           layers={visibleLayers}
           services={selectedServices}
+          changeLayerOrder={changeLayerOrder}
         />
         <BasemapControl className="basemap-control"
           basemaps={basemaps}
diff --git a/map-viewer/src/components/Legend.jsx b/map-viewer/src/components/Legend.jsx
index d63e7e1..ed699b8 100644
--- a/map-viewer/src/components/Legend.jsx
+++ b/map-viewer/src/components/Legend.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import ListGroup from 'react-bootstrap/ListGroup';
@@ -138,12 +138,10 @@ const SortableContainer = sortableContainer(({children}) => {
 
 
 const Legend = (props) => {
-  const [items, setItems] = useState(props.services);
 
   function handleDragEnd({oldIndex, newIndex}) {
-    setItems(() => {
-        return arrayMoveImmutable(items, oldIndex, newIndex);
-    });
+    const sortedServices = arrayMoveImmutable(props.services, oldIndex, newIndex);
+    props.changeLayerOrder(sortedServices, oldIndex, newIndex);
   }
 
   const renderLegend = (serviceType, i) => {
@@ -180,6 +178,7 @@ const Legend = (props) => {
 Legend.propTypes = {
   layers: PropTypes.object.isRequired,
   services: PropTypes.array.isRequired,
+  changeLayerOrder: PropTypes.func.isRequired,
 }
 
 export default Legend;