diff --git a/src/routes/backoffice/+page.svelte b/src/routes/backoffice/+page.svelte
index 93268e0..a13a8cf 100644
--- a/src/routes/backoffice/+page.svelte
+++ b/src/routes/backoffice/+page.svelte
@@ -9,7 +9,7 @@
         | "vb_timesheet"
         | "vb_inventory"
         | "vb_projects"
-        | "vb_vendors"
+        | "vb_vendor"
         | "vb_employee"
         | "vb_transport"
         | "vb_dinning"
@@ -22,7 +22,7 @@
         vb_timesheet: 0,
         vb_inventory: 0,
         vb_projects: 0,
-        vb_vendors: 0,
+        vb_vendor: 0,
         vb_employee: 0,
         vb_transport: 0,
         vb_dinning: 0,
@@ -73,7 +73,7 @@
         },
         {
             label: "Total Vendor",
-            key: "vb_vendors",
+            key: "vb_vendor",
             color: "text-orange-600",
             icon: "building-storefront",
         },
diff --git a/src/routes/backoffice/inventory/+page.svelte b/src/routes/backoffice/inventory/+page.svelte
index 09852ff..e056a17 100644
--- a/src/routes/backoffice/inventory/+page.svelte
+++ b/src/routes/backoffice/inventory/+page.svelte
@@ -441,10 +441,15 @@
                 <span>📋</span>
                 Inventory Management
             </h2>
-            <p class="text-sm text-gray-600">
+            <p class="text-sm text-gray-600 mb-2">
                 Manage your inventory items, track stock levels, and ensure
                 everything is in order.
             </p>
+            <p class="text-xs text-gray-500 italic mb-2">
+                Note : Tekan tombol Enter untuk menyimpan. <span
+                    class="text-red-500">⚠️</span
+                >
+            </p>
         </div>
         <div class="flex flex-col sm:flex-row sm:items-center gap-2">
             <input
@@ -525,7 +530,7 @@
             <thead class="bg-gray-100">
                 <tr>
                     {#each columns as col}
-                        {#if col.key === "guest_name"}
+                        {#if col.key === "item_name"}
                             <th
                                 class="sticky left-0 px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
                                 style="background-color: #f0f8ff; z-index: 10;"
@@ -544,10 +549,10 @@
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
                 {#each inventoryItems as item}
-                    <tr>
+                    <tr class="hover:bg-gray-100 transition duration-150">
                         {#each columns as col}
-                            <td class="px-4 py-3 whitespace-nowrap">
-                                {#if +col.key >= 1 && +col.key <= 12}
+                            {#if +col.key >= 1 && +col.key <= 12}
+                                <td class="px-4 py-3 whitespace-nowrap">
                                     <input
                                         type="number"
                                         min="0"
@@ -579,21 +584,33 @@
                                             });
                                         }}
                                     />
-                                {:else if col.key === "created_at" || col.key === "updated_at"}
-                                    <td class="px-4 py-2">
-                                        {item[col.key] !== undefined
-                                            ? new Date(
-                                                  item[col.key] as
-                                                      | string
-                                                      | number
-                                                      | Date,
-                                              ).toLocaleString()
-                                            : "N/A"}
-                                    </td>
-                                {:else if col.key === "actions"}
+                                </td>
+                            {:else if col.key === "item_name"}
+                                <td
+                                    class="px-4 py-2 sticky left-0 whitespace-nowrap bg-gray-100 z-10"
+                                >
+                                    <span
+                                        class="font-medium text-gray-800 hover:text-blue-600"
+                                    >
+                                        {item.item_name}
+                                    </span>
+                                </td>
+                            {:else if col.key === "created_at" || col.key === "updated_at"}
+                                <td class="px-4 py-2">
+                                    {item[col.key] !== undefined
+                                        ? new Date(
+                                              item[col.key] as
+                                                  | string
+                                                  | number
+                                                  | Date,
+                                          ).toLocaleString()
+                                        : "N/A"}
+                                </td>
+                            {:else if col.key === "actions"}
+                                <td class="px-4 py-2">
                                     <div class="flex space-x-2">
                                         <button
-                                            class="text-blue-600 hover:underline"
+                                            class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
                                             on:click={() => {
                                                 isEditing = true;
                                                 currentEditingId = item.id;
@@ -615,7 +632,7 @@
                                             ✏️ Edit
                                         </button>
                                         <button
-                                            class="text-red-600 hover:underline"
+                                            class="inline-flex items-center gap-1 rounded bg-red-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-red-700"
                                             on:click={async () => {
                                                 const { error } = await supabase
                                                     .from("vb_inventory")
@@ -645,10 +662,12 @@
                                             🗑️ Delete
                                         </button>
                                     </div>
-                                {:else}
+                                </td>
+                            {:else}
+                                <td class="px-4 py-2">
                                     {item[col.key as keyof Inventory]}
-                                {/if}
-                            </td>
+                                </td>
+                            {/if}
                         {/each}
                     </tr>
                 {:else}
@@ -725,9 +744,6 @@
         </div>
     </div>
 </div>
-<p class="text-xs text-gray-500 italic mb-2">
-    Tekan tombol Enter untuk menyimpan.
-</p>
 
 <!-- Modal -->
 {#if showModal}