diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index bf1727b7..d0efd5ca 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -18,6 +18,7 @@ class UserFactory extends Factory
             'nama' => $this->faker->name(),
             'email' => $this->faker->unique()->safeEmail(),
             't_daftar' => now(),
+            'status' => 'active',
             'email_verified_at' => now(),
             'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
             'remember_token' => Str::random(10),
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 7b5a37b5..bb2b7ec6 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -232,6 +232,16 @@
             cursor: context-menu !important;
         }
 
+        .hovernone-success:hover {
+            background-color: #38c172 !important;
+            cursor: context-menu !important;
+        }
+
+        .hovernone-danger:hover {
+            background-color: #e3342f !important;
+            cursor: context-menu !important;
+        }
+
         /* ---------------------------------------------------
             MEDIAQUERIES
         ----------------------------------------------------- */
diff --git a/resources/views/pengurusanpengguna/index.blade.php b/resources/views/pengurusanpengguna/index.blade.php
index 343c9cd3..4ce43bf0 100644
--- a/resources/views/pengurusanpengguna/index.blade.php
+++ b/resources/views/pengurusanpengguna/index.blade.php
@@ -3,21 +3,23 @@
 @section('content')
 <div class="container-fluid">
     <div class="row ">
-  
         <div class="col-md-11 mx-auto card p-4">
             @if ($message = Session::get('success'))
                 <div class="alert alert-success">
                     <p>{{ $message }}</p>
                 </div>
             @endif
-        
+            <?php
+                $totaluser = count($alluser);
+            ?>
             <table class="table table-striped  table-xl" id="pengguna" style="width:100%">
                 <thead class="bg-primary text-white">
                     <tr>
-                        <th><input type="checkbox" aria-label="Checkbox for following text input"></th>
+                        <th><input type="checkbox" aria-label="Checkbox for following text input" onclick="selectall(this)"></th>
                         <th>Nama</th>
                         <th>Emails</th>
                         <th>Taraf</th>
+                        <th>Status</th>
                         <th class="text-center">Action</th>
                     </tr>
                 </thead>
@@ -25,13 +27,21 @@
                     
                     @foreach ($alluser as $user)
                     <tr>
-                        <td><input type="checkbox" aria-label="Checkbox for following text input" name="{{ $loop->iteration }}"></td>
+                        <td><input type="checkbox" aria-label="Checkbox for following text input" name="{{ $user->id }}"></td>
                         <td>{{ $user->nama }}</td>
                         <td>{{ $user->email }}</td>
                         <td>
                         @foreach ($user->roles as $taraf)
                             <button class="btn btn-primary btn-sm hovernone" >{{$taraf->name}}</button>
                         @endforeach
+                        </td>
+                        <td>
+                            @if ($user->status =='active')
+                                <button class="btn btn-success btn-sm hovernone-success" >{{$user->status}}</button>
+                            @elseif ($user->status =='banned')
+                            <button class="btn btn-danger btn-sm hovernone-danger" >{{$user->status}}</button>
+                            @endif
+                            
                         </td>
                         <td class="text-center">
                             <a  href="{{ route('pengguna.show',$user->id) }}"><i class="far fa-edit"></i></a>
@@ -71,7 +81,7 @@
                 "orderable": false
                 }
             ],
-            order: [[1, 'asc']]
+            order: [[1, 'asc']],
             // "ordering": false,
             "info": false,
             "lengthChange": false,
@@ -105,8 +115,20 @@
         $( '.adduser').removeClass('dt-button');
         $( '.export').removeClass('dt-button');
 
+        
+
       
     });
+
+    function selectall(cb) {
+        var totaluser = '<?php echo $totaluser; ?>';
+        console.log(totaluser);
+        for(var i=0;i<totaluser;i++)
+        {
+            checkboxes[i].checked = cb.checked;
+        }
+        // $("input:checkbox").attr('checked', cb.checked);
+    }
 </script>
      
 @endsection
diff --git a/resources/views/pengurusanpengguna/roles.blade.php b/resources/views/pengurusanpengguna/roles.blade.php
index bb199889..84fa60d1 100644
--- a/resources/views/pengurusanpengguna/roles.blade.php
+++ b/resources/views/pengurusanpengguna/roles.blade.php
@@ -1,19 +1,19 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-12">
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-11 mx-auto card p-4">
             @if ($message = Session::get('success'))
                 <div class="alert alert-success">
                     <p>{{ $message }}</p>
                 </div>
             @endif
         
-            <table class="table table-striped table-bordered table-sm" id="roles">
-                <thead>
+            <table class="table table-striped" id="roles">
+                <thead class="bg-primary text-white">
                     <tr>
-                        <th>No</th>
+                        <th><input type="checkbox" aria-label="Checkbox for following text input" onclick="selectall(this)"></th>
                         <th>Roles</th>
                         <th class="text-center">Action</th>
                     </tr>
@@ -21,7 +21,7 @@
                 <tbody>
                     @foreach ($allpermission as $role)
                     <tr>
-                        <td>{{ $loop->iteration }}</td>
+                        <td><input type="checkbox" aria-label="Checkbox for following text input" name="{{ $role->id }}"></td>
                         <td>{{ $role->name }}
                         </td>
                         <td class="text-center">
