diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a474d855..6432ffe5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
 The following is a list of notable changes to the Mantine DataTable component.  
 Minor versions that are not listed in the changelog are bug fixes and small improvements.
 
+## 7.8.1 (2024-04-12)
+
+- Update all internal `<Text/>` components to output divs instead of paragraphs to avoid issues such as [#570](https://github.com/icflorescu/mantine-datatable/issues/570)
+
 ## 7.8.0 (2024-04-12)
 
 - Update peer dependencies to Mantine 7.8
diff --git a/package.json b/package.json
index d5d748e24..6d9d710b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.8.0",
+  "version": "7.8.1",
   "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
   "keywords": [
     "mantine",
diff --git a/package/DataTableEmptyState.tsx b/package/DataTableEmptyState.tsx
index 69e8da385..39dce4b9d 100644
--- a/package/DataTableEmptyState.tsx
+++ b/package/DataTableEmptyState.tsx
@@ -19,7 +19,7 @@ export function DataTableEmptyState({ icon, text, pt, pb, active, children }: Da
               <IconDatabaseOff />
             </div>
           )}
-          <Text size="sm" c="dimmed">
+          <Text component="div" size="sm" c="dimmed">
             {text}
           </Text>
         </>
diff --git a/package/DataTablePageSizeSelector.tsx b/package/DataTablePageSizeSelector.tsx
index b474f1b0b..09950e5d0 100644
--- a/package/DataTablePageSizeSelector.tsx
+++ b/package/DataTablePageSizeSelector.tsx
@@ -37,7 +37,9 @@ export function DataTablePageSizeSelector({
 }: DataTablePageSizeSelectorComponentProps) {
   return (
     <Group gap="xs">
-      <Text size={size}>{label}</Text>
+      <Text component="div" size={size}>
+        {label}
+      </Text>
       <Menu withinPortal withArrow classNames={{ arrow: 'mantine-datatable-page-size-selector-menu-arrow' }}>
         <MenuTarget>
           <Button
@@ -78,7 +80,9 @@ export function DataTablePageSizeSelector({
                 disabled={isCurrent}
                 onClick={() => onChange(v)}
               >
-                <Text size={size}>{v}</Text>
+                <Text component="div" size={size}>
+                  {v}
+                </Text>
               </MenuItem>
             );
           })}
diff --git a/package/DataTablePagination.tsx b/package/DataTablePagination.tsx
index 752d957f6..a4d518a22 100644
--- a/package/DataTablePagination.tsx
+++ b/package/DataTablePagination.tsx
@@ -76,7 +76,7 @@ export const DataTablePagination = forwardRef(function DataTablePagination(
       className={clsx('mantine-datatable-pagination', className)}
       style={[{ flexDirection: isAbovePaginationWrapBreakpoint ? 'row' : 'column' }, style]}
     >
-      <Text className="mantine-datatable-pagination-text" size={paginationSize}>
+      <Text component="div" className="mantine-datatable-pagination-text" size={paginationSize}>
         {paginationTextValue}
       </Text>
       {recordsPerPageOptions && (