diff --git a/app/Http/Controllers/Admin/RoleController.php b/app/Http/Controllers/Admin/RoleController.php
index d3553ae2..cc75f178 100644
--- a/app/Http/Controllers/Admin/RoleController.php
+++ b/app/Http/Controllers/Admin/RoleController.php
@@ -182,8 +182,7 @@ class RoleController extends Controller
      */
     public function dataTable()
     {
-        $query = Role::query()->withCount(['users', 'permissions']);
-
+        $query = Role::query()->withCount(['users', 'permissions'])->get();
 
         return datatables($query)
             ->editColumn('id', function (Role $role) {
@@ -205,17 +204,15 @@ class RoleController extends Controller
             ->editColumn('name', function (Role $role) {
                 return "<span style='background-color: $role->color' class='badge'>$role->name</span>";
             })
-            ->editColumn('usercount', function ($query) {
+            ->editColumn('users_count', function ($query) {
                 return $query->users_count;
             })
-            ->editColumn('permissionscount', function ($query){
+            ->editColumn('permissions_count', function ($query){
                 return $query->permissions_count;
             })
             ->editColumn('power', function (Role $role){
                 return $role->power;
             })
-            ->orderColumn('usercount', 'users_count $1')
-            ->orderColumn('permissionscount', 'permissions_count $1')
             ->rawColumns(['actions', 'name'])
             ->make(true);
     }
diff --git a/themes/default/views/admin/roles/index.blade.php b/themes/default/views/admin/roles/index.blade.php
index 213a7724..b327fce9 100644
--- a/themes/default/views/admin/roles/index.blade.php
+++ b/themes/default/views/admin/roles/index.blade.php
@@ -1,16 +1,16 @@
 @extends('layouts.main')
 
 @section('content')
-    <div class="main py-4">
+    <div class="py-4 main">
 
         @can('admin.roles.write')
-            <div class="d-flex justify-content-end my-3">
+            <div class="my-3 d-flex justify-content-end">
                 <a href="{{route('admin.roles.create')}}" class="btn btn-primary"><i
                         class="fa fas fa-shield-alt pe-2"></i>{{__('Create role')}}</a>
             </div>
         @endcan
 
-        <div class="card card-body border-0 shadow table-wrapper table-responsive">
+        <div class="border-0 shadow card card-body table-wrapper table-responsive">
             <h2 class="mb-4 h5">{{ __('Roles') }}</h2>
 
             <div class="card-body table-responsive">
@@ -48,8 +48,8 @@
             columns: [
                 {data: 'id'},
                 {data: 'name'},
-                {data: 'usercount'},
-                {data: 'permissionscount'},
+                {data: 'users_count'},
+                {data: 'permissions_count'},
                 {data: 'power'},
                 {data: 'actions' , sortable : false},
             ],