diff --git a/resources/js/components/CreateKategori.vue b/resources/js/components/CreateKategori.vue
index 870bc1a..005d5e1 100644
--- a/resources/js/components/CreateKategori.vue
+++ b/resources/js/components/CreateKategori.vue
@@ -1,4 +1,5 @@
 <template>
+    
     <div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/75 z-50">
       <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
         <!-- Header -->
@@ -31,7 +32,7 @@
           <button
             @click="saveKategori"
             :disabled="!form.nama"
-            class="px-4 py-2 bg-C text-white rounded hover:bg-B disabled:opacity-50"
+            class="px-4 py-2 bg-C text-black rounded hover:bg-B"
           >
             Simpan
           </button>
diff --git a/resources/js/components/CreateSales.vue b/resources/js/components/CreateSales.vue
index d60ba81..762c40f 100644
--- a/resources/js/components/CreateSales.vue
+++ b/resources/js/components/CreateSales.vue
@@ -1,7 +1,7 @@
 <template>
     <div
       v-if="isOpen"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/65 flex items-center justify-center z-50"
     >
       <div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
         <h2 class="text-xl font-bold mb-4">Tambah Sales</h2>
@@ -24,7 +24,7 @@
 
           <div class="flex justify-end gap-2 mt-6">
             <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
-            <button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Simpan</button>
+            <button type="submit" class="px-4 py-2 bg-C text-D rounded hover:bg-C/80">Simpan</button>
           </div>
         </form>
       </div>
diff --git a/resources/js/components/EditKategori.vue b/resources/js/components/EditKategori.vue
index bba4632..67e9430 100644
--- a/resources/js/components/EditKategori.vue
+++ b/resources/js/components/EditKategori.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
+    <div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
       <div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
 
         <!-- Tombol close -->
@@ -27,8 +27,8 @@
           <button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
             Batal
           </button>
-          <button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A">
-            Update
+          <button @click="updateKategori" class="px-4 py-2 bg-B text-D rounded-md hover:bg-A">
+            Ubah
           </button>
         </div>
       </div>
diff --git a/resources/js/components/EditSales.vue b/resources/js/components/EditSales.vue
index f1c7a8b..8c5a750 100644
--- a/resources/js/components/EditSales.vue
+++ b/resources/js/components/EditSales.vue
@@ -1,7 +1,7 @@
 <template>
     <div
       v-if="isOpen"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/65  flex items-center justify-center z-50"
     >
       <div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
         <h2 class="text-xl font-bold mb-4">Ubah Sales</h2>
@@ -24,7 +24,7 @@
 
           <div class="flex justify-end gap-2 mt-6">
             <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
-            <button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Update</button>
+            <button type="submit" class="px-4 py-2 bg-C text-D rounded hover:bg-C">Ubah</button>
           </div>
         </form>
       </div>
@@ -37,7 +37,7 @@
 
   const props = defineProps({
     isOpen: Boolean,
-    sales: Object, // data sales yang akan di-edit
+    sales: Object,
   });
 
   const emit = defineEmits(["close"]);
@@ -48,7 +48,6 @@
     alamat: "",
   });
 
