diff --git a/src/app.css b/src/app.css
index 3ff1bf1..19697bf 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,4 +2,9 @@
 table td {
     vertical-align: top;
     text-align: left;
+    word-wrap: break-word;   
+    overflow-wrap: break-word; 
+    /* word-break: break-all;   */
+    white-space: pre-line;   
+    max-width: 20rem;        /* adjust as needed */
 }
\ No newline at end of file
diff --git a/src/lib/Pagination.svelte b/src/lib/Pagination.svelte
new file mode 100644
index 0000000..d0c6c85
--- /dev/null
+++ b/src/lib/Pagination.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  export let totalPages: number = 1;
+  export let currentPage: number = 1;
+  export let goToPage: (page: number) => void;
+
+  // 🗝️ Smart page window logic with ellipsis
+  $: pageWindow = [];
+
+  if (totalPages <= 5) {
+    // For small sets, just show all pages
+    pageWindow = Array(totalPages).fill(0).map((_, i) => i + 1);
+  } else {
+    pageWindow = [1];
+
+    if (currentPage > 3) pageWindow.push("...");
+
+    const start = Math.max(2, currentPage - 1);
+    const end = Math.min(totalPages - 1, currentPage + 1);
+
+    for (let i = start; i <= end; i++) {
+      pageWindow.push(i);
+    }
+
+    if (currentPage < totalPages - 2) pageWindow.push("...");
+
+    pageWindow.push(totalPages);
+  }
+</script>
+
+<div class="flex space-x-1 items-center text-sm">
+  <!-- Previous Button -->
+  <button
+    class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
+    on:click={() => goToPage(currentPage - 1)}
+    disabled={currentPage === 1}
+  >
+    Previous
+  </button>
+
+  <!-- Page Numbers + Ellipsis -->
+  {#each pageWindow as page, i}
+    {#if page === "..."}
+      <span key={i}>...</span>
+    {:else}
+      <button
+        class="px-3 py-1 rounded border text-sm
+          {currentPage === page
+            ? 'bg-blue-600 text-white border-blue-600'
+            : 'bg-white border-gray-300 hover:bg-gray-100'}"
+        on:click={() => goToPage(page)}
+      >
+        {page}
+      </button>
+    {/if}
+  {/each}
+
+  <!-- Next Button -->
+  <button
+    class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
+    on:click={() => goToPage(currentPage + 1)}
+    disabled={currentPage === totalPages}
+  >
+    Next
+  </button>
+</div>
diff --git a/src/routes/backoffice/project/+page.svelte b/src/routes/backoffice/project/+page.svelte
index 4ea5d13..41245e7 100644
--- a/src/routes/backoffice/project/+page.svelte
+++ b/src/routes/backoffice/project/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { supabase } from "$lib/supabaseClient";
+    import Pagination from "$lib/Pagination.svelte";
 
     type Project = {
         id: string;
@@ -55,13 +56,15 @@
         { key: "priority", title: "Priority" },
         { key: "add_to_po", title: "Add to PO" },
         { key: "picture_link", title: "Picture Link" },
-        { key: "need_approval", title: "Need Approval" },
         { key: "area_of_villa", title: "Area of Villa" },
+        { key: "project_status", title: "Status" },
+        { key: "project_comment", title: "Comment" },
         { key: "input_name", title: "Input By" },
         { key: "issue_number", title: "Issue Number" },
         { key: "villa_name", title: "Villa Name" },
         { key: "report_date", title: "Report Date" },
         { key: "project_due_date", title: "Project Due Date" },
+        { key: "need_approval", title: "Need Approval" },
         { key: "updated_at", title: "Updated At" },
         { key: "updated_name", title: "Updated By" },
         { key: "actions", title: "Actions" },
@@ -89,23 +92,50 @@
         received: null,
         po_remark: ""
     };
-    function openEditModal(row) {
-    selectedPO = row;
-
-    editForm = {
-        po_number: row.purchase_order_number || "",
-        issue_name: row.issue_name || "",
-        villa_id: row.villa_id || "",
-        po_status: row.po_status || "",
-        prepared: row.prepared,
-        approved: row.approved,
-        acknowledged: row.acknowledged,
-        completed: row.completed,
-        received: row.received,
-        po_remark: row.po_remark || ""
+    let showProjectEditModal = false;
+    let projectEditForm = {
+        project_number: "",
+        issue_id: "",
+        project_name: "",
+        project_status: "On Progress",
+        project_comment: "",
+        picture_link: "",
+        assigned_to: "",
+        updated_at: "",
+        updated_by: ""
     };
 
-    showEditModal = true;
+    function openProjectEditModal(row) {
+        projectEditForm = {
+            project_number: row.project_number || "",
+            issue_id: row.issue_id || "",
+            project_name: row.project_name || "",
+            project_status: row.project_status || "On Progress",
+            project_comment: row.project_comment || "",
+            picture_link: row.picture_link || "",
+            assigned_to: row.assigned_to || "",
+            updated_at: new Date().toISOString(),
+            updated_by: row.updated_by || ""
+        };
+        showProjectEditModal = true;
+    }
+    function openEditModal(row) {
+        selectedPO = row;
+
+        editForm = {
+            po_number: row.purchase_order_number || "",
+            issue_name: row.issue_name || "",
+            villa_id: row.villa_id || "",
+            po_status: row.po_status || "",
+            prepared: row.prepared,
+            approved: row.approved,
+            acknowledged: row.acknowledged,
+            completed: row.completed,
+            received: row.received,
+            po_remark: row.po_remark || ""
+        };
+
+        showEditModal = true;
     }
 
 
@@ -563,6 +593,45 @@
         imagePreviewUrl = null;
         selectedFile = null;
     }
+    async function saveProjectEdit() {
+        const session = await supabase.auth.getSession();
+        const user = session?.data?.session?.user;
+
+        if (!user) {
+            console.error("User not authenticated");
+            alert("You must be logged in to edit this project.");
+            return;
+        }
+
+        // Format date
+        const today = new Date();
+        const formattedDate = `${today.getMonth() + 1}/${today.getDate()}/${today.getFullYear()}`;
+
+        const { error } = await supabase
+            .from("vb_projects")
+            .update({
+            project_name: projectEditForm.project_name,
+            project_status: projectEditForm.project_status,
+            project_comment: projectEditForm.project_comment,
+            picture_link: projectEditForm.picture_link,
+            assigned_to: projectEditForm.assigned_to,
+            updated_at: formattedDate,
+            updated_by: user.id  // ✅ real user info
+            })
+            .eq("project_number", projectEditForm.project_number);
+
+        if (error) {
+            console.error("Error saving project:", error);
+            alert("Failed to save changes.");
+            return;
+        }
+
+        showProjectEditModal = false;
+        await fetchProjects();
+    }
+
+
+
 
     async function deleteProject(id: string) {
         const confirmed = confirm("Are you sure you want to delete this project? This action cannot be undone.");
@@ -714,24 +783,23 @@
                                 </td>
                             {:else if col.key === "actions"}
                                 <td class="px-4 py-2">
-                                    <td class="px-4 py-2">
-                                        <button
-                                          class="inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs font-medium 
-                                            {row.purchase_order_exists ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700'}"
-                                          on:click={() => openModal(row)}
-                                          disabled={row.purchase_order_exists}
-                                        >
-                                          ✏️ Edit
-                                        </button>
-                                        <button
-                                          class="inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs font-medium 
-                                            {row.purchase_order_exists ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-red-600 text-white hover:bg-red-700'}"
-                                          on:click={() => deleteProject(row.id)}
-                                          disabled={row.purchase_order_exists}
-                                        >
-                                          🗑️ Delete
-                                        </button>
-                                    </td>
+                                    <button
+                                    class="inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs font-medium 
+                                        {row.purchase_order_exists ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700'}"
+                                    on:click={() => openProjectEditModal(row)}
+                                    disabled={row.purchase_order_exists}
+                                    >
+                                    ✏️ Edit
+                                    </button>
+                                    <button
+                                    class="inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs font-medium 
+                                        {row.purchase_order_exists ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-red-600 text-white hover:bg-red-700'}"
+                                    on:click={() => deleteProject(row.id)}
+                                    disabled={row.purchase_order_exists}
+                                    >
+                                    🗑️ Delete
+                                    </button>
+                                </td>
                             {:else if col.key === "add_to_po"}
                             <td class="px-4 py-2 text-center">
                                 {#if row.purchase_order_exists}
@@ -812,7 +880,7 @@
                                     {/if}
                                 </td>
                             {:else}
-                                <td class="px-4 py-2 text-gray-700"
+                                <td class="px-4 py-2 text-gray-700  max-w-xs whitespace-normal align-top break-words left-0 "
                                     >{row[col.key as keyof Projects]}</td
                                 >
                             {/if}
@@ -826,38 +894,10 @@
     <!-- Pagination controls -->
     <div class="flex justify-between items-center text-sm">
         <div>
-            Showing {(currentPage - 1) * rowsPerPage + 1}–
-            {Math.min(currentPage * rowsPerPage, allRows.length)} of {allRows.length}
-        </div>
-        <div class="space-x-2">
-            <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
-                on:click={() => goToPage(currentPage - 1)}
-                disabled={currentPage === 1}
-            >
-                Previous
-            </button>
-            {#each Array(totalPages)
-                .fill(0)
-                .map((_, i) => i + 1) as page}
-                <button
-                    class="px-3 py-1 rounded border text-sm
-                        {currentPage === page
-                        ? 'bg-blue-600 text-white border-blue-600'
-                        : 'bg-white border-gray-300 hover:bg-gray-100'}"
-                    on:click={() => goToPage(page)}
-                >
-                    {page}
-                </button>
-            {/each}
-            <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
-                on:click={() => goToPage(currentPage + 1)}
-                disabled={currentPage === totalPages}
-            >
-                Next
-            </button>
-        </div>
+            Showing {(currentPage - 1) * rowsPerPage + 1}–{Math.min(currentPage * rowsPerPage, allRows.length)}
+            of {allRows.length}
+          </div>
+          <Pagination {totalPages} {currentPage} {goToPage} />
     </div>
 </div>
 
@@ -1087,4 +1127,67 @@
       </div>
     </div>
   </div>
-{/if}
\ No newline at end of file
+{/if}
+{#if showProjectEditModal}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
+    <div class="min-h-screen flex items-center justify-center p-4">
+      <div class="bg-white rounded-lg shadow-lg w-full max-w-xl max-h-[90vh] overflow-y-auto p-6 space-y-6">
+
+        <h2 class="text-2xl font-semibold">Edit Project</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Left -->
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Project Number</label>
+              <input type="text" value={projectEditForm.project_number} disabled class="w-full border p-2 bg-gray-100 rounded" />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Issue ID</label>
+              <input type="text" value={projectEditForm.issue_id} disabled class="w-full border p-2 bg-gray-100 rounded" />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Project Name</label>
+              <input type="text" bind:value={projectEditForm.project_name} class="w-full border p-2 rounded" />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Project Status</label>
+              <select bind:value={projectEditForm.project_status} class="w-full border p-2 rounded">
+                <option value="On Progress">On Progress</option>
+                <option value="Done">Done</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Right -->
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Picture Link</label>
+              <input type="text" bind:value={projectEditForm.picture_link} class="w-full border p-2 rounded" />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Assigned To</label>
+              <input type="text" bind:value={projectEditForm.assigned_to} class="w-full border p-2 rounded" />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Project Comment</label>
+              <textarea bind:value={projectEditForm.project_comment} rows="4" class="w-full border p-2 rounded"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 pt-4">
+          <button on:click={saveProjectEdit} class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save</button>
+          <button on:click={() => showProjectEditModal = false} class="px-4 py-2 rounded border">Cancel</button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+{/if}
+
diff --git a/src/routes/backoffice/timesheets/+page.svelte b/src/routes/backoffice/timesheets/+page.svelte
index 6bf5e44..79e1501 100644
--- a/src/routes/backoffice/timesheets/+page.svelte
+++ b/src/routes/backoffice/timesheets/+page.svelte
@@ -2,7 +2,7 @@
     import { supabase } from "$lib/supabaseClient";
     import { onMount } from "svelte";
     import { writable } from "svelte/store";
-
+    import Pagination from "$lib/Pagination.svelte";
     
     type Timesheets = {
         id: number;
@@ -27,6 +27,9 @@
         approved_date?: Date;
         created_at?: Date;
     };
+    type TimesheetsJoined = Timesheets & {
+        vb_employee: { id: string; employee_name: string } | null;
+    };    
     type TimesheetDisplay = {
         id: number;
         name: string;
@@ -82,7 +85,6 @@
         name: string;
     };
 
-
     const categoryOfWork = [
         { label: "Cleaning", value: "Cleaning" },
         { label: "Gardening/Pool", value: "Gardening/Pool" },
@@ -129,12 +131,13 @@
     ];
 
     // reactive variables
+    let sortColumn: string | null = "created_at";
+    let sortOrder: "asc" | "desc" = "desc";
     let currentUserId: string | null = null;
     let currentVillaFilter: string | null = null;
     let currentSearchTerm: string | null = null;
     let dataVilla: Villa[] = [];
     let allRows: TimesheetDisplay[] = [];
-    let currentPage = 1;
     let rowsPerPage = 20;
     $: totalPages = Math.ceil(allRows.length / rowsPerPage);
     $: paginatedRows = allRows.slice(
@@ -199,6 +202,16 @@
 
         fetchTimeSheets(); 
     });
+    // Reactive variables for sorting
+    function toggleSort(column: string) {
+        if (sortColumn === column) {
+            sortOrder = sortOrder === "asc" ? "desc" : "asc";
+        } else {
+            sortColumn = column;
+            sortOrder = "asc";
+        }
+        fetchTimeSheets(); // re-fetch with new sort
+    }
 
     // Function to calculate total work hours
     function calculateTotalHours() {
@@ -259,57 +272,48 @@
 
         showModal = true;
     }
-    // Function to validate the form data
-    function validateForm(formData: FormData): boolean {
-        const errors: { [key: string]: string } = {};
-        const requiredFields = [
-            "work_description",
-            "type_of_work",
-            "category_of_work",
-            "villa_id",
-            "date_in",
-            "date_out",
-            "remarks",
-        ];
-
-        requiredFields.forEach((field) => {
-            if (!formData.get(field) || formData.get(field) === "") {
-                errors[field] = `${field.replace(/_/g, " ")} is required.`;
-            }
-        });
-
-        formErrors.set(errors);
-        return Object.keys(errors).length === 0;
-    }
     // Function to fetch timesheets with optional filters and sorting
     async function fetchTimeSheets(
         villaIdFilter: string | null = null,
         searchTerm: string | null = null,
-        sortColumn: string | null = "created_at",
-        sortOrder: "asc" | "desc" = "desc",
         offset: number = 0,
         limit: number = 1000,
-    ) {
+        ) {
+        let reportedBy: { label: string; value: string }[] = [];
+        const { data: staffData, error: staffError } = await supabase
+            .from("vb_employee")
+            .select("id, employee_name")
+            .eq("employee_status", "Active")
+            .order("employee_name", { ascending: true });
+
+        if (staffError) {
+            console.error("Error fetching staff:", staffError);
+        } else if (staffData) {
+            reportedBy = staffData.map((s) => ({
+            label: s.employee_name,
+            value: s.id,
+            }));
+        }
+
         let query = supabase
             .from("vb_timesheet")
-            .select("*", { count: "exact" })
+            .select(`*`)
             .order(sortColumn || "created_at", {
-                ascending: sortOrder === "asc",
-        });
+            ascending: sortOrder === "asc",
+            });
+
         if (villaIdFilter) {
             const { data: villaMatch } = await supabase
-                .from("vb_villas")
-                .select("id")
-                .eq("villa_name", villaIdFilter);
+            .from("vb_villas")
+            .select("id")
+            .eq("villa_name", villaIdFilter);
 
             const matchedId = villaMatch?.[0]?.id;
             if (matchedId) {
-                query = query.eq("villa_id", matchedId);
+            query = query.eq("villa_id", matchedId);
             }
         }
-        if (searchTerm) {
-            query = query.ilike("work_description", `%${searchTerm}%`);
-        }
+
         if (offset) {
             query = query.range(offset, offset + limit - 1);
         }
@@ -322,80 +326,77 @@
             return;
         }
 
-        const villaIds = [
-            ...new Set(timesheet.map((i: Timesheets) => i.villa_id)),
-        ];
+        const loweredSearch = searchTerm?.toLowerCase();
+        let filteredTimesheet = timesheet;
+        if (loweredSearch) {
+            filteredTimesheet = timesheet.filter((ts) => {
+            const workDesc = ts.work_description?.toLowerCase() || "";
+            const staffName = reportedBy.find((s) => s.value === ts.entered_by)?.label?.toLowerCase() || "";
+            return (
+                workDesc.includes(loweredSearch) ||
+                staffName.includes(loweredSearch)
+            );
+            });
+        }
 
-        const { data: villas, error: villaError } = await supabase
+        const villaIds = [...new Set(filteredTimesheet.map((i: Timesheets) => i.villa_id))];
+        let villas = [];
+        if (villaIds.length > 0) {
+            const { data: villasData, error: villaError } = await supabase
             .from("vb_villas")
             .select("*")
             .in("id", villaIds);
 
-        if (villaError) {
+            if (villaError) {
             console.error("Error fetching villas:", villaError);
-            return;
+            } else {
+            villas = villasData;
+            }
         }
-
         const { data: approvers, error: approverError } = await supabase
-            .from("vb_users") // or vb_employee if you store them there
+            .from("vb_users")
             .select("id, full_name");
 
         if (approverError) {
             console.error("Error fetching approvers:", approverError);
         }
-
-        let reportedBy: { label: string; value: string }[] = [];
-        const { data: staffData, error: staffError } = await supabase
-            .from("vb_employee")
-            .select("id, employee_name")
-            .eq("employee_status", "Active")
-            .order("employee_name", { ascending: true });
-        if (staffError) {
-            console.error("Error fetching staff:", staffError);
-        } else if (staffData) {
-            reportedBy = staffData.map((s) => ({
-                label: s.employee_name,
-                value: s.id,
-            }));
-        }
-
-        allRows = timesheet.map((tsdata: Timesheets) => {
+        allRows = filteredTimesheet.map((tsdata: TimesheetsJoined) => {
             const villa = villas.find((v) => v.id === tsdata.villa_id);
-            // Map entered_by to staff_id
-            const staff = reportedBy.find((s) => s.value === tsdata.entered_by);
             const approver = approvers?.find((u) => u.id === tsdata.approved_by);
 
             return {
-                id: tsdata.id,
-                name: tsdata.work_description, // Map work_description to name
-                staff_id: staff?.label, // Map entered_by to staff_id
-                date_in: new Date(tsdata.datetime_in),
-                date_out: new Date(tsdata.datetime_out),
-                type_of_work: tsdata.type_of_work,
-                category_of_work: tsdata.category_of_work,
-                villa_name: villa ? villa.villa_name : "Unknown Villa",
-                approval:
-                    tsdata.approval == null
-                        ? "PENDING"
-                        : tsdata.approval
-                          ? "APPROVED"
-                          : "REJECTED", // or map as needed
-                total_hours_work:
-                    Math.abs(
-                        new Date(tsdata.datetime_out).getTime() -
-                            new Date(tsdata.datetime_in).getTime(),
-                    ) /
-                    (1000 * 60 * 60), // Convert milliseconds to hours
-                approved_by: approver?.full_name ?? "Not Approved",
-                approved_date: tsdata.approved_date,
-                remarks: tsdata.remarks,
-                created_at: tsdata.created_at
-                    ? new Date(tsdata.created_at)
-                    : undefined,
+            id: tsdata.id,
+            name: tsdata.work_description,
+            staff_id:
+                reportedBy.find((s) => s.value === tsdata.entered_by)?.label || "Unknown",
+            date_in: new Date(tsdata.datetime_in),
+            date_out: new Date(tsdata.datetime_out),
+            type_of_work: tsdata.type_of_work,
+            category_of_work: tsdata.category_of_work,
+            villa_name: villa ? villa.villa_name : "Unknown Villa",
+            approval:
+                tsdata.approval == null
+                ? "PENDING"
+                : tsdata.approval
+                    ? "APPROVED"
+                    : "REJECTED",
+            total_hours_work:
+                Math.abs(
+                new Date(tsdata.datetime_out).getTime() - new Date(tsdata.datetime_in).getTime()
+                ) / (1000 * 60 * 60),
+            approved_by: approver?.full_name ?? "Not Approved",
+            approved_date: tsdata.approved_date,
+            remarks: tsdata.remarks,
+            created_at: tsdata.created_at ? new Date(tsdata.created_at) : undefined,
             } as TimesheetDisplay;
         });
-        // Sort the rows based on the sortColumn and sortOrder
+        currentPage = 1;
+
+        console.log("Fetched rows:", allRows);
     }
+
+
+
     // Function to delete a timesheet
     async function deleteTimesheet(id: string) {
         if (confirm("Are you sure you want to delete this Timesheet?")) {
@@ -491,7 +492,6 @@
         }
     }
 
-    export let formErrors = writable<{ [key: string]: string }>({});
 
 </script>
 
@@ -571,9 +571,13 @@
                             </th>
                         {:else}
                             <th
-                                class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
+                                class="cursor-pointer px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap" on:click={() => toggleSort(col.key)}
                             >
+                            
                                 {col.title}
+                                    {#if sortColumn === col.key}
+                                    {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
+                                {/if}
                             </th>
                         {/if}
                     {/each}
@@ -634,7 +638,15 @@
                                               row[
                                                   col.key as keyof TimesheetDisplay
                                               ] as string | number | Date,
-                                          ).toLocaleDateString()
+                                          ).toLocaleDateString("en-GB", {
+                                            timeZone: "Asia/Singapore",
+                                            day: "2-digit",
+                                            month: "2-digit",
+                                            year: "numeric",
+                                            hour: "2-digit",
+                                            minute: "2-digit",
+                                            hour12: false,
+                                            })
                                         : "N/A"}
                                 </td>
                             {:else if col.key === "total_hours_work"}
@@ -646,7 +658,18 @@
                                     {row[col.key] !== undefined
                                         ? new Date(
                                               row[col.key]!,
-                                          ).toLocaleDateString()
+                                          ).toLocaleDateString(
+                                            "en-GB",
+                                              {
+                                                timeZone: "Asia/Singapore",
+                                                day: "2-digit",
+                                                month: "2-digit",
+                                                year: "numeric",
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                                hour12: false,
+                                              },
+                                          )
                                         : "N/A"}
                                 </td>
                             {:else if col.key === "villa_name"}
@@ -684,12 +707,13 @@
                                         ? new Date(row[col.key]).toLocaleString(
                                               "en-GB",
                                               {
-                                                  day: "2-digit",
-                                                  month: "2-digit",
-                                                  year: "numeric",
-                                                  hour: "2-digit",
-                                                  minute: "2-digit",
-                                                  hour12: false,
+                                                timeZone: "Asia/Singapore",
+                                                day: "2-digit",
+                                                month: "2-digit",
+                                                year: "numeric",
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                                hour12: false,
                                               },
                                           )
                                         : "N/A"}
@@ -709,39 +733,11 @@
     <!-- Pagination controls -->
     <div class="flex justify-between items-center text-sm">
         <div>
-            Showing {(currentPage - 1) * rowsPerPage + 1}–
-            {Math.min(currentPage * rowsPerPage, allRows.length)} of {allRows.length}
+          Showing {(currentPage - 1) * rowsPerPage + 1}–{Math.min(currentPage * rowsPerPage, allRows.length)}
+          of {allRows.length}
         </div>
-        <div class="space-x-2">
-            <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
-                on:click={() => goToPage(currentPage - 1)}
-                disabled={currentPage === 1}
-            >
-                Previous
-            </button>
-            {#each Array(totalPages)
-                .fill(0)
-                .map((_, i) => i + 1) as page}
-                <button
-                    class="px-3 py-1 rounded border text-sm
-                        {currentPage === page
-                        ? 'bg-blue-600 text-white border-blue-600'
-                        : 'bg-white border-gray-300 hover:bg-gray-100'}"
-                    on:click={() => goToPage(page)}
-                >
-                    {page}
-                </button>
-            {/each}
-            <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
-                on:click={() => goToPage(currentPage + 1)}
-                disabled={currentPage === totalPages}
-            >
-                Next
-            </button>
-        </div>
-    </div>
+        <Pagination {totalPages} {currentPage} {goToPage} />
+      </div>
 </div>
 
 <!-- Modal -->