diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 14cb6fa..db6bedb 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -1,6 +1,38 @@
-import React from 'react'
+import { useFrame, useThree } from '@react-three/fiber';
+import React, { useEffect, useState } from 'react'
 
-function VehicleAnimator() {
+interface VehicleAnimatorProps {
+    path: [number, number, number][];
+    handleCallBack: () => void;
+    currentPhase: string;
+    agvUuid: number
+}
+
+
+function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid }: VehicleAnimatorProps) {
+
+    const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+    const { scene } = useThree();
+
+    useEffect(() => {
+
+        if (currentPhase === 'stationed-pickup' && path.length > 0) {
+
+
+            setCurrentPath(path);
+
+        }
+
+    }, [currentPhase, path])
+
+    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 283be58..e381311 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -1,14 +1,67 @@
-import React from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import VehicleAnimator from '../animator/vehicleAnimator'
+import * as THREE from "three";
+import { NavMeshQuery } from '@recast-navigation/core';
+import { useNavMesh } from '../../../../../store/store';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
 
 function VehicleInstance({ agvDetails }: any) {
-    return (
-        <>
+  const { navMesh } = useNavMesh();
+  const { isPlaying } = usePlayButtonStore();
+  const { setVehicleActive, setVehicleState } = useVehicleStore();
+  const [currentPhase, setCurrentPhase] = useState<(string)>("stationed");
+  const [path, setPath] = useState<[number, number, number][]>([]);
 
-            <VehicleAnimator />
+  const computePath = useCallback((start: any, end: any) => {
 
-        </>
-    )
+
+    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
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 8374080..f3f1435 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -5,12 +5,9 @@ function VehicleInstances({ vehicles }: any) {
     return (
         <>
 
-            {vehicles.map((val: any) =>
-
-                <VehicleInstance agvDetails={val} />
-            )
-
-            }
+            {vehicles.map((val: any, i: any) =>
+                <VehicleInstance agvDetails={val} key={i} />
+            )}
 
         </>
     )
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index b5cf86f..b9bc07b 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -163,6 +163,7 @@ function Vehicles() {
     useEffect(() => {
         addVehicle('123', vehicleStatusSample[0]);
         addVehicle('123', vehicleStatusSample[1]);
+        addVehicle('123', vehicleStatusSample[2]);
     }, [])
 
     useEffect(() => {