diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index c38af26d..f4b868d2 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -14,12 +14,12 @@ import {
 } from "../../../utils/constants";
 import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
-import {formatNumber} from "../../../utils/dateUtils";
+import { formatNumber } from "../../../utils/dateUtils";
 import { useServices } from "../../../hooks/masterHook/useMaster";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
   const selectedProject = useSelectedProject()
-  const selectedService  = useCurrentService()
+  const selectedService = useCurrentService()
   const { projects_Details, loading } = useProjectDetails(selectedProject);
   const [IsExpandedArea, setIsExpandedArea] = useState(false);
   const dispatch = useDispatch();
@@ -27,7 +27,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
 
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
-  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,selectedService, IsExpandedArea);
+  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, selectedService, IsExpandedArea);
 
   const [workAreaStatus, setWorkAreaStatus] = useState({
     completed: 0,
@@ -82,9 +82,8 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                   aria-controls={`collapse-${workArea.id}`}
                 >
                   <i
-                    className={`bx me-2 toggle-icon ${
-                      IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
-                    }`}
+                    className={`bx me-2 toggle-icon ${IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
+                      }`}
                     style={{
                       fontSize: "1.2rem",
                       color: "black",
@@ -105,13 +104,13 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       </span>
                     </div>
 
-                      <div className="col-2">
-                        <ProgressBar
-                          completedWork={formatNumber(workArea?.completedWork)}
-                          plannedWork={formatNumber(workArea?.plannedWork)}
-                          className="m-0 text-info"
-                        />
-                      </div>
+                    <div className="col-2">
+                      <ProgressBar
+                        completedWork={formatNumber(workArea?.completedWork)}
+                        plannedWork={formatNumber(workArea?.plannedWork)}
+                        className="m-0 my-2 me-6 text-info"
+                      />
+                    </div>
                   </div>
                 </button>
               </p>
@@ -121,12 +120,12 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                 className="accordion-collapse collapse"
                 aria-labelledby={`heading-${workArea.id}`}
               >
-                <div className="accordion-body px-1">
-                  {isLoading  || ProjectTaskList === undefined  ? (
+                <div className="accordion-body px-6">
+                  {isLoading || ProjectTaskList === undefined ? (
                     <div className="text-center py-2 text-muted">Loading activities...</div>
-                  ) :  ProjectTaskList?.length ===  0 ? (
+                  ) : ProjectTaskList?.length === 0 ? (
                     <div className="text-center py-2 text-muted">No activities available for this work area.</div>
-                  ):ProjectTaskList?.length > 0 ? (
+                  ) : ProjectTaskList?.length > 0 ? (
                     <table className="table table-sm mx-1">
                       <thead>
                         <tr>
@@ -152,9 +151,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                         </tr>
                       </thead>
                       <tbody className="table-border-bottom-0">
-                        {ProjectTaskList.map((workItem,index) => (
+                        {ProjectTaskList.map((workItem, index) => (
                           <WorkItem
-                             key={workItem.workItemId || `fallback-${index}`}
+                            key={workItem.workItemId || `fallback-${index}`}
                             workItem={workItem}
                             forBuilding={forBuilding}
                             forFloor={floor}