diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 72d7110..58a24b8 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -19,9 +19,9 @@ class UserController extends Controller
     public function store(Request $request)
     {
         $request->validate([
-            'nama'    => 'required|nama|unique:users',
+            'nama'    => 'required|string|unique:users',
             'password' => 'required|min:6',
-            'role'     => 'required|in:owner, kasir',
+            'role'     => 'required|in:owner,kasir',
         ]);
 
         User::create([
diff --git a/resources/js/components/CreateAkun.vue b/resources/js/components/CreateAkun.vue
new file mode 100644
index 0000000..9c50474
--- /dev/null
+++ b/resources/js/components/CreateAkun.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white rounded-lg p-6 w-96 shadow-lg">
+        <h2 class="text-lg font-bold mb-4">Tambah Akun</h2>
+
+        <form @submit.prevent="createAkun">
+          <!-- Nama -->
+          <div class="mb-3">
+            <label class="block font-medium mb-1">Nama</label>
+            <input
+              v-model.trim="form.nama"
+              type="text"
+              class="border rounded w-full p-2 focus:ring focus:ring-blue-300"
+              required
+            />
+          </div>
+
+          <!-- Password -->
+          <div class="mb-3">
+            <label class="block font-medium mb-1">Password</label>
+            <input
+              v-model="form.password"
+              type="password"
+              class="border rounded w-full p-2 focus:ring focus:ring-blue-300"
+              required
+            />
+          </div>
+
+          <!-- Peran -->
+          <div class="mb-3">
+            <label class="block font-medium mb-1">Peran</label>
+            <select
+              v-model="form.role"
+              class="border rounded w-full p-2 focus:ring focus:ring-blue-300"
+              required
+            >
+              <option disabled value="">-- Pilih Peran --</option>
+              <option value="owner">Owner</option>
+              <option value="kasir">Kasir</option>
+            </select>
+          </div>
+
+          <!-- Tombol -->
+          <div class="flex justify-end gap-2 mt-4">
+            <button
+              type="button"
+              @click="$emit('close')"
+              class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
+            >
+              Batal
+            </button>
+            <button
+              type="submit"
+              class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
+            >
+              Simpan
+            </button>
+          </div>
+        </form>
+
+        <!-- Error -->
+        <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
+          {{ errorMessage }}
+        </p>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import axios from "axios";
+
+  export default {
+    name: "CreateAkun",
+    data() {
+      return {
+        form: {
+          nama: "",
+          password: "",
+          role: "",
+        },
+        errorMessage: "",
+      };
+    },
+    methods: {
+      async createAkun() {
+        try {
+          await axios.post("api/user", this.form);
+
+          // reset form
+          this.form = { nama: "", password: "", role: "" };
+
+          // tutup modal dan refresh data
+          this.$emit("refresh");
+          this.$emit("close");
+        } catch (err) {
+          this.errorMessage =
+            err.response?.data?.message || "Gagal menambah akun.";
+          console.error("Gagal tambah akun:", err);
+        }
+      },
+    },
+  };
+  </script>
diff --git a/resources/js/components/EditAkun.vue b/resources/js/components/EditAkun.vue
new file mode 100644
index 0000000..824b115
--- /dev/null
+++ b/resources/js/components/EditAkun.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div class="bg-white rounded-lg p-6 w-96">
+        <h2 class="text-lg font-bold mb-4">Edit Akun</h2>
+
+        <form @submit.prevent="updateAkun">
+          <!-- Nama -->
+          <div class="mb-3">
+            <label class="block font-medium">Nama</label>
+            <input v-model="form.nama" type="text" class="border rounded w-full p-2" required />
+          </div>
+
+          <!-- Password -->
+          <div class="mb-3">
+            <label class="block font-medium">Password</label>
+            <input v-model="form.password" type="password" class="border rounded w-full p-2" />
+            <small class="text-gray-500">Kosongkan jika tidak ingin mengubah password</small>
+          </div>
+
+          <!-- Peran -->
+          <div class="mb-3">
+            <label class="block font-medium">Peran</label>
+            <select v-model="form.role" class="border rounded w-full p-2" required>
+              <option value="">-- Pilih Peran --</option>
+              <option value="owner">Owner</option>
+              <option value="kasir">Kasir</option>
+            </select>
+          </div>
+
+          <!-- Tombol -->
+          <div class="flex justify-end gap-2 mt-4">
+            <button type="button" @click="$emit('close')" class="bg-gray-300 px-4 py-2 rounded">
+              Batal
+            </button>
+            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
+              Ubah
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import axios from "axios";
+
+  export default {
+    props: {
+      akun: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        form: {
+          nama: this.akun.nama || "",
+          password: "",
+          role: this.akun.role || "", // gunakan "role" bukan "peran"
+        },
+      };
+    },
+    watch: {
+      akun: {
+        handler(newVal) {
+          if (newVal) {
+            this.form = {
+              nama: newVal.nama || "",
+              password: "",
+              role: newVal.role || "",
+            };
+          }
+        },
+        deep: true,
+        immediate: true,
+      },
+    },
+    methods: {
+      async updateAkun() {
+        try {
+          const payload = { ...this.form };
+          if (!payload.password) delete payload.password;
+
+          await axios.put(`api/user/${this.akun.id}`, payload);
+
+          this.$emit("refresh");
+          this.$emit("close");
+        } catch (err) {
+          console.error("Gagal update akun:", err.response?.data || err.message);
+          alert("Update akun gagal. Silakan cek kembali inputan.");
+        }
+      },
+    },
+  };
+  </script>
diff --git a/resources/js/pages/Akun.vue b/resources/js/pages/Akun.vue
new file mode 100644
index 0000000..64f9005
--- /dev/null
+++ b/resources/js/pages/Akun.vue
@@ -0,0 +1,211 @@
+<template>
+    <mainLayout>
+        <!-- Modal Create/Edit Akun -->
+        <CreateAkun
+            v-if="creatingAkun"
+            :isOpen="creatingAkun"
+            :akun="detail"
+            @close="closeAkun"
+        />
+
+        <EditAkun
+            v-if="editingAkun"
+            :isOpen="editingAkun"
+            :akun="detail"
+            @close="closeEditAkun"
+        />
+
+        <!-- Modal Delete -->
+        <ConfirmDeleteModal
+            :isOpen="confirmDeleteOpen"
+            title="Hapus User"
+            message="Apakah Anda yakin ingin menghapus user ini?"
+            @confirm="confirmDelete"
+            @cancel="closeDeleteModal"
+        />
+
+        <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-D">Manajemen Akun</h1>
+                <button
+                    @click="tambahAkun"
+                    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"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 4v16m8-8H4"
+                        />
+                    </svg>
+                    Tambah User
+                </button>
+            </div>
+
+            <!-- Table Section -->
+            <div
+                class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
+            >
+                <table class="w-full">
+                    <thead>
+                        <tr class="bg-C text-white">
+                            <th class="px-6 py-4 text-center text-D border-r border-[#b09065]">No</th>
+                            <th class="px-6 py-4 text-center text-D border-r border-[#b09065]">Nama</th>
+                            <th class="px-6 py-4 text-center text-D border-r border-[#b09065]">Role</th>
+                            <th class="px-6 py-4 text-center text-D">Aksi</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for="(item, index) in akun"
+                            :key="item.id"
+                            class="border-b border-gray-200 hover:bg-gray-50 transition duration-150"
+                            :class="{ 'bg-gray-50': index % 2 === 1 }"
+                        >
+                            <td 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-D">
+                                {{ item.nama }}
+                            </td>
+                            <td class="px-6 py-4 border-r border-gray-200 text-gray-800">
+                                {{ item.role }}
+                            </td>
+                            <td class="px-6 py-4 text-center">
+                                <div class="flex justify-center gap-2">
+                                    <button
+                                        @click="ubahAkun(item)"
+                                        class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
+                                    >
+                                        Ubah
+                                    </button>
+                                    <button
+                                        @click="hapusAkun(item)"
+                                        class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
+                                    >
+                                        Hapus
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <!-- Empty State -->
+                        <tr v-if="akun.length === 0 && !loading">
+                            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                                <div class="flex flex-col items-center">
+                                    <svg
+                                        class="w-12 h-12 text-gray-400 mb-2"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
+                                        />
+                                    </svg>
+                                    <p>Tidak ada data user</p>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Loading State -->
+            <div v-if="loading" class="flex justify-center items-center py-8">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
+                <span class="ml-2 text-gray-600">Memuat data...</span>
+            </div>
+        </div>
+    </mainLayout>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import mainLayout from "../layouts/mainLayout.vue";
+import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
+import CreateAkun from "../components/CreateAkun.vue";
+import EditAkun from "../components/EditAkun.vue";
+
+// State
+const akun = ref([]);
+const loading = ref(false);
+const creatingAkun = ref(false);
+const detail = ref(null);
+const editingAkun = ref(false);
+const confirmDeleteOpen = ref(false);
+const akunToDelete = ref(null);
+
+// Fetch data dari API
+const fetchAkun = async () => {
+    loading.value = true;
+    try {
+        const response = await axios.get("/api/user");
+        akun.value = response.data;
+    } catch (error) {
+        console.error("Error fetching akun:", error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Tambah
+const tambahAkun = () => {
+    detail.value = null;
+    creatingAkun.value = true;
+};
+
+// Ubah
+const ubahAkun = (item) => {
+    detail.value = item;
+    editingAkun.value = true;
+};
+
+// Hapus
+const hapusAkun = (item) => {
+    akunToDelete.value = item;
+    confirmDeleteOpen.value = true;
+};
+
+const confirmDelete = async () => {
+    try {
+        await axios.delete(`/api/user/${akunToDelete.value.id}`);
+        fetchAkun();
+        confirmDeleteOpen.value = false;
+    } catch (error) {
+        console.error("Error deleting akun:", error);
+    }
+};
+
+const closeDeleteModal = () => {
+    confirmDeleteOpen.value = false;
+    akunToDelete.value = null;
+};
+
+// Tutup modal Create/Edit
+const closeAkun = () => {
+    creatingAkun.value = false;
+    fetchAkun();
+};
+
+const closeEditAkun = () => {
+    editingAkun.value = false;
+    fetchAkun();
+};
+
+// Lifecycle
+onMounted(() => {
+    fetchAkun();
+});
+</script>
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 390618f..7fc99d7 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -8,6 +8,7 @@ import InputProduk from '../pages/InputProduk.vue'
 import Kategori from '../pages/Kategori.vue'
 import Sales from '../pages/Sales.vue'
 import EditProduk from '../pages/EditProduk.vue'
+import Akun from '../pages/Akun.vue'
 
 
 const routes = [
@@ -51,6 +52,11 @@ const routes = [
     name: 'Sales',
     component: Sales
   },
+  {
+    path: '/akun',
+    name: 'Akun',
+    component: Akun
+  },
   {
     path: '/produk/:id/edit',   // :id = parameter dinamis
     name: 'EditProduk',