diff --git a/app/Http/Controllers/admin/ModuleHostingController.php b/app/Http/Controllers/admin/ModuleHostingController.php
index c68ea56..c45ad8c 100644
--- a/app/Http/Controllers/admin/ModuleHostingController.php
+++ b/app/Http/Controllers/admin/ModuleHostingController.php
@@ -11,12 +11,14 @@ use App\Http\Requests\ModuleHosting\CreateHostingRequest;
 use App\Http\Requests\ModuleHosting\UpdateHostingRequest;
 use App\Repositories\Module\HostingServer\HostingServerRepositoryInterface;
 use Exception;
+use Yajra\DataTables\Facades\DataTables;
 
 class ModuleHostingController extends Controller
 {
     public function __construct(
         public HostingServerRepositoryInterface $hostingServerRepository
-    ) {}
+    ) {
+    }
     // show all hosting module
     public function index(Request $request)
     {
@@ -30,7 +32,7 @@ class ModuleHostingController extends Controller
     }
     public function import(Request $request)
     {
-        if (! $request->file) {
+        if (!$request->file) {
             return back()->withErrors("Please choose your file");
         }
         $data = Excel::toArray([], $request->file);
@@ -48,7 +50,7 @@ class ModuleHostingController extends Controller
             }
         }
 
-        if (! isset($allData) || (isset($allData) && count($allData) < 1)) {
+        if (!isset($allData) || (isset($allData) && count($allData) < 1)) {
             return back()->withErrors('No data imported');
         }
         DB::beginTransaction();
@@ -77,7 +79,7 @@ class ModuleHostingController extends Controller
         DB::beginTransaction();
         try {
             $data = $request->all();
-            $data['password'] =  SignRSA::EncryptFunc($request->password);
+            $data['password'] = SignRSA::EncryptFunc($request->password);
             $this->hostingServerRepository->create($data);
             DB::commit();
         } catch (\Exception $error) {
@@ -90,14 +92,15 @@ class ModuleHostingController extends Controller
     {
 
         $server = $this->hostingServerRepository->find($id);
-        if (! $server) return back()->withErrors('Can\'t find server by id ' . $id);
+        if (!$server)
+            return back()->withErrors('Can\'t find server by id ' . $id);
         $title = 'View server hosting information';
         return view('administrator.pages.module.hosting.edit', compact('title', 'server'));
     }
     public function update(UpdateHostingRequest $request, int $id = 0)
     {
         $server = $this->hostingServerRepository->find($id);
-        if (! $server) {
+        if (!$server) {
             return back()->withErrors('Invalid Request');
         }
         $request->validated();
@@ -110,8 +113,8 @@ class ModuleHostingController extends Controller
         DB::beginTransaction();
         try {
             $data = $request->all();
-            if (! empty($request->get('password'))) {
-                $data['password'] =  SignRSA::EncryptFunc($request->password);
+            if (!empty($request->get('password'))) {
+                $data['password'] = SignRSA::EncryptFunc($request->password);
             }
             $this->hostingServerRepository->update($id, $data);
             DB::commit();
@@ -124,7 +127,7 @@ class ModuleHostingController extends Controller
     public function destroy(int $id = 0)
     {
         $server = $this->hostingServerRepository->find($id);
-        if (! $server) {
+        if (!$server) {
             return back()->withErrors('Invalid Request');
         }
         DB::beginTransaction();
@@ -138,4 +141,30 @@ class ModuleHostingController extends Controller
         }
         return redirect()->route('module.hosting.index')->with('success', 'Deleted successfully.');
     }
+
+    public function datatable(Request $request)
+    {
+        $query = $this->hostingServerRepository->filter(
+            $request->all(),
+            [],
+            [],
+            ['*'],
+            true
+        );
+
+        return DataTables::eloquent($query)
+            ->addColumn(
+                'action',
+                function ($d) {
+                    return view('administrator.pages.module.dns.datatable.action', ['row' => $d])->render();
+                }
+            )
+            ->filterColumn('name', function ($query, $keyword) {
+                $query->where('name', 'like', "%{$keyword}%");
+            })
+            ->filterColumn('user', function ($query, $keyword) {
+                $query->where('user', 'like', "%{$keyword}%");
+            })
+            ->make(true);
+    }
 }
diff --git a/app/Repositories/Module/HostingServer/HostingServerCachedRepository.php b/app/Repositories/Module/HostingServer/HostingServerCachedRepository.php
index 0b6b116..635367f 100644
--- a/app/Repositories/Module/HostingServer/HostingServerCachedRepository.php
+++ b/app/Repositories/Module/HostingServer/HostingServerCachedRepository.php
@@ -37,18 +37,31 @@ class HostingServerCachedRepository extends BaseCachedRepository implements Host
             return $this->hostingServerRepository->findByName($name);
         });
     }
-    public function filter(array $data = [], array $relationships = [], array $withCount = [], array $select = ['*'])
-    {
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    ) {
+        if (
+            $returnQuery ||
+            !empty($data['paginate'])
+        ) {
+            return $this->hostingServerRepository
+                ->filter($data, $relationships, $withCount, $select, $returnQuery);
+        }
+
         $cacheKey = $this->getCacheKey(md5(json_encode([
-            'filterItem' => [
-                'data' => $data,
-                'relationships' => $relationships,
-                'select' => $select,
-                'withCount' => $withCount
-            ]
+            'filter' => compact('data', 'relationships', 'withCount', 'select')
         ])));
-        return Cache::remember($cacheKey, $this->cacheTime, function () use ($data, $relationships, $select, $withCount) {
-            return $this->hostingServerRepository->filter($data, $relationships, $withCount, $select);
-        });
+
+        return Cache::remember(
+            $cacheKey,
+            $this->cacheTime,
+            fn() =>
+            $this->hostingServerRepository
+                ->filter($data, $relationships, $withCount, $select, $returnQuery)
+        );
     }
 }
diff --git a/app/Repositories/Module/HostingServer/HostingServerRepository.php b/app/Repositories/Module/HostingServer/HostingServerRepository.php
index 106d504..f9ac062 100644
--- a/app/Repositories/Module/HostingServer/HostingServerRepository.php
+++ b/app/Repositories/Module/HostingServer/HostingServerRepository.php
@@ -20,61 +20,37 @@ class HostingServerRepository extends BaseRepository implements HostingServerRep
         if (empty($name)) {
             return false;
         }
-        return $this->model->where('name','LIKE',"%$name%")->first();
+        return $this->model->where('name', 'LIKE', "%$name%")->first();
     }
