diff --git a/locales/extracted/en.json b/locales/extracted/en.json
index 3a8209de..7fb3fa5f 100644
--- a/locales/extracted/en.json
+++ b/locales/extracted/en.json
@@ -39,10 +39,8 @@
   "common.logoAlt": "Your organization logo",
   "common.metadata": "Metadata",
   "common.name": "Name",
-  "common.nextPage": "Next page",
   "common.noOptions": "No options found.",
   "common.portfolio": "Portfolio",
-  "common.previousPage": "Previous page",
   "common.records": "records",
   "common.remove": "Remove",
   "common.requiredFields": "(*) required fields.",
@@ -159,6 +157,7 @@
   "ledgers.account.sheet.edit.title": "Edit {accountName}",
   "ledgers.account.sheet.tabs.details": "Account Details",
   "ledgers.accounts.createFirst": "Create first account",
+  "ledgers.accounts.showing": "Showing {count} {number, plural, =0 {accounts} one {account} other {accounts}}.",
   "ledgers.accounts.subtitle": "{count} {count, plural, =0 {accounts found} one {account found} other {accounts found}}",
   "ledgers.accounts.title": "Accounts",
   "ledgers.assets.createButton": "Create your first Asset",
@@ -170,6 +169,7 @@
   "ledgers.assets.sheet.edit.title": "Edit {assetName}",
   "ledgers.assets.sheet.tabs.details": "Assets Details",
   "ledgers.assets.sheet.title": "New Asset",
+  "ledgers.assets.showing": "Showing {count} {number, plural, =0 {assets} one {asset} other {assets}}.",
   "ledgers.assets.subtitle": "Currency or assets of any nature traded on this Ledger.",
   "ledgers.assets.title": "Assets",
   "ledgers.columnsTable.tooltipCopyText": "Click to copy",
@@ -192,17 +192,20 @@
   "ledgers.portfolio.sheet.title": "New Portfolio",
   "ledgers.portfolio.subtitle": "{count} {count, plural, =0 {portfolios found} one {portfolio found} other {portfolios found}}",
   "ledgers.portfolio.title": "Portfolios",
+  "ledgers.portfolios.showing": "Showing {count} {number, plural, =0 {portfolios} one {portifolio} other {portfolios}}.",
   "ledgers.products.emptyResource": "You haven't created any Products yet",
   "ledgers.products.sheet.description": "Fill in the details of the Product you want to create.",
   "ledgers.products.sheet.edit.description": "View and edit product fields.",
   "ledgers.products.sheet.edit.title": "Edit {productName}",
   "ledgers.products.sheet.tabs.details": "Product Details",
   "ledgers.products.sheet.title": "New Product",
+  "ledgers.products.showing": "Showing {count} {number, plural, =0 {products} one {product} other {products}}.",
   "ledgers.products.subtitle": "Clustering or allocation of customers at different levels.",
   "ledgers.products.title": "Products",
   "ledgers.sheet.tabs.details": "Ledger Details",
   "ledgers.sheetCreate.description": "Fill in the data of the Ledger you wish to create.",
   "ledgers.sheetCreate.title": "New Ledger",
+  "ledgers.showing": "Showing {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.",
   "ledgers.subtitle": "Visualize and edit the Ledgers of your Organization.",
   "ledgers.tab.accounts": "Accounts",
   "ledgers.tab.assets": "Assets",
@@ -244,6 +247,7 @@
   "organizations.organizationView.breadcrumbs.settings": "Settings",
   "organizations.organizationView.newOrganization.title": "New Organization",
   "organizations.organizationView.notFound": "Organization not found.",
+  "organizations.showing": "Showing {count} {number, plural, =0 {organizations} one {organization} other {organizations}}.",
   "organizations.subtitle": "View and manage Organizations.",
   "organizations.title": "Settings",
   "organizations.toast.create.success": "Organization created!",
diff --git a/locales/extracted/pt.json b/locales/extracted/pt.json
index 07b01f0d..b510a1de 100644
--- a/locales/extracted/pt.json
+++ b/locales/extracted/pt.json
@@ -41,8 +41,6 @@
   "common.copyMessage": "Copiado para a área de transferência!",
   "common.expand": "Ampliar",
   "common.inactive": "Inativo",
-  "common.nextPage": "Próxima Página",
-  "common.previousPage": "Página Anterior",
   "common.tooltipCopyText": "Toque para copiar",
   "entity.metadata.key": "Chave",
   "entity.metadata.value": "Valor",
@@ -278,10 +276,16 @@
   "ledgers.assets.sheet.tabs.details": "Detalhes do Ativo",
   "ledgers.portfolio.sheet.tabs.details": "Detalhes do Portfólio",
   "ledgers.products.sheet.tabs.details": "Detalhes do Produto",
-  "notFound.backToHome": "Voltar para Home",
   "ledgers.sheet.tabs.details": "Detalhes do Ledger",
   "common.records": "registros",
   "ledgers.tab.accounts": "Contas",
   "ledgers.tab.portfolios": "Portfólios",
