diff --git a/resources/js/Pages/Superuser/Menu/Index.vue b/resources/js/Pages/Superuser/Menu/Index.vue
index 2dbd6f5..50f2bb5 100644
--- a/resources/js/Pages/Superuser/Menu/Index.vue
+++ b/resources/js/Pages/Superuser/Menu/Index.vue
@@ -147,7 +147,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
     <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
       <template #header>
         <div class="flex items-center space-x-2 p-2 bg-gray-200 dark:bg-gray-800">
-          <ButtonGreen @click.prevent="show">
+          <ButtonGreen v-if="can('create menu')" @click.prevent="show">
             <Icon name="plus" />
             <p class="uppercase font-semibold">create</p>
           </ButtonGreen>
diff --git a/resources/js/Pages/Superuser/Menu/Nested.vue b/resources/js/Pages/Superuser/Menu/Nested.vue
index 47f9831..f384eb7 100644
--- a/resources/js/Pages/Superuser/Menu/Nested.vue
+++ b/resources/js/Pages/Superuser/Menu/Nested.vue
@@ -28,8 +28,8 @@ const { menus, edit, destroy, save } = defineProps({
           </div>
 
           <div ref="container" class="flex-none flex items-center rounded-md space-x-1">
-            <Icon @click.prevent="edit(element)" name="edit" class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
-            <Icon v-if="element.deleteable" @click.prevent="destroy(element)" name="trash" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
+            <Icon v-if="can('update menu')" @click.prevent="edit(element)" name="edit" class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
+            <Icon v-if="can('delete menu') && element.deleteable" @click.prevent="destroy(element)" name="trash" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
           </div>
         </div>
 
diff --git a/resources/js/Pages/Superuser/Permission/Index.vue b/resources/js/Pages/Superuser/Permission/Index.vue
index 9407d4b..4df6415 100644
--- a/resources/js/Pages/Superuser/Permission/Index.vue
+++ b/resources/js/Pages/Superuser/Permission/Index.vue
@@ -127,8 +127,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   <p class="uppercase">{{ permission.name }}</p>
 
                   <div class="flex items-center space-x-1">
-                    <Icon @click.prevent="edit(permission)" name="pen" class="px-2 py-1 rounded cursor-pointer text-white bg-blue-600 hover:bg-blue-700 transition-all" />
-                    <Icon @click.prevent="destroy(permission)" name="trash" class="px-2 py-1 rounded cursor-pointer text-white bg-red-600 hover:bg-red-700 transition-all" />
+                    <Icon v-if="can('update permission')" @click.prevent="edit(permission)" name="pen" class="px-2 py-1 rounded cursor-pointer text-white bg-blue-600 hover:bg-blue-700 transition-all" />
+                    <Icon v-if="can('delete permission')" @click.prevent="destroy(permission)" name="trash" class="px-2 py-1 rounded cursor-pointer text-white bg-red-600 hover:bg-red-700 transition-all" />
                   </div>
                 </div>
               </div>
diff --git a/resources/js/Pages/Superuser/Role/Index.vue b/resources/js/Pages/Superuser/Role/Index.vue
index 7013842..fdd66e6 100644
--- a/resources/js/Pages/Superuser/Role/Index.vue
+++ b/resources/js/Pages/Superuser/Role/Index.vue
@@ -161,12 +161,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     </td>
                     <td class="px-2 py-1 border dark:border-gray-800">
                       <div class="flex items-center space-x-2">
-                        <ButtonBlue @click.prevent="edit(role, refresh)">
+                        <ButtonBlue v-if="can('update role')" @click.prevent="edit(role, refresh)">
                           <Icon name="edit" />
                           <p class="uppercase">edit</p>
                         </ButtonBlue>
 
-                        <ButtonRed @click.prevent="destroy(role, refresh)">
+                        <ButtonRed v-if="can('delete role')" @click.prevent="destroy(role, refresh)">
                           <Icon name="trash" />
                           <p class="uppercase">delete</p>
                         </ButtonRed>
diff --git a/resources/js/Pages/Superuser/User/Index.vue b/resources/js/Pages/Superuser/User/Index.vue
index b5fb8a6..3124a66 100644
--- a/resources/js/Pages/Superuser/User/Index.vue
+++ b/resources/js/Pages/Superuser/User/Index.vue
@@ -219,12 +219,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.updated_at).toLocaleString('id') }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800">
                       <div class="flex items-center space-x-2">
-                        <ButtonBlue @click.prevent="edit(user, refresh)">
+                        <ButtonBlue v-if="can('update user')" @click.prevent="edit(user, refresh)">
                           <Icon name="edit" />
                           <p class="uppercase">edit</p>
                         </ButtonBlue>
 
-                        <ButtonRed @click.prevent="destroy(user, refresh)">
+                        <ButtonRed v-if="can('delete user')" @click.prevent="destroy(user, refresh)">
                           <Icon name="trash" />
                           <p class="uppercase">delete</p>
                         </ButtonRed>
diff --git a/routes/web.php b/routes/web.php
index a6e3e94..334fd52 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -23,28 +23,28 @@ Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified']
     Route::prefix('/superuser')->name('superuser.')->group(function () {
         Route::resource('permission', App\Http\Controllers\Superuser\PermissionController::class)->only([
             'index', 'store', 'update', 'destroy',
-        ]);
+        ])->middleware(['permission:read permission']);
 
         Route::resource('role', App\Http\Controllers\Superuser\RoleController::class)->only([
             'index', 'store', 'update', 'destroy',
-        ]);
+        ])->middleware(['permission:read role']);
 
-        Route::patch('/role/{role}/detach/{permission}', [App\Http\Controllers\Superuser\RoleController::class, 'detach'])->name('role.detach');
+        Route::patch('/role/{role}/detach/{permission}', [App\Http\Controllers\Superuser\RoleController::class, 'detach'])->name('role.detach')->middleware(['permission:update role']);
 
         Route::resource('user', App\Http\Controllers\Superuser\UserController::class)->only([
             'index', 'store', 'update', 'destroy',
-        ]);
+        ])->middleware(['permission:read user']);
 
-        Route::prefix('/user/{user}')->name('user.')->controller(App\Http\Controllers\Superuser\UserController::class)->group(function () {
+        Route::prefix('/user/{user}')->name('user.')->controller(App\Http\Controllers\Superuser\UserController::class)->middleware(['permission:update user'])->group(function () {
             Route::patch('/role/{role}/detach', 'detachRole')->name('role.detach');
             Route::patch('/permission/{permission}/detach', 'detachPermission')->name('permission.detach');
         });
 
-        Route::patch('/menu/save', [App\Http\Controllers\Superuser\MenuController::class, 'save'])->name('menu.save');
+        Route::patch('/menu/save', [App\Http\Controllers\Superuser\MenuController::class, 'save'])->name('menu.save')->middleware(['permission:update menu']);
         Route::resource('menu', App\Http\Controllers\Superuser\MenuController::class)->only([
             'index', 'store', 'update', 'destroy',
-        ]);
+        ])->middleware(['permission:read menu']);
         
-        Route::get('/activity/login', [App\Http\Controllers\ActivityController::class, 'login'])->name('activity.login');
+        Route::get('/activity/login', [App\Http\Controllers\ActivityController::class, 'login'])->name('activity.login')->middleware(['permission:read login activity']);
     });
 });
\ No newline at end of file