diff --git a/scripts/make-dist.mjs b/scripts/make-dist.mjs
index 972eacc..e68f726 100644
--- a/scripts/make-dist.mjs
+++ b/scripts/make-dist.mjs
@@ -32,7 +32,7 @@ export { default as Table } from "../src/components/Table.astro";
 export { default as VideoPlayer } from "../src/components/VideoPlayer.astro";
 export { default as WebRtcPlayer } from "../src/components/WebRtcPlayer.astro";
 export { cn } from "../src/utils/cn.js";
-export type { Column, TableProps } from "../src/types/table/types.js";
+export { Column, TableProps } from "../src/types/table/types.js";
 `;
 
 const indexDts = `/* Auto-generated types (lightweight) */
diff --git a/src/components/Table.astro b/src/components/Table.astro
index 847719d..9240362 100644
--- a/src/components/Table.astro
+++ b/src/components/Table.astro
@@ -7,6 +7,7 @@ const {
     selectable = false,
     search = false,
     striped = false,
+    pagignations = true,
     pageSize = 10,
     fetchData,
     columnsRendererKey,
@@ -31,7 +32,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
 
     <!-- 🖥️ Desktop Table -->
     <div
-        class="wr:overflow-x-auto wr:rounded-xl wr:border wr:dark:border-neutral-700 wr:hidden wr:md:block"
+        class="wr:overflow-x-auto wr:rounded-xl wr:border wr:border-gray-300 wr:dark:border-neutral-700 wr:hidden wr:md:block"
     >
         <table
             class={`wr:w-full wr:text-sm ${striped ? "wr:divide-y wr:divide-gray-200 wr:dark:divide-neutral-700" : ""}`}
@@ -70,110 +71,60 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                     }
                 </tr>
             </thead>
-            <tbody data-body>
-                <!-- {
-                    data.map((row, i) => (
-                        <tr
-                            class={`wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700 ${striped ? "wr:border-b wr:dark:border-neutral-800" : ""}`}
-                        >
-                            {selectable && (
-                                <td class="wr:px-4 wr:py-3">
-                                    <input
-                                        type="checkbox"
-                                        data-row-select
-                                        data-index={i}
-                                    />
-                                </td>
-                            )}
-                            {columns.map((col) => (
-                                <td
-                                    class={`wr:px-4 wr:py-3 ${col.align ? `wr:text-${col.align}` : "wr:text-left"} wr:whitespace-nowrap`}
-                                    data-key={col.key}
-                                >
-                                    {col.render ? (
-                                        <Fragment
-                                            set:html={col.render(
-                                                row[col.key],
-                                                row,
-                                            )}
-                                        />
-                                    ) : (
-                                        String(row[col.key] ?? "")
-                                    )}
-                                </td>
-                            ))}
-                        </tr>
-                    ))
-                } -->
-            </tbody>
+            <tbody data-body> </tbody>
         </table>
     </div>
 
     <!-- 📱 Mobile Cards -->
