diff --git a/app/Http/Controllers/admin/package/Network.php b/app/Http/Controllers/admin/package/Network.php
index 9bcf06d..4d0036e 100644
--- a/app/Http/Controllers/admin/package/Network.php
+++ b/app/Http/Controllers/admin/package/Network.php
@@ -11,6 +11,7 @@ use App\Repositories\Module\Network\NetworkRepositoryInterface;
 use Exception;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Yajra\DataTables\Facades\DataTables;
 
 class Network extends Controller
 {
@@ -18,35 +19,37 @@ class Network extends Controller
     public function __construct(
         public NetworkRepositoryInterface $networkRepository,
         public HostRepositoryInterface $hostRepository
-    ){}
+    ) {
+    }
     public function index(Request $request)
     {
         $networks = $this->networkRepository->filter(
             [
                 'page' => $request->get('page') ?? 1
-            ],['host.datacenter.vCenter']
+            ],
+            ['host.datacenter.vCenter']
         );
         $title = 'List all network';
 
-        return view('admin.package.network.index',compact('networks','title'));
+        return view('administrator.pages.package.network.index', compact('networks', 'title'));
     }
 
     public function sync(SyncNetwork $syncNetwork)
     {
         dispatch($syncNetwork)->delay(now()->addSeconds(5));
-        return back()->with('success','The process is being established, please wait');
+        return back()->with('success', 'The process is being established, please wait');
     }
     public function create()
     {
         $title = 'Add Network';
 
-        return view('admin.package.network.add', compact('title'));
+        return view('administrator.pages.package.network.add', compact('title'));
     }
     public function store(NetworkRequest $request)
     {
         $request->validated();
         $host = $this->hostRepository->find($request->get('module_host_id'));
-        if (! $host) {
+        if (!$host) {
             return back()->withErrors('Invalid Request');
         }
         $isCreated = $this->networkRepository->findBy('network', $request->get('network'));
@@ -66,19 +69,19 @@ class Network extends Controller
     public function edit(int $id = 0)
     {
         $network = $this->networkRepository->findWithRelationships($id, ['host.datacenter']);
-        if (! $network) {
+        if (!$network) {
             return back()->withErrors('Invalid Request');
         }
         $title = "View Network Information";
 
-        return  view('admin.package.network.edit', compact('network',  'title'));
+        return view('administrator.pages.package.network.edit', compact('network', 'title'));
     }
     public function update(int $id = 0, NetworkRequest $request)
     {
 
         $request->validated();
         $host = $this->networkRepository->find($id);
-        if (! $host) {
+        if (!$host) {
             return redirect()->route('package.network.index')->withErrors('Invalid Request');
         }
         if ($request->get('network') !== $host->network) {
@@ -101,7 +104,7 @@ class Network extends Controller
     {
         $host = $this->networkRepository->find($id);
 
-        if (! $host) {
+        if (!$host) {
             return back()->withErrors('Invalid request.');
         }
 
@@ -115,4 +118,28 @@ class Network extends Controller
         }
         return redirect()->route('package.network.index')->with('success', 'Deleted successfully!');
     }
+
+    public function datatable(Request $request)
+    {
+        $query = $this->networkRepository->filter(
+            $request->all(),
+            ['host.datacenter.vCenter'],
+            [],
+            ['*'],
+            true
+        );
+
+        return DataTables::eloquent($query)
+            ->addColumn(
+                'action',
+                fn($d) =>
+                '<a href="' . route('package.network.edit', $d->id) . '" class="btn btn-primary btn-sm">Edit</a>'
+            )
+            ->filterColumn('host.datacenter.v_center.host', function ($query, $keyword) {
+                $query->whereHas('host.datacenter.vCenter', function ($q) use ($keyword) {
+                    $q->where('host', 'like', "%{$keyword}%");
+                });
+            })
+            ->make(true);
+    }
 }
diff --git a/app/Repositories/Module/Network/NetworkCachedRepository.php b/app/Repositories/Module/Network/NetworkCachedRepository.php
index 02f38f4..ead5084 100644
--- a/app/Repositories/Module/Network/NetworkCachedRepository.php
+++ b/app/Repositories/Module/Network/NetworkCachedRepository.php
@@ -8,27 +8,39 @@ class NetworkCachedRepository extends BaseCachedRepository implements NetworkRep
 {
     public function __construct(
         public NetworkRepository $networkRepository
-    ) 
-    {
+    ) {
         parent::__construct();
     }
     public function getModel()
     {
         return $this->networkRepository->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->networkRepository
+                ->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->networkRepository->filter($data, $relationships, $withCount, $select);
-        });
+
+        return Cache::remember(
+            $cacheKey,
+            $this->cacheTime,
+            fn() =>
+            $this->networkRepository
+                ->filter($data, $relationships, $withCount, $select, $returnQuery)
+        );
     }
     public function findBy(string $key = '', string|int|null $value = '')
     {
@@ -42,7 +54,7 @@ class NetworkCachedRepository extends BaseCachedRepository implements NetworkRep
             return $this->networkRepository->findBy($key, $value);
         });
     }
-    public function findWithRelationships(int $id = 0, array $relationships = [],array $withCount = [], array $withSum = [])
+    public function findWithRelationships(int $id = 0, array $relationships = [], array $withCount = [], array $withSum = [])
     {
         $cacheKey = $this->getCacheKey(md5(json_encode([
             'findWithRelationships' => [
@@ -50,8 +62,8 @@ class NetworkCachedRepository extends BaseCachedRepository implements NetworkRep
                 'relationships' => $relationships
             ]
         ])));
-        return Cache::remember($cacheKey, $this->cacheTime, function () use ($id, $relationships,$withCount,$withSum) {
-            return $this->networkRepository->findWithRelationships($id, $relationships,$withCount,$withSum);
+        return Cache::remember($cacheKey, $this->cacheTime, function () use ($id, $relationships, $withCount, $withSum) {
+            return $this->networkRepository->findWithRelationships($id, $relationships, $withCount, $withSum);
         });
     }
 }
\ No newline at end of file
diff --git a/app/Repositories/Module/Network/NetworkRepository.php b/app/Repositories/Module/Network/NetworkRepository.php
index bfc060f..98f29f3 100644
--- a/app/Repositories/Module/Network/NetworkRepository.php
+++ b/app/Repositories/Module/Network/NetworkRepository.php
@@ -3,28 +3,36 @@ namespace App\Repositories\Module\Network;
 
 use App\Models\ModuleNetwork;
 use App\Repositories\BaseRepository;
-class NetworkRepository extends BaseRepository implements NetworkRepositoryInterface{
+class NetworkRepository extends BaseRepository implements NetworkRepositoryInterface
+{
     public function getModel()
     {
         return ModuleNetwork::class;
     }
-    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)
     {
-        $model = $this->model->with($relationships)->select($select);
-        
+        $query = $this->model->with($relationships)->select($select);
+
         if (isset($data['status'])) {
-            $model =  $model->where("status", $data['status']);
+            $query = $query->where("status", $data['status']);
         }
         if (isset($data['module_host_id']) && $data['module_host_id']) {
-            $model =  $model->where("module_host_id", $data['module_host_id']);
+            $query->where("module_host_id", $data['module_host_id']);
         }
         if (count($withCount) > 0) {
-            $model = $model->withCount($withCount);
+            $query->withCount($withCount);
         }
-        if(isset($data['page'])) {
-            return $model->paginate(15);
+        if ($returnQuery) {
+            return $query;
         }
-        return $model->get();
+
+        if (!empty($data['paginate'])) {
+            return $query->paginate(
+                $data['per_page'] ?? 15
+            );
+        }
+
+        return $query->get();
     }
     public function findBy(string $key = '', string|int|null $value = '')
     {
diff --git a/app/Repositories/Module/Network/NetworkRepositoryInterface.php b/app/Repositories/Module/Network/NetworkRepositoryInterface.php
index e245a02..5f698f2 100644
--- a/app/Repositories/Module/Network/NetworkRepositoryInterface.php
+++ b/app/Repositories/Module/Network/NetworkRepositoryInterface.php
@@ -2,9 +2,16 @@
 namespace App\Repositories\Module\Network;
 
 use App\Repositories\BaseRepositoryInterface;
-interface NetworkRepositoryInterface extends BaseRepositoryInterface{
-    public function filter(array $data = [],array $relationships = [],array $withCount = [],array $select = ['*']);
-    public function findBy(string $key = '',string|int|null $value = '' );
-    public function findWithRelationships(int $id = 0, array $relationships = [],array $withCount = [], array $withSum = []);
+interface NetworkRepositoryInterface extends BaseRepositoryInterface
+{
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    );
+    public function findBy(string $key = '', string|int|null $value = '');
+    public function findWithRelationships(int $id = 0, array $relationships = [], array $withCount = [], array $withSum = []);
 
 }
\ No newline at end of file
diff --git a/database/migrations/2024_02_01_092104_module_network.php b/database/migrations/2024_02_01_092104_module_network.php
index 293f2c6..6995c4a 100644
--- a/database/migrations/2024_02_01_092104_module_network.php
+++ b/database/migrations/2024_02_01_092104_module_network.php
@@ -18,7 +18,7 @@ return new class extends Migration
             $table->string('name',255)->nullable();
             $table->string('type',100)->nullable();
             $table->string('network',100)->nullable();
-            $table->bigInteger('module_host_id')->default(0)->index();
+            $table->foreignId('module_host_id')->constrained('module_host')->index()->cascadeOnDelete();
             $table->timestamps();
         });
     }
@@ -30,6 +30,6 @@ return new class extends Migration
      */
     public function down()
     {
-        Schema::dropIfExists('module_networks');
+        Schema::dropIfExists('module_network');
     }
 };
diff --git a/database/migrations/2026_01_31_101947_update_table_module_network.php b/database/migrations/2026_01_31_101947_update_table_module_network.php
new file mode 100644
index 0000000..e0840e8
--- /dev/null
+++ b/database/migrations/2026_01_31_101947_update_table_module_network.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::table('module_network', function (Blueprint $table) {
+            $table->unsignedBigInteger('module_host_id')->nullable()->change();
+        });
+
+        // Clean up orphan records that point to non-existent datacenters
+        DB::table('module_network')
+            ->whereNotNull('module_host_id')
+            ->whereNotExists(function ($query) {
+                $query->select(DB::raw(1))
+                    ->from('module_host')
+                    ->whereColumn('module_network.module_host_id', 'module_host.id');
+            })
+            ->update(['module_host_id' => null]);
+
+        Schema::table('module_network', function (Blueprint $table) {
+            $table->foreign('module_host_id')
+                ->references('id')
+                ->on('module_host')
+                ->cascadeOnDelete();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('module_network', function (Blueprint $table) {
+            $table->unsignedBigInteger('module_host_id')->change();
+        });
+    }
+};
diff --git a/resources/views/administrator/pages/block/Sync/Network.blade.php b/resources/views/administrator/pages/block/Sync/Network.blade.php
index 44fef41..e233461 100644
--- a/resources/views/administrator/pages/block/Sync/Network.blade.php
+++ b/resources/views/administrator/pages/block/Sync/Network.blade.php
@@ -1,3 +1,3 @@
 <a href="{{ route('package.network.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add Network</a>
-@include("admin.block.Sync.All")
+@include("administrator.pages.block.Sync.All")
 <a href="{{ route('package.network.sync') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync Network</a>
diff --git a/resources/views/administrator/pages/package/datacenter/add.blade.php b/resources/views/administrator/pages/package/datacenter/add.blade.php
index 601ebba..d65362f 100644
--- a/resources/views/administrator/pages/package/datacenter/add.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/add.blade.php
@@ -1,38 +1,58 @@
-@extends("admin.main")
-@section("content")
-@if(auth()->guard('admins')->user()->can("add module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.datacenter.store') }}" method="post">
-            @csrf
-            <div class="card-body">
-                <x-module.v-center :model="null"/>
-                {{--                <livewire:module.vcenter :model="$model ?? null" />--}}
-
-                {{--Name--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="name" class="col-md-3 text-right">Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="name" name="name" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-                {{--Datacenter ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
-            </div>
-        </form>
-    </div>
-@else
-    <div class="alert alert-danger alert-dismissible">
-        <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
-            management department</h5>
-    </div>
-@endif
+@extends("administrator.layout.master")
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'Datacenter', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :items="$breadcrumbItems" />
 @endsection
+@section("content")
+    @if(auth()->guard('admins')->user()->can("add module vcenter"))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.datacenter.store') }}" method="post">
+                @csrf
+                <div class="card-body">
+                    <x-module.v-center :model="null" />
+
+                    {{--Name--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="name" class="col-md-3 text-right">Name</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="name" name="name" placeholder="" value="" class="form-control">
+                        </div>
+                    </div>
+                    {{--Datacenter ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value=""
+                                class="form-control">
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
+                    <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
+                </div>
+            </form>
+        </div>
+    @else
+        <div class="alert alert-danger alert-dismissible">
+            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
+                management department</h5>
+        </div>
+    @endif
+@endsection
+    
+    @push('plugin-scripts')
+        <script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
+        <script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
+        <script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
+        <script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
+    @endpush
\ No newline at end of file
diff --git a/resources/views/administrator/pages/package/datacenter/edit.blade.php b/resources/views/administrator/pages/package/datacenter/edit.blade.php
index 6222595..f0a67d9 100644
--- a/resources/views/administrator/pages/package/datacenter/edit.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/edit.blade.php
@@ -1,37 +1,60 @@
-@extends("admin.main")
+@extends("administrator.layout.master")
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'Datacenter', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :items="$breadcrumbItems" />
+@endsection
 @section("content")
-@if(auth()->guard('admins')->user()->can("add module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.datacenter.update',['id' => $datacenter->id]) }}" method="post">
-            @csrf
-            @method('put')
-            <div class="card-body">
-                <x-module.v-center :model="$datacenter" />
-                {{--Name--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="name" class="col-md-3 text-right">Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="name" name="name" placeholder="" value="{{$datacenter->name}}" class="form-control">
+    @if(auth()->guard('admins')->user()->can("add module vcenter"))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.datacenter.update', ['id' => $datacenter->id]) }}" method="post">
+                @csrf
+                @method('put')
+                <div class="card-body">
+                    <x-module.v-center :model="$datacenter" />
+                    {{--Name--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="name" class="col-md-3 text-right">Name</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="name" name="name" placeholder="" value="{{$datacenter->name}}"
+                                class="form-control">
+                        </div>
+                    </div>
+                    {{--Datacenter ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="datacenter_id" name="datacenter_id" placeholder=""
+                                value="{{$datacenter->datacenter_id}}" class="form-control">
+                        </div>
                     </div>
                 </div>
-                {{--Datacenter ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value="{{$datacenter->datacenter_id}}" class="form-control">
-                    </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
+                    <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
                 </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
-            </div>
-        </form>
-    </div>
-@else
-    <div class="alert alert-danger alert-dismissible">
-        <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
-            management department</h5>
-    </div>
-@endif
-@endsection
\ No newline at end of file
+            </form>
+        </div>
+    @else
+        <div class="alert alert-danger alert-dismissible">
+            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
+                management department</h5>
+        </div>
+    @endif
+@endsection
+
+
+@push('plugin-scripts')
+    <script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/administrator/pages/package/network/index.blade.php b/resources/views/administrator/pages/package/network/index.blade.php
index 179ab46..2ba7a5e 100644
--- a/resources/views/administrator/pages/package/network/index.blade.php
+++ b/resources/views/administrator/pages/package/network/index.blade.php
@@ -1,75 +1,30 @@
-@php use App\Http\Helpers\Helper; @endphp
-@extends('admin.main')
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'Datacenter', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager package module"))
         <div class="card card-primary card-outline">
             <div class="card-header">
-                @include("admin.block.Sync.Network")
+                @include("administrator.pages.block.Sync.Network")
             </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>Network Name</th>
-                        <th>Host Name</th>
-                        <th>vCenter Host</th>
-                        <th style="width:40px"></th>
-                        <th style="width: 40px"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    @if(count($networks))
-                        @foreach($networks->all() 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">
-                                    @isset($item->host->name)
-                                        {{$item->host->name}}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    @isset($item->host->datacenter->vCenter->host)
-                                        {{$item->host->datacenter->vCenter->host}}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    <a class="btn btn-warning btn-sm"
-                                       href="{{ route('package.network.edit', ['id' => $item->id]) }}">
-                                        <i class="fas fa-search"></i>
-                                    </a>
-                                </td>
-                                <td>
-                                    @if(auth()->guard('admins')->user()->can("delete module vcenter"))
-                                        <form method="post" class="d-inline"
-                                              action="{{ route('package.network.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">
-                {{ $networks->withQueryString()->links() }}
+                <x-datatable id="networkTable" ajax="{{ route('package.network.datatable') }}" :columns="[
+                    ['key' => 'name', 'label' => 'Name'],
+                    ['key' => 'host.datacenter.v_center.host', 'label' => 'Vcenter Host'],
+                    ['key' => 'action', 'label' => 'Action']
+                ]" />
             </div>
         </div>
     @else
@@ -79,3 +34,10 @@
         </div>
     @endif
 @endsection
+
+@push('plugin-scripts')
+    <script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
+@endpush
\ No newline at end of file
diff --git a/routes/admin.php b/routes/admin.php
index 60bef95..838b623 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -264,6 +264,7 @@ Route::prefix('administrator')->group(function () {
                 Route::get('edit/{id}', 'edit')->name('edit');
                 Route::put('edit/{id}', 'update')->name('update');
                 Route::delete('remove/{id}', 'destroy')->name('destroy');
+                Route::get('datatable', 'datatable')->name('datatable');
             });
             Route::group([
                 'prefix' => 'folder',