diff --git a/.changeset/eleven-yaks-check.md b/.changeset/eleven-yaks-check.md
new file mode 100644
index 00000000..127528d9
--- /dev/null
+++ b/.changeset/eleven-yaks-check.md
@@ -0,0 +1,5 @@
+---
+'@kubed/components': patch
+---
+
+refactor: Refactor table footer
diff --git a/packages/components/src/Table/DataTable/Pagination.tsx b/packages/components/src/Table/DataTable/Pagination.tsx
index ca133fd7..66917488 100644
--- a/packages/components/src/Table/DataTable/Pagination.tsx
+++ b/packages/components/src/Table/DataTable/Pagination.tsx
@@ -7,7 +7,7 @@ interface PaginationProps<T> {
   table: Table<T>;
 }
 
-const TableFooter = styled.div`
+export const TableFooter = styled.div`
   position: relative;
   padding: 10px 20px;
   background-color: ${({ theme }) => theme.palette.accents_0};
@@ -41,9 +41,5 @@ export const Pagination = <T extends {}>({ table }: PaginationProps<T>) => {
     };
   }, [table, props.total]);
 
-  return (
-    <TableFooter>
-      <BaseTable.BasePagination instance={instance} {...props} />
-    </TableFooter>
-  );
+  return <BaseTable.BasePagination instance={instance} {...props} />;
 };
diff --git a/packages/components/src/Table/DataTable/Table.tsx b/packages/components/src/Table/DataTable/Table.tsx
index 166d9d71..0197a04a 100644
--- a/packages/components/src/Table/DataTable/Table.tsx
+++ b/packages/components/src/Table/DataTable/Table.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import * as BaseTable from '../BaseTable';
 import { BaseDataTable } from './BaseTable';
-import { Pagination } from './Pagination';
+import { Pagination, TableFooter } from './Pagination';
 import { Toolbar } from './Toolbar';
 import {
   DataTableRootProps,
@@ -91,7 +91,11 @@ export function DataTable<T>({ className, table }: DataTableRootProps<T>) {
     <div className={cx('table-container', className)}>
       {!!toolbar && <Toolbar table={table} />}
       <BaseDataTable table={table} />
-      {!!pagination && <Pagination table={table} />}
+      {!!pagination && (
+        <TableFooter>
+          <Pagination table={table} />
+        </TableFooter>
+      )}
     </div>
   );
 }