diff --git a/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx b/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx
index efc1615..b3d4498 100644
--- a/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx
+++ b/app/src/modules/simulation/machine/instances/machineInstance/machineInstance.tsx
@@ -58,6 +58,7 @@ function MachineInstance({ machineDetail }: any) {
     return (
         <>
             <MachineAnimator processingTime={machineDetail.point.action.processTime} handleCallBack={handleCallBack} currentPhase={currentPhase} machineUuid={machineDetail.modelUuid} machineStatus={machineStatus} reset={reset} />
+
         </>
     )
 }
diff --git a/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx
new file mode 100644
index 0000000..a2802a0
--- /dev/null
+++ b/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+type MaterialAnimatorProps = {
+    agvDetail: VehicleStatus;
+};
+
+const MaterialAnimator = ({ agvDetail }: MaterialAnimatorProps) => {
+    const meshRef = useRef<THREE.Mesh>(null!);
+    const [hasLoad, setHasLoad] = useState<boolean>(false);
+    const { scene } = useThree();
+    const loadWorldPosition = new THREE.Vector3();
+    const offset = new THREE.Vector3(0, 1.1, 0);
+
+    useEffect(() => {
+        setHasLoad(agvDetail.currentLoad > 0);
+    }, [agvDetail]);
+
+    useFrame(() => {
+        if (!hasLoad) return;
+        const agvModel = scene.getObjectByProperty("uuid", agvDetail.modelUuid) as THREE.Object3D;
+        if (agvModel && meshRef.current) {
+            loadWorldPosition.copy(offset).applyMatrix4(agvModel.matrixWorld);
+            meshRef.current.position.copy(loadWorldPosition);
+            meshRef.current.rotation.copy(agvModel.rotation);
+        }
+    });
+
+
+    return (
+        <>
+            {hasLoad && (
+                <mesh ref={meshRef}>
+                    <boxGeometry args={[0.5, 0.5, 0.5]} />
+                    <meshStandardMaterial color="green" />
+                </mesh>
+            )}
+        </>
+    );
+};
+
+export default MaterialAnimator;
diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
index 412a4ba..5c92e66 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -5,6 +5,7 @@ import { NavMeshQuery } from '@recast-navigation/core';
 import { useNavMesh } from '../../../../../store/store';
 import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
+import MaterialAnimator from '../animator/materialAnimator';
 
 function VehicleInstance({ agvDetail }: any) {
     const { navMesh } = useNavMesh();
@@ -132,6 +133,7 @@ function VehicleInstance({ agvDetail }: any) {
                 agvDetail={agvDetail}
                 reset={reset}
             />
+            <MaterialAnimator agvDetail={agvDetail} />
         </>
     );
 }