diff --git a/app/Http/Controllers/admin/ModuleDNSController.php b/app/Http/Controllers/admin/ModuleDNSController.php
index bef0595..1c9f9a4 100644
--- a/app/Http/Controllers/admin/ModuleDNSController.php
+++ b/app/Http/Controllers/admin/ModuleDNSController.php
@@ -16,12 +16,14 @@ use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Facades\Validator;
 use Maatwebsite\Excel\Facades\Excel;
+use Yajra\DataTables\Facades\DataTables;
 
 class ModuleDNSController extends Controller
 {
     public function __construct(
         public DnsServerRepositoryInterface $dnsServerRepository
-    ) {}
+    ) {
+    }
     // show all hosting module
     public function index(Request $request)
     {
@@ -50,7 +52,7 @@ class ModuleDNSController 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();
@@ -80,7 +82,7 @@ class ModuleDNSController extends Controller
         DB::beginTransaction();
         try {
             $data = $request->all();
-            $data['password'] =  SignRSA::EncryptFunc($request->password);
+            $data['password'] = SignRSA::EncryptFunc($request->password);
             $this->dnsServerRepository->create($data);
             DB::commit();
         } catch (\Exception $error) {
@@ -92,7 +94,8 @@ class ModuleDNSController extends Controller
     public function edit(int $id = 0)
     {
         $server = $this->dnsServerRepository->find($id);
-        if (! $server) return back()->withErrors('Can\'t find server by id ' . $server);
+        if (!$server)
+            return back()->withErrors('Can\'t find server by id ' . $server);
         $title = 'View server dns information';
         return view('administrator.pages.module.dns.edit', compact('title', 'server'));
     }
@@ -100,7 +103,8 @@ class ModuleDNSController extends Controller
     {
         $server = $this->dnsServerRepository->find($id);
 
-        if (! $server) return back()->withErrors('Invalid Request');
+        if (!$server)
+            return back()->withErrors('Invalid Request');
 
         $request->validated();
 
@@ -114,8 +118,8 @@ class ModuleDNSController 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->dnsServerRepository->update($id, $data);
             DB::commit();
@@ -128,7 +132,7 @@ class ModuleDNSController extends Controller
     public function destroy(int $id = 0)
     {
         $server = $this->dnsServerRepository->find($id);
-        if (! $server) {
+        if (!$server) {
             return back()->withErrors('Invalid Request');
         }
         DB::beginTransaction();
@@ -142,4 +146,31 @@ class ModuleDNSController extends Controller
         }
         return redirect()->route('module.dns.index')->with('success', 'Deleted successfully.');
     }
+
+
+    public function datatable(Request $request)
+    {
+        $query = $this->dnsServerRepository->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/DnsServer/DnsServerCachedRepository.php b/app/Repositories/Module/DnsServer/DnsServerCachedRepository.php
index e8878e9..05a613e 100644
--- a/app/Repositories/Module/DnsServer/DnsServerCachedRepository.php
+++ b/app/Repositories/Module/DnsServer/DnsServerCachedRepository.php
@@ -16,19 +16,32 @@ class DnsServerCachedRepository extends BaseCachedRepository implements DnsServe
     {
         return $this->dnsServerRepository->getModel();
     }
-    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->dnsServerRepository
+                ->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->dnsServerRepository->filter($data, $relationships, $withCount, $select);
-        });
+
+        return Cache::remember(
+            $cacheKey,
+            $this->cacheTime,
+            fn() =>
+            $this->dnsServerRepository
+                ->filter($data, $relationships, $withCount, $select, $returnQuery)
+        );
     }
     public function findByName(string $name = '')
     {
@@ -37,7 +50,7 @@ class DnsServerCachedRepository extends BaseCachedRepository implements DnsServe
                 'name' => $name
             ]
         ])));
