diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
index 439879e..efb5cf3 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
+++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
@@ -3,6 +3,7 @@ import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/E
 import { useSceneContext } from '../../../../../modules/scene/sceneContext';
 import RenameInput from '../../../../ui/inputs/RenameInput';
 import { useResourceManagementId } from '../../../../../store/builder/store';
+import { getAssetThumbnail } from '../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail';
 // import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
@@ -12,174 +13,188 @@ const Hrm = () => {
     const { assetStore } = useSceneContext();
     const { assets: allAssets } = assetStore();
 
-    useEffect(() => {
-        if (allAssets.length > 0) {
-            const formattedWorkers = allAssets
-                .filter((worker: any) => worker.eventData.type === "Human")
-                .map((worker: any, index: number) => ({
-                    employee: {
-                        image: "",
-                        name: worker.modelName,
-                        modelId: worker.modelUuid,
-                        employee_id: `HR-${204 + index}`,
-                        status: "Active",
-                    },
-                    task: {
-                        status: "Ongoing",
-                        title: worker.taskTitle ?? "No Task Assigned",
-                        location: {
-                            floor: worker.floor ?? 0,
-                            zone: worker.zone ?? "N/A"
+    async function getAsset(assetId: string) {
+        let thumbnail = await getAssetThumbnail(assetId)
+        if (thumbnail.thumbnail) {
+            let assetImage = thumbnail.thumbnail
+            return assetImage;
+        }
+    }
+
+   useEffect(() => {
+    if (allAssets.length > 0) {
+        const fetchWorkers = async () => {
+            const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human");
+
+            const formattedWorkers = await Promise.all(
+                humans.map(async (worker: any, index: number) => {
+                    const assetImage = await getAsset(worker.assetId);
+
+                    return {
+                        employee: {
+                            image: assetImage,
+                            name: worker.modelName,
+                            modelId: worker.modelUuid,
+                            employee_id: `HR-${204 + index}`,
+                            status: "Active",
                         },
-                        planned_time_hours: worker.plannedTime ?? 0,
-                        time_spent_hours: worker.timeSpent ?? 0,
-                        total_tasks: worker.totalTasks ?? 0,
-                        completed_tasks: worker.completedTasks ?? 0
-                    },
-                    actions: [
-                        "Assign Task",
-                        "Reassign Task",
-                        "Pause",
-                        "Emergency Stop"
-                    ],
-                    location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`
-                }));
+                        task: {
+                            status: "Ongoing",
+                            title: worker.taskTitle ?? "No Task Assigned",
+                            location: {
+                                floor: worker.floor ?? 0,
+                                zone: worker.zone ?? "N/A",
+                            },
+                            planned_time_hours: worker.plannedTime ?? 0,
+                            time_spent_hours: worker.timeSpent ?? 0,
+                            total_tasks: worker.totalTasks ?? 0,
+                            completed_tasks: worker.completedTasks ?? 0,
+                        },
+                        actions: ["Assign Task", "Reassign Task", "Pause", "Emergency Stop"],
+                        location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`,
+                    };
+                })
+            );
 
             setWorkers(formattedWorkers);
-        }
-    }, [allAssets]);
-
-
-    // const employee_details = [
-    //     {
-    //         "employee": {
-    //             image: "",
-    //             "name": "John Doe",
-    //             "employee_id": "HR-204",
-    //             "status": "Active",
-
-    //         },
-    //         "task": {
-    //             "status": "Ongoing",
-    //             "title": "Inspecting Machine X",
-    //             "location": {
-    //                 "floor": 4,
-    //                 "zone": "B"
-    //             },
-    //             "planned_time_hours": 6,
-    //             "time_spent_hours": 2,
-    //             "total_tasks": 12,
-    //             "completed_tasks": 3
-    //         },
-    //         "actions": [
-    //             "Assign Task",
-    //             "Reassign Task",
-    //             "Pause",
-    //             "Emergency Stop"
-    //         ],
-    //         "location": "Floor 4 . Zone B"
-    //     },
-    //     {
-    //         "employee": {
-    //             image: "",
-    //             "name": "Alice Smith",
-    //             "employee_id": "HR-205",
-    //             "status": "Active",
-
-    //         },
-    //         "task": {
-    //             "status": "Ongoing",
-    //             "title": "Calibrating Sensor Y",
-    //             "location": {
-    //                 "floor": 2,
-    //                 "zone": "A"
-    //             },
-    //             "planned_time_hours": 4,
-    //             "time_spent_hours": 1.5,
-    //             "total_tasks": 10,
-    //             "completed_tasks": 2
-    //         },
-    //         "actions": [
-    //             "Assign Task",
-    //             "Reassign Task",
-    //             "Pause",
-    //             "Emergency Stop"
-    //         ],
-    //         "location": "Floor 4 . Zone B"
-    //     },
-    //     {
-    //         "employee": {
-    //             image: "",
-    //             "name": "Michael Lee",
-    //             "employee_id": "HR-206",
-    //             "status": "Active",
-
-    //         },
-    //         "task": {
-    //             "status": "Ongoing",
-    //             "title": "Testing Conveyor Belt Z",
-    //             "location": {
-    //                 "floor": 5,
-    //                 "zone": "C"
-    //             },
-    //             "planned_time_hours": 5,
-    //             "time_spent_hours": 3,
-    //             "total_tasks": 8,
-    //             "completed_tasks": 5
-    //         },
-    //         "actions": [
-    //             "Assign Task",
-    //             "Reassign Task",
-    //             "Pause",
-    //             "Emergency Stop"
-    //         ],
-    //         "location": "Floor 4 . Zone B"
-    //     },
-    // ]
-    function handleRenameWorker(newName: string) {
-
+        };
 
+        fetchWorkers();
     }
-    function handleHumanClick(employee: any) {
-        if (employee.modelId) {
-            setResourceManagementId(employee.modelId);
-        }
+}, [allAssets]);
+
+
+
+// const employee_details = [
+//     {
+//         "employee": {
+//             image: "",
+//             "name": "John Doe",
+//             "employee_id": "HR-204",
+//             "status": "Active",
+
+//         },
+//         "task": {
+//             "status": "Ongoing",
+//             "title": "Inspecting Machine X",
+//             "location": {
+//                 "floor": 4,
+//                 "zone": "B"
+//             },
+//             "planned_time_hours": 6,
+//             "time_spent_hours": 2,
+//             "total_tasks": 12,
+//             "completed_tasks": 3
+//         },
+//         "actions": [
+//             "Assign Task",
+//             "Reassign Task",
+//             "Pause",
+//             "Emergency Stop"
+//         ],
+//         "location": "Floor 4 . Zone B"
+//     },
+//     {
+//         "employee": {
+//             image: "",
+//             "name": "Alice Smith",
+//             "employee_id": "HR-205",
+//             "status": "Active",
+
+//         },
+//         "task": {
+//             "status": "Ongoing",
+//             "title": "Calibrating Sensor Y",
+//             "location": {
+//                 "floor": 2,
+//                 "zone": "A"
+//             },
+//             "planned_time_hours": 4,
+//             "time_spent_hours": 1.5,
+//             "total_tasks": 10,
+//             "completed_tasks": 2
+//         },
+//         "actions": [
+//             "Assign Task",
+//             "Reassign Task",
+//             "Pause",
+//             "Emergency Stop"
+//         ],
+//         "location": "Floor 4 . Zone B"
+//     },
+//     {
+//         "employee": {
+//             image: "",
+//             "name": "Michael Lee",
+//             "employee_id": "HR-206",
+//             "status": "Active",
+
+//         },
+//         "task": {
+//             "status": "Ongoing",
+//             "title": "Testing Conveyor Belt Z",
+//             "location": {
+//                 "floor": 5,
+//                 "zone": "C"
+//             },
+//             "planned_time_hours": 5,
+//             "time_spent_hours": 3,
+//             "total_tasks": 8,
+//             "completed_tasks": 5
+//         },
+//         "actions": [
+//             "Assign Task",
+//             "Reassign Task",
+//             "Pause",
+//             "Emergency Stop"
+//         ],
+//         "location": "Floor 4 . Zone B"
+//     },
+// ]
+function handleRenameWorker(newName: string) {
+
+
+}
+function handleHumanClick(employee: any) {
+    if (employee.modelId) {
+        setResourceManagementId(employee.modelId);
     }
+}
 
 
-    return (
-        <>
-            {/* <NavigateCatagory
+return (
+    <>
+        {/* <NavigateCatagory
                 category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
                 selectedCategory={selectedCategory}
                 setSelectedCategory={setSelectedCategory}
             /> */}
 
-            <div className='hrm-container assetManagement-wrapper'>
-                {workers.map((employee, index) => (
-                    <div
-                        className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
-                        onClick={() => setSelectedCard(index)}
-                        key={index}
-                    >
-                        <header>
-                            <div className="user-details">
-                                <div className="user-image-wrapper">
-                                    <img className='user-image' src={employee.employee.image} alt="" />
-                                    <div className={`status ${employee.employee.status}`}></div>
-                                </div>
-                                <div className="details" >
-                                    {/* <div className="employee-name">{employee.employee.name}</div> */}
-                                    <RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
-                                    <div className="employee-id">{employee.employee.employee_id}</div>
-                                </div>
+        <div className='hrm-container assetManagement-wrapper'>
+            {workers.map((employee, index) => (
+                <div
+                    className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
+                    onClick={() => setSelectedCard(index)}
+                    key={index}
+                >
+                    <header>
+                        <div className="user-details">
+                            <div className="user-image-wrapper">
+                                <img className='user-image' src={employee.employee.image} alt="" />
+                                <div className={`status ${employee.employee.status}`}></div>
                             </div>
+                            <div className="details" >
+                                {/* <div className="employee-name">{employee.employee.name}</div> */}
+                                <RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
+                                <div className="employee-id">{employee.employee.employee_id}</div>
+                            </div>
+                        </div>
 
-                            <div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
-                        </header>
+                        <div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
+                    </header>
 
-                        <div className="content">
-                            {/* <div className="task-info">
+                    <div className="content">
+                        {/* <div className="task-info">
                                 <div className="task-wrapper">
                                     <div className="task-label">
                                         <span className='label-icon'><ListTaskIcon /></span>
@@ -200,17 +215,17 @@ const Hrm = () => {
                                 </div>
                             </div> */}
 
-                            <div className="task-stats">
-                                <div className="stat-item">
+                        <div className="task-stats">
+                            <div className="stat-item">
 
-                                    <div className="stat-wrapper">
-                                        <span className="stat-icon"><ClockThreeIcon /></span>
-                                        <span>Planned time:</span>
-                                    </div>
-
-                                    <span className='stat-value'>{employee.task.planned_time_hours} hr</span>
+                                <div className="stat-wrapper">
+                                    <span className="stat-icon"><ClockThreeIcon /></span>
+                                    <span>Planned time:</span>
                                 </div>
-                                {/* <div className="stat-item">
+
+                                <span className='stat-value'>{employee.task.planned_time_hours} hr</span>
+                            </div>
+                            {/* <div className="stat-item">
 
                                     <div className="stat-wrapper">
                                         <span className="stat-icon"><SlectedTickIcon /></span>
@@ -228,39 +243,39 @@ const Hrm = () => {
 
                                     <span className='stat-value'>{employee.task.time_spent_hours} hr</span>
                                 </div> */}
-                                <div className="stat-item">
+                            <div className="stat-item">
 
-                                    <div className="stat-wrapper">
-                                        <span className="stat-icon"><TargetIcon /></span>
-                                        <span>Cost per hr:</span>
-                                    </div>
-
-                                    <span className='stat-value'>{employee.task.completed_tasks}</span>
+                                <div className="stat-wrapper">
+                                    <span className="stat-icon"><TargetIcon /></span>
+                                    <span>Cost per hr:</span>
                                 </div>
-                            </div>
 
-                            <div className="location-wrapper">
-                                <div className="location-header">
-                                    <div className="icon">
-                                        <LocationPinIcon />
-                                    </div>
-                                    <div className="header">Location:</div>
-                                </div>
-                                <div className="location-value">{employee.location}</div>
-                            </div>
-                            <div className="task-actions">
-                                {/* <button className="btn btn-default">Assign Task</button>
-                                <button className="btn btn-default">Reassign Task</button> */}
-                                <button className="btn btn-default">Pause</button>
-                                <button className="btn btn-danger">Emergency Stop</button>
+                                <span className='stat-value'>{employee.task.completed_tasks}</span>
                             </div>
                         </div>
 
+                        <div className="location-wrapper">
+                            <div className="location-header">
+                                <div className="icon">
+                                    <LocationPinIcon />
+                                </div>
+                                <div className="header">Location:</div>
+                            </div>
+                            <div className="location-value">{employee.location}</div>
+                        </div>
+                        <div className="task-actions">
+                            {/* <button className="btn btn-default">Assign Task</button>
+                                <button className="btn btn-default">Reassign Task</button> */}
+                            <button className="btn btn-default">Pause</button>
+                            <button className="btn btn-danger">Emergency Stop</button>
+                        </div>
                     </div>
-                ))}
-            </div>
-        </>
-    )
+
+                </div>
+            ))}
+        </div>
+    </>
+)
 }
 
 export default Hrm
diff --git a/app/src/styles/layout/resourceManagement.scss b/app/src/styles/layout/resourceManagement.scss
index d62afe8..5b9678b 100644
--- a/app/src/styles/layout/resourceManagement.scss
+++ b/app/src/styles/layout/resourceManagement.scss
@@ -117,6 +117,12 @@
             border-radius: 50%;
             background-color: #fff;
             position: relative;
+            overflow: hidden;
+            .user-image{
+              height: 300%;
+              width: 300%;
+              transform: translate(-26px, -12px);
+            }
 
             .status {
               border-radius: 50%;