diff --git a/src/mapper/package.json b/src/mapper/package.json
index e1e2839b9..3793f036b 100644
--- a/src/mapper/package.json
+++ b/src/mapper/package.json
@@ -45,6 +45,7 @@
 		"@electric-sql/client": "^0.8.0",
 		"@electric-sql/pglite": "^0.2.14",
 		"@hotosm/ui": "0.2.0-b5",
+		"@maplibre/maplibre-gl-directions": "^0.7.1",
 		"@tiptap/core": "^2.10.3",
 		"@tiptap/pm": "^2.10.3",
 		"@tiptap/starter-kit": "^2.10.3",
diff --git a/src/mapper/pnpm-lock.yaml b/src/mapper/pnpm-lock.yaml
index 48b13effb..673743a22 100644
--- a/src/mapper/pnpm-lock.yaml
+++ b/src/mapper/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@hotosm/ui':
         specifier: 0.2.0-b5
         version: 0.2.0-b5(@types/react@18.3.3)
+      '@maplibre/maplibre-gl-directions':
+        specifier: ^0.7.1
+        version: 0.7.1(@types/geojson@7946.0.14)(maplibre-gl@4.7.1)
       '@shoelace-style/shoelace':
         specifier: ^2.15.1
         version: 2.18.0(@types/react@18.3.3)
@@ -1079,6 +1082,11 @@ packages:
     resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
     engines: {node: '>=6.0.0'}
 
+  '@maplibre/maplibre-gl-directions@0.7.1':
+    resolution: {integrity: sha512-n2dQkMM1+LO77bnVXXp+rZwD1OVa0UNbP3mgGyDxE6NLFEPU/p+w3G/pxnDfwuapzyHYeevdpYpxrVbwABU4BQ==}
+    peerDependencies:
+      maplibre-gl: ^4.0.0
+
   '@maplibre/maplibre-gl-style-spec@20.4.0':
     resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==}
     hasBin: true
@@ -1098,6 +1106,11 @@ packages:
   '@petamoriken/float16@3.9.0':
     resolution: {integrity: sha512-rYUZ+VFjPHD0NT2JYKj64NxXxrV642IiyaUxxorTEj0S3hT7B5Ixezyc9Fn+XvSk0ETEBp5VWjGIErzh0ug0Xw==}
 
+  '@placemarkio/polyline@1.2.0':
+    resolution: {integrity: sha512-PjXntwUKQFTM/MgXIZHBOtuU2rAkmPgfrIxweOJEf1vyytQJNLDMI4YIRO3LUkt++F4TyAQHjPoRsteYa+gtVQ==}
+    peerDependencies:
+      '@types/geojson': '*'
+
   '@playwright/test@1.49.0':
     resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
     engines: {node: '>=18'}
