diff --git a/src/components/Project/Infrastructure/Floor.jsx b/src/components/Project/Infrastructure/Floor.jsx
index fe015b16..dfd0bc35 100644
--- a/src/components/Project/Infrastructure/Floor.jsx
+++ b/src/components/Project/Infrastructure/Floor.jsx
@@ -15,8 +15,15 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
       ) : (
         <tr>
           <td colSpan="4" className="text-start table-cell">
-            <div className="row ps-2">
-              <div className="col-6">
+               <div className="row ps-2">
+                {/*         <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
+                    <button
+              className="btn me-2"
+            >
+            </button>
+          
+          </div> */}
+              <div className="col-12  ps-10">
                 <div className="row">
                   <div className="col">
                     {" "}
diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index 9e796dd6..c31c7dab 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -10,8 +10,11 @@ import showToast from "../../../services/toastService";
 const WorkArea = ({ workArea, floor, forBuilding }) => {
   const [ workItems, setWorkItems ] = useState( [] );
   const dispatch = useDispatch()
-  const [Project,setProject] = useState()
+  const [ Project, setProject ] = useState()
+  
+    const [isExpanded, setIsExpanded] = useState(false);
 
+  const toggleExpand = () => setIsExpanded(!isExpanded);
 
   useEffect(() => {
     const project = getCachedData( "projectInfo" );
@@ -80,86 +83,73 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
   
   return (
     <React.Fragment key={workArea.id}>
-      <tr>
-        <td colSpan="4" className="text-start table-cell">
-          <div className="row ps-2">
-            <div className="col-6">
-              <div className="row">
-                <div className="col">
-                  {" "}
-                  <span className="fw-semibold text-primary">
-                    Floor:&nbsp;
-                  </span>{" "}
-                  <span className="fw-normal text-darkgreen">
-                    {floor.floorName}
-                  </span>
-                </div>
-                <div className="col">
-                  <span className="ms-10 fw-semibold text-primary">
-                    Work Area:&nbsp;
-                  </span>{" "}
-                  <span className=" fw-normal text-darkgreen">
-                    {workArea.areaName}
-                  </span>
-                </div>
-              </div>
-            </div>
+       <tr>
+    <td colSpan="4" className="text-start table-cell">
+          <div className="row ps-2 ">
+          
+            {/* <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
+             
+          
+          </div> */}
+            <div className="text-start col-11 col-md-11" >
+               {workArea?.workItems?.length > 0 && (
+                <button
+                  className="btn p-0"
+                  onClick={toggleExpand}
+                >
+                  {isExpanded ? <i className="bx bx-minus-circle" /> : <i className="bx bx-plus-circle" />}
+                </button>
+)}
+              {/* <span className="fw-semibold text-primary text-start ps-2">Floor:&nbsp;</span> */}
+               <span className={`fw-semibold text-primary text-start ${workArea?.workItems?.length > 0 ? "ps-2" : "ps-7"  }`}>Floor:&nbsp;</span>
+              <span className="fw-normal text-darkgreen">{floor.floorName}</span>
+              <span className="ms-10 fw-semibold text-primary">Work Area:&nbsp;</span>
+            <span className="fw-normal text-darkgreen">{workArea.areaName}</span>
           </div>
-        </td>
-      </tr>
+          
+     </div>
+       
+    </td>
+  </tr>
 
-      {workItems && workItems.length > 0 && (
+      {isExpanded && workArea?.workItems?.length > 0 && (
         <tr className="overflow-auto">
           <td colSpan={4}>
             <table className="table mx-1">
               <thead>
                 <tr>
-                  <th className="infra-activity-table-header-first">
-                    Activity
-                  </th>
-                  {/* for mobile view */}
-                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
-                    Status
-                  </th>
-                  {/* for greather than mobile view ************* */}
-                  <th className="infra-activity-table-header d-none d-md-table-cell">
-                    Planned
-                  </th>
-                  <th className="infra-activity-table-header d-none d-md-table-cell">
-                    Completed
-                  </th>
-                  {/* ************************** */}
+                  <th className="infra-activity-table-header-first">Activity</th>
+                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">Status</th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">Planned</th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">Completed</th>
                   <th className="infra-activity-table-header">Progress</th>
-                  <th className="infra-activity-table-header text-end ">
-                       <span className="px-3">Actions</span>
+                  <th className="infra-activity-table-header text-end">
+                    <span className="px-3">Actions</span>
                   </th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0">
-                {workArea?.workItems && workArea.workItems.length > 0 ? (
-                  workArea.workItems.map((workItem) => (
-                    <WorkItem
-                      key={workItem.workItemId}
-                      workItem={workItem}
-                      forBuilding={forBuilding}
-                      forFloor={floor}
-                      forWorkArea={workArea}
-                      deleteHandleTask={HanldeDeleteActivity}
-                    />
-                  ))
-                ) : (
-                  <tr>
-                    <td colSpan="4" className="text-center">
-                      No Data
-                    </td>
-                  </tr>
-                )}
+                {workArea.workItems.map((workItem) => (
+                  <WorkItem
+                    key={workItem.workItemId}
+                    workItem={workItem}
+                    forBuilding={forBuilding}
+                    forFloor={floor}
+                    forWorkArea={workArea}
+                    deleteHandleTask={HanldeDeleteActivity}
+                  />
+                ))}
               </tbody>
             </table>
           </td>
         </tr>
       )}
-      {!workItems && <p>No item</p>}
+
+      {isExpanded && (!workArea?.workItems || workArea?.workItems.length === 0) && (
+        <tr>
+          <td colSpan="4" className="text-center">No Data</td>
+        </tr>
+      )}
     </React.Fragment>
   );
 };