diff --git a/reactapp/lib/layersData.js b/reactapp/lib/layersData.js
index b5926ff..f94b102 100644
--- a/reactapp/lib/layersData.js
+++ b/reactapp/lib/layersData.js
@@ -48,5 +48,30 @@ const sldCatchmentStyle = `<?xml version="1.0" encoding="ISO-8859-1"?>
   </NamedLayer>
 </StyledLayerDescriptor>`
 
-export { initialLayersArray,sldCatchmentStyle }
+const sldFlowPathsStyle = `<?xml version="1.0" encoding="ISO-8859-1"?>
+<StyledLayerDescriptor version="1.0.0" 
+    xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
+    xmlns="http://www.opengis.net/sld" 
+    xmlns:ogc="http://www.opengis.net/ogc" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" 
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <NamedLayer>
+    <Name>nextgen:flowpaths</Name>
+    <UserStyle>
+      <FeatureTypeStyle>
+        <Rule>
+          <LineSymbolizer>
+          <Stroke>
+            <CssParameter name="stroke">#87CEEB</CssParameter>
+            <CssParameter name="stroke-width">2</CssParameter>
+          </Stroke>
+          </LineSymbolizer>
+        </Rule>
+      </FeatureTypeStyle>
+    </UserStyle>
+  </NamedLayer>
+</StyledLayerDescriptor>`
+
+
+export { initialLayersArray,sldCatchmentStyle,sldFlowPathsStyle }
 
diff --git a/reactapp/lib/mapUtils.js b/reactapp/lib/mapUtils.js
index 608059c..24d15e6 100644
--- a/reactapp/lib/mapUtils.js
+++ b/reactapp/lib/mapUtils.js
@@ -8,7 +8,7 @@ import {
     Text,
   } from 'ol/style';
 import { VectorSourceLayer } from 'features/Map/lib/source/sources';
-import { sldCatchmentStyle } from './layersData';
+import { sldCatchmentStyle,sldFlowPathsStyle } from './layersData';
 
 const image = new CircleStyle({
     radius: 5,
@@ -202,6 +202,34 @@ let makeCatchmentLayer = (catchmentLayersURL) =>{
     }
 }
 
+let makeFlowPathsLayer = (flowPathsLayersURL) =>{
+  return   {
+      layerType: 'OlTileLayer',
+      options: 
+      {
+          sourceType: 'WMSTile',
+          url: flowPathsLayersURL,
+          // all the params for the source goes here
+          params: {
+              LAYERS: 'nextgen:flowpaths',
+              Tiled: true,
+              SLD_BODY: sldFlowPathsStyle
+          },
+          // the rest of the attributes are for the definition of the layer
+          name: "Flowpaths Layer",
+          zIndex: 2,
+          source:{
+            serverType: 'geoserver',
+            crossOrigin: 'anonymous'
+          }
+
+      },
+
+  }
+}
+
+
+
 const customForEachLayerAtPixelLayerFilter = (layer) =>{
   return layer.get('name') !== 'baseMapLayer'
   // return  layer.get('events') && layer.get('events').length > 0 && layer.get('events').findIndex(event => event.type === 'click') > -1
@@ -313,6 +341,7 @@ const displayFeatureInfo = (event,layer,hydroFabricActions) => {
 export { 
   makeNexusLayerParams, 
   makeCatchmentLayer,
+  makeFlowPathsLayer,
   displayFeatureInfo, 
   displayFeatureInfoWMS, 
   customForEachLayerAtPixelLayerFilter,
diff --git a/reactapp/views/ngiab/map_view.js b/reactapp/views/ngiab/map_view.js
index 5c1df5d..cdd74d3 100644
--- a/reactapp/views/ngiab/map_view.js
+++ b/reactapp/views/ngiab/map_view.js
@@ -13,6 +13,7 @@ import { initialLayersArray } from 'lib/layersData';
 import { 
   makeNexusLayerParams, 
   makeCatchmentLayer,
+  makeFlowPathsLayer,
   createClusterVectorLayer
 } from 'lib/mapUtils';
 import LoadingAnimation from 'components/loader/LoadingAnimation';
@@ -30,6 +31,12 @@ const MapView = (props) => {
     const catchmentLayersURL = 'http://localhost:8181/geoserver/wms'; 
     return makeCatchmentLayer(catchmentLayersURL);
   },[])
+
+  const flowPathsLayerCallBack = useCallback(() => {
+    const flowPathsLayersURL = 'http://localhost:8181/geoserver/wms'; 
+    return makeFlowPathsLayer(flowPathsLayersURL);
+  },[])
+
   const onPointerMoveLayersEventCallback = useCallback((event) => {
     return onPointerMoveLayersEvent(event)
   },[]);
@@ -61,16 +68,19 @@ const MapView = (props) => {
         // Define the parameters for the layer
         var nexusLayerParams = nexusLayerParamsCallBack();
         var catchmentLayer = catchmentLayerCallBack();
+        var flowPathsLayer = flowPathsLayerCallBack();
 
         nexusLayerParams['geojsonLayer']=response.geojson;
         
         const nexusClusterLayer = createClusterVectorLayer(nexusLayerParams);
         
+        
         const NexusExtent = nexusClusterLayer.options.params.source.getExtent();
 
         mapActions.addLayer(nexusClusterLayer);
         mapActions.set_extent(NexusExtent);
         mapActions.addLayer(catchmentLayer);
+        mapActions.addLayer(flowPathsLayer);
 
     }).catch(error => {
         console.log(error)