diff --git a/src/Controllers/Users/PermissionController.php b/src/Controllers/Users/PermissionController.php
index 00e32ad..6818402 100644
--- a/src/Controllers/Users/PermissionController.php
+++ b/src/Controllers/Users/PermissionController.php
@@ -32,12 +32,19 @@ public function __construct()
     public function index()
     {
         if ($this->request->isAJAX()) {
+            $columns = [
+                1 => 'name',
+                2 => 'description',
+            ];
+
             $start = $this->request->getGet('start');
             $length = $this->request->getGet('length');
             $search = $this->request->getGet('search[value]');
+            $order = $columns[$this->request->getGet('order[0][column]')];
+            $dir = $this->request->getGet('order[0][dir]');
 
             return $this->respond(Collection::datatable(
-                model(PermissionModel::class)->findPaginatedData($length, $start, $search),
+                model(PermissionModel::class)->findPaginatedData($order, $dir, $length, $start, $search),
                 model(PermissionModel::class)->countAllResults(),
                 model(PermissionModel::class)->countFindData($search)
             ));
diff --git a/src/Controllers/Users/RoleController.php b/src/Controllers/Users/RoleController.php
index 9d99fd8..b8dae88 100644
--- a/src/Controllers/Users/RoleController.php
+++ b/src/Controllers/Users/RoleController.php
@@ -22,12 +22,19 @@ class RoleController extends BaseController
     public function index()
     {
         if ($this->request->isAJAX()) {
+            $columns = [
+                1 => 'name',
+                2 => 'description',
+            ];
+
             $start = $this->request->getGet('start');
             $length = $this->request->getGet('length');
             $search = $this->request->getGet('search[value]');
+            $order = $columns[$this->request->getGet('order[0][column]')];
+            $dir = $this->request->getGet('order[0][dir]');
 
             return $this->respond(Collection::datatable(
-                model(GroupModel::class)->findPaginatedData($length, $start, $search),
+                model(GroupModel::class)->findPaginatedData($order, $dir, $length, $start, $search),
                 model(GroupModel::class)->countAllResults(),
                 model(GroupModel::class)->countFindData($search)
             ));
diff --git a/src/Controllers/Users/UserController.php b/src/Controllers/Users/UserController.php
index 1a68b41..7f18f84 100644
--- a/src/Controllers/Users/UserController.php
+++ b/src/Controllers/Users/UserController.php
@@ -32,12 +32,20 @@ public function __construct()
     public function index()
     {
         if ($this->request->isAJAX()) {
+            $columns = [
+                1 => 'username',
+                2 => 'email',
+                5 => 'created_at',
+            ];
+
             $start = $this->request->getGet('start');
             $length = $this->request->getGet('length');
             $search = $this->request->getGet('search[value]');
+            $order = $columns[$this->request->getGet('order[0][column]')];
+            $dir = $this->request->getGet('order[0][dir]');
 
             return $this->respond(Collection::datatable(
-                model(UserModel::class)->findPaginatedData($length, $start, $search),
+                model(UserModel::class)->findPaginatedData($order, $dir, $length, $start, $search),
                 model(UserModel::class)->countAllResults(),
                 model(UserModel::class)->countFindData($search)
             ));
diff --git a/src/Models/GroupModel.php b/src/Models/GroupModel.php
index 49b5e50..27e21c7 100644
--- a/src/Models/GroupModel.php
+++ b/src/Models/GroupModel.php
@@ -37,11 +37,13 @@ public function getGroupsForUser(int $userId)
      *
      * @param int    $length
      * @param int    $start
+     * @param string $order 
+     * @param string $dir
      * @param string $keyword
      *
      * @return array
      */
-    public function findPaginatedData(int $length, int $start, string $keyword = ''): array
+    public function findPaginatedData(string $order, string $dir, int $length, int $start, string $keyword = ''): array
     {
         return $this->builder()
             ->select('id, name, description')
@@ -49,6 +51,7 @@ public function findPaginatedData(int $length, int $start, string $keyword = '')
                 ->like('name', $keyword)
                 ->orLike('description', $keyword)
             ->groupEnd()
+            ->orderBy($order, $dir)
             ->limit($length, $start)
             ->get()
             ->getResultObject();
diff --git a/src/Models/PermissionModel.php b/src/Models/PermissionModel.php
index 5480a8a..783015b 100644
--- a/src/Models/PermissionModel.php
+++ b/src/Models/PermissionModel.php
@@ -11,11 +11,13 @@ class PermissionModel extends BaseModel
      *
      * @param int    $length
      * @param int    $start
+     * @param string $order 
+     * @param string $dir
      * @param string $keyword
      *
      * @return array
      */
-    public function findPaginatedData(int $length, int $start, string $keyword = ''): array
+    public function findPaginatedData(string $order, string $dir, int $length, int $start, string $keyword = ''): array
     {
         return $this->builder()
             ->select('id, name, description')
@@ -23,6 +25,7 @@ public function findPaginatedData(int $length, int $start, string $keyword = '')
                 ->like('name', $keyword)
                 ->orLike('description', $keyword)
             ->groupEnd()
+            ->orderBy($order, $dir)
             ->limit($length, $start)
             ->get()
             ->getResultObject();
diff --git a/src/Models/UserModel.php b/src/Models/UserModel.php
index c225835..827ea32 100644
--- a/src/Models/UserModel.php
+++ b/src/Models/UserModel.php
@@ -2,6 +2,7 @@
 
 namespace agungsugiarto\boilerplate\Models;
 
+use Myth\Auth\Entities\User;
 use Myth\Auth\Models\UserModel as BaseModel;
 
 class UserModel extends BaseModel
@@ -11,22 +12,39 @@ class UserModel extends BaseModel
      *
      * @param int    $length
      * @param int    $start
+     * @param string $order 
+     * @param string $dir
      * @param string $keyword
      *
      * @return array
      */
-    public function findPaginatedData(int $length, int $start, string $keyword = ''): array
+    public function findPaginatedData(string $order, string $dir, int $length, int $start, string $keyword = ''): array
     {
-        return $this->builder()
+        $this->builder()
             ->select('id, username, email, active, created_at')
             ->groupStart()
                 ->like('username', $keyword)
                 ->orLike('email', $keyword)
             ->groupEnd()
             ->where('deleted_at', null)
-            ->limit($length, $start)
-            ->get()
-            ->getResultObject();
+            ->orderBy($order, $dir)
+            ->limit($length, $start);
+
+        $results = $this->asObject(User::class)->findAll();
+
+        foreach ($results as $result) {
+            $data[] = [
+                'id'          => $result->id,
+                'active'      => $result->active,
+                'username'    => $result->username,
+                'email'       => $result->email,
+                'created_at'  => $result->created_at,
+                'roles'       => $result->getRoles(),
+                'permissions' => $result->getPermissions(),
+            ];
+        }
+
+        return $data;
     }
 
     /**
diff --git a/src/Views/Permission/create.php b/src/Views/Permission/create.php
index b4050d4..4b02bf7 100644
--- a/src/Views/Permission/create.php
+++ b/src/Views/Permission/create.php
@@ -33,7 +33,7 @@
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title"><?= lang('boilerplate.permission.fields.edit') ?></h5>
+                <h5 class="modal-title"><?= lang('boilerplate.permission.edit') ?></h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
                 </button>
diff --git a/src/Views/Permission/index.php b/src/Views/Permission/index.php
index bb872d5..ec81d1d 100644
--- a/src/Views/Permission/index.php
+++ b/src/Views/Permission/index.php
@@ -1,11 +1,11 @@
 <!-- Include -->
-<?= $this->include('agungsugiarto\boilerplate\Views\load\datatables') ?>
+<?= $this->include('agungsugiarto\boilerplate\Views\load\datatables') ?>
 <!-- Extend from layout index -->
-<?= $this->extend('agungsugiarto\boilerplate\Views\layout\index') ?>
+<?= $this->extend('agungsugiarto\boilerplate\Views\layout\index') ?>
 
 <!-- Section content -->
-<?= $this->section('content') ?>
-    <?= $this->include('agungsugiarto\boilerplate\Views\Permission\create') ?>
+<?= $this->section('content') ?>
+    <?= $this->include('agungsugiarto\boilerplate\Views\Permission\create') ?>
     <div class="row">
         <div class="col-12">
             <div class="card">
@@ -14,7 +14,7 @@
                         <div class="btn-group">
                             <button type="button" class="btn btn-sm btn-block btn-primary" id="create-book"
                                 data-toggle="modal" data-target="#modal-create-permission"><i class="fa fa-plus"></i>
-                                <?= lang('boilerplate.permission.add') ?>
+                                <?= lang('boilerplate.permission.add') ?>
                             </button>
                         </div>
                     </div>
@@ -38,22 +38,26 @@
             </div>
         </div>
     </div>
-<?= $this->endSection() ?>
+<?= $this->endSection() ?>
 
 <!-- Push section js -->
-<?= $this->section('js') ?>
+<?= $this->section('js') ?>
 <script>
 
     var tablePermission = $('#table-permission').DataTable({
         processing: true,
         serverSide: true,
-        ordering: false,
         autoWidth: false,
+        order: [[1, 'asc']],
 
         ajax : {
             url: '<?= route_to('admin/permission') ?>',
             method: 'GET'
         },
+        columnDefs: [{
+            orderable: false,
+            targets: [0,3]
+        }],
         columns : [
             { 'data': null },
             { 'data': 'name' },
@@ -214,4 +218,4 @@ function slugify(text) {
     }
 </script>
 
-<?= $this->endSection() ?>
+<?= $this->endSection() ?>
diff --git a/src/Views/Role/index.php b/src/Views/Role/index.php
index 8843a4c..d03229e 100644
--- a/src/Views/Role/index.php
+++ b/src/Views/Role/index.php
@@ -1,10 +1,10 @@
 <!-- Include datatables -->
-<?= $this->include('agungsugiarto\boilerplate\Views\load\datatables') ?>
+<?= $this->include('agungsugiarto\boilerplate\Views\load\datatables') ?>
 <!-- Extend from layout index -->
-<?= $this->extend('agungsugiarto\boilerplate\Views\layout\index') ?>
+<?= $this->extend('agungsugiarto\boilerplate\Views\layout\index') ?>
 
 <!-- Section content -->
-<?= $this->section('content') ?>
+<?= $this->section('content') ?>
     <div class="row">
         <div class="col-12">
             <div class="card">
@@ -12,7 +12,7 @@
                     <div class="float-right">
                         <div class="btn-group">
                             <a href="<?= route_to('admin/role/new') ?>" class="btn btn-sm btn-block btn-primary"><i class="fa fa-plus"></i>
-                                <?= lang('boilerplate.role.add') ?>
+                                <?= lang('boilerplate.role.add') ?>
                             </a>
                         </div>
                     </div>
@@ -36,21 +36,25 @@
             </div>
         </div>
     </div>
-<?= $this->endSection() ?>
+<?= $this->endSection() ?>
 
 <!-- Push section js -->
-<?= $this->section('js') ?>
+<?= $this->section('js') ?>
 <script>    
     var tableRole = $('#table-role').DataTable({
         processing: true,
         serverSide: true,
-        ordering: false,
         autoWidth: false,
+        order: [[1, 'asc']],
 
         ajax : {
             url: '<?= route_to('admin/role') ?>',
             method: 'GET'
         },
+        columnDefs: [{
+            orderable: false,
+            targets: [0,3]
+        }],
         columns : [
             { 'data': null },
             { 'data': 'name' },
@@ -106,4 +110,4 @@
         })
     })
 </script>
-<?= $this->endSection() ?>
+<?= $this->endSection() ?>
diff --git a/src/Views/User/index.php b/src/Views/User/index.php
index d54587a..21164e6 100644
--- a/src/Views/User/index.php
+++ b/src/Views/User/index.php
@@ -1,72 +1,93 @@
-<?= $this->include('agungsugiarto\boilerplate\Views\load\select2') ?>
-<?= $this->include('agungsugiarto\boilerplate\Views\load\datatables') ?>
+<?= $this->include('agungsugiarto\boilerplate\Views\load\select2') ?>
+<?= $this->include('agungsugiarto\boilerplate\Views\load\datatables') ?>
 <!-- Extend from layout index -->
-<?= $this->extend('agungsugiarto\boilerplate\Views\layout\index') ?>
+<?= $this->extend('agungsugiarto\boilerplate\Views\layout\index') ?>
 
 <!-- Section content -->
-<?= $this->section('content') ?>
-    <!-- SELECT2 EXAMPLE -->
-    <div class="card card-default">
-        <div class="card-header">
-            <div class="card-tools">
-                <div class="btn-group">
-                    <a href="<?= route_to('admin/user/manage/new') ?>" class="btn btn-sm btn-block btn-primary"><i class="fa fa-plus"></i>
-                        <?= lang('boilerplate.user.add') ?>
-                    </a>
-                </div>
+<?= $this->section('content') ?>
+<!-- SELECT2 EXAMPLE -->
+<div class="card card-default">
+    <div class="card-header">
+        <div class="card-tools">
+            <div class="btn-group">
+                <a href="<?= route_to('admin/user/manage/new') ?>" class="btn btn-sm btn-block btn-primary"><i class="fa fa-plus"></i>
+                    <?= lang('boilerplate.user.add') ?>
+                </a>
             </div>
         </div>
-        <div class="card-body">
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="table-responsive">
-                        <table id="table-user" class="table table-striped table-hover va-middle">
-                            <thead>
-                                <tr>
-                                    <th>#</th>
-                                    <th><?= lang('Auth.username') ?></th>
-                                    <th><?= lang('Auth.email') ?></th>
-                                    <th><?= lang('boilerplate.user.fields.active') ?></th>
-                                    <th><?= lang('boilerplate.user.fields.join') ?></th>
-                                    <th><?= lang('boilerplate.global.action') ?></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                            </tbody>
-                        </table>
-                    </div>
+    </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="table-responsive">
+                    <table id="table-user" class="table table-striped table-hover va-middle">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th><?= lang('Auth.username') ?></th>
+                                <th><?= lang('Auth.email') ?></th>
+                                <th><?= lang('boilerplate.user.fields.active') ?></th>
+                                <th><?= lang('boilerplate.role.fields.name') ?></th>
+                                <th><?= lang('boilerplate.user.fields.join') ?></th>
+                                <th><?= lang('boilerplate.global.action') ?></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
-    <!-- /.card -->
-<?= $this->endSection() ?>
+</div>
+<!-- /.card -->
+<?= $this->endSection() ?>
 
-<?= $this->section('js') ?>
+<?= $this->section('js') ?>
 <script>
     var tableUser = $('#table-user').DataTable({
         processing: true,
         serverSide: true,
-        ordering: false,
         autoWidth: false,
+        order: [[1, 'asc']],
 
-        ajax : {
+        ajax: {
             url: '<?= route_to('admin/user/manage') ?>',
             method: 'GET'
         },
-        columns : [
-            { 'data': null },
-            { 'data': 'username' },
-            { 'data': 'email' },
+        columnDefs: [{
+            orderable: false,
+            targets: [0,3,4,6]
+        }],
+        columns: [{
+                'data': null
+            },
+            {
+                'data': 'username'
+            },
+            {
+                'data': 'email'
+            },
             {
-                'data': function (data) {
+                'data': function(data) {
                     return `<span class="badge ${data.active == 1 ? 'bg-success' : 'bg-danger'}">${data.active == 1 ? '<?= lang('boilerplate.user.fields.active') ?>' : '<?= lang('boilerplate.user.fields.non_active') ?>'}</span>`
                 }
             },
+            {
+                'data': 'roles',
+                'render': function(roles) {
+                    var value = []
+                    Object.keys(roles).forEach(function(key) {
+                        value.push(roles[key]);
+                    })
+
+                    return value.toString().replace(',', ', ')
+                }
+            },
             {
                 'data': 'created_at',
-                'render': function(date) {
-                    return moment(date).fromNow()
+                'render': function(data) {
+                    return moment(data.date).fromNow()
                 }
             },
             {
@@ -82,47 +103,52 @@
         ]
     });
 
-    tableUser.on( 'draw.dt', function () {
-    var PageInfo = $('#table-user').DataTable().page.info();
-         tableUser.column(0, { page: 'current' }).nodes().each( function (cell, i) {
+    tableUser.on('draw.dt', function() {
+        var PageInfo = $('#table-user').DataTable().page.info();
+        tableUser.column(0, {
+            page: 'current'
+        }).nodes().each(function(cell, i) {
             cell.innerHTML = i + 1 + PageInfo.start;
-        } );
+        });
     });
 
     $(document).on('click', '.btn-delete', function(e) {
         Swal.fire({
-            title: '<?= lang('boilerplate.global.sweet.title') ?>',
-            text: "<?= lang('boilerplate.global.sweet.text') ?>",
-            icon: 'warning',
-            showCancelButton: true,
-            confirmButtonColor: '#3085d6',
-            cancelButtonColor: '#d33',
-            confirmButtonText: '<?= lang('boilerplate.global.sweet.confirm_delete') ?>'
-        })
-        .then((result) => {
-            if (result.value) {
-                $.ajax({
-                    url: `<?= route_to('admin/user/manage') ?>/${$(this).attr('data-id')}`,
-                    method: 'DELETE',
-                }).done((data, textStatus, jqXHR) => {
-                    Toast.fire({
-                        icon: 'success',
-                        title: jqXHR.statusText,
-                    });
-                    tableUser.ajax.reload();
-                }).fail((error) => {
-                    Toast.fire({
-                        icon: 'error',
-                        title: error.responseJSON.messages.error,
-                    });
-                })
-            }
-        })
+                title: '<?= lang('boilerplate.global.sweet.title') ?>',
+                text: "<?= lang('boilerplate.global.sweet.text') ?>",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: '<?= lang('boilerplate.global.sweet.confirm_delete') ?>'
+            })
+            .then((result) => {
+                if (result.value) {
+                    $.ajax({
+                        url: `<?= route_to('admin/user/manage') ?>/${$(this).attr('data-id')}`,
+                        method: 'DELETE',
+                    }).done((data, textStatus, jqXHR) => {
+                        Toast.fire({
+                            icon: 'success',
+                            title: jqXHR.statusText,
+                        });
+                        tableUser.ajax.reload();
+                    }).fail((error) => {
+                        Toast.fire({
+                            icon: 'error',
+                            title: error.responseJSON.messages.error,
+                        });
+                    })
+                }
+            })
     });
 
     tableUser.on('order.dt search.dt', () => {
-        tableUser.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
-            cell.innerHTML = i+1;
+        tableUser.column(0, {
+            search: 'applied',
+            order: 'applied'
+        }).nodes().each(function(cell, i) {
+            cell.innerHTML = i + 1;
         });
     }).draw();
 </script>