-  // isi form dengan data props.sales
   watch(
     () => props.sales,
     (val) => {
@@ -62,11 +61,9 @@
   const handleSubmit = async () => {
     try {
       await axios.put(`/api/sales/${props.sales.id}`, form.value);
-      alert("Sales berhasil diubah!");
       emit("close");
     } catch (error) {
       console.error("Error updating sales:", error);
-      alert("Gagal mengubah sales");
     }
   };
   </script>
diff --git a/resources/js/pages/Kategori.vue b/resources/js/pages/Kategori.vue
index 585fcd0..aee089d 100644
--- a/resources/js/pages/Kategori.vue
+++ b/resources/js/pages/Kategori.vue
@@ -4,7 +4,7 @@
 
 		<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
 			message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
-		<div class="p-6">
+		<div class="p-6 min-h-[75vh]" >
 			<!-- Header Section -->
 			<div class="flex justify-between items-center mb-6">
 				<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
@@ -22,10 +22,10 @@
 				<table class="w-full">
 					<thead>
 						<tr class="bg-C text-black">
-							<th class="px-6 py-4 text-left font-semibold border-r border-C">
+							<th class="px-6 py-4 text-center font-semibold border-r border-C">
 								No
 							</th>
-							<th class="px-6 py-4 text-left font-semibold border-r border-C">
+							<th class="px-6 py-4 text-center font-semibold border-r border-C">
 								Nama Kategori
 							</th>
 							<th class="px-6 py-4 text-center font-semibold">
@@ -37,10 +37,10 @@
 						<tr v-for="(item, index) in kategori" :key="item.id"
 							class="border-b border-gray-200 hover:bg-A transition duration-150"
 							:class="{ 'bg-gray-50': index % 2 === 1 }">
-							<td class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900">
+							<td class="px-6 py-4 border-r border-gray-200 font-medium text-center text-gray-900">
 								{{ index + 1 }}
 							</td>
-							<td class="px-6 py-4 border-r border-gray-200 text-gray-800">
+							<td class="px-6 py-4 border-r border-gray-200 text-center text-gray-800">
 								{{ item.nama }}
 							</td>
 							<td class="px-6 py-4 text-center">
diff --git a/resources/js/pages/Sales.vue b/resources/js/pages/Sales.vue
index f2bebae..822bf7a 100644
--- a/resources/js/pages/Sales.vue
+++ b/resources/js/pages/Sales.vue
@@ -12,7 +12,7 @@
             v-if="editingSales"
             :isOpen="editingSales"
             :sales="detail"
-            @close="closeSales"
+            @close="closeEditSales"
         />
 
         <!-- Modal Delete -->
@@ -21,16 +21,16 @@
             title="Hapus Sales"
             message="Apakah Anda yakin ingin menghapus sales ini?"
             @confirm="confirmDelete"
-            @close="closeDeleteModal"
+            @cancel="closeDeleteModal"
         />
 
-        <div class="p-6">
+        <div class="p-6 min-h-[75vh]">
             <!-- Header Section -->
             <div class="flex justify-between items-center mb-6">
-                <h1 class="text-2xl font-bold text-gray-800">Sales</h1>
+                <h1 class="text-2xl font-bold text-D">Sales</h1>
                 <button
                     @click="tambahSales"
-                    class="px-4 py-2 bg-[#c6a77d] text-white rounded-md hover:bg-[#b09065] transition duration-200 flex items-center gap-2"
+                    class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
                 >
                     <svg
                         class="w-4 h-4"
@@ -54,29 +54,29 @@
                 class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
             >
                 <table class="w-full">
-                    <thead>
-                        <tr class="bg-[#c6a77d] text-white">
+                    <thead class="">
+                        <tr class="bg-C text-white">
                             <th
-                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
                             >
                                 No
                             </th>
                             <th
-                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
                             >
                                 Nama Sales
                             </th>
                             <th
-                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
                             >
                                 No HP
                             </th>
                             <th
-                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
                             >
                                 Alamat
                             </th>
-                            <th class="px-6 py-4 text-center font-semibold">
+                            <th class="px-6 py-4 text-center text-D">
                                 Aksi
                             </th>
                         </tr>
@@ -89,12 +89,12 @@
                             :class="{ 'bg-gray-50': index % 2 === 1 }"
                         >
                             <td
-                                class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900"
+                                class="px-6 py-4 border-r border-gray-200 text-center font-medium text-gray-900"
                             >
                                 {{ index + 1 }}
                             </td>
                             <td
-                                class="px-6 py-4 border-r border-gray-200 text-gray-800"
+                                class="px-6 py-4 border-r border-gray-200 text-D"
                             >
                                 {{ item.nama }}
                             </td>
@@ -178,7 +178,7 @@ const sales = ref([]);
 const loading = ref(false);
 const creatingSales = ref(false);
 const detail = ref(null);
-
+const editingSales = ref(false);
 const confirmDeleteOpen = ref(false);
 const salesToDelete = ref(null);
 
@@ -204,7 +204,7 @@ const tambahSales = () => {
 // Ubah
 const ubahSales = (item) => {
     detail.value = item;
-    creatingSales.value = true;
+    editingSales.value = true;
 };
 
 // Hapus
@@ -234,6 +234,11 @@ const closeSales = () => {
     fetchSales();
 };
 
+const closeEditSales = () => {
+    editingSales.value = false;
+    fetchSales();
+};
+
 // Lifecycle
 onMounted(() => {
     fetchSales();