-        return Cache::remember($cacheKey, $this->cacheTime, function ()  use ($name){
+        return Cache::remember($cacheKey, $this->cacheTime, function () use ($name) {
             return $this->dnsServerRepository->findByName($name);
         });
     }
diff --git a/app/Repositories/Module/DnsServer/DnsServerRepository.php b/app/Repositories/Module/DnsServer/DnsServerRepository.php
index 0ae13c3..d1a1f87 100644
--- a/app/Repositories/Module/DnsServer/DnsServerRepository.php
+++ b/app/Repositories/Module/DnsServer/DnsServerRepository.php
@@ -11,66 +11,42 @@ class DnsServerRepository extends BaseRepository implements DnsServerRepositoryI
     {
         return ModuleDnsServer::class;
     }
-    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();
     }
     public function findByName(string $name = '')
     {
         if (empty($name)) {
             return false;
         }
-        return $this->model->where('name','LIKE',"%$name%")->first();
+        return $this->model->where('name', 'LIKE', "%$name%")->first();
     }
 }
diff --git a/app/Repositories/Module/DnsServer/DnsServerRepositoryInterface.php b/app/Repositories/Module/DnsServer/DnsServerRepositoryInterface.php
index f7923e9..55f19f7 100644
--- a/app/Repositories/Module/DnsServer/DnsServerRepositoryInterface.php
+++ b/app/Repositories/Module/DnsServer/DnsServerRepositoryInterface.php
@@ -3,8 +3,15 @@ namespace App\Repositories\Module\DnsServer;
 
 use App\Repositories\BaseRepositoryInterface;
 
-interface DnsServerRepositoryInterface extends BaseRepositoryInterface{
-    public function filter(array $data = [],array $relationships = [],array $withCount = [],array $select = ['*']);
+interface DnsServerRepositoryInterface extends BaseRepositoryInterface
+{
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    );
     public function findByName(string $name = '');
 
 }
\ No newline at end of file
diff --git a/resources/views/administrator/pages/block/ModuleDNS.blade.php b/resources/views/administrator/pages/block/ModuleDNS.blade.php
index 0fec4d0..6607ba5 100644
--- a/resources/views/administrator/pages/block/ModuleDNS.blade.php
+++ b/resources/views/administrator/pages/block/ModuleDNS.blade.php
@@ -1,9 +1,9 @@
-<a href="{{ route('module.dns.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add New Server</a>
+<x-button-crm variant="primary" size="sm" url="{{ route('module.dns.create') }}" icon="plus-circle">Add New
+    Server</x-button-crm>
 <form action="{{ route('module.dns.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>
+    <x-button-crm variant="primary" size="sm" url="{{ route('module.dns.import') }}" icon="plus-circle">Import From
+        Excel</x-button-crm>
 </form>
-<a href="{{ url('file/DNS.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/DNS.xlsx" icon="download">File Import Demo</x-button-crm>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/module/dns/datatable/action.blade.php b/resources/views/administrator/pages/module/dns/datatable/action.blade.php
new file mode 100644
index 0000000..9b2e751
--- /dev/null
+++ b/resources/views/administrator/pages/module/dns/datatable/action.blade.php
@@ -0,0 +1,2 @@
+<x-button-crm type="button" variant="primary" size="sm" route="module.dns.edit" :params="['id' => $row->id]" icon="pencil">Edit</x-button-crm>
+<x-button-crm type="button" variant="danger" size="sm" route="module.dns.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/dns/index.blade.php b/resources/views/administrator/pages/module/dns/index.blade.php
index 06ee317..d5049c9 100644
--- a/resources/views/administrator/pages/module/dns/index.blade.php
+++ b/resources/views/administrator/pages/module/dns/index.blade.php
@@ -1,76 +1,33 @@
-@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' => 'DNS Server', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager module dns"))
         <div class="card card-primary card-outline">
-            <div class="card-header">
+            <div class="card-header d-flex justify-content-end gap-2">
                 @include("administrator.pages.block.ModuleDNS")
             </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.dns.edit',['id' => $item->id]) }}">
-                                        <i class="fas fa-user-edit"></i>
-                                    </a>
-                                </td>
-                                <td>
-                                    @if(auth()->guard('admins')->user()->can("delete module dns"))
-                                        <form method="post"
-                                              class="d-inline"
-                                              action="{{ route('module.dns.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="dnsTable" ajax="{{ route('module.dns.datatable') }}" :columns="[
+            ['key' => 'name', 'label' => 'IP Host'],
+            ['key' => 'counter', 'label' => 'Domain Created'],
+            ['key' => 'status', 'label' => 'Status'],
+            ['key' => 'action', 'label' => 'Action'],
+        ]" />
             </div>
         </div>
     @else
