diff --git a/reactapp/features/Map/components/mapgl.js b/reactapp/features/Map/components/mapgl.js
index b10869e..f6ea691 100644
--- a/reactapp/features/Map/components/mapgl.js
+++ b/reactapp/features/Map/components/mapgl.js
@@ -34,8 +34,10 @@ import { useHydroFabricContext } from 'features/hydroFabric/hooks/useHydroFabric
     if (map.getLayer('catchments')) {
       map.setFilter('catchments', ['any', ['in', 'divide_id', ""]]);
       console.log("Base 'catchments' layer has been filtered out.");
-    } else {
-      console.log("Base 'catchments' layer not found.");
+    }
+    if(map.getLayer('flowpaths')){
+      map.setFilter('flowpaths', ['any', ['in', 'id', ""]]);
+      console.log("Base 'flowpaths' layer has been filtered out.");
     }
   };
 
@@ -81,7 +83,7 @@ const MapComponent = () => {
   const { actions: hydroFabricActions } = useHydroFabricContext();
   const [nexusPoints, setNexusPoints] = useState(null);
   const [catchmentConfig, setCatchmentConfig] = useState(null);
-
+  const [flowPathsConfig, setFlowPathsConfig] = useState(null);
   const mapRef = useRef(null);
 
   useEffect(() => {
@@ -113,6 +115,22 @@ const MapComponent = () => {
       };
       setCatchmentConfig(catchmentLayerConfig);
 
+      const flowPathsLayerConfig = {
+        "id": "flowpaths-layer",
+        "type": "line",
+        "source": "conus",
+        "source-layer": "flowpaths",
+        "layout": {},
+        "paint": {
+            "line-color": ["rgba", 0, 119, 187, 1],
+            "line-width": { "stops": [[7, 1], [10, 2]] },
+            "line-opacity": { "stops": [[7, 0], [11, 1]] }
+        },
+        "filter": ["any",["in", "id", ...response.flow_paths_ids]] // Replace with actual
+      }
+      
+      setFlowPathsConfig(flowPathsLayerConfig);
+
 
     }).catch(error => {
       console.log(error);
@@ -206,6 +224,7 @@ const MapComponent = () => {
       <Source id="conus" type="vector" url={pmtilesUrl}>
         {/* Add the layer that uses the source */}
         <Layer {...catchmentConfig} />
+        <Layer {...flowPathsConfig} />
 
       </Source>
     </Map>
diff --git a/tethysapp/ngiab/controllers.py b/tethysapp/ngiab/controllers.py
index 7b6b4d2..71d13a4 100644
--- a/tethysapp/ngiab/controllers.py
+++ b/tethysapp/ngiab/controllers.py
@@ -97,6 +97,8 @@ def getGeoSpatialData(request, app_workspace):
     # Convert the DataFrame to the "EPSG:3857" coordinate system
     # gdf = gdf.to_crs("EPSG:3857")
     gdf = gdf.to_crs("EPSG:4326")
+
+    flow_paths_ids = gdf["toid"].tolist()
     bounds = gdf.total_bounds.tolist()
     # filtered_gdf = gdf[gdf["ngen_usgs"] != "none"]
     # data = json.loads(filtered_gdf.to_json())
@@ -105,7 +107,7 @@ def getGeoSpatialData(request, app_workspace):
     response_object["nexus"] = data
     response_object["bounds"] = bounds
     response_object["catchments"] = getCatchmentsList(app_workspace)
-
+    response_object["flow_paths_ids"] = flow_paths_ids
     return JsonResponse(response_object)