diff --git a/src/components/builder-tabel.astro b/src/components/builder-tabel.astro
deleted file mode 100755
index 2c63d3f..0000000
--- a/src/components/builder-tabel.astro
+++ /dev/null
@@ -1,199 +0,0 @@
----
-import {builderData} from "src/javascript/builderData"
-const itemsPerPage = 40;
-const totalPages = Math.ceil(builderData.length / itemsPerPage);
----
-<style is:inline>
-  .done{
-  color: #4FDF0C;
-}
-.fail{
-  color: #AB0300;
-}
-</style>
-<style>
-  .sl-container{
-    max-width: 90% !important;
-  }
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 20px 0;
-    font-size: 1em;
-    display: inline-table !important;
-    margin-bottom: 0 !important;
-  }
-
-  thead tr {
-    color: white;
-    text-align: left;
-  }
-
-  :global([data-theme="light"]) thead tr {
-    background-color: #f4c542;
-  }
-
-  :global([data-theme="dark"]) thead tr {
-    background-color: #9e9eff;
-  }
-
-  th,
-  td {
-    padding: 12px 15px;
-  }
-
-  :global([data-theme="dark"]) .completed span a {
-    color: hsl(234, 100%, 87%) !important;
-  }
-
-  :global([data-theme="light"]) .package {
-    color: #f4c542 !important;
-  }
-
-  :global([data-theme="dark"]) .package {
-    color: #9e9eff !important;
-  }
-
-  /* Your existing table styles here */
-
-  .pagination {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 0 !important;
-    padding-block: 16px;
-  }
-
-  :global([data-theme="light"]) .pagination {
-    background: transparent;
-    border-block: 1px solid;
-  }
-
-  :global([data-theme="dark"]) .pagination {
-    background: rgba(52, 56, 65, 0.2);
-  }
-
-  .pagination a {
-    float: left;
-    padding: 8px 12px;
-    text-decoration: none !important;
-    border: none;
-    margin: 0 2px;
-    transition:
-      background-color 0.3s,
-      color 0.3s;
-  }
-
-  /* Corrected active state selector */
-  .pagination a.active {
-    color: #fff !important;
-    text-decoration: none !important;
-    background-color: #333; /* You can adjust this color */
-  }
-
-  .pagination a:hover:not(.active) {
-    background-color: #333;
-    color: #fff;
-  }
-
-  /* Add these styles for light and dark theme active states */
-  :global([data-theme="light"]) .pagination a.active {
-    background-color: #f4c542;
-    color: #fff !important;
-  }
-
-  :global([data-theme="dark"]) .pagination a.active {
-    background-color: #9e9eff;
-    color: #000 !important;
-  }
-</style>
-<div style={{ width: "100%", overflowX: "auto" }}>
-  <table id="dataTable">
-    <thead>
-      <tr>
-        <th>Package Name</th>
-        <th>Repository</th>
-        <th>Status i686</th>
-        <th>Status x86_64</th>
-        <th>Status ARMv6h</th>
-        <th>Status ARMv7h</th>
-        <th>Status AArch64</th>
-      </tr>
-    </thead>
-    <tbody>
-      {builderData.map((row, index) => (
-        <tr>
-          <td class="package">{row.PackageName}</td>
-          <td set:html={row.Repository}></td>
-          <td set:html={row.Statusi686}></td>
-          <td set:html={row.Statusx86_64}></td>
-          <td set:html={row.StatusARMv6h}></td>
-          <td set:html={row.StatusARMv7h}></td>
-          <td set:html={row.StatusAArch64}></td>
-        </tr>
-      ))}
-    </tbody>
-  </table>
-  <div class="pagination" id="pagination"></div>
-</div>
-
-<script define:vars={{ data: JSON.stringify(builderData) }}>
-  const tableData = JSON.parse(data);
-  const itemsPerPage = 40;
-
-  function showPage(pageNumber) {
-    const table = document.getElementById("dataTable");
-    const tbody = table.querySelector("tbody");
-    const startIndex = (pageNumber - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage;
-
-    tbody.innerHTML = "";
-
-    for (let i = startIndex; i < endIndex && i < tableData.length; i++) {
-      const row = tableData[i];
-      const tr = document.createElement("tr");
-      tr.innerHTML = `
-        <td class="package">${row.PackageName}</td>
-          <td>${row.Repository}</td>
-          <td>${row.Statusi686}</td>
-          <td>${row.Statusx86_64}</td>
-          <td>${row.StatusARMv6h}</td>
-          <td>${row.StatusARMv7h}</td>
-          <td>${row.StatusAArch64}</td>
-      `;
-      tbody.appendChild(tr);
-    }
-  }
-
-  function setupPagination() {
-    const paginationElement = document.getElementById("pagination");
-    const pageCount = Math.ceil(tableData.length / itemsPerPage);
-
-    for (let i = 1; i <= pageCount; i++) {
-      const link = document.createElement("a");
-      link.href = "#";
-      link.innerText = i;
-
-      link.addEventListener("click", (e) => {
-        e.preventDefault();
-        showPage(i);
-        const currentActive = paginationElement.querySelector(".active");
-        if (currentActive) {
-          currentActive.classList.remove("active");
-        }
-        link.classList.add("active");
-      });
-
-      paginationElement.appendChild(link);
-    }
-
-    // Show the first page by default
-    showPage(1);
-    paginationElement.querySelector("a").classList.add("active");
-  }
-
-  // Call the setup function when the DOM is loaded
-  document.addEventListener("DOMContentLoaded", setupPagination);
-</script>
-
-
diff --git a/src/components/package-tabel.astro b/src/components/package-tabel.astro
deleted file mode 100755
index 4621136..0000000
--- a/src/components/package-tabel.astro
+++ /dev/null
@@ -1,186 +0,0 @@
----
-import {packagesdata} from "src/javascript/packagesData"
-
-const itemsPerPage = 40;
-const totalPages = Math.ceil(packagesdata.length / itemsPerPage);
----
-
-<div style={{ width: "100%", overflowX: "auto" }}>
-  <table id="dataTable">
-    <thead>
-      <tr>
-        <th>Package</th>
-        <th>Version</th>
-        <th>Category</th>
-        <th>Description</th>
-        <th>Repository</th>
-      </tr>
-    </thead>
-    <tbody>
-      {
-        packagesdata.map((row, index) => (
-          <tr>
-            <td class="package">{row.package}</td>
-            <td>{row.version}</td>
-            <td>{row.category}</td>
-            <td>{row.description}</td>
-            <td>{row.repository}</td>
-          </tr>
-        ))
-      }
-    </tbody>
-  </table>
-  <div class="pagination" id="pagination"></div>
-</div>
-
-<script define:vars={{ data: JSON.stringify(packagesdata) }}>
-  const tableData = JSON.parse(data);
-  const itemsPerPage = 40;
-
-  function showPage(pageNumber) {
-    const table = document.getElementById("dataTable");
-    const tbody = table.querySelector("tbody");
-    const startIndex = (pageNumber - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage;
-
-    tbody.innerHTML = "";
-
-    for (let i = startIndex; i < endIndex && i < tableData.length; i++) {
-      const row = tableData[i];
-      const tr = document.createElement("tr");
-      tr.innerHTML = `
-        <td class="package">${row.package}</td>
-        <td>${row.version}</td>
-        <td>${row.category}</td>
-        <td>${row.description}</td>
-        <td>${row.repository}</td>
-      `;
-      tbody.appendChild(tr);
-    }
-  }
-
-  function setupPagination() {
-    const paginationElement = document.getElementById("pagination");
-    const pageCount = Math.ceil(tableData.length / itemsPerPage);
-
-    for (let i = 1; i <= pageCount; i++) {
-      const link = document.createElement("a");
-      link.href = "#";
-      link.innerText = i;
-
-      link.addEventListener("click", (e) => {
-        e.preventDefault();
-        showPage(i);
-        const currentActive = paginationElement.querySelector(".active");
-        if (currentActive) {
-          currentActive.classList.remove("active");
-        }
-        link.classList.add("active");
-      });
-
-      paginationElement.appendChild(link);
-    }
-
-    // Show the first page by default
-    showPage(1);
-    paginationElement.querySelector("a").classList.add("active");
-  }
-
-  // Call the setup function when the DOM is loaded
-  document.addEventListener("DOMContentLoaded", setupPagination);
-</script>
-
-<style>
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 20px 0;
-    font-size: 1em;
-    display: inline-table !important;
-    margin-bottom: 0 !important;
-  }
-
-  thead tr {
-    color: white;
-    text-align: left;
-  }
-
-  :global([data-theme="light"]) thead tr {
-    background-color: #f4c542;
-  }
-
-  :global([data-theme="dark"]) thead tr {
-    background-color: #9e9eff;
-  }
-
-  th,
-  td {
-    padding: 12px 15px;
-  }
-
-  :global([data-theme="dark"]) .completed span a {
-    color: hsl(234, 100%, 87%) !important;
-  }
-
-  :global([data-theme="light"]) .package {
-    color: #f4c542 !important;
-  }
-
-  :global([data-theme="dark"]) .package {
-    color: #9e9eff !important;
-  }
-
-
-  /* Your existing table styles here */
-
-  .pagination {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 0 !important;
-    padding-block: 16px;
-  }
-
-  :global([data-theme="light"]) .pagination {
-    background: transparent;
-    border-block: 1px solid;
-  }
-
-  :global([data-theme="dark"]) .pagination {
-    background: rgba(52, 56, 65, 0.2);
-  }
-
-  .pagination a {
-    float: left;
-    padding: 8px 12px;
-    text-decoration: none !important;
-    border: none;
-    margin: 0 2px;
-    transition:
-      background-color 0.3s,
-      color 0.3s;
-  }
-
-  /* Corrected active state selector */
-  .pagination a.active {
-    color: #fff !important;
-    text-decoration: none !important;
-    background-color: #333; /* You can adjust this color */
-  }
-
-  .pagination a:hover:not(.active) {
-    background-color: #333;
-    color: #fff;
-  }
-
-  /* Add these styles for light and dark theme active states */
-  :global([data-theme="light"]) .pagination a.active {
-    background-color: #f4c542;
-    color: #fff !important;
-  }
-
-  :global([data-theme="dark"]) .pagination a.active {
-    background-color: #9e9eff;
-    color: #000 !important;
-  }
-</style>
diff --git a/src/components/package-table.astro b/src/components/package-table.astro
index daf7641..c125fd5 100755
--- a/src/components/package-table.astro
+++ b/src/components/package-table.astro
@@ -7,6 +7,7 @@ type Package = {
   documentId: string;
   package_name: string;
   version: string;
+  category: string;
   description: string;
   repository: string;
   createdAt: string;
@@ -57,20 +58,20 @@ let totalPackages = apiResponse.meta.pagination.total;
             >
             <th
               scope="col"
-              class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
-              >Description</th
+              class="relative py-3.5 pl-3 pr-4 sm:pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
             >
+              Category
+            </th>
             <th
               scope="col"
               class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
-              >Repository</th
+              >Description</th
             >
             <th
               scope="col"
-              class="relative py-3.5 pl-3 pr-4 sm:pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+              class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+              >Repository</th
             >
-              Category
-            </th>
           </tr>
         </thead>
         <tbody class="" id="dataRows">
@@ -83,15 +84,15 @@ let totalPackages = apiResponse.meta.pagination.total;
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                   {p.version}
                 </td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-xs font-medium sm:pr-3 text-gray-500 dark:text-gray-400">
+                  {p.category}
+                </td>
                 <td class="whitespace-wrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
                   {p.description}
                 </td>
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                   {p.repository}
                 </td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-xs font-medium sm:pr-3 text-gray-500 dark:text-gray-400">
-                  Automation
-                </td>
               </tr>
             ))
           }
@@ -146,15 +147,15 @@ let totalPackages = apiResponse.meta.pagination.total;
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                   ${p.version}
                 </td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-xs font-medium sm:pr-3 text-gray-500 dark:text-gray-400">
+                  ${p.category}
+                </td>
                 <td class="whitespace-wrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
                   ${p.description}
                 </td>
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                   ${p.repository}
                 </td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-xs font-medium sm:pr-3 text-gray-500 dark:text-gray-400">
-                  Automation
-                </td>
       `;
       dataRows.appendChild(tr);
     });