diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
index efb5cf3..ce17d60 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
+++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
@@ -1,200 +1,225 @@
-import { useEffect, useState } from 'react'
-import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
-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 { useEffect, useState } from "react";
+import {
+  ClockThreeIcon,
+  LocationPinIcon,
+  TargetIcon,
+} from "../../../../icons/ExportCommonIcons";
+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 = () => {
-    const [selectedCard, setSelectedCard] = useState(0);
-    const [workers, setWorkers] = useState<any[]>([]);
-    const { setResourceManagementId } = useResourceManagementId();
-    const { assetStore } = useSceneContext();
-    const { assets: allAssets } = assetStore();
+  const [selectedCard, setSelectedCard] = useState(0);
+  const [workers, setWorkers] = useState<any[]>([]);
+  const { setResourceManagementId } = useResourceManagementId();
+  const { assetStore } = useSceneContext();
+  const { assets: allAssets } = assetStore();
 
-    async function getAsset(assetId: string) {
-        let thumbnail = await getAssetThumbnail(assetId)
-        if (thumbnail.thumbnail) {
-            let assetImage = thumbnail.thumbnail
-            return assetImage;
-        }
+  async function getAsset(assetId: string) {
+    let thumbnail = await getAssetThumbnail(assetId);
+    if (thumbnail.thumbnail) {
+      let assetImage = thumbnail.thumbnail;
+      return assetImage;
     }
+  }
 
-   useEffect(() => {
+  useEffect(() => {
     if (allAssets.length > 0) {
-        const fetchWorkers = async () => {
-            const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human");
+      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);
+        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",
-                        },
-                        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 || "-"}`,
-                    };
-                })
-            );
+            return {
+              employee: {
+                image: assetImage,
+                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",
+                },
+                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);
-        };
+        setWorkers(formattedWorkers);
+      };
 
-        fetchWorkers();
+      fetchWorkers();
     }
-}, [allAssets]);
+  }, [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",
 
-// const employee_details = [
-//     {
-//         "employee": {
-//             image: "",
-//             "name": "John Doe",
-//             "employee_id": "HR-204",
-//             "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": "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) {
+  //         },
+  //         "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);
+      setResourceManagementId(employee.modelId);
     }
-}
+  }
 
-
-return (
+  return (
     <>
-        {/* <NavigateCatagory
+      {/* <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>
+      <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>
@@ -215,17 +240,20 @@ return (
                                 </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>
 
-                                <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>
-                            {/* <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>
@@ -243,39 +271,41 @@ return (
 
                                     <span className='stat-value'>{employee.task.time_spent_hours} hr</span>
                                 </div> */}
-                            <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>
-                        </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 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>
-            ))}
-        </div>
-    </>
-)
-}
+              </div>
 
-export default Hrm
+              <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>
+    </>
+  );
+};
+
+export default Hrm;
diff --git a/app/src/styles/layout/_resourceManagement.scss b/app/src/styles/layout/_resourceManagement.scss
index 9582a24..48d768c 100644
--- a/app/src/styles/layout/_resourceManagement.scss
+++ b/app/src/styles/layout/_resourceManagement.scss
@@ -114,35 +114,34 @@
           .user-image-wrapper {
             width: 28px;
             height: 28px;
-            border-radius: 50%;
-            background-color: #fff;
             position: relative;
-            overflow: hidden;
-            .user-image{
-              height: 300%;
-              width: 300%;
-              transform: translate(-26px, -12px);
+            .user-image {
+              height: 100%;
+              width: 100%;
+              border-radius: 50%;
+              background-color: #fff;
+              overflow: hidden;
+              // transform: translate(-26px, -12px);
             }
 
             .status {
               border-radius: 50%;
               width: 6px;
               height: 6px;
-              outline: 1px solid #2f2c32;
-
+              outline: 2px solid var(--background-color-solid);
               position: absolute;
               bottom: 0;
               right: 0;
 
               &.Active {
-                background-color: #44e5c6;
+                background-color: #1d9419;
               }
             }
           }
 
           .details {
             max-width: 144px;
-            .input-value{
+            .input-value {
               max-width: 120px;
             }
             .employee-id {