diff --git a/src/services/pmsGrid/BasicTable.jsx b/src/services/pmsGrid/BasicTable.jsx
index 3ce430a4..ffbfeb03 100644
--- a/src/services/pmsGrid/BasicTable.jsx
+++ b/src/services/pmsGrid/BasicTable.jsx
@@ -7,8 +7,6 @@ import { initPopover } from "./GridService";
  * CIVIL BOQ / INVENTORY DEMO DATA
  * Each row = BOQ item, grouped by "Category"
  */
-
-// ✅ BOQ data
 const boqData = [
   {
     id: 1,
@@ -72,6 +70,18 @@ const boqData = [
   },
   {
     id: 6,
+    category: "Masonry Works",
+    itemCode: "M-002",
+    description: "Block Masonry AAC 200mm wall",
+    unit: "Sqm",
+    quantity: 240,
+    rate: 1100,
+    site: "Green City",
+    vendor: "Ambuja Blocks",
+    status: "Pending",
+  },
+  {
+    id: 7,
     category: "Plastering Works",
     itemCode: "P-001",
     description: "Internal Plaster 12mm thick",
@@ -82,9 +92,47 @@ const boqData = [
     vendor: "L&T Finishes",
     status: "Completed",
   },
+  {
+    id: 8,
+    category: "Plastering Works",
+    itemCode: "P-002",
+    description: "External Plaster 20mm thick",
+    unit: "Sqm",
+    quantity: 800,
+    rate: 320,
+    site: "Sunshine Plaza",
+    vendor: "Hindustan Plaster",
+    status: "In Progress",
+  },
+  {
+    id: 9,
+    category: "Flooring Works",
+    itemCode: "F-001",
+    description: "Vitrified Tiles 600x600mm",
+    unit: "Sqm",
+    quantity: 600,
+    rate: 650,
+    site: "Green City - Clubhouse",
+    vendor: "Kajaria",
+    status: "Pending",
+  },
+  {
+    id: 10,
+    category: "Flooring Works",
+    itemCode: "F-002",
+    description: "Granite Flooring 20mm thick",
+    unit: "Sqm",
+    quantity: 300,
+    rate: 1250,
+    site: "Skyline Heights - Lobby",
+    vendor: "Classic Stone",
+    status: "Completed",
+  },
 ];
 
-// ✅ BOQ columns
+/**
+ * COLUMN DEFINITIONS
+ */
 const boqColumns = [
   { key: "itemCode", title: "Item Code", sortable: true, pinned: "left" },
   { key: "description", title: "Description", sortable: true, width: 300 },
@@ -108,6 +156,11 @@ const boqColumns = [
         ₹{(r.quantity * r.rate).toLocaleString()}
       </span>
     ),
+    aggregate: (vals) =>
+      "₹" +
+      vals
+        .reduce((sum, val) => sum + val, 0)
+        .toLocaleString(),
   },
   { key: "vendor", title: "Vendor", sortable: true, width: 180 },
   { key: "site", title: "Site Location", sortable: true, width: 200 },
@@ -132,122 +185,119 @@ const boqColumns = [
   },
 ];
 
-// ✅ Main component
+/**
+ * DEMO COMPONENT
+ */
 export default function DemoBOQGrid() {
-  const wrapperRef = useRef(null);
-
-  // initialize scrollbar
-  useEffect(() => {
-    if (!wrapperRef.current) return;
-    const ps = new PerfectScrollbar(wrapperRef.current, {
-      wheelPropagation: false,
-      suppressScrollX: false,
-    });
-    return () => ps.destroy();
-  }, []);
-
-  // initialize bootstrap popover
-  useEffect(() => {
+useEffect(() => {
+    // 🔥 Initialize Bootstrap popovers after first render
     initPopover();
   }, []);
-
+    const wrapperRef = useRef()
+    useEffect(() => {
+  if (!wrapperRef.current) return;
+  const ps = new PerfectScrollbar(wrapperRef.current, {
+    wheelPropagation: false,
+    suppressScrollX: false,
+  });
+  return () => ps.destroy();
+}, []);
   return (
     <div className="container-fluid py-3">
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <h5 className="fw-semibold">📦 BOQ (Bill of Quantities)</h5>
-        <button
-          type="button"
-          className="btn btn-outline-primary"
-          data-bs-toggle="popover"
-          data-bs-placement="right"
-          data-bs-content="This is a Bootstrap Popover initialized via CDN!"
-        >
-          <i className="bx bx-help-circle"></i> Popover Test
-        </button>
-      </div>
+   <button
+        type="button"
+        className="btn btn-outline-primary"
+        data-bs-toggle="popover"
+        data-bs-placement="right"
+        data-bs-content="This is a popover via CDN!"
+      >
+        Click me
+      </button>
 
       <div className="card p-3">
-        <div ref={wrapperRef} style={{ maxHeight: "70vh", overflow: "auto" }}>
-          <PmsGrid
-            data={boqData.map((r) => ({
-              ...r,
-              amount: r.quantity * r.rate,
-            }))}
-            columns={boqColumns}
-            features={{
-              search: true,
-              selection: true,
-              pagination: true,
-              export: true,
-              pinning: true,
-              resizing: true,
-              reorder: true,
-              columnVisibility: true,
-              expand: true,
-              aggregation: true,
-              maxHeight: "60vh",
-              actions: (row, toggleExpand) => (
+        <PmsGrid
+          data={boqData.map((r) => ({
+            ...r,
+            amount: r.quantity * r.rate,
+          }))}
+          columns={boqColumns}
+          features={{
+            search: true,
+            selection: true,
+            pagination: true,
+            export: true,
+            pinning: true,
+            resizing: true,
+            reorder: true,
+            columnVisibility: true,
+            pageSizeSelector: true,
+            // groupByKey: "category",
+            aggregation: true,
+            expand: true,
+            maxHeight: "60vh",
+            actions: (row, toggleExpand) => (
+              <>
                 <button
-                  className="btn btn-sm btn-outline-primary"
-                  data-bs-toggle="popover"
-                  data-bs-content={`Expand details for ${row.itemCode}`}
+                  className="btn btn-sm btn-outline-primary"data-bs-toggle="popover" data-bs-content="Popover text"
                   onClick={() => toggleExpand(row.id)}
                 >
-                  <i className="bx bx-detail me-1"></i> Details
+                  <i className="bx bx-detail me-1"></i>
+                  Details
+                  
                 </button>
-              ),
-            }}
-            renderExpanded={(row) => (
-              <div className="p-3 bg-light border rounded">
-                <h6 className="fw-semibold mb-2">Item Details</h6>
-                <div className="row small">
-                  <div className="col-md-4 mb-2">
-                    <strong>Item Code:</strong> {row.itemCode}
-                  </div>
-                  <div className="col-md-4 mb-2">
-                    <strong>Category:</strong> {row.category}
-                  </div>
-                  <div className="col-md-4 mb-2">
-                    <strong>Unit:</strong> {row.unit}
-                  </div>
-                  <div className="col-md-4 mb-2">
-                    <strong>Quantity:</strong> {row.quantity}
-                  </div>
-                  <div className="col-md-4 mb-2">
-                    <strong>Rate:</strong> ₹{row.rate.toLocaleString()}
-                  </div>
-                  <div className="col-md-4 mb-2">
-                    <strong>Total Amount:</strong>{" "}
-                    <span className="text-success fw-semibold">
-                      ₹{(row.quantity * row.rate).toLocaleString()}
-                    </span>
-                  </div>
-                  <div className="col-md-6 mb-2">
-                    <strong>Vendor:</strong> {row.vendor}
-                  </div>
-                  <div className="col-md-6 mb-2">
-                    <strong>Site:</strong> {row.site}
-                  </div>
-                  <div className="col-md-12">
-                    <strong>Status:</strong>{" "}
-                    <span
-                      className={`badge bg-${
-                        row.status === "Completed"
-                          ? "success"
-                          : row.status === "Pending"
-                          ? "warning"
-                          : "info"
-                      }`}
-                    >
-                      {row.status}
-                    </span>
-                  </div>
+              </>
+            ),
+          }}
+          renderExpanded={(row) => (
+            <div className="p-3 bg-light border rounded">
+              <h6 className="fw-semibold mb-2">Item Details</h6>
+              <div className="row small">
+                <div className="col-md-4 mb-2">
+                  <strong>Item Code:</strong> {row.itemCode}
+                </div>
+                <div className="col-md-4 mb-2">
+                  <strong>Category:</strong> {row.category}
+                </div>
+                <div className="col-md-4 mb-2">
+                  <strong>Unit:</strong> {row.unit}
+                </div>
+                <div className="col-md-4 mb-2">
+                  <strong>Quantity:</strong> {row.quantity}
+                </div>
+                <div className="col-md-4 mb-2">
+                  <strong>Rate:</strong> ₹{row.rate.toLocaleString()}
+                </div>
+                <div className="col-md-4 mb-2">
+                  <strong>Total Amount:</strong>{" "}
+                  <span className="text-success fw-semibold">
+                    ₹{(row.quantity * row.rate).toLocaleString()}
+                  </span>
+                </div>
+                <div className="col-md-6 mb-2">
+                  <strong>Vendor:</strong> {row.vendor}
+                </div>
+                <div className="col-md-6 mb-2">
+                  <strong>Site Location:</strong> {row.site}
+                </div>
+                <div className="col-md-12">
+                  <strong>Status:</strong>{" "}
+                  <span
+                    className={`badge bg-${
+                      row.status === "Completed"
+                        ? "success"
+                        : row.status === "Pending"
+                        ? "warning"
+                        : "info"
+                    }`}
+                  >
+                    {row.status}
+                  </span>
                 </div>
               </div>
-            )}
-          />
-        </div>
+            </div>
+          )}
+        />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}