diff --git a/components/map/mapbox-map.tsx b/components/map/mapbox-map.tsx
index e472c705..38d531d9 100644
--- a/components/map/mapbox-map.tsx
+++ b/components/map/mapbox-map.tsx
@@ -34,6 +34,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
   const { mapData, setMapData } = useMapData(); // Consume the new context, get setMapData
   const { setIsMapLoaded } = useMapLoading(); // Get setIsMapLoaded from context
   const previousMapTypeRef = useRef<MapToggleEnum | null>(null)
+  const navigationControlRef = useRef<mapboxgl.NavigationControl | null>(null);
 
   // Refs for long-press functionality
   const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
@@ -351,6 +352,19 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
       
       // Handle geolocation setup based on mode
       setupGeolocationWatcher()
+
+      // Handle navigation controls based on mode
+      if (mapType === MapToggleEnum.DrawingMode) {
+        if (!navigationControlRef.current) {
+          navigationControlRef.current = new mapboxgl.NavigationControl();
+          map.current.addControl(navigationControlRef.current, 'top-left');
+        }
+      } else {
+        if (navigationControlRef.current) {
+          map.current.removeControl(navigationControlRef.current);
+          navigationControlRef.current = null;
+        }
+      }
       
       // Handle draw controls based on mode
       if (mapType === MapToggleEnum.DrawingMode) {
@@ -409,8 +423,6 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         preserveDrawingBuffer: true
       })
 
-      map.current.addControl(new mapboxgl.NavigationControl(), 'top-left')
-
       // Register event listeners
       map.current.on('moveend', captureMapCenter)
       map.current.on('mousedown', handleUserInteraction)
diff --git a/dev.log b/dev.log
new file mode 100644
index 00000000..e69de29b