-    public function filter(array $data = [], array $relationships = [], array $withCount = [], array $select = ['*'])
-    {
-        $model = $this->model->with($relationships)->select($select);
-        if (isset($data['relations'])) {
-            foreach ($data['relations'] as $key => $value) {
-                $model = $model->whereHas($key, function ($query) use ($value) {
-                    if (isset($value['condition'])) {
-                        switch (strtoupper($value['condition'])) {
-                            case "IN":
-                                $query->whereIn($value['key'], $value['value']);
-                                break;
-                            case "NotIn":
-                                $query->whereNotIn($value['key'], $value['value']);
-                                break;
-                            default:
-                                $query->where($value['key'], $value['condition'], $value['value']);
-                                break;
-                        }
-                    } else {
-                        $query->where($value['key'], $value['value']);
-                    }
-                });
-            }
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    ) {
+        $query = $this->model
+            ->select($select)
+            ->with($relationships);
+
+        // if (!empty($data['vcenter_id'])) {
+        //     $query->where('vcenter_id', $data['vcenter_id']);
+        // }
+
+        if (!empty($withCount)) {
+            $query->withCount($withCount);
         }
-        if (isset($data['status'])) {
-            if (is_array($data['status'])) {
-                $model = $model->where(function ($query) use ($data) {
-                    if (isset($data['status']['condition'])) {
-                        switch (strtoupper($data['status']['condition'])) {
-                            case "IN":
-                                $query->whereIn($data['status']['key'], $data['status']['value']);
-                                break;
-                            case "NOTIN":
-                                $query->whereNotIn($data['status']['key'], $data['status']['value']);
-                                break;
-                            default:
-                                $query->where($data['status']['key'], $data['status']['condition'], $data['status']['value']);
-                                break;
-                        }
-                    } else {
-                        $query->where($data['status']['key'], $data['status']['value']);
-                    }
-                });
-            } else {
-                $model =  $model->where("status", $data['status']);
-            }
+
+        if ($returnQuery) {
+            return $query;
         }
-        if (count($withCount) > 0) {
-            $model = $model->withCount($withCount);
+
+        if (!empty($data['paginate'])) {
+            return $query->paginate(
+                $data['per_page'] ?? 15
+            );
         }
-        if (isset($data['page'])) {
-            return $model->paginate(15);
-        }
-        return $model->get();
+
+        return $query->get();
     }
 }
diff --git a/app/Repositories/Module/HostingServer/HostingServerRepositoryInterface.php b/app/Repositories/Module/HostingServer/HostingServerRepositoryInterface.php
index 28f9c7b..c3aaaaf 100644
--- a/app/Repositories/Module/HostingServer/HostingServerRepositoryInterface.php
+++ b/app/Repositories/Module/HostingServer/HostingServerRepositoryInterface.php
@@ -3,9 +3,16 @@ namespace App\Repositories\Module\HostingServer;
 
 use App\Repositories\BaseRepositoryInterface;
 
-interface HostingServerRepositoryInterface extends BaseRepositoryInterface{
+interface HostingServerRepositoryInterface extends BaseRepositoryInterface
+{
     public function get_active();
     public function findByName(string $name = '');
-    public function filter(array $data = [],array $relationships = [],array $withCount = [],array $select = ['*']);
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    );
 
 }
\ No newline at end of file
diff --git a/resources/views/administrator/pages/block/ModuleHosting.blade.php b/resources/views/administrator/pages/block/ModuleHosting.blade.php
index 7d63c1e..9bd66be 100644
--- a/resources/views/administrator/pages/block/ModuleHosting.blade.php
+++ b/resources/views/administrator/pages/block/ModuleHosting.blade.php
@@ -1,9 +1,10 @@
-<a href="{{ route('module.hosting.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add New Server</a>
+<x-button-crm variant="secondary" size="sm" url="{{ route('module.hosting.create') }}" icon="plus-circle">Add
+    New Server</x-button-crm>
 <form action="{{ route('module.hosting.import') }}" class="d-lg-inline" enctype="multipart/form-data" method="post">
     @csrf
-    <input type="file" name="file" class="d-none file-selector" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="form.submit()" />
-    <button type="button" class="btn btn-outline-secondary btn-import__from">
-        <i class="fas fa-plus-circle"></i> Import From Excel
-    </button>
+    <input type="file" name="file" class="d-none file-selector"
+        accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="form.submit()" />
+    <x-button-crm variant="primary" size="sm" url="{{ route('module.hosting.import') }}" icon="plus-circle">Import From
+        Excel</x-button-crm>
 </form>
-<a href="{{ url('file/Hosting.xlsx') }}"  class="btn btn-outline-secondary"><i class="fas fa-download"></i> File Import Demo</a>
+<x-button-crm variant="secondary" size="sm" url="file/Hosting.xlsx" icon="download">File Import Demo</x-button-crm>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/module/hosting/datatable/action.blade.php b/resources/views/administrator/pages/module/hosting/datatable/action.blade.php
new file mode 100644
index 0000000..7ad526b
--- /dev/null
+++ b/resources/views/administrator/pages/module/hosting/datatable/action.blade.php
@@ -0,0 +1,2 @@
+<x-button-crm type="button" variant="primary" size="sm" route="module.hosting.edit" :params="['id' => $row->id]" icon="pencil">Edit</x-button-crm>
+<x-button-crm type="button" variant="danger" size="sm" route="module.hosting.destroy" :params="['id' => $row->id]" icon="trash">Delete</x-button-crm>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/module/hosting/index.blade.php b/resources/views/administrator/pages/module/hosting/index.blade.php
index 1ed8446..4e2fe9e 100644
--- a/resources/views/administrator/pages/module/hosting/index.blade.php
+++ b/resources/views/administrator/pages/module/hosting/index.blade.php
@@ -1,5 +1,20 @@
-@php use App\Http\Helpers\Helper; @endphp
 @extends('administrator.layout.master')
+@push('plugin-styles')
+    @foreach (config('assets.datatable.css') as $datatable)
+        <link href="{{ asset($datatable) }}" rel="stylesheet" />
+    @endforeach
+@endpush
+
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'Datacenter', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('manager module hosting'))
         <div class="card card-primary card-outline">
@@ -7,70 +22,10 @@
                 @include('administrator.pages.block.ModuleHosting')
             </div>
             <div class="card-body">
-                <table class="table table-invoice table-bordered">
-                    <thead>
-                    <tr>
-                        <th>
-                            <label>
-                                <input type="checkbox" name="check" class="check-all">
-                            </label>
-                        </th>
-                        <th>IP Host</th>
-                        <th>Domain Created</th>
-                        <th>Status</th>
-                        <th>Last Updated</th>
-                        <th style="width:40px"></th>
-                        <th style="width: 40px"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    @if (count($modules) > 0)
-                        @foreach ($modules as $item)
-                            <tr>
-                                <td class="text-center">
-                                    <label for=""></label><input type="checkbox" name="id[]"
-                                                                 value="{{ $item->id }}" id="">
-                                </td>
-                                <td class="text-center">
-                                    {{ $item->name }}
-                                </td>
-                                <td class="text-center">
-                                    {{ $item->counter }}
-                                </td>
-                                <td class="text-center">
-                                    {!! $item->getStatus() !!}
-                                </td>
-                                <td class="text-center">
-                                    @time($item->updated_at)
-                                </td>
-                                <td>
-                                    <a class="btn btn-warning btn-sm"
-                                       href="{{ route('module.hosting.edit', ['id' => $item->id]) }}">
-                                        <i class="fas fa-user-edit"></i>
-                                    </a>
-                                </td>
-                                <td>
-                                    @if (auth()->guard('admins')->user()->can('delete module hosting'))
-                                        <form method="post" class="d-inline"
-                                              action="{{ route('module.hosting.destroy', ['id' => $item->id]) }}">
-                                            @method('delete')
-                                            @csrf
-                                            <button type="submit" data-toggle="tooltip" data-placement="top"
-                                                    title="" class="btn btn-sm btn-danger" data-original-title="Xoá">
-                                                <i class="fas fa-trash"></i>
-                                            </button>
-                                        </form>
-                                    @endif
-                                </td>
-                            </tr>
-                        @endforeach
-                    @endif
-                    </tbody>
-
-                </table>
-            </div>
-            <div class="card-footer">
-                {!! $modules->withQueryString()->links() !!}
+                <x-datatable id="hostingTable" ajax="{{ route('module.hosting.datatable') }}" :columns="[
+                    ['key' => 'name', 'label' => 'Name'],
+                    ['key' => 'action', 'label' => 'Action'],
+                ]" />
             </div>
         </div>
     @else
