diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index df7eca6..cf21122 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -10,7 +10,7 @@
 
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
       <div v-for="tray in filteredTrays" :key="tray.id"
-        class="border rounded-lg p-4 shadow-sm hover:shadow-md transition">
+        class="border border-C rounded-lg p-4 shadow-sm hover:shadow-md transition">
         <div class="flex justify-between items-center mb-3">
           <h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
           <div class="flex gap-2">
@@ -24,7 +24,7 @@
         </div>
 
         <div v-if="tray.items && tray.items.length > 0" class="space-y-2 max-h-64 overflow-y-auto pr-2">
-          <div v-for="item in tray.items" :key="item.id" class="flex justify-between items-center border rounded-lg p-2"
+          <div v-for="item in tray.items" :key="item.id" class="flex justify-between items-center border border-C rounded-lg p-2"
             @click="openMovePopup(item)">
 
             <div class="flex items-center gap-3">
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 0a9400e..1184871 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -57,11 +57,11 @@
       @click.self="closeOverlay"
     >
       <div
-        class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
+        class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
       >
         <!-- Foto Produk -->
         <div
-          class="relative w-72 h-72 border border-[#e6d3b3] flex items-center justify-center mb-3 overflow-hidden rounded"
+          class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
         >
           <img
             v-if="detail.foto && detail.foto.length > 0"
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index 360b29a..39a166e 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -1,6 +1,6 @@
 <template>
   <mainLayout>
-    
+
     <!-- Header -->
 <div class="mb-4">
   <!-- Judul -->
@@ -18,15 +18,15 @@
   <!-- Tombol -->
   <div class="flex gap-2 mt-3 justify-end">
     <!-- Tambah Nampan -->
-    <button 
-      @click="openModal" 
+    <button
+      @click="openModal"
       class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
       Tambah Nampan
     </button>
 
     <!-- Kosongkan -->
-    <button 
-      @click="openConfirmModal" 
+    <button
+      @click="openConfirmModal"
       class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
       Kosongkan
     </button>
@@ -36,35 +36,35 @@
 
 
     <!-- Search + List -->
-    
+
     <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
 
     <!-- Modal Tambah/Edit Nampan -->
-    <div 
-      v-if="showModal" 
-      class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
+    <div
+      v-if="showModal"
+      class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
     >
       <div class="bg-white rounded-lg shadow-lg p-6 w-96">
         <h2 class="text-lg font-semibold mb-4" style="color: #102C57;">Tambah Nampan</h2>
 
         <label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
-        <input 
-          v-model="trayName" 
-          type="text" 
-          placeholder="Contoh: A4" 
+        <input
+          v-model="trayName"
+          type="text"
+          placeholder="Contoh: A4"
           class="w-full border rounded-md p-2 mb-4"
         />
 
         <div class="flex justify-end gap-2">
-          <button 
-            @click="closeModal" 
+          <button
+            @click="closeModal"
             class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
             Cancel
           </button>
 
-          <button 
-            @click="saveTray" 
-            class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md" 
+          <button
+            @click="saveTray"
+            class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
             style="color: #102C57;">
             Save
           </button>
@@ -73,8 +73,8 @@
     </div>
 
     <!-- Modal Konfirmasi Kosongkan -->
-    <div 
-      v-if="showConfirmModal" 
+    <div
+      v-if="showConfirmModal"
       class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
     >
       <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
@@ -84,13 +84,13 @@
           Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
         </p>
         <div class="flex justify-center gap-4">
-          <button 
-            @click="closeConfirmModal" 
+          <button
+            @click="closeConfirmModal"
             class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
             Batal
           </button>
-          <button 
-            @click="confirmEmptyTray" 
+          <button
+            @click="confirmEmptyTray"
             class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
             Ya
           </button>