diff --git a/components/loading-spinner.tsx b/components/loading-spinner.tsx
index 26ce375d..6bc5bc55 100644
--- a/components/loading-spinner.tsx
+++ b/components/loading-spinner.tsx
@@ -21,7 +21,11 @@ function LoadingSpinner({
   styles,
 }: LoadingSpinnerProps) {
   return (
-    <SpinnerWrapper $style={styles?.containerStyle} $gap={gap}>
+    <SpinnerWrapper
+      aria-label="loading-spinner"
+      $style={styles?.containerStyle}
+      $gap={gap}
+    >
       <SpinnerIcon
         aria-label="circle"
         $size={iconSize}
diff --git a/components/table.tsx b/components/table.tsx
index 9f789329..3d4c980c 100644
--- a/components/table.tsx
+++ b/components/table.tsx
@@ -227,7 +227,10 @@ function Table({
   const rowChildren = Children.map(children, (child, index) => {
     if (!isValidElement<TableRowProps | TableRowGroupProps>(child)) return null;
 
-    if (child.type === TableRowGroup) {
+    const hasRowGroup = child.type === TableRowGroup;
+    const hasRow = child.type === TableRow;
+
+    if (hasRowGroup) {
       return cloneElement(child, {
         selectable,
         selectedData,
@@ -244,7 +247,7 @@ function Table({
         });
     }
 
-    if (child.type === TableRow) {
+    if (hasRow) {
       const props = child.props as TableRowProps;
 
       const isSelected = selectedData.some(
@@ -578,24 +581,41 @@ function Table({
                 })()}
               </TableSummary>
             )}
+          </TableContainer>
 
-            {isLoading && (
-              <OverlayBlocker
+          {isLoading && (
+            <OverlayBlocker
+              styles={{
+                self: css`
+                  display: flex;
+                  align-items: start;
+                  padding-left: 10px;
+                  padding-top: 10px;
+
+                  backdrop-filter: blur(0.5px);
+                  background-color: rgba(255, 255, 255, 0.6);
+                `,
+              }}
+              show={isLoading}
+              onClick="preventDefault"
+            >
+              <LoadingSpinner
                 styles={{
-                  self: css`
-                    display: flex;
-                    justify-content: center;
-                    backdrop-filter: blur(0.5px);
-                    background-color: rgba(255, 255, 255, 0.6);
+                  containerStyle: css`
+                    background-color: black;
+                    border-radius: 20px;
+                    opacity: 0.8;
+                    color: white;
+                    padding: 4px;
+                    padding-right: 8px;
                   `,
                 }}
-                show={isLoading}
-                onClick="preventDefault"
-              >
-                <LoadingSpinner iconSize={24} />
-              </OverlayBlocker>
-            )}
-          </TableContainer>
+                label="Loading"
+                gap={10}
+                iconSize={24}
+              />
+            </OverlayBlocker>
+          )}
         </Wrapper>
       </TableColumnContext.Provider>
     </DnDContext.Provider>
@@ -702,9 +722,9 @@ const PaginationSelectedItem = styled.span<{ $style?: CSSProp }>`
 `;
 
 const TableContainer = styled.div<{ $hasSelected: boolean }>`
+  position: relative;
   display: flex;
   flex-direction: column;
-  position: relative;
   height: 100%;
   overflow: hidden;
 
diff --git a/test/component/table.cy.tsx b/test/component/table.cy.tsx
index 8f633008..ff591f01 100644
--- a/test/component/table.cy.tsx
+++ b/test/component/table.cy.tsx
@@ -61,29 +61,92 @@ describe("Table", () => {
     type: TYPES_DATA[i % TYPES_DATA.length],
   }));
 
-  function BasicTable(props: Omit<TableProps, "children" | "columns">) {
+  function BasicTable(
+    props: Omit<TableProps, "children" | "columns"> & { hasRowGroup?: boolean }
+  ) {
     const [selectedItems, setSelectedItems] = useState([]);
 
+    const pageNumberText = props?.labels?.pageNumberText ?? "12";
+
+    const groupedRows = props.hasRowGroup
+      ? TYPES_DATA.map((type) => ({
+          type,
+          rows: rawRows.filter((r) => r.type === type),
+        }))
+      : null;
+
     return (
       <Table
         selectable
         columns={columnsBasic}
         selectedItems={selectedItems}
         onItemsSelected={setSelectedItems}
+        labels={{
+          pageNumberText: pageNumberText,
+        }}
         {...props}
       >
-        {rawRows?.map((row, index) => (
-          <Table.Row key={index} rowId={`${row.name}-${row.type}`}>
-            {[row.name, row.type].map((rowCell, i) => (
-              <Table.Row.Cell key={`${row.name}-${row.type}-${rowCell}`}>
-                {rowCell}
-              </Table.Row.Cell>
+        {props.hasRowGroup
+          ? groupedRows?.map((group, gi) => (
+              <Table.Row.Group key={gi} id={group.type}>
+                {group.rows.map((row, ri) => (
+                  <Table.Row
+                    key={`${group.type}-${ri}`}
+                    rowId={`${row.name}-${row.type}`}
+                  >
+                    {[row.name, row.type].map((cell, ci) => (
+                      <Table.Row.Cell key={`${row.name}-${cell}`}>
+                        {cell}
+                      </Table.Row.Cell>
+                    ))}
+                  </Table.Row>
+                ))}
+              </Table.Row.Group>
+            ))
+          : rawRows?.map((row, index) => (
+              <Table.Row key={index} rowId={`${row.name}-${row.type}`}>
+                {[row.name, row.type].map((rowCell, i) => (
+                  <Table.Row.Cell key={`${row.name}-${row.type}-${rowCell}`}>
+                    {rowCell}
+                  </Table.Row.Cell>
+                ))}
+              </Table.Row>
             ))}
-          </Table.Row>
-        ))}
       </Table>
     );
   }
+  context("isLoading", () => {
+    context("when given true", () => {
+      it("renders spinner positioned ~10px from the top and ~10px from the left", () => {
+        cy.mount(<BasicTable isLoading />);
+
+        cy.findByLabelText("overlay-blocker").then(($overlay) => {
+          const overlayRect = $overlay[0].getBoundingClientRect();
+
+          cy.findByLabelText("circle").then(($spinner) => {
+            const spinnerRect = $spinner[0].getBoundingClientRect();
+
+            const paddingTop = spinnerRect.top - overlayRect.top;
+            const paddingLeft = spinnerRect.left - overlayRect.left;
+
+            expect(paddingTop).to.be.closeTo(10, 2);
+            expect(paddingLeft).to.be.closeTo(10, 2);
+          });
+        });
+      });
+
+      it("renders spinner with padding 4px and with caption loading", () => {
+        cy.mount(<BasicTable isLoading />);
+
+        cy.findByText("Loading").should("exist");
+
+        cy.findByLabelText("loading-spinner")
+          .should("have.css", "background-color", "rgb(0, 0, 0)")
+          .and("have.css", "opacity", "0.8")
+          .and("have.css", "padding", "4px 8px 4px 4px");
+      });
+    });
+  });
 
   context("selected", () => {
     context("when selected", () => {
@@ -1166,7 +1229,7 @@ describe("Table", () => {
           );
 
           cy.findByLabelText("pagination-wrapper")
-            .should("have.css", "width", "432px")
+            .should("have.css", "width", "447px")
             .and("have.css", "justify-content", "end");
         });
       });