-  "settings.tab.portfolios": "Portfólios"
+  "settings.tab.portfolios": "Portfólios",
+  "notFound.backToHome": "Voltar para Home",
+  "ledgers.assets.showing": "Mostrando {count} {number, plural, =0 {ativos} one {ativo} other {ativos}}.",
+  "ledgers.products.showing": "Mostrando {count} {number, plural, =0 {produtos} one {produto} other {produtos}}.",
+  "ledgers.showing": "Mostrando {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.",
+  "ledgers.accounts.showing": "Mostrando {count} {number, plural, =0 {contas} one {conta} other {contas}}.",
+  "ledgers.portfolios.showing": "Mostrando {count} {number, plural, =0 {portfólios} one {portfólio} other {portfólios}}.",
+  "organizations.showing": "Mostrando {count} {number, plural, =0 {organizações} one {organização} other {organizações}}."
 }
diff --git a/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx b/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx
index e74e63ca..f3ac0054 100644
--- a/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx
+++ b/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx
@@ -19,6 +19,7 @@ import useCustomToast from '@/hooks/use-custom-toast'
 import { AccountType } from '@/types/accounts-type'
 import { AccountSheet } from './accounts-sheet'
 import { AccountsDataTable } from './accounts-data-table'
+import { EntityDataTable } from '@/components/entity-data-table'
 
 export const AccountsTabContent = () => {
   const intl = useIntl()
@@ -223,16 +224,33 @@ export const AccountsTabContent = () => {
         </EntityBox.Actions>
       </EntityBox.Root>
 
-      {accountsList && (
-        <AccountsDataTable
-          accounts={{ items: accountsList }}
-          isLoading={isAccountsLoading}
-          table={table}
-          handleEdit={handleEdit}
-          onDelete={handleDialogOpen}
-          refetch={refetchAccounts}
-        />
-      )}
+      <EntityDataTable.Root>
+        {accountsList && (
+          <AccountsDataTable
+            accounts={{ items: accountsList }}
+            isLoading={isAccountsLoading}
+            table={table}
+            handleEdit={handleEdit}
+            onDelete={handleDialogOpen}
+            refetch={refetchAccounts}
+          />
+        )}
+        <EntityDataTable.Footer>
+          <EntityDataTable.FooterText>
+            {intl.formatMessage(
+              {
+                id: 'ledgers.accounts.showing',
+                defaultMessage:
+                  'Showing {count} {number, plural, =0 {accounts} one {account} other {accounts}}.'
+              },
+              {
+                number: accountsList?.length,
+                count: <span className="font-bold">{accountsList?.length}</span>
+              }
+            )}
+          </EntityDataTable.FooterText>
+        </EntityDataTable.Footer>
+      </EntityDataTable.Root>
     </React.Fragment>
   )
 }
diff --git a/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx b/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx
index 513f787a..b6013332 100644
--- a/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx
+++ b/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx
@@ -20,6 +20,7 @@ import { useParams } from 'next/navigation'
 import { useConfirmDialog } from '@/components/confirmation-dialog/use-confirm-dialog'
 import ConfirmationDialog from '@/components/confirmation-dialog'
 import useCustomToast from '@/hooks/use-custom-toast'
