diff --git a/locane/src/components/CachedTileLayer.jsx b/locane/src/components/CachedTileLayer.jsx
index 13deec74..634b13c8 100644
--- a/locane/src/components/CachedTileLayer.jsx
+++ b/locane/src/components/CachedTileLayer.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useMap } from 'react-leaflet';
-import L from 'leaflet';
+import L from '../leafletConfig.js'; // Use configured Leaflet
 import 'leaflet.tilelayer.fallback';
 
 // Function to create a custom tile layer with caching
diff --git a/locane/src/components/CreateTask.jsx b/locane/src/components/CreateTask.jsx
index 086100d4..89095485 100644
--- a/locane/src/components/CreateTask.jsx
+++ b/locane/src/components/CreateTask.jsx
@@ -2,6 +2,7 @@ import Upload from "./Upload.jsx";
 import React, { useEffect, useState } from "react";
 import exifr from "exifr";
 import 'leaflet/dist/leaflet.css';
+import '../leafletConfig.js'; // Configure Leaflet icons
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import { authorizedFetch } from '../utils/api.js';
 import './createtask.css';
diff --git a/locane/src/components/GcpInterface.jsx b/locane/src/components/GcpInterface.jsx
index 0a21a789..1f9398cd 100644
--- a/locane/src/components/GcpInterface.jsx
+++ b/locane/src/components/GcpInterface.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { MapContainer, TileLayer, Marker, Tooltip, useMap, useMapEvents } from "react-leaflet";
+import '../leafletConfig.js'; // Configure Leaflet icons
 import exifr from 'exifr';
 import proj4 from 'proj4';
 import './GcpInterface.css';
diff --git a/locane/src/components/ResultMap.jsx b/locane/src/components/ResultMap.jsx
index 666f0462..4803627d 100644
--- a/locane/src/components/ResultMap.jsx
+++ b/locane/src/components/ResultMap.jsx
@@ -1,5 +1,6 @@
 import {GeoJSON, MapContainer, TileLayer} from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
+import '../leafletConfig.js'; // Configure Leaflet icons
 import {useEffect, useState, useRef} from 'react';
 import "./resultmap.css"
 import {ScaleLoader, SyncLoader} from "react-spinners";
diff --git a/locane/src/leafletConfig.js b/locane/src/leafletConfig.js
new file mode 100644
index 00000000..b54fc7f3
--- /dev/null
+++ b/locane/src/leafletConfig.js
@@ -0,0 +1,15 @@
+import L from 'leaflet';
+
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: import.meta.env.DEV 
+    ? '/node_modules/leaflet/dist/images/marker-icon-2x.png'
+    : '/images/marker-icon-2x.png',
+  iconUrl: import.meta.env.DEV 
+    ? '/node_modules/leaflet/dist/images/marker-icon.png'
+    : '/images/marker-icon.png',
+  shadowUrl: import.meta.env.DEV 
+    ? '/node_modules/leaflet/dist/images/marker-shadow.png'
+    : '/images/marker-shadow.png',
+});
+
+export default L;
\ No newline at end of file