-    <div class="wr:space-y-4 wr:md:hidden" data-mobile-body>
-        <!-- {
-            data.map((row, i) => (
-                <div class="wr:rounded-lg wr:border wr:border-gray-200 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">
-                    {columns.map((col) => (
-                        <div class="wr:flex wr:justify-between wr:items-start wr:gap-4">
-                            <div class="wr:text-sm wr:font-medium wr:text-gray-600 wr:dark:text-gray-300">
-                                {col.label}
-                            </div>
-                            <div class="wr:text-sm wr:text-gray-800 wr:dark:text-gray-100 wr:text-right wr:max-w-[60%] wr:break-words">
-                                {col.render ? (
-                                    <Fragment
-                                        set:html={col.render(row[col.key], row)}
-                                    />
-                                ) : (
-                                    String(row[col.key] ?? "")
-                                )}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))
-        } -->
-    </div>
+    <div class="wr:space-y-4 wr:md:hidden" data-mobile-body></div>
 
     <!-- 📄 Pagination -->
-    <div
-        class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4"
-    >
-        <div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
-            <span class="wr:text-gray-600 wr:dark:text-gray-400"
-                >Rows per page:</span
-            >
-            <select
-                class="wr:w-[75px] wr:rounded-md wr:border wr:border-gray-300 wr:dark:border-neutral-600 wr:bg-white wr:dark:bg-neutral-800 wr:px-2 wr:py-1 wr:text-sm wr:focus:ring-2 wr:focus:ring-primary"
-                data-page-size
-            >
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-            </select>
-        </div>
+    {
+        pagignations && (
+            <div class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4">
+                <div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
+                    <span class="wr:text-gray-600 wr:dark:text-gray-400">
+                        Rows per page:
+                    </span>
+                    <select
+                        class="wr:w-[75px] wr:rounded-md wr:border wr:border-gray-300 wr:dark:border-neutral-600 wr:bg-white wr:dark:bg-neutral-800 wr:px-2 wr:py-1 wr:text-sm wr:focus:ring-2 wr:focus:ring-primary"
+                        data-page-size
+                    >
+                        <option value="10">10</option>
+                        <option value="25">25</option>
+                        <option value="50">50</option>
+                        <option value="100">100</option>
+                    </select>
+                </div>
 
-        <div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
-            <div
-                class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
-                data-page-info
-            >
-            </div>
+                <div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
+                    <div
+                        class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
+                        data-page-info
+                    />
 
-            <div
-                class="wr:flex wr:items-center wr:gap-1 wr:bg-gray-50 wr:dark:bg-neutral-800 wr:rounded-full wr:px-2 wr:py-1 wr:shadow-sm"
-                data-pagination
-            >
+                    <div
+                        class="wr:flex wr:items-center wr:gap-1 wr:bg-gray-50 wr:dark:bg-neutral-800 wr:rounded-full wr:px-2 wr:py-1 wr:shadow-sm"
+                        data-pagination
+                    />
+                </div>
             </div>
-        </div>
-    </div>
+        )
+    }
 </div>
 
 <script
     type="module"
     is:inline
-    define:vars={{ id, pageSize, fetchData, columns, data, columnsRendererKey }}
+    define:vars={{
+        id,
+        pagignations,
+        pageSize,
+        fetchData,
+        columns,
+        data,
+        columnsRendererKey,
+    }}
 >
     const start = () => {
         const table = document.getElementById(id);
@@ -187,7 +138,9 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
         const pageSizeSelector = table.querySelector("[data-page-size]");
 
         let currentPage = 1;
-        let rowsPerPage = parseInt(pageSizeSelector.value);
+        let rowsPerPage = pagignations
+            ? parseInt(pageSizeSelector.value)
+            : 9999;
         let sortKey = null;
         let sortOrder = "asc";
         let totalRows = data.length;
@@ -212,7 +165,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
 
             dataset.forEach((row) => {
                 // 🖥️ Desktop
-                let tr = `<tr class="wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700 wr:border-b wr:dark:border-neutral-800">`;
+                let tr = `<tr class="wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700 wr:border-b wr:border-gray-300 wr:dark:border-neutral-800">`;
                 columns.forEach((col) => {
                     let value = row[col.key] ?? "";
 
@@ -232,7 +185,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
                 tbody.insertAdjacentHTML("beforeend", tr);
 
                 // 📱 Mobile
-                let card = `<div class="wr:rounded-lg wr:border wr:border-gray-200 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">`;
+                let card = `<div class="wr:rounded-lg wr:border wr:border-gray-300 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">`;
                 columns.forEach((col) => {
                     let value = row[col.key] ?? "";
 
diff --git a/src/types/table/types.ts b/src/types/table/types.ts
index eba83db..9064518 100644
--- a/src/types/table/types.ts
+++ b/src/types/table/types.ts
@@ -15,6 +15,7 @@ export interface TableProps<T> {
     selectable?: boolean;
     search?: boolean;
     striped?: boolean;
+    pagignations?: boolean;
     pageSize?: number
     columnsRendererKey?: string
 }
\ No newline at end of file