diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 14cb6fa..f3a4ed5 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -1,6 +1,57 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
+import { useFrame, useThree } from '@react-three/fiber';
 
-function VehicleAnimator() {
+interface VehicleAnimatorProps {
+    path: [number, number, number][];
+    handleCallBack: () => void;
+    currentPhase: string;
+    agvUuid: number
+}
+
+
+function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid }: VehicleAnimatorProps) {
+    const [progress, setProgress] = useState<number>(0)
+    const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+    const { scene } = useThree();
+
+    useEffect(() => {
+
+        if (currentPhase === 'stationed-pickup' && path.length > 0) {
+            setCurrentPath(path);
+        }
+
+    }, [currentPhase, path])
+    useFrame((_, delta) => {
+        if (!path || path.length < 2) return;
+
+        const object = scene.getObjectByProperty("uuid", agvUuid)
+        if (!object) return;
+
+        setProgress(prev => {
+            const next = prev + delta * 0.1; // speed
+            return next >= 1 ? 1 : next;
+        });
+
+        const totalSegments = path.length - 1;
+        const segmentIndex = Math.floor(progress * totalSegments);
+        const t = progress * totalSegments - segmentIndex;
+
+        const start = path[segmentIndex];
+        const end = path[segmentIndex + 1] || start;
+
+        // Directly set position without creating a new Vector3
+        object.position.x = start[0] + (end[0] - start[0]) * t;
+        object.position.y = start[1] + (end[1] - start[1]) * t;
+        object.position.z = start[2] + (end[2] - start[2]) * t;
+    });
+    // useFrame(() => {
+    //     if (currentPath.length === 0) return;
+    //     const object = scene.getObjectByProperty("uuid", agvUuid);
+    //     if (!object) return;
+
+
+
+    // })
     return (
         <>
         </>
diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
index 0996b3c..6b6bd78 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -1,14 +1,56 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import VehicleAnimator from '../animator/vehicleAnimator'
+import { NavMeshQuery } from '@recast-navigation/core';
 
 function VehicleInstance() {
-    return (
-        <>
 
-            <VehicleAnimator />
+  useEffect(() => {
+    try {
+      const navMeshQuery = new NavMeshQuery(navMesh);
+      const { path: segmentPath } = navMeshQuery.computePath(start, end);
+      return (
+        segmentPath?.map(
+          ({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]
+        ) || []
+      );
+    } catch {
+      return [];
+    }
+  }, [navMesh]);
 
-        </>
-    )
+  useEffect(() => {
+    // const pickupToDropPath = computePath(pickup, drop);
+    // const dropToPickupPath = computePath(drop, pickup);
+
+    if (isPlaying) {
+      if (!agvDetails.isActive && agvDetails.state == "idle" && currentPhase == "stationed") {
+        const toPickupPath = computePath(new THREE.Vector3(agvDetails.position[0], agvDetails.position[1], agvDetails.position[2]), agvDetails.point.action.pickUpPoint);
+        setPath(toPickupPath)
+        setVehicleActive(agvDetails.modelUuid, true)
+        setVehicleState(agvDetails.modelUuid, "running")
+        setCurrentPhase("stationed-pickup")
+        // 
+      }
+    }
+  }, [agvDetails, currentPhase, path, isPlaying])
+
+  function handleCallBack() {
+    if (currentPhase === "stationed-pickup") {
+      setVehicleActive(agvDetails.modelUuid, false)
+      setVehicleState(agvDetails.modelUuid, "idle")
+      setCurrentPhase("picking")
+      setPath([])
+    }
+  }
+
+
+  return (
+    <>
+
+      <VehicleAnimator path={path} handleCallBack={handleCallBack} currentPhase={currentPhase} agvUuid={agvDetails?.modelUuid} />
+
+    </>
+  )
 }
 
 export default VehicleInstance
\ No newline at end of file