diff --git a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
index 0cd4fe2..6b35a43 100644
--- a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-function RoboticArmAnimator() {
+function RoboticArmAnimator({ armUuid, HandleCallback, currentPhase }: any) {
     return (
         <></>
     )
diff --git a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
index 2817906..42b775a 100644
--- a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
@@ -1,14 +1,58 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import IKInstance from '../ikInstance/ikInstance';
 import RoboticArmAnimator from '../animator/roboticArmAnimator';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
+
+function RoboticArmInstance({ armBot }: any) {
+    const { isPlaying } = usePlayButtonStore();
+    const [currentPhase, setCurrentPhase] = useState<(string)>("init");
+    console.log('currentPhase: ', currentPhase);
+    const { armBots, addArmBot, addCurrentAction } = useArmBotStore();
+
+    useEffect(() => {
+
+        console.log('isPlaying: ', isPlaying);
+        if (isPlaying) {
+            //Moving armBot from initial point to rest position.
+
+            if (armBot?.isActive && armBot?.state == "idle" && currentPhase == "init") {
+                addCurrentAction(armBot.modelUuid, 'action-001');
+                setCurrentPhase("moving-to-rest");
+
+            }
+            //Waiting for trigger.
+            if (!armBot?.isActive && armBot?.state == "idle" && currentPhase == "moving-to-rest") {
+                setCurrentPhase("rest");
+            }
+            // Moving armBot from rest position to pick up point.
+            if (!armBot?.isActive && armBot?.state == "idle" && currentPhase == "rest") {
+
+            }
+            //Moving arm from start point to end point.
+            if (armBot?.isActive && armBot?.state == "running " && currentPhase == "rest-to-start ") {
+
+            }
+            //Moving arm from end point to idle. 
+            if (armBot?.isActive && armBot?.state == "running" && currentPhase == "end-to-start") {
+
+            }
+
+        }
+
+    }, [currentPhase, armBot, isPlaying])
+
+    const HandleCallback = () => {
+        if (armBot.isActive && armBot.state == "idle" && currentPhase == "init") {
+            addCurrentAction('armbot-xyz-001', 'action-001');
+        }
+    }
 
-function RoboticArmInstance() {
     return (
         <>
 
             <IKInstance />
-
-            <RoboticArmAnimator />
+            <RoboticArmAnimator armUuid={armBot?.modelUuid} HandleCallback={HandleCallback} currentPhase={currentPhase} />
 
         </>
     )
diff --git a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
index 6e8a70a..1f963c8 100644
--- a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
@@ -1,11 +1,21 @@
 import React from 'react'
 import RoboticArmInstance from './armInstance/roboticArmInstance';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
 
 function RoboticArmInstances() {
+    const { armBots } = useArmBotStore();
+
+
     return (
         <>
+            {
+                armBots?.map((robot: any) => (
 
-            <RoboticArmInstance />
+                    <RoboticArmInstance armdetals={robot} />
+                )
+                )
+
+            }
 
         </>
     )
diff --git a/app/src/modules/simulation/roboticArm/roboticArm.tsx b/app/src/modules/simulation/roboticArm/roboticArm.tsx
index 02a1690..4295ac7 100644
--- a/app/src/modules/simulation/roboticArm/roboticArm.tsx
+++ b/app/src/modules/simulation/roboticArm/roboticArm.tsx
@@ -1,14 +1,101 @@
-import React from 'react'
-import RoboticArmInstances from './instances/roboticArmInstances';
+import { useEffect } from "react";
+import RoboticArmInstances from "./instances/roboticArmInstances";
+import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
 
 function RoboticArm() {
+    const { armBots, addArmBot, addCurrentAction } = useArmBotStore();
+
+    const armBotStatusSample: RoboticArmEventSchema[] = [
+        {
+            state: "idle",
+            // currentAction: {
+            //     actionUuid: "action-001",
+            //     actionName: "Pick Component",
+            // },
+            modelUuid: "armbot-xyz-001",
+            modelName: "ArmBot-X200",
+            position: [0, 0, 0],
+            rotation: [91.94347308985614, 0, 6.742905194869091],
+            type: "roboticArm",
+            speed: 1.5,
+            point: {
+                uuid: "point-123",
+                position: [0, 1.5, 0],
+                rotation: [0, 0, 0],
+                actions: [
+                    {
+                        actionUuid: "action-001",
+                        actionName: "Pick Component",
+                        actionType: "pickAndPlace",
+                        process: {
+                            startPoint: [1.2, 0.3, 0.5],
+                            endPoint: [-0.8, 1.1, 0.7],
+                        },
+                        triggers: [
+                            {
+                                triggerUuid: "trigger-001",
+                                triggerName: "Start Trigger",
+                                triggerType: "onStart",
+                                delay: 0,
+                                triggeredAsset: {
+                                    triggeredModel: {
+                                        modelName: "Conveyor A1",
+                                        modelUuid: "conveyor-01",
+                                    },
+                                    triggeredPoint: {
+                                        pointName: "Start Point",
+                                        pointUuid: "conveyor-01-point-001",
+                                    },
+                                    triggeredAction: {
+                                        actionName: "Move Forward",
+                                        actionUuid: "conveyor-action-01",
+                                    },
+                                },
+                            },
+                            {
+                                triggerUuid: "trigger-002",
+                                triggerName: "Complete Trigger",
+                                triggerType: "onComplete",
+                                delay: 0,
+                                triggeredAsset: {
+                                    triggeredModel: {
+                                        modelName: "StaticMachine B2",
+                                        modelUuid: "machine-02",
+                                    },
+                                    triggeredPoint: {
+                                        pointName: "Receive Point",
+                                        pointUuid: "machine-02-point-001",
+                                    },
+                                    triggeredAction: {
+                                        actionName: "Process Part",
+                                        actionUuid: "machine-action-01",
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    ];
+
+    useEffect(() => {
+        addArmBot('123', armBotStatusSample[0]);
+        // addCurrentAction('armbot-xyz-001', 'action-001');
+    }, []);
+
+
+    useEffect(() => {
+        console.log('armBots: ', armBots);
+    }, [armBots]);
+
     return (
         <>
 
             <RoboticArmInstances />
 
         </>
-    )
+    );
 }
 
-export default RoboticArm;
\ No newline at end of file
+export default RoboticArm;
diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx
index 4197716..757a9ef 100644
--- a/app/src/modules/simulation/simulation.tsx
+++ b/app/src/modules/simulation/simulation.tsx
@@ -58,7 +58,7 @@ function Simulation() {
             }
 
         </>
-    )
+    );
 }
 
-export default Simulation
\ No newline at end of file
+export default Simulation;