diff --git a/app/Models/Model.php b/app/Models/Model.php
index be1889e..8a4b121 100644
--- a/app/Models/Model.php
+++ b/app/Models/Model.php
@@ -12,4 +12,6 @@ use Illuminate\Database\Eloquent\SoftDeletes;
 class Model extends BaseModel
 {
     use HasFactory, HasUuids, UserTrackable, SoftDeletes, CascadeSoftDeletes;
+
+    public $cascadeDeletes = [];
 }
diff --git a/app/Models/Role.php b/app/Models/Role.php
index ba04517..d019b8c 100644
--- a/app/Models/Role.php
+++ b/app/Models/Role.php
@@ -4,7 +4,7 @@ namespace App\Models;
 
 class Role extends Model
 {
-    protected $cascadeDeletes = ['permissions'];
+    public $cascadeDeletes = ['rolePermissions'];
 
     protected $fillable = [
         'name',
diff --git a/app/Models/Traits/CascadeSoftDeletes.php b/app/Models/Traits/CascadeSoftDeletes.php
index d663365..936892d 100644
--- a/app/Models/Traits/CascadeSoftDeletes.php
+++ b/app/Models/Traits/CascadeSoftDeletes.php
@@ -7,13 +7,13 @@ trait CascadeSoftDeletes
     protected static function bootCascadeSoftDeletes()
     {
         static::deleting(function ($resource) {
-            foreach ($this->cascadeDeletes as $relation) {
+            foreach ($resource->cascadeDeletes as $relation) {
                 $resource->{$relation}()->delete();
             }
         });
 
         static::restoring(function ($resource) {
-            foreach ($this->cascadeDeletes as $relation) {
+            foreach ($resource->cascadeDeletes as $relation) {
                 $resource->{$relation}()->withTrashed()->restore();
             }
         });
diff --git a/app/Models/User.php b/app/Models/User.php
index 3e8121e..5cb9d29 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -50,4 +50,25 @@ class User extends Authenticatable
     {
         return $this->belongsTo(Role::class);
     }
+
+    public function allow($permission, $abort = false)
+    {
+        if ($this->role_id == null) {
+            return true;
+        }
+
+        $permit = $this->role()->whereHas('permissions', function ($query) use ($permission) {
+            return $query->where('name', $permission);
+        })->first();
+
+        if ($permit != null) {
+            return true;
+        }
+
+        if ($abort) {
+            abort(403);
+        }
+
+        return false;
+    }
 }
diff --git a/database/seeders/PermissionSeeder.php b/database/seeders/PermissionSeeder.php
index 0dae132..4c6dc90 100644
--- a/database/seeders/PermissionSeeder.php
+++ b/database/seeders/PermissionSeeder.php
@@ -21,60 +21,15 @@ class PermissionSeeder extends Seeder
         $permissions = [
             ['id' => Str::uuid(), 'label' => 'View Dashboard', 'name' => 'view-dashboard'],
 
-            ['id' => Str::uuid(), 'label' => 'Create Post', 'name' => 'create-post'],
-            ['id' => Str::uuid(), 'label' => 'Update Post', 'name' => 'update-post'],
-            ['id' => Str::uuid(), 'label' => 'View Post', 'name' => 'view-post'],
-            ['id' => Str::uuid(), 'label' => 'Delete Post', 'name' => 'delete-post'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Page', 'name' => 'create-page'],
-            ['id' => Str::uuid(), 'label' => 'Update Page', 'name' => 'update-page'],
-            ['id' => Str::uuid(), 'label' => 'View Page', 'name' => 'view-page'],
-            ['id' => Str::uuid(), 'label' => 'Delete Page', 'name' => 'delete-page'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Tag', 'name' => 'create-tag'],
-            ['id' => Str::uuid(), 'label' => 'Update Tag', 'name' => 'update-tag'],
-            ['id' => Str::uuid(), 'label' => 'View Tag', 'name' => 'view-tag'],
-            ['id' => Str::uuid(), 'label' => 'Delete Tag', 'name' => 'delete-tag'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Customer', 'name' => 'create-customer'],
-            ['id' => Str::uuid(), 'label' => 'Update Customer', 'name' => 'update-customer'],
-            ['id' => Str::uuid(), 'label' => 'View Customer', 'name' => 'view-customer'],
-            ['id' => Str::uuid(), 'label' => 'Delete Customer', 'name' => 'delete-customer'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Tour Package', 'name' => 'create-tour-package'],
-            ['id' => Str::uuid(), 'label' => 'Update Tour Package', 'name' => 'update-tour-package'],
-            ['id' => Str::uuid(), 'label' => 'View Tour Package', 'name' => 'view-tour-package'],
-            ['id' => Str::uuid(), 'label' => 'Delete Tour Package', 'name' => 'delete-tour-package'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Tour Package Order', 'name' => 'create-tour-package-order'],
-            ['id' => Str::uuid(), 'label' => 'Update Tour Package Order', 'name' => 'update-tour-package-order'],
-            ['id' => Str::uuid(), 'label' => 'View Tour Package Order', 'name' => 'view-tour-package-order'],
-            ['id' => Str::uuid(), 'label' => 'Delete Tour Package Order', 'name' => 'delete-tour-package-order'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Car Rental', 'name' => 'create-car-rental'],
-            ['id' => Str::uuid(), 'label' => 'Update Car Rental', 'name' => 'update-car-rental'],
-            ['id' => Str::uuid(), 'label' => 'View Car Rental', 'name' => 'view-car-rental'],
-            ['id' => Str::uuid(), 'label' => 'Delete Car Rental', 'name' => 'delete-car-rental'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Car Rental Order', 'name' => 'create-car-rental-order'],
-            ['id' => Str::uuid(), 'label' => 'Update Car Rental Order', 'name' => 'update-car-rental-order'],
-            ['id' => Str::uuid(), 'label' => 'View Car Rental Order', 'name' => 'view-car-rental-order'],
-            ['id' => Str::uuid(), 'label' => 'Delete Car Rental Order', 'name' => 'delete-car-rental-order'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Fastboat Place', 'name' => 'create-fastboat-place'],
-            ['id' => Str::uuid(), 'label' => 'Update Fastboat Place', 'name' => 'update-fastboat-place'],
-            ['id' => Str::uuid(), 'label' => 'View Fastboat Place', 'name' => 'view-fastboat-place'],
-            ['id' => Str::uuid(), 'label' => 'Delete Fastboat Place', 'name' => 'delete-fastboat-place'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Fastboat Track', 'name' => 'create-fastboat-track'],
-            ['id' => Str::uuid(), 'label' => 'Update Fastboat Track', 'name' => 'update-fastboat-track'],
-            ['id' => Str::uuid(), 'label' => 'View Fastboat Track', 'name' => 'view-fastboat-track'],
-            ['id' => Str::uuid(), 'label' => 'Delete Fastboat Track', 'name' => 'delete-fastboat-track'],
-
-            ['id' => Str::uuid(), 'label' => 'Create Fastboat Order', 'name' => 'create-fastboat-order'],
-            ['id' => Str::uuid(), 'label' => 'Update Fastboat Order', 'name' => 'update-fastboat-order'],
-            ['id' => Str::uuid(), 'label' => 'View Fastboat Order', 'name' => 'view-fastboat-order'],
-            ['id' => Str::uuid(), 'label' => 'Delete Fastboat Order', 'name' => 'delete-fastboat-order'],
+            ['id' => Str::uuid(), 'label' => 'Create User', 'name' => 'create-user'],
+            ['id' => Str::uuid(), 'label' => 'Update User', 'name' => 'update-user'],
+            ['id' => Str::uuid(), 'label' => 'View User', 'name' => 'view-user'],
+            ['id' => Str::uuid(), 'label' => 'Delete User', 'name' => 'delete-user'],
+
+            ['id' => Str::uuid(), 'label' => 'Create Role', 'name' => 'create-role'],
+            ['id' => Str::uuid(), 'label' => 'Update Role', 'name' => 'update-role'],
+            ['id' => Str::uuid(), 'label' => 'View Role', 'name' => 'view-role'],
+            ['id' => Str::uuid(), 'label' => 'Delete Role', 'name' => 'delete-role'],
         ];
 
         foreach($permissions as $permission) {
@@ -102,12 +57,6 @@ class PermissionSeeder extends Seeder
         ]);
 
         $setting = [
-            ['id' => Str::uuid(), 'key' => 'SITE_NAME', 'value' => 'Nusa Travel', 'type' => 'text'],
-            ['id' => Str::uuid(), 'key' => 'SITE_LOGO', 'value' => 'logo.png ', 'type' => 'image'],
-            ['id' => Str::uuid(), 'key' => 'midtrans_server_key', 'value' => '', 'type' => 'text'],
-            ['id' => Str::uuid(), 'key' => 'midtrans_client_key', 'value' => '', 'type' => 'text'],
-            ['id' => Str::uuid(), 'key' => 'midtrans_merchant_id', 'value' => '', 'type' => 'text'],
-            ['id' => Str::uuid(), 'key' => 'payment_prod', 'value' => '0', 'type' => 'text'],
         ];
 
         Setting::insert($setting);
diff --git a/resources/js/Layouts/Partials/routes.js b/resources/js/Layouts/Partials/routes.js
index 3f8bd1e..c4b349e 100644
--- a/resources/js/Layouts/Partials/routes.js
+++ b/resources/js/Layouts/Partials/routes.js
@@ -30,4 +30,27 @@ export default [
         active: "dashboard",
         permission: "view-dashboard",
     },
+    {
+        name: "User",
+        show: true,
+        icon: HiUser,
+        items: [
+            {
+                name: "Roles",
+                show: true,
+                icon: HiUserGroup,
+                route: route("roles.index"),
+                active: "roles.*",
+                permission: "view-role",
+            },
+            {
+                name: "Users",
+                show: true,
+                icon: HiUsers,
+                route: route("user.index"),
+                active: "user.index",
+                permission: "view-user",
+            },
+        ],
+    },
 ];
diff --git a/resources/js/Pages/Role/Form.jsx b/resources/js/Pages/Role/Form.jsx
index 08d8e0e..f3db287 100644
--- a/resources/js/Pages/Role/Form.jsx
+++ b/resources/js/Pages/Role/Form.jsx
@@ -91,7 +91,7 @@ export default function Role(props) {
 
             <div>
                 <div className="mx-auto sm:px-6 lg:px-8 ">
-                    <div className="p-6 shadow-sm sm:rounded-lg bg-gray-200 dark:bg-gray-800 space-y-4">
+                    <div className="p-6 shadow-sm sm:rounded-lg bg-white dark:bg-gray-800 space-y-4">
                         <FormInput
                             name="name"
                             value={name}
diff --git a/resources/js/Pages/User/FormModal.jsx b/resources/js/Pages/User/FormModal.jsx
index 6646d3b..9551a93 100644
--- a/resources/js/Pages/User/FormModal.jsx
+++ b/resources/js/Pages/User/FormModal.jsx
@@ -4,20 +4,17 @@ import { useForm } from "@inertiajs/react";
 import Button from "@/Components/Button";
 import FormInput from "@/Components/FormInput";
 import RoleSelectionInput from "../Role/SelectionInput";
-import EmployeeSelectionInput from "../Employee/SelectionInput";
 
 import { isEmpty } from "lodash";
-import Checkbox from "@/Components/Checkbox";
 
 export default function FormModal(props) {
     const { modalState } = props
     const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
-        username: '',
+        name: '',
+        email: '',
         password: '',
         role_id: null,
-        employee_id: null,
-        is_superadmin: 0,
-        is_enable: 0
+        role: '',
     })
 
     const handleOnChange = (event) => {
@@ -52,11 +49,10 @@ export default function FormModal(props) {
         const user = modalState.data
         if (isEmpty(user) === false) {
             setData({
-                username: user.username,
+                name: user.name,
+                email: user.email,
                 role_id: user.role_id,
-                employee_id: user.employee_id,
-                is_superadmin: user.is_superadmin,
-                is_enable: user.is_enable
+                role: user.role
             })
             return 
         }
@@ -69,11 +65,18 @@ export default function FormModal(props) {
             title={"User"}
         >
             <FormInput
-                name="username"
-                value={data.username}
+                name="name"
+                value={data.name}
                 onChange={handleOnChange}
-                label="Username"
-                error={errors.username}
+                label="name"
+                error={errors.name}
+            />
+            <FormInput
+                name="email"
+                value={data.email}
+                onChange={handleOnChange}
+                label="email"
+                error={errors.email}
             />
             <FormInput
                 type="password"
@@ -83,7 +86,7 @@ export default function FormModal(props) {
                 label="Password"
                 error={errors.password}
             />
-            {+data.is_superadmin === 0 && (
+            {data.role !== null && (
                 <>
                     <RoleSelectionInput
                         label="Role"
@@ -91,20 +94,8 @@ export default function FormModal(props) {
                         onItemSelected={(id) => setData('role_id', id)}
                         error={errors.role_id}
                     />
-                    <EmployeeSelectionInput
-                        label="Karyawan"
-                        itemSelected={data.employee_id}
-                        onItemSelected={(id) => setData('employee_id', id)}
-                        error={errors.employee_id}
-                    />
                 </>
             )}
-            <Checkbox
-                label='Aktif'
-                value={+data.is_enable === 1}
-                onChange={handleOnChange}
-                name='is_enable'
-            />
             <div className="flex items-center">
                 <Button
                     onClick={handleSubmit}
diff --git a/resources/js/Pages/User/Index.jsx b/resources/js/Pages/User/Index.jsx
index 67cfd5a..cdd6414 100644
--- a/resources/js/Pages/User/Index.jsx
+++ b/resources/js/Pages/User/Index.jsx
@@ -86,17 +86,11 @@ export default function Supplier(props) {
                                     <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                         <tr>
                                             <th scope="col" className="py-3 px-6">
-                                                Username
-                                            </th>
-                                            <th scope="col" className="py-3 px-6">
-                                                Employee
+                                                Name
                                             </th>
                                             <th scope="col" className="py-3 px-6">
                                                 Role
                                             </th>
-                                            <th scope="col" className="py-3 px-6">
-                                                Aktif
-                                            </th>
                                             <th scope="col" className="py-3 px-6"/>
                                         </tr>
                                     </thead>
@@ -104,16 +98,10 @@ export default function Supplier(props) {
                                         {data.map(user => (
                                             <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700" key={user.id}>
                                                 <td scope="row" className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                                    {user.username}
-                                                </td>
-                                                <td className="py-4 px-6">
-                                                    {user.employee.name}
-                                                </td>
-                                                <td className="py-4 px-6">
-                                                    {+user.is_superadmin === 1 ? 'System Administrator' : user.role?.name}
+                                                    {user.name}
                                                 </td>
                                                 <td className="py-4 px-6">
-                                                    {+user.is_enable === 1 ? 'Ya' : 'Tidak'}
+                                                    {user.role === null ? 'System' : user.role?.name}
                                                 </td>
                                                 <td className="py-4 px-6 flex justify-end">
                                                     <Dropdown
diff --git a/routes/api.php b/routes/api.php
index eb6fa48..deeebd5 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Api\RoleController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -17,3 +18,6 @@ use Illuminate\Support\Facades\Route;
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::get('/roles', [RoleController::class, 'index'])->name('api.role.index');
+
diff --git a/routes/web.php b/routes/web.php
index 5aa2e32..50aa914 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,11 +1,10 @@
 <?php
 
+use App\Http\Controllers\GeneralController;
 use App\Http\Controllers\ProfileController;
-use App\Http\Middleware\VisitorCounter;
-use App\Models\Visitor;
-use Illuminate\Foundation\Application;
+use App\Http\Controllers\UserController;
+use App\Http\Controllers\RoleController;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
 
 /*
 |--------------------------------------------------------------------------
@@ -19,13 +18,24 @@ use Inertia\Inertia;
 */
 
 Route::get('/', function () {
+    return redirect()->route('login');
+});
+
+Route::middleware(['auth'])->group(function () {
+    Route::get('/dashboard', [GeneralController::class, 'index'])->name('dashboard');
+    Route::get('/maintance', [GeneralController::class, 'maintance'])->name('maintance');
 
-    return view('welcome');
+    // User
+    Route::get('/users', [UserController::class, 'index'])->name('user.index');
+    Route::post('/users', [UserController::class, 'store'])->name('user.store');
+    Route::put('/users/{user}', [UserController::class, 'update'])->name('user.update');
+    Route::delete('/users/{user}', [UserController::class, 'destroy'])->name('user.destroy');
+
+    // Role
+    Route::resource('/roles', RoleController::class);
 });
 
-Route::get('/dashboard', function () {
-    return Inertia::render('Dashboard');
-})->middleware(['auth', 'verified'])->name('dashboard');
+
 
 Route::middleware('auth')->group(function () {
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');