diff --git a/src/routes/backoffice/+page.svelte b/src/routes/backoffice/+page.svelte
index b133c71..236c61d 100644
--- a/src/routes/backoffice/+page.svelte
+++ b/src/routes/backoffice/+page.svelte
@@ -6,6 +6,7 @@
         | "vb_purchase_orders"
         | "vb_issues"
         | "vb_villas"
+        | "vb_timesheet"
         | "vb_inventories"
         | "vb_projects"
         | "vb_vendors"
@@ -18,6 +19,7 @@
         vb_purchase_orders: 0,
         vb_issues: 0,
         vb_villas: 0,
+        vb_timesheet: 0,
         vb_inventories: 0,
         vb_projects: 0,
         vb_vendors: 0,
@@ -57,6 +59,12 @@
             color: "text-green-600",
             icon: "home",
         },
+        {
+            label: "Total Timesheet",
+            key: "vb_timesheet",
+            color: "text-gray-800",
+            icon: "clock",
+        },
         {
             label: "Total Inventories",
             key: "vb_inventories",
@@ -113,10 +121,9 @@
 
 <!-- You can extract SVGs from https://heroicons.com or install them via a package for better maintainability -->
 
-<div class="max-w-6xl mx-auto p-6">
-    <h1 class="text-3xl font-bold mb-6 text-gray-800">Dashboard</h1>
+<div class="max-w-7xl mx-auto">
     <div
-        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6"
+        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
     >
         {#each items as item}
             <div
@@ -179,6 +186,20 @@
                             d="M3 12l2-2m0 0l7-7 7 7m-9 2v6m0 0H5a2 2 0 01-2-2v-4a2 2 0 012-2h3m4 6h4a2 2 0 002-2v-4a2 2 0 00-2-2h-3"
                         />
                     </svg>
+                {:else if item.icon === "clock"}
+                    <svg
+                        class="w-8 h-8 mb-2 text-gray-800"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 6v6l4 2m-6 8a9 9 0 100-18 9 9 0 000 18z"
+                        />
+                    </svg>
                 {:else if item.icon === "cube"}
                     <svg
                         class="w-8 h-8 mb-2 text-yellow-500"
diff --git a/src/routes/backoffice/timesheets/+page.svelte b/src/routes/backoffice/timesheets/+page.svelte
index 5fee150..50b6b2a 100644
--- a/src/routes/backoffice/timesheets/+page.svelte
+++ b/src/routes/backoffice/timesheets/+page.svelte
@@ -892,8 +892,8 @@
                     <button
                         on:click={() => changePage(page as number)}
                         class="px-2 py-1 border rounded {page === currentPage
-                            ? 'bg-blue-600 text-white'
-                            : ''}"
+                            ? 'bg-blue-600 text-white border-blue-600'
+                            : 'bg-white border-gray-300 hover:bg-gray-100'}"
                     >
                         {page}
                     </button>