diff --git a/frontend/src/components/ItineraryTimeline.tsx b/frontend/src/components/ItineraryTimeline.tsx
index b2ab74d..08e5db1 100644
--- a/frontend/src/components/ItineraryTimeline.tsx
+++ b/frontend/src/components/ItineraryTimeline.tsx
@@ -42,12 +42,14 @@ export const ItineraryTimeline = ({
   onAddLocation, 
   onEditLocation,
   onQuickNote,
+  onNavigate,
   onSuccess,
   isPublicView = false
 }: { 
   onAddLocation?: (legId: string, isStart?: boolean, isEnd?: boolean) => void, 
   onEditLocation?: (location: any) => void, 
   onQuickNote?: (name: string) => void,
+  onNavigate?: (location: any) => void,
   onSuccess?: () => void,
   isPublicView?: boolean 
 }) => {
@@ -113,9 +115,10 @@ export const ItineraryTimeline = ({
     endDate: '' 
   });
 
-  const toggleComplete = async (locationId: string) => {
-    // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
-    console.log("Toggle status for location:", locationId);
+  const handleStatusClick = (location: any) => {
+    if (onNavigate) {
+      onNavigate(location);
+    }
   };
 
   const handleAddLeg = async () => {
@@ -371,7 +374,7 @@ export const ItineraryTimeline = ({
                             {/* Timeline Node */}
                             <div className="z-10 mt-1.5 mr-4">
                               <button 
-                                onClick={() => toggleComplete(location.id)}
+                                onClick={() => handleStatusClick(location)}
                                 className={`transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`}
                               >
                                 {location.status === 'COMPLETED' ? (
diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 1db666d..bb1afd9 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -748,6 +748,18 @@ export const TourDetailPage = ({
     };
   }, [routes, selectedRouteIndex]);
 
+  const handleNavigateToLocation = (location: any) => {
+    setViewMode('map');
+    setMapCenter([location.latitude, location.longitude]);
+    setLocateTrigger(prev => prev + 1);
+    
+    notify({
+      title: 'Bắt đầu chỉ đường',
+      message: `Đang hiển thị lộ trình từ vị trí của bạn đến ${location.name}`,
+      type: 'info'
+    });
+  };
+
   useEffect(() => {
     if (initialViewState) {
       setMapCenter(initialViewState.center);
@@ -1378,6 +1390,7 @@ export const TourDetailPage = ({
                 onQuickNote={(locName: string) => handleQuickNote(locName)}
                 onSuccess={() => fetchTour(tourId)}
                 isPublicView={isPublicView} 
+                onNavigate={handleNavigateToLocation}
               />
               ) : (
                 <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">