+import { EntityDataTable } from '@/components/entity-data-table'
 
 type AssetsTabContentProps = {
   data: ILedgerType
@@ -142,18 +143,38 @@ export const AssetsTabContent = ({ data }: AssetsTabContentProps) => {
 
       <AssetsSheet ledgerId={ledgerId} onSuccess={refetch} {...sheetProps} />
 
-      {isLoading && <AssetsSkeleton />}
+      <EntityDataTable.Root>
+        {isLoading && <AssetsSkeleton />}
 
-      {assets && (
-        <AssetsDataTable
-          assets={assets}
-          isLoading={isLoading}
-          table={table}
-          handleDialogOpen={handleDialogOpen}
-          handleEdit={handleEdit}
-          refetch={refetch}
-        />
-      )}
+        {assets && (
+          <AssetsDataTable
+            assets={assets}
+            isLoading={isLoading}
+            table={table}
+            handleDialogOpen={handleDialogOpen}
+            handleEdit={handleEdit}
+            refetch={refetch}
+          />
+        )}
+
+        <EntityDataTable.Footer>
+          <EntityDataTable.FooterText>
+            {intl.formatMessage(
+              {
+                id: 'ledgers.assets.showing',
+                defaultMessage:
+                  'Showing {count} {number, plural, =0 {assets} one {asset} other {assets}}.'
+              },
+              {
+                number: assets?.items?.length,
+                count: (
+                  <span className="font-bold">{assets?.items?.length}</span>
+                )
+              }
+            )}
+          </EntityDataTable.FooterText>
+        </EntityDataTable.Footer>
+      </EntityDataTable.Root>
 
       <ConfirmationDialog
         title={intl.formatMessage({
diff --git a/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx b/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx
index 985f47ec..38ea91a8 100644
--- a/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx
+++ b/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx
@@ -46,6 +46,7 @@ import {
 } from '@/components/ui/tooltip'
 import useCustomToast from '@/hooks/use-custom-toast'
 import { Arrow } from '@radix-ui/react-tooltip'
+import { EntityDataTable } from '@/components/entity-data-table'
 
 export const PortfoliosTabContent = () => {
   const intl = useIntl()
@@ -164,172 +165,194 @@ export const PortfoliosTabContent = () => {
         </EntityBox.Actions>
       </EntityBox.Root>
 
-      {!isNil(portfoliosData?.items) && portfoliosData?.items.length > 0 && (
-        <TableContainer>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.id',
-                    defaultMessage: 'ID'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.name',
-                    defaultMessage: 'Name'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.metadata',
-                    defaultMessage: 'Metadata'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.accounts',
-                    defaultMessage: 'Accounts'
-                  })}
-                </TableHead>
-                <TableHead className="w-0">
-                  {intl.formatMessage({
-                    id: 'common.actions',
-                    defaultMessage: 'Actions'
-                  })}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows.map((portfolio) => {
-                const metadataCount = Object.entries(
-                  portfolio.original.metadata || []
-                ).length
-                const displayId =
-                  portfolio.original.id && portfolio.original.id.length > 8
-                    ? `${truncateString(portfolio.original.id, 8)}`
-                    : portfolio.original.id
+      <EntityDataTable.Root>
+        {!isNil(portfoliosData?.items) && portfoliosData?.items.length > 0 && (
+          <TableContainer>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.id',
+                      defaultMessage: 'ID'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.name',
+                      defaultMessage: 'Name'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.metadata',
+                      defaultMessage: 'Metadata'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.accounts',
+                      defaultMessage: 'Accounts'
+                    })}
+                  </TableHead>
+                  <TableHead className="w-0">
+                    {intl.formatMessage({
+                      id: 'common.actions',
+                      defaultMessage: 'Actions'
+                    })}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows.map((portfolio) => {
+                  const metadataCount = Object.entries(
+                    portfolio.original.metadata || []
+                  ).length
+                  const displayId =
+                    portfolio.original.id && portfolio.original.id.length > 8
+                      ? `${truncateString(portfolio.original.id, 8)}`
+                      : portfolio.original.id
 
-                return (
-                  <TableRow key={portfolio.id}>
-                    <TableCell>
-                      <TooltipProvider>
-                        <Tooltip delayDuration={300}>
-                          <TooltipTrigger
-                            onClick={() =>
-                              handleCopyToClipboard(
-                                portfolio.original.id,
-                                intl.formatMessage({
-                                  id: 'ledgers.toast.copyId',
-                                  defaultMessage:
-                                    'The id has been copied to your clipboard.'
-                                })
-                              )
+                  return (
+                    <TableRow key={portfolio.id}>
+                      <TableCell>
+                        <TooltipProvider>
+                          <Tooltip delayDuration={300}>
+                            <TooltipTrigger
+                              onClick={() =>
+                                handleCopyToClipboard(
+                                  portfolio.original.id,
+                                  intl.formatMessage({
+                                    id: 'ledgers.toast.copyId',
+                                    defaultMessage:
+                                      'The id has been copied to your clipboard.'
+                                  })
+                                )
+                              }
+                            >
+                              <p className="text-shadcn-600 underline">
+                                {displayId}
+                              </p>
+                            </TooltipTrigger>
+                            <TooltipContent
+                              className="border-none bg-shadcn-600"
+                              arrowPadding={0}
+                            >
+                              <p className="text-shadcn-400">
+                                {portfolio.original.id}
+                              </p>
+                              <p className="text-center text-white">
+                                {intl.formatMessage({
+                                  id: 'ledgers.columnsTable.tooltipCopyText',
+                                  defaultMessage: 'Click to copy'
+                                })}
+                              </p>
+                              <Arrow height={8} width={15} />
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </TableCell>
+                      <TableCell>{portfolio.original.name}</TableCell>
+                      <TableCell>
+                        {metadataCount === 0 ? (
+                          <Minus size={20} />
+                        ) : (
+                          intl.formatMessage(
+                            {
+                              id: 'common.table.metadata',
+                              defaultMessage:
+                                '{number, plural, =0 {-} one {# record} other {# records}}'
+                            },
+                            {
+                              number: metadataCount
                             }
-                          >
-                            <p className="text-shadcn-600 underline">
-                              {displayId}
-                            </p>
-                          </TooltipTrigger>
-                          <TooltipContent
-                            className="border-none bg-shadcn-600"
-                            arrowPadding={0}
-                          >
-                            <p className="text-shadcn-400">
-                              {portfolio.original.id}
-                            </p>
-                            <p className="text-center text-white">
-                              {intl.formatMessage({
-                                id: 'ledgers.columnsTable.tooltipCopyText',
-                                defaultMessage: 'Click to copy'
-                              })}
-                            </p>
-                            <Arrow height={8} width={15} />
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </TableCell>
-                    <TableCell>{portfolio.original.name}</TableCell>
-                    <TableCell>
-                      {metadataCount === 0 ? (
-                        <Minus size={20} />
-                      ) : (
-                        intl.formatMessage(
+                          )
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {intl.formatMessage(
                           {
-                            id: 'common.table.metadata',
+                            id: 'common.table.accounts',
                             defaultMessage:
-                              '{number, plural, =0 {-} one {# record} other {# records}}'
+                              '{number, plural, =0 {No accounts} one {# account} other {# accounts}}'
                           },
                           {
-                            number: metadataCount
+                            number: portfolio.original.accounts?.length || 0
                           }
-                        )
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {intl.formatMessage(
-                        {
-                          id: 'common.table.accounts',
-                          defaultMessage:
-                            '{number, plural, =0 {No accounts} one {# account} other {# accounts}}'
-                        },
-                        {
-                          number: portfolio.original.accounts?.length || 0
-                        }
-                      )}
-                    </TableCell>
+                        )}
+                      </TableCell>
 
-                    <TableCell className="w-0">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            variant="secondary"
-                            className="h-auto w-max p-2"
-                          >
-                            <MoreVertical size={16} onClick={() => {}} />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem
-                            onClick={() =>
-                              handleEdit({
-                                ...portfolio.original,
-                                entityId: portfolio.original.id,
-                                status: {
-                                  ...portfolio.original.status,
-                                  description:
-                                    portfolio.original.status.description ?? ''
-                                }
-                              } as PortfolioResponseDto)
-                            }
-                          >
-                            {intl.formatMessage({
-                              id: `common.edit`,
-                              defaultMessage: 'Edit'
-                            })}
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DropdownMenuItem
-                            onClick={() => {
-                              handleDialogOpen(portfolio?.original?.id!)
-                            }}
-                          >
-                            {intl.formatMessage({
-                              id: `common.delete`,
-                              defaultMessage: 'Delete'
-                            })}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
+                      <TableCell className="w-0">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="secondary"
+                              className="h-auto w-max p-2"
+                            >
+                              <MoreVertical size={16} onClick={() => {}} />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() =>
+                                handleEdit({
+                                  ...portfolio.original,
+                                  entityId: portfolio.original.id,
+                                  status: {
+                                    ...portfolio.original.status,
+                                    description:
+                                      portfolio.original.status.description ??
+                                      ''
+                                  }
+                                } as PortfolioResponseDto)
+                              }
+                            >
+                              {intl.formatMessage({
+                                id: `common.edit`,
+                                defaultMessage: 'Edit'
+                              })}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              onClick={() => {
+                                handleDialogOpen(portfolio?.original?.id!)
+                              }}
+                            >
+                              {intl.formatMessage({
+                                id: `common.delete`,
+                                defaultMessage: 'Delete'
+                              })}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+        <EntityDataTable.Footer>
+          <EntityDataTable.FooterText>
+            {intl.formatMessage(
+              {
+                id: 'ledgers.portfolios.showing',
+                defaultMessage:
+                  'Showing {count} {number, plural, =0 {portfolios} one {portifolio} other {portfolios}}.'
+              },
+              {
+                number: portfoliosData?.items?.length,
+                count: (
+                  <span className="font-bold">
+                    {portfoliosData?.items?.length}
+                  </span>
                 )
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
+              }
+            )}
+          </EntityDataTable.FooterText>
+        </EntityDataTable.Footer>
+      </EntityDataTable.Root>
     </>
   )
 }
diff --git a/src/app/(routes)/ledgers/[id]/products/products-tab-content.tsx b/src/app/(routes)/ledgers/[id]/products/products-tab-content.tsx
index fd0d67bf..84b92ca8 100644
--- a/src/app/(routes)/ledgers/[id]/products/products-tab-content.tsx
+++ b/src/app/(routes)/ledgers/[id]/products/products-tab-content.tsx
@@ -35,6 +35,7 @@ import {
 } from '@tanstack/react-table'
 import { useOrganization } from '@/context/organization-provider/organization-provider-client'
 import { useParams } from 'next/navigation'
+import { EntityDataTable } from '@/components/entity-data-table'
 
 export const ProductsTabContent = () => {
   const intl = useIntl()
@@ -127,106 +128,127 @@ export const ProductsTabContent = () => {
         </EntityBox.Actions>
       </EntityBox.Root>
 
-      {isNil(data?.items) ||
-        (data?.items.length === 0 && (
-          <EmptyResource
-            message={intl.formatMessage({
-              id: 'ledgers.products.emptyResource',
-              defaultMessage: "You haven't created any Products yet"
-            })}
-          >
-            <Button variant="outline" onClick={handleCreate} icon={<Plus />}>
-              {intl.formatMessage({
-                id: 'common.create',
-                defaultMessage: 'Create'
+      <EntityDataTable.Root>
+        {isNil(data?.items) ||
+          (data?.items.length === 0 && (
+            <EmptyResource
+              message={intl.formatMessage({
+                id: 'ledgers.products.emptyResource',
+                defaultMessage: "You haven't created any Products yet"
               })}
-            </Button>
-          </EmptyResource>
-        ))}
+            >
+              <Button variant="outline" onClick={handleCreate} icon={<Plus />}>
+                {intl.formatMessage({
+                  id: 'common.create',
+                  defaultMessage: 'Create'
+                })}
+              </Button>
+            </EmptyResource>
+          ))}
 
-      {!isNil(data?.items) && data?.items.length > 0 && (
-        <TableContainer>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.id',
-                    defaultMessage: 'ID'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.name',
-                    defaultMessage: 'Name'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.metadata',
-                    defaultMessage: 'Metadata'
-                  })}
-                </TableHead>
-                <TableHead className="w-0">
-                  {intl.formatMessage({
-                    id: 'common.actions',
-                    defaultMessage: 'Actions'
-                  })}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows.map((product) => (
-                <TableRow key={product.id}>
-                  <TableCell>{product.original.id}</TableCell>
-                  <TableCell>{product.original.name}</TableCell>
-                  <TableCell>
-                    {intl.formatMessage(
-                      {
-                        id: 'common.table.metadata',
-                        defaultMessage:
-                          '{number, plural, =0 {-} one {# record} other {# records}}'
-                      },
-                      {
-                        number: Object.entries(product.original.metadata || [])
-                          .length
-                      }
-                    )}
-                  </TableCell>
-                  <TableCell className="w-0">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="secondary">
-                          <MoreVertical size={16} onClick={() => {}} />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => handleEdit(product.original)}
-                        >
-                          {intl.formatMessage({
-                            id: `common.edit`,
-                            defaultMessage: 'Edit'
-                          })}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => handleDialogOpen(product.original.id)}
-                        >
-                          {intl.formatMessage({
-                            id: `common.delete`,
-                            defaultMessage: 'Delete'
-                          })}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
+        {!isNil(data?.items) && data?.items.length > 0 && (
+          <TableContainer>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.id',
+                      defaultMessage: 'ID'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.name',
+                      defaultMessage: 'Name'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.metadata',
+                      defaultMessage: 'Metadata'
+                    })}
+                  </TableHead>
+                  <TableHead className="w-0">
+                    {intl.formatMessage({
+                      id: 'common.actions',
+                      defaultMessage: 'Actions'
+                    })}
+                  </TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows.map((product) => (
+                  <TableRow key={product.id}>
+                    <TableCell>{product.original.id}</TableCell>
+                    <TableCell>{product.original.name}</TableCell>
+                    <TableCell>
+                      {intl.formatMessage(
+                        {
+                          id: 'common.table.metadata',
+                          defaultMessage:
+                            '{number, plural, =0 {-} one {# record} other {# records}}'
+                        },
+                        {
+                          number: Object.entries(
+                            product.original.metadata || []
+                          ).length
+                        }
+                      )}
+                    </TableCell>
+                    <TableCell className="w-0">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="secondary">
+                            <MoreVertical size={16} onClick={() => {}} />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={() => handleEdit(product.original)}
+                          >
+                            {intl.formatMessage({
+                              id: `common.edit`,
+                              defaultMessage: 'Edit'
+                            })}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            onClick={() =>
+                              handleDialogOpen(product.original.id)
+                            }
+                          >
+                            {intl.formatMessage({
+                              id: `common.delete`,
+                              defaultMessage: 'Delete'
+                            })}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+
+        <EntityDataTable.Footer>
+          <EntityDataTable.FooterText>
+            {intl.formatMessage(
+              {
+                id: 'ledgers.products.showing',
+                defaultMessage:
+                  'Showing {count} {number, plural, =0 {products} one {product} other {products}}.'
+              },
+              {
+                number: data?.items?.length,
+                count: <span className="font-bold">{data?.items?.length}</span>
+              }
+            )}
+          </EntityDataTable.FooterText>
+        </EntityDataTable.Footer>
+      </EntityDataTable.Root>
     </>
   )
 }
diff --git a/src/app/(routes)/ledgers/ledgers-data-table.tsx b/src/app/(routes)/ledgers/ledgers-data-table.tsx
index 5a5581cc..4ab27b3a 100644
--- a/src/app/(routes)/ledgers/ledgers-data-table.tsx
+++ b/src/app/(routes)/ledgers/ledgers-data-table.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { IntlShape, useIntl } from 'react-intl'
+import { useIntl } from 'react-intl'
 import {
   Table,
   TableBody,
@@ -35,6 +35,7 @@ import Link from 'next/link'
 import { LedgerEntity } from '@/core/domain/entities/ledger-entity'
 import { LedgersSheet } from './ledgers-sheet'
 import { AssetsSheet } from './[id]/assets/assets-sheet'
+import { EntityDataTable } from '@/components/entity-data-table'
 
 type LedgersTableProps = {
   ledgers: { items: LedgerEntity[] }
@@ -218,7 +219,7 @@ export const LedgersDataTable: React.FC<LedgersTableProps> = ({
   }
 
   return (
-    <div>
+    <EntityDataTable.Root>
       {isNil(ledgers?.items) || ledgers.items.length === 0 ? (
         <EmptyResource
           message={intl.formatMessage({
@@ -295,7 +296,23 @@ export const LedgersDataTable: React.FC<LedgersTableProps> = ({
         </TableContainer>
       )}
 
+      <EntityDataTable.Footer>
+        <EntityDataTable.FooterText>
+          {intl.formatMessage(
+            {
+              id: 'ledgers.showing',
+              defaultMessage:
+                'Showing {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.'
+            },
+            {
+              number: ledgers?.items?.length,
+              count: <span className="font-bold">{ledgers?.items?.length}</span>
+            }
+          )}
+        </EntityDataTable.FooterText>
+      </EntityDataTable.Footer>
+
       <LedgersSheet onSuccess={refetch} {...sheetProps} />
-    </div>
+    </EntityDataTable.Root>
   )
 }
diff --git a/src/app/(routes)/settings/organizations-tab-content.tsx b/src/app/(routes)/settings/organizations-tab-content.tsx
index b772575b..a2d94ab9 100644
--- a/src/app/(routes)/settings/organizations-tab-content.tsx
+++ b/src/app/(routes)/settings/organizations-tab-content.tsx
@@ -31,6 +31,7 @@ import { useConfirmDialog } from '@/components/confirmation-dialog/use-confirm-d
 import ConfirmationDialog from '@/components/confirmation-dialog'
 import { Badge } from '@/components/ui/badge'
 import { OrganizationEntity } from '@/core/domain/entities/organization-entity'
+import { EntityDataTable } from '@/components/entity-data-table'
 
 export const OrganizationsTabContent = () => {
   const intl = useIntl()
@@ -115,110 +116,127 @@ export const OrganizationsTabContent = () => {
           </Button>
         </EmptyResource>
       )}
-
-      {data?.items && data.items.length > 0 && (
-        <TableContainer>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.id',
-                    defaultMessage: 'ID'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: `entity.organization.legalName`,
-                    defaultMessage: 'Legal Name'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: `entity.organization.doingBusinessAs`,
-                    defaultMessage: 'Trade Name'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: `entity.organization.legalDocument`,
-                    defaultMessage: 'Document'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: `entity.organization.status`,
-                    defaultMessage: 'Status'
-                  })}
-                </TableHead>
-                <TableHead>
-                  {intl.formatMessage({
-                    id: 'common.actions',
-                    defaultMessage: 'Actions'
-                  })}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data.items.map((organization) => (
-                <TableRow key={organization.id}>
-                  <TableCell>{organization.id}</TableCell>
-                  <TableCell>{organization.legalName}</TableCell>
-                  <TableCell>{organization.doingBusinessAs}</TableCell>
-                  <TableCell>{organization.legalDocument}</TableCell>
-                  <TableCell>
-                    <Badge
-                      variant={
-                        organization.status.code === 'ACTIVE'
-                          ? 'active'
-                          : 'inactive'
-                      }
-                    >
-                      {organization.status.code === 'ACTIVE'
-                        ? intl.formatMessage({
-                            id: 'common.active',
-                            defaultMessage: 'Active'
-                          })
-                        : intl.formatMessage({
-                            id: 'common.inactive',
-                            defaultMessage: 'Inactive'
-                          })}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="secondary">
-                          <MoreVertical size={16} onClick={() => {}} />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => handleEdit(organization)}
-                        >
-                          {intl.formatMessage({
-                            id: `common.edit`,
-                            defaultMessage: 'Edit'
-                          })}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => handleDialogOpen(organization.id!)}
-                        >
-                          {intl.formatMessage({
-                            id: `common.delete`,
-                            defaultMessage: 'Delete'
-                          })}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
+      <EntityDataTable.Root>
+        {data?.items && data.items.length > 0 && (
+          <TableContainer>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.id',
+                      defaultMessage: 'ID'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: `entity.organization.legalName`,
+                      defaultMessage: 'Legal Name'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: `entity.organization.doingBusinessAs`,
+                      defaultMessage: 'Trade Name'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: `entity.organization.legalDocument`,
+                      defaultMessage: 'Document'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: `entity.organization.status`,
+                      defaultMessage: 'Status'
+                    })}
+                  </TableHead>
+                  <TableHead>
+                    {intl.formatMessage({
+                      id: 'common.actions',
+                      defaultMessage: 'Actions'
+                    })}
+                  </TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
+              </TableHeader>
+              <TableBody>
+                {data.items.map((organization) => (
+                  <TableRow key={organization.id}>
+                    <TableCell>{organization.id}</TableCell>
+                    <TableCell>{organization.legalName}</TableCell>
+                    <TableCell>{organization.doingBusinessAs}</TableCell>
+                    <TableCell>{organization.legalDocument}</TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          organization.status.code === 'ACTIVE'
+                            ? 'active'
+                            : 'inactive'
+                        }
+                      >
+                        {organization.status.code === 'ACTIVE'
+                          ? intl.formatMessage({
+                              id: 'common.active',
+                              defaultMessage: 'Active'
+                            })
+                          : intl.formatMessage({
+                              id: 'common.inactive',
+                              defaultMessage: 'Inactive'
+                            })}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="secondary">
+                            <MoreVertical size={16} onClick={() => {}} />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={() => handleEdit(organization)}
+                          >
+                            {intl.formatMessage({
+                              id: `common.edit`,
+                              defaultMessage: 'Edit'
+                            })}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            onClick={() => handleDialogOpen(organization.id!)}
+                          >
+                            {intl.formatMessage({
+                              id: `common.delete`,
+                              defaultMessage: 'Delete'
+                            })}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+
+        <EntityDataTable.Footer>
+          <EntityDataTable.FooterText>
+            {intl.formatMessage(
+              {
+                id: 'organizations.showing',
+                defaultMessage:
+                  'Showing {count} {number, plural, =0 {organizations} one {organization} other {organizations}}.'
+              },
+              {
+                number: data?.items?.length,
+                count: <span className="font-bold">{data?.items?.length}</span>
+              }
+            )}
+          </EntityDataTable.FooterText>
+        </EntityDataTable.Footer>
+      </EntityDataTable.Root>
     </div>
   )
 }
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
deleted file mode 100644
index cab1360d..00000000
--- a/src/components/data-table.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-'use client'
-
-import React, { useEffect } from 'react'
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  useReactTable
-} from '@tanstack/react-table'
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table'
-import { Button } from '@/components/ui/button'
-import { ChevronLeft, ChevronRight, Search } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from './ui/select'
-import { Checkbox } from '@/components/ui/checkbox'
-import { InputWithIcon } from './ui/input-with-icon'
-import { useIntl } from 'react-intl'
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  pageSizeOptions?: number[]
-  data: TData[]
-  onSelectedRowsChange?: (selectedRows: TData[]) => void
-  enableRowSelection?: boolean
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  pageSizeOptions = [10, 50, 100],
-  data,
-  onSelectedRowsChange,
-  enableRowSelection = false
-}: DataTableProps<TData, TValue>) {
-  const intl = useIntl()
-  const [columnFilters, setColumnFilters] = React.useState<any>([])
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      columnFilters,
-      rowSelection
-    },
-    enableRowSelection
-  })
-
-  useEffect(() => {
-    if (onSelectedRowsChange) {
-      const selectedRows = table
-        .getSelectedRowModel()
-        .rows.map((row) => row.original)
-      onSelectedRowsChange(selectedRows)
-    }
-  }, [rowSelection, onSelectedRowsChange, table])
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center justify-between rounded-lg bg-white p-6 shadow-sm">
-        <InputWithIcon
-          placeholder="Filtrar pelo nome"
-          value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-          onChange={(event) =>
-            table.getColumn('name')?.setFilterValue(event.target.value)
-          }
-          className="w-full min-w-[300px]"
-          icon={<Search size={20} className="text-shadcn-400" />}
-          iconPosition={'left'}
-        />
-
-        {data.length > 10 ? (
-          <div className="flex items-center gap-4">
-            <p className="whitespace-nowrap text-sm font-medium">
-              Itens por página
-            </p>
-            <Select
-              value={`${table.getState().pagination.pageSize}`}
-              onValueChange={(value) => {
-                table.setPageSize(Number(value))
-              }}
-            >
-              <SelectTrigger className="w-16 border border-[#D1D5DB] px-3 py-2 shadow-sm">
-                <SelectValue
-                  placeholder={table.getState().pagination.pageSize}
-                />
-              </SelectTrigger>
-              <SelectContent side="bottom">
-                {pageSizeOptions.map((pageSize) => (
-                  <SelectItem key={pageSize} value={`${pageSize}`}>
-                    {pageSize}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        ) : null}
-      </div>
-
-      <div className="mt-4 rounded-lg bg-white shadow-dataTable">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {enableRowSelection && (
-                  <TableHead>
-                    <Checkbox
-                      checked={table.getIsAllRowsSelected()}
-                      onCheckedChange={(value) =>
-                        table.toggleAllRowsSelected(!!value)
-                      }
-                      aria-label="Select all"
-                    />
-                  </TableHead>
-                )}
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && 'selected'}
-                  className={cn(row.getIsSelected() && 'bg-blue-50')}
-                >
-                  {enableRowSelection && (
-                    <TableCell>
-                      <Checkbox
-                        checked={row.getIsSelected()}
-                        onCheckedChange={(value) => row.toggleSelected(!!value)}
-                        aria-label="Select row"
-                      />
-                    </TableCell>
-                  )}
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length + (enableRowSelection ? 1 : 0)}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-
-        <div className="flex items-center justify-between px-6 py-3">
-          <div>
-            <p className="text-sm font-normal italic text-shadcn-400">
-              Mostrando{' '}
-              <span className="font-bold">
-                {table.getFilteredRowModel().rows.length}
-              </span>{' '}
-              de um total de <span className="font-bold">{data.length}</span>{' '}
-              Ledgers.
-            </p>
-          </div>
-
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-              className={cn(
-                'space-x-1.5',
-                !table.getCanPreviousPage() && 'bg-shadcn-100'
-              )}
-            >
-              <ChevronLeft size={16} />
-              <span>
-                {intl.formatMessage({
-                  id: 'common.previousPage',
-                  defaultMessage: 'Previous page'
-                })}
-              </span>
-            </Button>
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-              className={cn(
-                'space-x-1.5',
-                !table.getCanNextPage() && 'bg-shadcn-100'
-              )}
-            >
-              <span>
-                {intl.formatMessage({
-                  id: 'common.nextPage',
-                  defaultMessage: 'Next page'
-                })}
-              </span>
-              <ChevronRight size={16} />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/entity-data-table/entity-data-table.mdx b/src/components/entity-data-table/entity-data-table.mdx
new file mode 100644
index 00000000..125d9f0f
--- /dev/null
+++ b/src/components/entity-data-table/entity-data-table.mdx
@@ -0,0 +1,13 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './entity-data-table.stories'
+
+<Meta of={Story} />
+
+# EntityDataTable
+
+Component used to wrap Table and show auxiliary information.
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />
diff --git a/src/components/entity-data-table/entity-data-table.stories.tsx b/src/components/entity-data-table/entity-data-table.stories.tsx
new file mode 100644
index 00000000..653bca71
--- /dev/null
+++ b/src/components/entity-data-table/entity-data-table.stories.tsx
@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { EntityDataTable } from '.'
+import {
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Table
+} from '../ui/table'
+
+const meta: Meta<React.HTMLAttributes<HTMLDivElement>> = {
+  title: 'Components/EntityDataTable',
+  component: EntityDataTable.Root,
+  argTypes: {}
+}
+
+export default meta
+
+export const Primary: StoryObj<React.HTMLAttributes<HTMLDivElement>> = {
+  render: (args) => (
+    <EntityDataTable.Root {...args}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Code</TableHead>
+            <TableHead>Metadata</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>American Dolar</TableCell>
+            <TableCell>Coin</TableCell>
+            <TableCell>USD</TableCell>
+            <TableCell>2 registers</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Bitcoin</TableCell>
+            <TableCell>Cripto</TableCell>
+            <TableCell>BTC</TableCell>
+            <TableCell>-</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Tether</TableCell>
+            <TableCell>Cripto</TableCell>
+            <TableCell>USDT</TableCell>
+            <TableCell>4 registers</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <EntityDataTable.Footer>
+        <EntityDataTable.FooterText>
+          Showing 3 items.
+        </EntityDataTable.FooterText>
+      </EntityDataTable.Footer>
+    </EntityDataTable.Root>
+  )
+}
diff --git a/src/components/entity-data-table/index.tsx b/src/components/entity-data-table/index.tsx
new file mode 100644
index 00000000..b989f2b5
--- /dev/null
+++ b/src/components/entity-data-table/index.tsx
@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils'
+import React from 'react'
+import { Paper, PaperProps } from '../ui/paper'
+
+const EntityDataTableRoot = React.forwardRef<HTMLDivElement, PaperProps>(
+  (props) => <Paper {...props} />
+)
+EntityDataTableRoot.displayName = 'EntityDataTable'
+
+const EntityDataTableFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('px-6 py-3', className)} {...props} />
+))
+EntityDataTableFooter.displayName = 'EntityDataTableFooter'
+
+const EntityDataTableFooterText = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm italic leading-8 text-shadcn-400', className)}
+    {...props}
+  />
+))
+EntityDataTableFooterText.displayName = 'EntityDataTableFooterText'
+
+export const EntityDataTable = {
+  Root: EntityDataTableRoot,
+  Footer: EntityDataTableFooter,
+  FooterText: EntityDataTableFooterText
+}
diff --git a/src/components/ui/paper/index.tsx b/src/components/ui/paper/index.tsx
new file mode 100644
index 00000000..f75d1e47
--- /dev/null
+++ b/src/components/ui/paper/index.tsx
@@ -0,0 +1,14 @@
+import { cn } from '@/lib/utils'
+import React from 'react'
+
+export type PaperProps = React.HTMLAttributes<HTMLDivElement>
+
+export const Paper = React.forwardRef<HTMLDivElement, PaperProps>(
+  ({ className, ...others }) => (
+    <div
+      className={cn('rounded-lg bg-white shadow-lg', className)}
+      {...others}
+    />
+  )
+)
+Paper.displayName = 'Paper'
diff --git a/src/components/ui/paper/paper.mdx b/src/components/ui/paper/paper.mdx
new file mode 100644
index 00000000..75af5235
--- /dev/null
+++ b/src/components/ui/paper/paper.mdx
@@ -0,0 +1,15 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './paper.stories'
+
+<Meta of={Story} />
+
+# Paper
+
+Shows a piece of content with a little emphasis and shadow.
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />
diff --git a/src/components/ui/paper/paper.stories.tsx b/src/components/ui/paper/paper.stories.tsx
new file mode 100644
index 00000000..a8930ff9
--- /dev/null
+++ b/src/components/ui/paper/paper.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Paper, PaperProps } from '.'
+
+const meta: Meta<PaperProps> = {
+  title: 'Primitives/Paper',
+  component: Paper,
+  argTypes: {}
+}
+
+export default meta
+
+export const Primary: StoryObj<PaperProps> = {
+  args: {
+    className: 'p-4'
+  },
+  render: (args) => (
+    <Paper {...args}>
+      <p>This is a Paper component!</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi neque
+        dolor, tempus ac scelerisque sed, accumsan eget orci. Donec ac mauris
+        congue, mollis massa vel, sagittis libero.
+      </p>
+    </Paper>
+  )
+}
diff --git a/src/components/ui/table/index.tsx b/src/components/ui/table/index.tsx
index 4b1996a4..ec3a8721 100644
--- a/src/components/ui/table/index.tsx
+++ b/src/components/ui/table/index.tsx
@@ -6,10 +6,7 @@ const TableContainer = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    className={cn('mt-4 rounded-lg bg-white shadow-dataTable', className)}
-    {...props}
-  />
+  <div className={cn('mt-4', className)} {...props} />
 ))
 TableContainer.displayName = 'TableContainer'