@@ -2830,6 +2843,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.0.9:
+    resolution: {integrity: sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -4723,6 +4741,14 @@ snapshots:
 
   '@mapbox/whoots-js@3.1.0': {}
 
+  '@maplibre/maplibre-gl-directions@0.7.1(@types/geojson@7946.0.14)(maplibre-gl@4.7.1)':
+    dependencies:
+      '@placemarkio/polyline': 1.2.0(@types/geojson@7946.0.14)
+      maplibre-gl: 4.7.1
+      nanoid: 5.0.9
+    transitivePeerDependencies:
+      - '@types/geojson'
+
   '@maplibre/maplibre-gl-style-spec@20.4.0':
     dependencies:
       '@mapbox/jsonlint-lines-primitives': 2.0.2
@@ -4748,6 +4774,10 @@ snapshots:
   '@petamoriken/float16@3.9.0':
     optional: true
 
+  '@placemarkio/polyline@1.2.0(@types/geojson@7946.0.14)':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
   '@playwright/test@1.49.0':
     dependencies:
       playwright: 1.49.0
@@ -6655,6 +6685,8 @@ snapshots:
 
   nanoid@3.3.8: {}
 
+  nanoid@5.0.9: {}
+
   natural-compare@1.4.0: {}
 
   node-fetch-native@1.6.4: {}
diff --git a/src/mapper/src/assets/images/location.png b/src/mapper/src/assets/images/location.png
new file mode 100644
index 000000000..185d0d0ce
Binary files /dev/null and b/src/mapper/src/assets/images/location.png differ
diff --git a/src/mapper/src/assets/maplibre-directions.ts b/src/mapper/src/assets/maplibre-directions.ts
new file mode 100644
index 000000000..8338ffb6e
--- /dev/null
+++ b/src/mapper/src/assets/maplibre-directions.ts
@@ -0,0 +1,68 @@
+// snapline: line from waypoint to road
+export const layers = [
+	{
+		id: 'maplibre-gl-directions-snapline',
+		type: 'line',
+		source: 'maplibre-gl-directions',
+		layout: {
+			'line-cap': 'round',
+			'line-join': 'round',
+		},
+		paint: {
+			'line-dasharray': [2, 2],
+			'line-color': '#000000',
+			'line-opacity': 0.65,
+			'line-width': 2,
+		},
+		filter: ['==', ['get', 'type'], 'SNAPLINE'],
+	},
+
+	// primary route
+	{
+		id: 'maplibre-gl-directions-routeline',
+		type: 'line',
+		source: 'maplibre-gl-directions',
+		layout: {
+			'line-cap': 'butt',
+			'line-join': 'round',
+		},
+		paint: {
+			'line-width': 12,
+			'line-opacity': 1,
+			'line-color': '#4285f4',
+		},
+		filter: ['==', ['get', 'route'], 'SELECTED'],
+	},
+
+	// alternative route
+	{
+		id: 'maplibre-gl-directions-alt-routeline',
+		type: 'line',
+		source: 'maplibre-gl-directions',
+		layout: {
+			'line-cap': 'butt',
+			'line-join': 'round',
+		},
+		paint: {
+			'line-width': 12,
+			'line-opacity': 0.8,
+			'line-color': '#547fff',
+		},
+		filter: ['==', ['get', 'route'], 'ALT'],
+	},
+
+	// only apply icon-style to the destination waypoint as we have icon for the origin
+	{
+		id: 'maplibre-gl-directions-waypoint',
+		type: 'symbol',
+		source: 'maplibre-gl-directions',
+		layout: {
+			'icon-image': 'location',
+			'icon-anchor': 'bottom',
+			'icon-ignore-placement': true,
+			'icon-overlap': 'always',
+			'icon-size': 0.5,
+		},
+		filter: ['all', ['==', ['get', 'type'], 'WAYPOINT'], ['==', ['get', 'category'], 'DESTINATION']],
+	},
+];
diff --git a/src/mapper/src/lib/components/dialog-entities-actions.svelte b/src/mapper/src/lib/components/dialog-entities-actions.svelte
index 93701eb5b..fad23fe75 100644
--- a/src/mapper/src/lib/components/dialog-entities-actions.svelte
+++ b/src/mapper/src/lib/components/dialog-entities-actions.svelte
@@ -19,6 +19,8 @@
 	const selectedEntity = $derived(
 		entitiesStore.entitiesStatusList?.find((entity) => entity.osmid === selectedEntityOsmId),
 	);
+	const selectedEntityCoordinate = $derived(entitiesStore.selectedEntityCoordinate);
+	const entityToNavigate = $derived(entitiesStore.entityToNavigate);
 
 	const mapFeature = () => {
 		const xformId = projectData?.odk_form_id;
@@ -43,6 +45,13 @@
 			alertStore.setAlert({ message: 'Requires a mobile phone with ODK Collect.', variant: 'warning' });
 		}
 	};