@@ -42,13 +42,52 @@
 </div>
 <script>
     $(document).ready( function () {
-    $('#roles').DataTable({
-        "ordering": false,
-        "info": false,
-        "lengthChange": false,
-        "pageLength": 15
-    });
-} );
+        $('#roles').DataTable({
+            "columnDefs": [ 
+                {
+                "targets": 0,
+                "orderable": false
+                }, 
+                {
+                "targets": 2,
+                "orderable": false
+                }
+            ],
+            order: [[1, 'asc']],
+            "info": false,
+            "lengthChange": false,
+            "pageLength": 15,
+            dom: 'Bfrtip',
+            buttons: [
+                {
+                    className: 'btn btn-outline-success pl-4 pr-4 btn-sm adduser',
+                    text: '<i class="fas fa-plus" id="test"></i>',
+                    titleAttr: 'Add User',
+                    action: function ( e, dt, node, config ) {
+                        alert( 'Button activated' );
+                    }
+                },
+                {
+                    className: 'btn btn-outline-secondary pl-4 pr-4 btn-sm  export',
+                    titleAttr: 'Export to CSV',
+                    text: '<i class="fas fa-download"></i>',
+                    action: function ( e, dt, node, config ) {
+                        alert( 'Button activated' );
+                    }
+                }
+            ]
+        });
+
+        $('.adduser').tooltip();
+        $('.export').tooltip();
+        // $( '.dt-buttons').addClass('btn-group');
+        $( '.adduser').removeClass('dt-button');
+        $( '.export').removeClass('dt-button');
+    } );
+
+    function selectall(cb) {
+        $("input:checkbox").attr('checked', cb.checked);
+    }
 </script>
      
 @endsection
diff --git a/resources/views/pengurusanpengguna/taraf.blade.php b/resources/views/pengurusanpengguna/taraf.blade.php
index 86866b69..fddc2c68 100644
--- a/resources/views/pengurusanpengguna/taraf.blade.php
+++ b/resources/views/pengurusanpengguna/taraf.blade.php
@@ -1,19 +1,19 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-12">
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-11 mx-auto card p-4">
             @if ($message = Session::get('success'))
                 <div class="alert alert-success">
                     <p>{{ $message }}</p>
                 </div>
             @endif
-        
-            <table class="table table-striped table-bordered table-sm" id="taraf">
-                <thead >
+            
+            <table class="table table-striped" id="taraf">
+                <thead class="bg-primary text-white">
                     <tr>
-                        <th>No</th>
+                        <th><input type="checkbox" aria-label="Checkbox for following text input" onclick="selectall(this)"></th>
                         <th>Taraf</th>
                         <th>Roles</th>
                         <th class="text-center">Action</th>
@@ -22,7 +22,7 @@
                 <tbody>
                     @foreach ($roles as $role)
                     <tr>
-                        <td>{{ $loop->iteration }}</td>
+                        <td><input type="checkbox" aria-label="Checkbox for following text input" name="{{ $role->id }}"></td>
                         <td>{{ $role->name }}</td>
                         {{-- <td>{{ $role->email }}</td> --}}
                         <td>
@@ -48,11 +48,58 @@
 <script>
     $(document).ready( function () {
     $('#taraf').DataTable({
-        "ordering": false,
-        "info": false,
-        "lengthChange": false,
-        "pageLength": 15
-    });
-} );
+        "columnDefs": [ 
+                {
+                "targets": 0,
+                "orderable": false
+                }, 
+                {
+                "targets": 3,
+                "orderable": false
+                }
+            ],
+            order: [[1, 'asc']],
+            // "ordering": false,
+            "info": false,
+            "lengthChange": false,
+            "pageLength": 15,
+            dom: 'Bfrtip',
+            buttons: [
+                // 'copy', 'excel', 'pdf'
+                // { text: 'copy', className: 'btn btn-primary' },
+                {
+                    className: 'btn btn-outline-success pl-4 pr-4 btn-sm adduser',
+                    text: '<i class="fas fa-plus" id="test"></i>',
+                    titleAttr: 'Add User',
+                    action: function ( e, dt, node, config ) {
+                        alert( 'Button activated' );
+                    }
+                },
+                {
+                    className: 'btn btn-outline-secondary pl-4 pr-4 btn-sm  export',
+                    titleAttr: 'Export to CSV',
+                    text: '<i class="fas fa-download"></i>',
+                    action: function ( e, dt, node, config ) {
+                        alert( 'Button activated' );
+                    }
+                }
+            ]
+        });
+
+        $('.adduser').tooltip();
+        $('.export').tooltip();
+        // $( '.dt-buttons').addClass('btn-group');
+        $( '.adduser').removeClass('dt-button');
+        $( '.export').removeClass('dt-button');
+
+         //var simple = '<?php {{-- echo $totaluser;--}} ?>';
+        // console.log(simple);
+    } );
+
+    function selectall(cb) {
+        $("input:checkbox").attr('checked', cb.checked);
+    }
+
+    
 </script>
 @endsection