diff --git a/app/Http/Controllers/Management/RoleController.php b/app/Http/Controllers/Management/RoleController.php
index de9ffbf..6a94463 100644
--- a/app/Http/Controllers/Management/RoleController.php
+++ b/app/Http/Controllers/Management/RoleController.php
@@ -42,11 +42,11 @@ class RoleController extends Controller
             $action = '';
 
             if((permission('is_create', $this->route.'.*','module',false)) || (permission('is_update', $this->route.'.*','module',false))){
-                $action .= '<div class="flex gap-3 justify-center items-center flex-row">';
-                $action .= '<a href="'.url('/management/role/akses/'.encode_id($row->MsGroupId)).'/edit" data-toggle="tooltip" title="Edit Hak Akses Role" class="btn btn-sm bg-primary"><i class="ri-list-settings-line text-white"></i></a>';
-                $action .= '<a href="'.url('/management/role/update/'.encode_id($row->MsGroupId)).'" data-toggle="tooltip" title="Edit Data" class="btn btn-sm bg-success"><i class="ri-pencil-line text-white"></i></a>';
+                $action .= '<div class="flex gap-1 justify-center items-center flex-row">';
+                $action .= '<a href="'.url('/management/role/akses/'.encode_id($row->MsGroupId)).'/edit" data-toggle="tooltip" title="Edit Hak Akses Role" class="p-2 rounded bg-blue-500"><i class="ri-list-settings-line text-white"></i></a>';
+                $action .= '<a href="'.url('/management/role/update/'.encode_id($row->MsGroupId)).'" data-toggle="tooltip" title="Edit Data" class="p-2 rounded bg-emerald-500"><i class="ri-pencil-line text-white"></i></a>';
                 // $action .= '<a data-toggle="tooltip" title="Hapus Data" class="btn btn-xs bg-danger"><i class="ri-trash-line text-white"></i></a>';
-                $action .= '<a href="#" data-href="'.url('management/role/delete/'.encode_id($row->MsGroupId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data btn btn-sm btn-block bg-danger"><i class="ri-delete-bin-line text-white"></i></a>';
+                $action .= '<a href="#" data-href="'.url('management/role/delete/'.encode_id($row->MsGroupId)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data p-2 rounded bg-red-500"><i class="ri-delete-bin-line text-white"></i></a>';
                 $action .= '</div>';
             }
             
diff --git a/app/Http/Controllers/Management/UserController.php b/app/Http/Controllers/Management/UserController.php
index 46a94ae..e67fc77 100644
--- a/app/Http/Controllers/Management/UserController.php
+++ b/app/Http/Controllers/Management/UserController.php
@@ -51,11 +51,11 @@ class UserController extends Controller
             $instansi = UserInstansi::where('user_id',$row->id)->first();
 
             if((permission('is_create', $this->route.'.*','module',false)) || (permission('is_update', $this->route.'.*','module',false))){
-                $action .= '<div class="flex gap-3 justify-center items-center flex-row">';
-                $action .= '<a href="'.url('management/user/update/'.encode_id($row->id)).'" data-toggle="tooltip" title="Edit Data" class="btn btn-sm btn-block bg-primary"><i class="ri-pencil-line text-white"></i></a>';
+                $action .= '<div class="flex gap-1 justify-center items-center">';
+                $action .= '<a href="'.url('management/user/update/'.encode_id($row->id)).'" data-toggle="tooltip" title="Edit Data" class="p-2 w-full rounded text-white bg-blue-500"><i class="ri-pencil-line text-white"></i></a>';
                 if((session('group_id') == 1) || (session('group_alias') == 'admin')){
-                    $action .= '<a href="#" data-href="'.url('management/user/forcelogin/'.encode_id($row->id)).'" data-toggle="tooltip" title="Force Login" class="forcelogin btn btn-sm btn-block bg-success"><i class="ri-user-2-line text-white"></i></a>';
-                    $action .= '<a href="#" data-href="'.url('management/user/delete/'.encode_id($row->id)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data btn btn-sm btn-block bg-danger"><i class="ri-delete-bin-line text-white"></i></a>';
+                    $action .= '<a href="#" data-href="'.url('management/user/forcelogin/'.encode_id($row->id)).'" data-toggle="tooltip" title="Force Login" class="forcelogin p-2 w-full rounded text-white bg-emerald-500"><i class="ri-user-line text-white"></i></a>';
+                    $action .= '<a href="#" data-href="'.url('management/user/delete/'.encode_id($row->id)).'" data-toggle="tooltip" title="Hapus Data" class="remove_data p-2 w-full rounded text-white bg-red-500"><i class="ri-delete-bin-line text-white"></i></a>';
                 }
                 $action .= '</div>';
             }
diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php
index a6d6685..c5ac082 100644
--- a/resources/views/layouts/master.blade.php
+++ b/resources/views/layouts/master.blade.php
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
     <link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
     <link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
+    <link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
     @yield('css')
     <style>
         body { font-family: 'Plus Jakarta Sans', sans-serif; }
diff --git a/resources/views/modules/management/role/index.blade.php b/resources/views/modules/management/role/index.blade.php
index 06327b6..e951376 100644
--- a/resources/views/modules/management/role/index.blade.php
+++ b/resources/views/modules/management/role/index.blade.php
@@ -3,18 +3,17 @@
 @section('css')
 @endsection
 @section('content')
-<div class="flex flex-col gap-6">
-    <div class="card">
-        <div class="card-header">
-            <div class="flex justify-between items-center">
-                <h4 class="card-title">Data {{$title}}</h4>
-            </div>
-        </div>
-        <div class="p-6">
+<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
+    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
+        <div class="overflow-x-auto">
             <div id="toolbar">
-                <a href="{{route($route.'.create')}}" class="btn bg-success text-white"><i class="ri-add-line"></i>&nbsp;Tambah Data</a>
+                @if(permission('is_create', $route.'.*','module',false) || permission('is_update', $route.'.*','module',false))
+                    <a href="{{route($route.'.update')}}" class="p-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors flex items-center text-sm font-semibold text-slate-600">
+                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span>Tambah Data</span>
+                    </a>
+                @endif
             </div>
-            <table class="gridjs-table" 
+            <table class="w-full text-left border-collapse" 
                     data-search="true"
                     data-toggle="table"
                     data-pagination="true"
@@ -26,11 +25,11 @@
                     data-page-size="10"
                     data-id-field="id"
                     id="grid-data">
-                  <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-primary-light">
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="action">#</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="no">No</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="name">Name</th>
+                  <thead class="bg-slate-50/50 border-b border-slate-100">
+                    <tr>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="action">#</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="no">No</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="name">Name</th>
                     </tr>
                   </thead>
                   <tbody class="gridjs-tbody"></tbody>
@@ -38,7 +37,6 @@
         </div>
     </div>
 </div>
-
 @endsection
 @section('js')
 <script type="text/javascript">
diff --git a/resources/views/modules/management/user/form.blade.php b/resources/views/modules/management/user/form.blade.php
index ec23645..2131ecb 100644
--- a/resources/views/modules/management/user/form.blade.php
+++ b/resources/views/modules/management/user/form.blade.php
@@ -3,102 +3,91 @@
 <link rel="stylesheet" href="{{asset('assets/libs/choices.js/public/assets/styles/choices.min.css')}}">
 @endsection
 @section('content')
-<div class="flex flex-col gap-6">
-    <div class="card">
-        <div class="card-header">
-            <div class="flex justify-between items-center">
-                <h4 class="card-title">Data {{$title}}</h4>
-            </div>
-        </div>
+
+<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
+    <div class="p-8 bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
         <form action="{{route($route.'.store')}}" method="POST" class="">
             {{csrf_field()}}
             <input type="hidden" name="secure_id" value="{{@$keyId}}">
-            <div class="p-6">
-                <div class="grid lg:grid-cols-2 gap-3">
-                    <div class="mb-3">
-                        <label class="mb-3">Username</label>
-                        <input type="text" value="{{@$item->username ? @$item->username :  old('username')}}" name="username" class="form-input @error('username') is-invalid @enderror" placeholder="Masukan username" required>
-                        @error('username')
-                        <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Nama</label>
-                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name"  class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama" required>
-                        @error('name')
-                        <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Email</label>
-                        <input type="email" name="email" value="{{@$item->email ? @$item->email :  old('email')}}" id="emailverify" class="form-input @error('email') is-invalid @enderror" placeholder="Masukan Email Aktif" required>
-                        @error('email')
-                        <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Role User</label>
-                        <select name="group" class="form-input @error('group') is-invalid @enderror" required>
-                            <option value="">-Pilih Role User-</option>
-                            @foreach($group as $data_group)
-                            <option {{@$item->ms_group_id == $data_group->MsGroupId ? 'selected' : ''}} value="{{encode_id($data_group->MsGroupId)}}">{{$data_group->name}}</option>
-                            @endforeach
-                        </select>
-                        @error('group')
-                        <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                    <div class="mb-3">
-                        <label class="mb-3">Jenis Instansi</label>
-                        <select name="type" id="type" class="form-input @error('type') is-invalid @enderror" required>
-                            <option value="">-Pilih Jenis Instansi-</option>
-                            @foreach($group as $data_group)
-                                <option {{ @$item->ms_group_id == $data_group->MsGroupId ? 'selected' : '' }} value="{{ $data_group->alias }}">{{ $data_group->name }}</option>
-                            @endforeach
-                            @error('type')
-                                <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
-                            @enderror
-                            {{-- <option {{@$item->instansi->parent == 'Badan' ? 'selected' : '' }} value="Badan">Badan</option> --}}
-                            {{-- <option {{@$item->instansi->parent == 'Deputi' ? 'selected' : '' }} value="Deputi">Deputi</option> --}}
-                            {{-- <option {{@$item->instansi->parent == 'Dinas' ? 'selected' : '' }} value="Dinas">Dinas</option> --}}
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="mb-3">Instansi</label>
-                        <select name="ms_instansi_id" data-trigger id="ms_instansi_id" class="form-input @error('ms_instansi_id') is-invalid @enderror" required>
-                            <option value="">-Pilih Jenis Instansi-</option>
-                            @if(@$userInstansi)
-                                <option selected value="{{encode_id(@$userInstansi->ms_instansi_id)}}">{{@$userInstansi->instansi->name}}</option>
-                            @endif
-                        </select>
-                        @error('ms_instansi_id')
-                        <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
-                        @enderror
-                    </div>
-                    
+            <div class="flex flex-col p-3 gap-3">
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Username</label>
+                    <input type="text" value="{{@$item->username ? @$item->username :  old('username')}}" name="username" class="p-2 bg-white rounded border w-full @error('username') is-invalid @enderror" placeholder="Masukan username" required>
+                    @error('username')
+                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
                 </div>
-                <div class="grid lg:grid-cols-1">
-                    <div class="mb-3">
-                        <label class="mb-3">Password Baru</label>
-                        <input type="password" id="password" autocomplete="new-password" name="password" class="form-input @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters">
-                        @error('password')
-                            <span class="p-2 bg-danger text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Nama</label>
+                    <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name"  class="p-2 bg-white rounded border w-full @error('name') is-invalid @enderror" placeholder="Masukan Nama" required>
+                    @error('name')
+                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
+                </div>
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Email</label>
+                    <input type="email" name="email" value="{{@$item->email ? @$item->email :  old('email')}}" id="emailverify" class="p-2 bg-white rounded border w-full @error('email') is-invalid @enderror" placeholder="Masukan Email Aktif" required>
+                    @error('email')
+                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
+                </div>
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Role User</label>
+                    <select name="group" class="p-2 bg-white rounded border w-full @error('group') is-invalid @enderror" required>
+                        <option value="">-Pilih Role User-</option>
+                        @foreach($group as $data_group)
+                        <option {{@$item->ms_group_id == $data_group->MsGroupId ? 'selected' : ''}} value="{{encode_id($data_group->MsGroupId)}}">{{$data_group->name}}</option>
+                        @endforeach
+                    </select>
+                    @error('group')
+                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
+                </div>
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Jenis Instansi</label>
+                    <select name="type" id="type" class="p-2 bg-white rounded border w-full @error('type') is-invalid @enderror" required>
+                        <option value="">-Pilih Jenis Instansi-</option>
+                        @foreach($group as $data_group)
+                            <option {{ @$item->ms_group_id == $data_group->MsGroupId ? 'selected' : '' }} value="{{ $data_group->alias }}">{{ $data_group->name }}</option>
+                        @endforeach
+                        @error('type')
+                            <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                         @enderror
-                                <button class="btn bg-secondary my-2 text-white" type="button" id="togglePassword"><i class="ri-eye-line"></i> Lihat Password</button>
-                        <p>
-                            Kata Sandi harus mengandung Minimal 8 karakter, maksimal 15 karakter, <br>setidaknya 1 huruf kecil dan huruf besar, angka dan simbol
-                        </p>
+                    </select>
+                </div>
+
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Instansi</label>
+                    <select name="ms_instansi_id" id="ms_instansi_id" class="p-2 bg-white rounded border w-full @error('ms_instansi_id') is-invalid @enderror" required>
+                        <option value="">-Pilih Jenis Instansi-</option>
+                        @if(@$userInstansi)
+                            <option selected value="{{encode_id(@$userInstansi->ms_instansi_id)}}">{{@$userInstansi->instansi->name}}</option>
+                        @endif
+                    </select>
+                    @error('ms_instansi_id')
+                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                    @enderror
+                </div>
+                <div class="flex gap-4">
+                    <label class="mb-3 w-1/2 font-semibold required">Password Baru</label>
+                    <div class="flex flex-col w-full justify-center items-start gap-2">
+                        <input type="password" id="password" autocomplete="new-password" name="password" class="p-2 bg-white rounded border w-full @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters">
+                        @error('password')
+                            <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
+                        @enderror
+                        <button class="p-2 bg-gray-500 rounded my-2 text-white" type="button" id="togglePassword"><i class="ri-eye-line"></i> Lihat Password</button>
+                        <p>Kata Sandi harus mengandung Minimal 8 karakter, maksimal 15 karakter, <br>setidaknya 1 huruf kecil dan huruf besar, angka dan simbol</p>
                     </div>
                 </div>
             </div>
-            <div class="p-6">
-                <a href="{{route($route.'.index')}}" class="btn bg-danger text-white"><i class="ri-close-line"></i>&nbsp;Batal</a>
-                <button type="submit" class="btn bg-success text-white"><i class="ri-save-line"></i> Simpan</button>
+            <div class="flex justify-center items-center gap-2">
+                <a href="{{route($route.'.index')}}" class="bg-red-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Batal</span></a>
+                <button type="submit" class="bg-emerald-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="save" class="w-4 h-4 mr-2"></i><span> <span>Simpan</span></button>
             </div>
         </form>
     </div>
 </div>
+
 @endsection
 @section('js')
     <script src="{{asset('assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
diff --git a/resources/views/modules/management/user/index.blade.php b/resources/views/modules/management/user/index.blade.php
index e9b15ac..3b7bc20 100644
--- a/resources/views/modules/management/user/index.blade.php
+++ b/resources/views/modules/management/user/index.blade.php
@@ -3,20 +3,17 @@
 @section('css')
 @endsection
 @section('content')
-<div class="flex flex-col gap-6">
-    <div class="card">
-        <div class="card-header">
-            <div class="flex justify-between items-center">
-                <h4 class="card-title">Data {{$title}}</h4>
-            </div>
-        </div>
-        <div class="p-6">
+<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
+    <div class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
+        <div class="overflow-x-auto">
             <div id="toolbar">
                 @if(permission('is_create', $route.'.*','module',false) || permission('is_update', $route.'.*','module',false))
-                <a href="{{route($route.'.update')}}" class="btn bg-success text-white"><i class="ri-add-line"></i>&nbsp;Tambah Data</a>
+                    <a href="{{route($route.'.update')}}" class="p-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors flex items-center text-sm font-semibold text-slate-600">
+                        <i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span>Tambah Data</span>
+                    </a>
                 @endif
             </div>
-            <table class="gridjs-table" 
+            <table class="w-full text-left border-collapse" 
                     data-search="true"
                     data-toggle="table"
                     data-pagination="true"
@@ -28,15 +25,14 @@
                     data-page-size="10"
                     data-id-field="id"
                     id="grid-data">
-                  <thead class="gridjs-thead">
-                    <tr class="gridjs-tr bg-primary-light">
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="action">#</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-width="10" data-field="no">No</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="name">Name</th>
-                      <th class="gridjs-td gridjs-th text-sm text-gray-500" data-field="role">Role</th>
+                  <thead class="bg-slate-50/50 border-b border-slate-100">
+                    <tr>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="action">#</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-width="10" data-field="no">No</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="name">Name</th>
+                      <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest" data-field="role">Role</th>
                     </tr>
                   </thead>
-                  <tbody class="gridjs-tbody"></tbody>
               </table>
         </div>
     </div>