@@ -80,3 +37,8 @@
         </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/resources/views/components/data-table.blade.php b/resources/views/components/data-table.blade.php
index 0e96f0a..cc3f567 100644
--- a/resources/views/components/data-table.blade.php
+++ b/resources/views/components/data-table.blade.php
@@ -1,15 +1,15 @@
 @props(['id', 'columns', 'ajax'])
 
 @php
-  $dtColumns = collect($columns)->map(function ($c) {
-    return [
-      'data' => $c['key'],
-      'name' => $c['key'],
-      'orderable' => $c['orderable'] ?? true,
-      'searchable' => $c['searchable'] ?? true,
-      'className' => $c['className'] ?? '',
-    ];
-  })->values();
+$dtColumns = collect($columns)->map(function ($c) {
+  return [
+    'data' => $c['key'],
+    'name' => $c['key'],
+    'orderable' => $c['orderable'] ?? true,
+    'searchable' => $c['searchable'] ?? true,
+    'className' => $c['className'] ?? '',
+  ];
+})->values();
 @endphp
       <div class="data-table-wrapper rounded-3 overflow-hidden border border-light">
         <table id="{{ $id }}" class="table table-hover align-middle mb-0 bg-white"
@@ -70,8 +70,8 @@
                   next: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-right" width="16" height="16"></i></span>',
                   previous: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-left" width="16" height="16"></i></span>'
                 },
-                zeroRecords: "No matching records found",
-                emptyTable: "No data available in table"
+                zeroRecords: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No matching records found</h6></div>',
+                emptyTable: '<div class="d-flex flex-column align-items-center justify-content-center py-5"><div class="text-secondary mb-3"><i data-lucide="inbox" width="28" height="28" stroke-width="1.5"></i></div><h6 class="text-secondary fw-medium">No data available</h6></div>'
               },
               dom: "<'row p-3'<'col-sm-12'tr>>" +
                 "<'row px-3 pb-3 pt-1 align-items-center'<'col-sm-12 col-md-5 text-muted small'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
@@ -124,7 +124,7 @@
               table.column(columnIndex).search(this.value).draw();
             });
           });
-        </script>
+                </script>
 
         <style>
           /* Custom SAAS DataTable Styles */
@@ -150,6 +150,10 @@
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
           }
 
+          .data-table-wrapper .table td:not(:last-child) {
+            border-right: 1px solid #f1f5f9;
+          }
+
           /* Sticky for second row (filter inputs) if present */
           .data-table-wrapper .table thead tr:nth-child(2) th {
             top: 45px;
diff --git a/resources/views/components/module/network.blade.php b/resources/views/components/module/network.blade.php
index 336fcc2..e039017 100644
--- a/resources/views/components/module/network.blade.php
+++ b/resources/views/components/module/network.blade.php
@@ -27,7 +27,6 @@
             const networkAjaxUrl = $network.data('route');
 
             function loadNetworks(hostId, preselect = null) {
-                console.log('Loading networks for host:', hostId);
 
                 if (!hostId) {
                     $network.html('<option value="0">---------</option>').prop('disabled', true);
@@ -45,8 +44,6 @@
                         host: hostId
                     },
                     success: function (response) {
-                        console.log('Network API Response Received:', response);
-
                         // Strict check
                         if (response.error === false && Array.isArray(response.data) && response.data.length > 0) {
                             let options = '<option value="0">---------</option>';
@@ -65,7 +62,6 @@
                                 }, 100);
                             }
                         } else {
-                            console.warn('Handling empty/error response');
                             $network.html('<option value="0">Not Found Network</option>').prop('disabled', true);
                             $network.trigger('change');
                         }
@@ -84,12 +80,9 @@
                 loadNetworks(hostId);
             });
 
-            // Initial state setup
             if (!$host.val()) {
                 $network.prop('disabled', true);
             } else {
-                // If host exists but network empty (client side nav or invalid state), load it
-                // If network already populated by server (Edit mode), don't reload
                 if ($network.find('option').length <= 1 || $network.val() == 0) {
                     loadNetworks($host.val());
                 } else {
diff --git a/routes/admin.php b/routes/admin.php
index bb107a3..65af4c9 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -179,6 +179,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::controller(ModuleIPPoolController::class)->group(function () {