@@ -80,3 +35,9 @@
         </div>
     @endif
 @endsection
+
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+@endpush
\ No newline at end of file
diff --git a/routes/admin.php b/routes/admin.php
index 65af4c9..720d0df 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -160,8 +160,9 @@ Route::prefix('administrator')->group(function () {
         });
 
         //Module Hosting Server
-        Route::controller(ModuleHostingController::class)->group(function () {
+        Route::controller(ModuleHostingController::class)->prefix('server-hosting')->group(function () {
             Route::get('list-all-server-hosting', 'index')->name('module.hosting.index');
+            Route::get('datatable', 'datatable')->name('module.hosting.datatable');
             Route::post('import-hosting-from-csv', 'import')->name('module.hosting.import');
             Route::get('add-new-server-hosting', 'create')->name('module.hosting.create');
             Route::post('add-new-server-hosting', 'store')->name('module.hosting.store');
@@ -179,7 +180,7 @@ Route::prefix('administrator')->group(function () {
             Route::get('view-server-dns/{id}', 'edit')->name('module.dns.edit');
             Route::put('view-server-dns/{id}', 'update')->name('module.dns.update');
             Route::delete('remove-server-dns/{id}', 'destroy')->name('module.dns.destroy');
-            Route::get('datatable', 'datatable')->name('module.dns.datatable');
+            Route::get('server-dns/datatable', 'datatable')->name('module.dns.datatable');
         });
 
         Route::controller(ModuleIPPoolController::class)->group(function () {