+
+	const navigateToEntity = () => {
+		if (!entitiesStore.toggleGeolocation) {
+			entitiesStore.setToggleGeolocation(true);
+		}
+		entitiesStore.setEntityToNavigate(selectedEntityCoordinate);
+	};
 </script>
 
 {#if isTaskActionModalOpen && selectedTab === 'map' && selectedEntity}
@@ -68,7 +77,6 @@
 				<div class="flex items-center justify-between">
 					<p class="text-[#333] text-xl font-barlow-semibold">Feature {selectedEntity?.osmid}</p>
 					<sl-button
-						loading={entitiesStore.syncEntityStatusLoading}
 						onclick={async () => {
 							await entitiesStore.syncEntityStatus(projectData?.id);
 						}}
@@ -78,8 +86,14 @@
 						role="button"
 						tabindex="0"
 						size="small"
-						class="secondary w-fit ml-auto"
+						class="link w-fit ml-auto"
+						disabled={entitiesStore.syncEntityStatusLoading}
 					>
+						<hot-icon
+							slot="prefix"
+							name="arrow-repeat"
+							class={`!text-[1rem] cursor-pointer duration-200 ${entitiesStore.syncEntityStatusLoading && 'animate-spin'}`}
+						></hot-icon>
 						<span class="font-barlow-medium text-SM uppercase">SYNC STATUS</span>
 					</sl-button>
 				</div>
@@ -92,24 +106,47 @@
 					</p>
 				</div>
 				{#if selectedEntity?.status !== 'SURVEY_SUBMITTED'}
-					<sl-button
-						loading={entitiesStore.updateEntityStatusLoading}
-						variant="default"
-						size="small"
-						class="primary"
-						onclick={() => {
-							mapFeature();
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							if (e.key === 'Enter') {
+					<div class="flex gap-2">
+						<sl-button
+							disabled={entityToNavigate?.entityId === selectedEntity?.osmid}
+							variant="default"
+							size="small"
+							class="secondary flex-grow"
+							onclick={() => {
+								navigateToEntity();
+							}}
+							onkeydown={(e: KeyboardEvent) => {
+								if (e.key === 'Enter') {
+									navigateToEntity();
+								}
+							}}
+							role="button"
+							tabindex="0"
+						>
+							<hot-icon slot="prefix" name="direction" class="!text-[1rem] cursor-pointer duration-200"></hot-icon>
+							<span class="font-barlow-medium text-sm">NAVIGATE HERE</span>
+						</sl-button>
+						<sl-button
+							loading={entitiesStore.updateEntityStatusLoading}
+							variant="default"
+							size="small"
+							class="primary flex-grow"
+							onclick={() => {
 								mapFeature();
-							}
-						}}
-						role="button"
-						tabindex="0"
-					>
-						<span class="font-barlow-medium text-sm">MAP FEATURE IN ODK</span>
-					</sl-button>
+							}}
+							onkeydown={(e: KeyboardEvent) => {
+								if (e.key === 'Enter') {
+									mapFeature();
+								}
+							}}
+							role="button"
+							tabindex="0"
+						>
+							<hot-icon slot="prefix" name="location" class="!text-[1rem] text-white cursor-pointer duration-200"
+							></hot-icon>
+							<span class="font-barlow-medium text-sm">MAP FEATURE IN ODK</span>
+						</sl-button>
+					</div>
 				{/if}
 			</div>
 		</div>
diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte
index 8f9ab11c9..7fdc3ef67 100644
--- a/src/mapper/src/lib/components/map/geolocation.svelte
+++ b/src/mapper/src/lib/components/map/geolocation.svelte
@@ -1,25 +1,88 @@
 <script lang="ts">
-	import { GeoJSON, SymbolLayer, type LngLatLike } from 'svelte-maplibre';
+	import { Control, ControlButton, ControlGroup, GeoJSON, SymbolLayer, type LngLatLike } from 'svelte-maplibre';
 	import type { FeatureCollection } from 'geojson';
+	import MapLibreGlDirections, { LoadingIndicatorControl } from '@maplibre/maplibre-gl-directions';
 
 	import { GetDeviceRotation } from '$lib/utils/getDeviceRotation';
 	import { getAlertStore } from '$store/common.svelte.ts';
+	import { getEntitiesStatusStore } from '$store/entities.svelte.ts';
 	import { getCommonStore } from '$store/common.svelte.ts';
+	import { layers } from '$assets/maplibre-directions.ts';
+	import locationUrl from '$assets/images/location.png';
 
 	interface Props {
 		map: maplibregl.Map | undefined;
-		toggleGeolocationStatus: boolean;
-		toggleNavigationMode: boolean;
 	}
 
 	const alertStore = getAlertStore();
 	const commonStore = getCommonStore();
+	const entitiesStore = getEntitiesStatusStore();
 
-	let { map, toggleGeolocationStatus, toggleNavigationMode }: Props = $props();
+	let { map }: Props = $props();
 
 	let coords: LngLatLike | undefined = $state();
 	let rotationDeg: number | undefined = $state();
 	let watchId: number | undefined = $state();
+	let directions: MapLibreGlDirections = $state();
+	let entityDistance: number = $state(0);
+	let tooltipRef: any = $state();
+
+	const entityToNavigate = $derived(entitiesStore.entityToNavigate);
+
+	// initialize MapLibreGlDirections
+	$effect(() => {
+		if (map) {
+			// load location image for destination
+			map.loadImage(locationUrl).then((image) => {
+				if (image) {
+					map.addImage('location', image.data);
+				}
+			});
+			directions = new MapLibreGlDirections(map, {
+				// custom styled direction layer
+				layers,
+				sensitiveWaypointLayers: ['maplibre-gl-directions-waypoint'],
+				sensitiveSnappointLayers: ['maplibre-gl-directions-snappoint'],
+				sensitiveRoutelineLayers: ['maplibre-gl-directions-routeline'],
+				sensitiveAltRoutelineLayers: ['maplibre-gl-directions-alt-routeline'],
+			});
+			directions.interactive = false;
+			map.addControl(new LoadingIndicatorControl(directions));
+			directions.clear();
+
+			directions.on('fetchroutesend', (ev) => {
+				entityDistance = ev.data?.routes[0].distance as number;
+			});
+
+			directions.on('removewaypoint', () => {
+				if (directions.waypoints.length < 2) {
+					entityDistance = 0;
+				}
+			});
+		}
+	});
+
+	function setWaypoints(geolocationCoord: [number, number], entityCoord: [number, number]) {
+		const wayPointList = [geolocationCoord, entityCoord];
+		if (directions) {
+			directions?.setWaypoints(wayPointList);
+		}
+	}
+
+	$effect(() => {
+		if (coords && entityToNavigate) {
+			setWaypoints(coords as [number, number], entityToNavigate?.coordinate);
+		}
+	});
+
+	// if navigation mode on, tilt map by 50 degrees
+	$effect(() => {
+		if (entityToNavigate && entitiesStore.toggleGeolocation) {
+			map?.setPitch(50);
+		} else {
+			map?.setPitch(0);
+		}
+	});
 
 	// if bottom sheet is open, add bottom padding for better visibility of location arrow
 	$effect(() => {
@@ -32,14 +95,14 @@
 
 	// zoom to user's current location
 	$effect(() => {
-		if (toggleNavigationMode) {
+		if (entityToNavigate) {
 			map?.setCenter(coords as LngLatLike);
 			map?.setZoom(18);
 		}
 	});
 
 	$effect(() => {
-		if (map && toggleGeolocationStatus) {
+		if (map && entitiesStore.toggleGeolocation) {
 			// zoom to user's current location
 			navigator.geolocation.getCurrentPosition((position) => {
 				const currentCoordinate: maplibregl.LngLatLike = [position.coords.longitude, position.coords.latitude];
@@ -54,7 +117,7 @@
 			watchId = navigator.geolocation.watchPosition(
 				function (pos) {
 					coords = [pos.coords.longitude, pos.coords.latitude];
-					if (toggleNavigationMode) {
+					if (entityToNavigate) {
 						// if user is in navigation mode, update the map center according to user's live location since swiping map isn't possible
 						map?.setCenter(coords);
 					}
@@ -89,7 +152,7 @@
 				type: 'Feature',
 				geometry: {
 					type: 'Point',
-					coordinates: coords,
+					coordinates: coords as number[],
 				},
 				// firefox & safari doesn't support device orientation sensor, so if the browser any of the two set orientation to false
 				properties: { orientation: !(isFirefox || isSafari) },
@@ -98,7 +161,7 @@
 	});
 
 	$effect(() => {
-		if (map && toggleGeolocationStatus) {
+		if (map && entitiesStore.toggleGeolocation) {
 			if (isFirefox || isSafari) {
 				// firefox & safari doesn't support device orientation sensor
 				alertStore.setAlert({
@@ -117,13 +180,13 @@
 					rotationDeg = GetDeviceRotation(sensor.quaternion);
 
 					// rotate map according to device orientation
-					if (toggleNavigationMode) map.rotateTo(rotationDeg || 0, { duration: 0 });
+					if (entityToNavigate) map.rotateTo(rotationDeg || 0, { duration: 0 });
 				});
 
 				Promise.all([
-					navigator.permissions.query({ name: 'accelerometer' }),
-					navigator.permissions.query({ name: 'magnetometer' }),
-					navigator.permissions.query({ name: 'gyroscope' }),
+					navigator.permissions.query({ name: 'accelerometer' as PermissionName }),
+					navigator.permissions.query({ name: 'magnetometer' as PermissionName }),
+					navigator.permissions.query({ name: 'gyroscope' as PermissionName }),
 				]).then((results) => {
 					if (results.every((result) => result.state === 'granted')) {
 						sensor.start();
@@ -133,23 +196,93 @@
 			}
 		}
 	});
+
+	function exitNavigationMode() {
+		entitiesStore.setSelectedEntity(null);
+		entitiesStore.setSelectedEntityCoordinate(null);
+		entitiesStore.setEntityToNavigate(null);
+		directions.clear();
+	}
 </script>
 
-<GeoJSON data={locationGeojson} id="geolocation">
-	<SymbolLayer
-		applyToClusters={false}
-		hoverCursor="pointer"
-		layout={{
-			// if orientation true (meaning the browser supports device orientation sensor show location dot with orientation sign)
-			'icon-image': !toggleNavigationMode
-				? ['case', ['==', ['get', 'orientation'], true], 'locationArc', 'locationDot']
-				: ['case', ['==', ['get', 'orientation'], true], 'arrow', 'locationDot'],
-			'icon-allow-overlap': true,
-			'text-offset': [0, -2],
-			'text-size': 12,
-			'icon-rotate': rotationDeg || 0, // rotate location icon acc to device orientation
-			'icon-rotation-alignment': 'map',
-			'icon-size': 0.5,
-		}}
-	/>
-</GeoJSON>
+<Control class="flex flex-col gap-y-2" position="top-left">
+	<ControlGroup>
+		<hot-tooltip
+			bind:this={tooltipRef}
+			placement="right"
+			hoist
+			open
+			trigger="manual"
+			style="--max-width: fit-content"
+			onclick={() => tooltipRef.hide()}
+			onkeydown={(e: KeyboardEvent) => {
+				e.key === 'Enter' && tooltipRef.hide();
+			}}
+			role="button"
+			tabindex="0"
+		>
+			<div slot="content" class="flex items-center gap-1">
+				<span>For the best experience, turn on location</span>
+				<button
+					class="text-white rounded"
+					style="border: white 1px solid; width: fit-content; padding-left: 10px; padding-right: 10px">Got it!</button
+				>
+			</div>
+			<ControlButton
+				on:click={() => {
+					entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation);
+					if (!entitiesStore.toggleGeolocation) {
+						exitNavigationMode();
+					}
+				}}
+			>
+				<hot-icon
+					name="geolocate"
+					class={`!text-[1.2rem] cursor-pointer  duration-200 ${entitiesStore.toggleGeolocation ? 'text-red-600' : 'text-[#52525B]'}`}
+				></hot-icon>
+			</ControlButton>
+		</hot-tooltip>
+	</ControlGroup>
+</Control>
+
+{#if entitiesStore.toggleGeolocation}
+	<GeoJSON data={locationGeojson} id="geolocation">
+		<SymbolLayer
+			applyToClusters={false}
+			hoverCursor="pointer"
+			layout={{
+				// if orientation true (meaning the browser supports device orientation sensor show location dot with orientation sign)
+				'icon-image': !entityToNavigate
+					? ['case', ['==', ['get', 'orientation'], true], 'locationArc', 'locationDot']
+					: ['case', ['==', ['get', 'orientation'], true], 'arrow', 'locationDot'],
+				'icon-allow-overlap': true,
+				'text-offset': [0, -2],
+				'text-size': 12,
+				'icon-rotate': rotationDeg || 0, // rotate location icon acc to device orientation
+				'icon-rotation-alignment': 'map',
+				'icon-size': 0.5,
+			}}
+		/>
+	</GeoJSON>
+{/if}
+
+{#if entitiesStore.toggleGeolocation && entityToNavigate}
+	<div class="w-full flex justify-center absolute z-10 bottom-2 pointer-events-none">
+		<div class="bg-white rounded-md py-2 px-4 flex items-center gap-6 pointer-events-auto shadow-md z-10">
+			<p class="text-black text-base font-barlow-medium">Distance: {entityDistance}m</p>
+			<sl-button
+				onclick={exitNavigationMode}
+				onkeydown={(e: KeyboardEvent) => {
+					e.key === 'Enter' && exitNavigationMode();
+				}}
+				role="button"
+				tabindex="0"
+				size="small"
+				class="secondary"
+				disabled={entitiesStore.syncEntityStatusLoading}
+			>
+				<span class="text-sm">Exit Navigation</span>
+			</sl-button>
+		</div>
+	</div>
+{/if}
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
index 69dd581b2..24444c844 100644
--- a/src/mapper/src/lib/components/map/main.svelte
+++ b/src/mapper/src/lib/components/map/main.svelte
@@ -75,9 +75,8 @@
 	let loaded: boolean = $state(false);
 	let selectedBaselayer: string = $state('OSM');
 	let taskAreaClicked: boolean = $state(false);
-	let toggleGeolocationStatus: boolean = $state(false);
-	let toggleNavigationMode: boolean = $state(false);
 	let projectSetupStep: number | null = $state(null);
+
 	// Trigger adding the PMTiles layer to baselayers, if PmtilesUrl is set
 	let allBaseLayers: maplibregl.StyleSpecification[] = $derived(
 		projectBasemapStore.projectPmtilesUrl
@@ -151,13 +150,17 @@
 		const clickedTaskFeature = map?.queryRenderedFeatures(e.point, {
 			layers: ['task-fill-layer'],
 		});
-
 		// if clicked point contains entity then set it's osm id else set null to store
 		if (clickedEntityFeature && clickedEntityFeature?.length > 0) {
 			const clickedEntityId = clickedEntityFeature[0]?.properties?.osm_id;
 			entitiesStore.setSelectedEntity(clickedEntityId);
+			entitiesStore.setSelectedEntityCoordinate({
+				entityId: clickedEntityId,
+				coordinate: [e.lngLat.lng, e.lngLat.lat],
+			});
 		} else {
 			entitiesStore.setSelectedEntity(null);
+			entitiesStore.setSelectedEntityCoordinate(null);
 		}
 
 		// if clicked point contains task layer
@@ -279,20 +282,6 @@
 		}
 	}
 
-	// if navigation mode on, tilt map by 50 degrees
-	$effect(() => {
-		if (toggleNavigationMode && toggleGeolocationStatus) {
-			map?.setPitch(50);
-		} else {
-			map?.setPitch(0);
-		}
-	});
-
-	// if map loaded, turn on geolocation by default
-	$effect(() => {
-		if (loaded) toggleGeolocationStatus = true;
-	});
-
 	onMount(async () => {
 		// Register pmtiles protocol
 		if (!maplibre.config.REGISTERED_PROTOCOLS.hasOwnProperty('pmtiles')) {
@@ -336,22 +325,8 @@
 	]}
 >
 	<!-- Controls -->
-	<NavigationControl position="top-left" />
+	<NavigationControl position="top-left" showZoom={false} />
 	<ScaleControl />
-	<Control class="flex flex-col gap-y-2" position="top-left">
-		<ControlGroup>
-			<ControlButton
-				on:click={() => {
-					toggleGeolocationStatus = !toggleGeolocationStatus;
-					toggleNavigationMode = false;
-				}}
-				><hot-icon
-					name="geolocate"
-					class={`!text-[1.2rem] cursor-pointer  duration-200 ${toggleGeolocationStatus ? 'text-red-600' : 'text-[#52525B]'}`}
-				></hot-icon></ControlButton
-			>
-		</ControlGroup></Control
-	>
 	<Control class="flex flex-col gap-y-2" position="top-left">
 		<ControlGroup>
 			<ControlButton on:click={zoomToProject}
@@ -360,16 +335,6 @@
 			>
 		</ControlGroup></Control
 	>
-	<Control class="flex flex-col gap-y-2" position="top-left">
-		<ControlGroup>
-			<ControlButton on:click={() => (toggleNavigationMode = !toggleNavigationMode)}
-				><hot-icon
-					name="send"
-					class={`!text-[1.2rem] cursor-pointer duration-200 ${toggleNavigationMode ? 'text-red-600' : 'text-[#52525B]'}`}
-				></hot-icon></ControlButton
-			>
-		</ControlGroup></Control
-	>
 	<Control class="flex flex-col gap-y-2" position="bottom-right">
 		<LayerSwitcher
 			{map}
@@ -380,9 +345,7 @@
 		<Legend />
 	</Control>
 	<!-- Add the Geolocation GeoJSON layer to the map -->
-	{#if toggleGeolocationStatus}
-		<Geolocation {map} {toggleGeolocationStatus} {toggleNavigationMode}></Geolocation>
-	{/if}
+	<Geolocation {map}></Geolocation>
 	<!-- The task area geojson -->
 	<GeoJSON id="tasks" data={taskStore.featcol} promoteId="fid">
 		<FillLayer
@@ -448,18 +411,29 @@
 		<FillLayer
 			id="entity-fill-layer"
 			paint={{
-				'fill-opacity': 0.3,
+				'fill-opacity': 0.6,
 				'fill-color': [
 					'match',
 					['get', 'status'],
 					'READY',
-					'#d62822',
+					'#9c9a9a',
 					'OPENED_IN_ODK',
-					'#fad30a',
+					'#fae15f',
 					'SURVEY_SUBMITTED',
-					'#32a852',
+					'#71bf86',
 					'#c5fbf5', // default color if no match is found
 				],
+				'fill-outline-color': [
+					'match',
+					['get', 'status'],
+					'READY',
+					'#000000',
+					'OPENED_IN_ODK',
+					'#ffd603',
+					'SURVEY_SUBMITTED',
+					'#32a852',
+					'#c5fbf5',
+				],
 			}}
 			beforeLayerType="symbol"
 			manageHoverState
diff --git a/src/mapper/src/store/entities.svelte.ts b/src/mapper/src/store/entities.svelte.ts
index 46702cdc8..75bb7485a 100644
--- a/src/mapper/src/store/entities.svelte.ts
+++ b/src/mapper/src/store/entities.svelte.ts
@@ -26,11 +26,19 @@ type entitiesShapeType = {
 	task_id: number;
 };
 
+type entityIdCoordinateMapType = {
+	entityId: string;
+	coordinate: [number, number];
+};
+
 let selectedEntity: number | null = $state(null);
 let entitiesShape: Shape;
 let entitiesStatusList: entitiesStatusListType[] = $state([]);
 let syncEntityStatusLoading: boolean = $state(false);
 let updateEntityStatusLoading: boolean = $state(false);
+let selectedEntityCoordinate: entityIdCoordinateMapType | null = $state(null);
+let entityToNavigate: entityIdCoordinateMapType | null = $state(null);
+let toggleGeolocation: boolean = $state(false);
 
 function getEntityStatusStream(projectId: number): ShapeStream | undefined {
 	if (!projectId) {
@@ -68,6 +76,10 @@ function getEntitiesStatusStore() {
 		selectedEntity = entityOsmId;
 	}
 
+	async function setSelectedEntityCoordinate(entityCoordinate: entityIdCoordinateMapType | null) {
+		selectedEntityCoordinate = entityCoordinate;
+	}
+
 	async function syncEntityStatus(projectId: number) {
 		try {
 			syncEntityStatusLoading = true;
@@ -97,11 +109,22 @@ function getEntitiesStatusStore() {
 		}
 	}
 
+	function setEntityToNavigate(entityCoordinate: entityIdCoordinateMapType | null) {
+		entityToNavigate = entityCoordinate;
+	}
+
+	function setToggleGeolocation(status: boolean) {
+		toggleGeolocation = status;
+	}
+
 	return {
 		subscribeToEntityStatusUpdates: subscribeToEntityStatusUpdates,
 		setSelectedEntity: setSelectedEntity,
 		syncEntityStatus: syncEntityStatus,
 		updateEntityStatus: updateEntityStatus,
+		setSelectedEntityCoordinate: setSelectedEntityCoordinate,
+		setEntityToNavigate: setEntityToNavigate,
+		setToggleGeolocation: setToggleGeolocation,
 		get selectedEntity() {
 			return selectedEntity;
 		},
@@ -114,6 +137,15 @@ function getEntitiesStatusStore() {
 		get updateEntityStatusLoading() {
 			return updateEntityStatusLoading;
 		},
+		get selectedEntityCoordinate() {
+			return selectedEntityCoordinate;
+		},
+		get entityToNavigate() {
+			return entityToNavigate;
+		},
+		get toggleGeolocation() {
+			return toggleGeolocation;
+		},
 	};
 }
 
diff --git a/src/mapper/src/styles/button.css b/src/mapper/src/styles/button.css
index 7d36e6fe5..aef709f8f 100644
--- a/src/mapper/src/styles/button.css
+++ b/src/mapper/src/styles/button.css
@@ -1,3 +1,4 @@
+/* primary button */
 sl-button.primary::part(base) {
 	background-color: #d73f37;
 	color: white;
@@ -7,6 +8,7 @@ sl-button.primary::part(base):hover {
 	background-color: #b91c1c;
 }
 
+/* primary button */
 sl-button.secondary::part(base) {
 	background-color: white;
 	color: #d73f37;
@@ -18,6 +20,7 @@ sl-button.secondary::part(base):hover {
 	border-color: #b91c1c;
 }
 
+/* gray button */
 sl-button.gray::part(base) {
 	background-color: #4c4c4c;
 	color: white;
@@ -27,6 +30,7 @@ sl-button.gray::part(base):hover {
 	background-color: #5f5f5f;
 }
 
+/* green button */
 sl-button.green::part(base) {
 	background-color: #3fa24f;
 	color: white;
@@ -35,3 +39,13 @@ sl-button.green::part(base) {
 sl-button.green::part(base):hover {
 	background-color: #378f46;
 }
+
+/* link button */
+sl-button.link::part(base) {
+	color: #d73f37;
+	border: 0px;
+}
+sl-button.link::part(base):hover {
+	color: #b91c1c;
+	background: white;
+}
diff --git a/src/mapper/static/assets/icons/arrow-repeat.svg b/src/mapper/static/assets/icons/arrow-repeat.svg
new file mode 100644
index 000000000..b17dba47b
--- /dev/null
+++ b/src/mapper/static/assets/icons/arrow-repeat.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
+  <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
+  <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/direction.svg b/src/mapper/static/assets/icons/direction.svg
new file mode 100644
index 000000000..956614aed
--- /dev/null
+++ b/src/mapper/static/assets/icons/direction.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sign-turn-right" viewBox="0 0 16 16">
+  <path d="M5 8.5A2.5 2.5 0 0 1 7.5 6H9V4.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L9.41 8.658A.25.25 0 0 1 9 8.466V7H7.5A1.5 1.5 0 0 0 6 8.5V11H5z"/>
+  <path fill-rule="evenodd" d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.48 1.48 0 0 1 0-2.098zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134Z"/>
+</svg>
\ No newline at end of file